Resources for language teaching: 2025

Someone told me this week that I should make more blog posts, so here I am. 😁 I've been working on a ton of things and then don't make a note to make a blog post about those things.

This summer I went to a Canvas workshop and learned that my daily activity list in Canvas wasn't accessible to students who use screen readers because I used tables to organize my content to make it easier to move things where I wanted them. I spent all of last year moving from an unformatted list to

tables, and I was not thrilled to learn that I would need to redo all of that work. I was less thrilled when I thought I was going to have to go back to unformatted lists, because adding that little of organization made it much easier for students to find the list for each day (I have a page in Canvas in each module that contains the daily activity list for every day that week).

I have limited code-editing skills, but I can't write code, so I thought I didn't have any other options than unformatted lists, until I remembered that ChatGPT exists. I asked it to create code that I could use in Canvas that would be both accessible to screen readers and to students who need to navigated the visual elements of the page. It took a few rounds of going back and forth, but eventually I got this, and it's perfect. Click on the arrows to expand the boxes!

Collapsible boxes

Expectation: Complete all daily activities on the daily activities list and be actively engaged in class activities for full participation credit.

lunes el

Placeholder

martes el

Placeholder

miércoles el

Placeholder

jueves el

Placeholder

viernes el

Placeholder

Want this code? I've shared everything in Canvas Commons (you can search my name: Anita Saalfeld) so you can import the pages, but I also asked ChatGPT to make some boxes to be able to share it here! You can edit color by opening the HTML editor, and the Canvas accessibility checker will tell you if the color(s) you're using are accessibly to people with visual impairments.

Code snippet for collapsible boxes (copy & paste)


<p><strong>Expectation: Complete all daily activities on the daily activities list and be actively engaged in class activities for full participation credit.</strong></p>
<details style="border: 2px solid #0c8571; border-radius: 12px; margin-bottom: 1em;">
    <summary style="background-color: #0c8571; color: white; font-size: 1.2em; padding: 0.5em 1em; border-radius: 10px 10px 0 0;">lunes el </summary>
    <div style="padding: 1em;">
        <ol>
            <li>Placeholder</li>
        </ol>
    </div>
</details>
<details style="border: 2px solid #0c8571; border-radius: 12px; margin-bottom: 1em;">
    <summary style="background-color: #0c8571; color: white; font-size: 1.2em; padding: 0.5em 1em; border-radius: 10px 10px 0 0;">martes el </summary>
    <div style="padding: 1em;">
        <ol>
            <li>Placeholder</li>
        </ol>
    </div>
</details>
<details style="border: 2px solid #0c8571; border-radius: 12px; margin-bottom: 1em;">
    <summary style="background-color: #0c8571; color: white; font-size: 1.2em; padding: 0.5em 1em; border-radius: 10px 10px 0 0;">miércoles el </summary>
    <div style="padding: 1em;">
        <ol>
            <li>Placeholder</li>
        </ol>
    </div>
</details>
<details style="border: 2px solid #0c8571; border-radius: 12px; margin-bottom: 1em;">
    <summary style="background-color: #0c8571; color: white; font-size: 1.2em; padding: 0.5em 1em; border-radius: 10px 10px 0 0;">jueves el </summary>
    <div style="padding: 1em;">
        <ol>
            <li>Placeholder</li>
        </ol>
    </div>
</details>
<details style="border: 2px solid #0c8571; border-radius: 12px; margin-bottom: 1em;">
    <summary style="background-color: #0c8571; color: white; font-size: 1.2em; padding: 0.5em 1em; border-radius: 10px 10px 0 0;">viernes el </summary>
    <div style="padding: 1em;">
        <ol>
            <li>Placeholder</li>
        </ol>
    </div>
</details>

Tip: Colors meet WCAG AA contrast against this gray. Keyboard users can Tab to the Copy button.

Choice board

How you see this in Canvas will depend on how big your monitor is. It will adjust the boxes to be side by side in pairs or groups of 3 on a wider monitor, or one box at a time on a smaller monitor.

Choice board - choose one activity

Complete one or more of the following activities. [Teachers, edit text as needed to reflect what activity options are available. Good to know: Sometimes copying and pasting text messes up the formatting. Delete instructions for teachers before releasing to students.]

Activity 1 — Guided reading

Read a short text and answer questions
Open activity (Teachers: click on "link options" and paste the correct link)

Activity 2 — Interactive vocabulary

Practice key words with definitions and examples.
Open activity (Teachers: click on "link options" and paste the correct link)

Activity 3 — Video + questions

Watch a short video and answer questions.
Open activity (Teachers: click on "link options" and paste the correct link)

Activity 4 — Matching

Match terms with definitions or photos.
Open activity (Teachers: click on "link options" and paste the correct link)

Activity 5 — Conversation

Follow the prompt and complete with a partner.
Open activity (Teachers: click on "link options" and paste the correct link)

Activity 6 — Writing practice

Write 5-7 sentences using vocabulary from this unit.
Open activity (Teachers: click on "link options" and paste the correct link)

Code snippet for choice board (copy & paste)

<div style="max-width: 1100px; margin: 0 auto; padding: 1rem; color: #1a1a1a; font-family: inherit;" role="region" aria-labelledby="cbTitle">
    <h2 id="cbTitle" style="margin: 0 0 .75rem 0; display: inline-block; background: #0c8571; color: #fff; padding: .6rem 1rem; border-radius: 10px; font-size: 1.5rem; line-height: 1.2;">Choice board - choose one activity</h2>
    <p style="margin: .25rem 0 1rem 0; color: #4a4a4a;">Complete one or more of the following activities.<strong> [Teachers, edit text as needed to reflect what activity options are available. Good to know: Sometimes copying and pasting text messes up the formatting. Delete instructions for teachers before releasing to students.]</strong></p>
    <div style="font-size: 0;" role="list">
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c1t" aria-describedby="c1d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c1t" style="margin: 0 0 .5rem 0; font-size: 1.1rem; line-height: 1.25;">Activity 1 &mdash; Guided reading</h3>
                <p id="c1d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Read a short text and answer questions</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/lectura" aria-describedby="c1d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c2t" aria-describedby="c2d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c2t" style="margin: 0 0 .5rem 0; font-size: 1.1rem;">Activity 2 &mdash; Interactive vocabulary</h3>
                <p id="c2d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Practice key words with definitions and examples.</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/vocab" aria-describedby="c2d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c3t" aria-describedby="c3d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c3t" style="margin: 0 0 .5rem 0; font-size: 1.1rem;">Activity 3 &mdash; Video + questions</h3>
                <p id="c3d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Watch a short video and answer questions.</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/video" aria-describedby="c3d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c4t" aria-describedby="c4d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c4t" style="margin: 0 0 .5rem 0; font-size: 1.1rem;">Activity 4 &mdash; Matching</h3>
                <p id="c4d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Match terms with definitions or photos.</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/match" aria-describedby="c4d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c5t" aria-describedby="c5d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c5t" style="margin: 0 0 .5rem 0; font-size: 1.1rem;">Activity 5 &mdash; Conversation</h3>
                <p id="c5d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Follow the prompt and complete with a partner.</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/convo" aria-describedby="c5d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
        <div style="display: inline-block; vertical-align: top; width: calc(33.333% - 16px); min-width: 260px; max-width: 100%; margin: 8px; font-size: 16px;" role="listitem" aria-labelledby="c6t" aria-describedby="c6d">
            <div style="background: #f6fbfa; border: 2px solid #0c8571; border-radius: 12px; padding: 1rem; min-height: 190px; display: flex; flex-direction: column;">
                <h3 id="c6t" style="margin: 0 0 .5rem 0; font-size: 1.1rem;">Activity 6 &mdash; Writing practice</h3>
                <p id="c6d" style="margin: 0 0 1rem 0; color: #4a4a4a;">Write 5-7 sentences using vocabulary from this unit.</p>
                <a style="margin-top: auto; display: inline-block; text-decoration: none; background: #0c8571; color: #fff; padding: .6rem .9rem; border-radius: 10px; border: 2px solid #0c8571; line-height: 1;" href="https://example.com/write" aria-describedby="c6d">Open activity (Teachers: click on "link options" and paste the correct link)</a>
            </div>
        </div>
    </div>
</div>

Verb chart

It looks like a table, but screen readers won't interpret it as a table so it's fully accessible to both sighted and visually-impaired learners:

Conjugación: hablar (presente)

nosotros/as

tú

vosotros/as

él/ella/usted

ellos/ellas/ustedes

Code snippet for verb chart (copy & paste)

<div role="region" aria-labelledby="verbChartHeading">
    <h2 id="verbChartHeading">Conjugación: hablar (Presente)</h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border: 1px solid #444; border-collapse: collapse;" role="list" aria-label="Conjugaciones">
        <div style="padding: 6px; border-bottom: 1px solid #444; border-right: 1px solid #444;" aria-hidden="true"><strong>Persona</strong></div>
        <div style="padding: 6px; border-bottom: 1px solid #444; border-right: 1px solid #444;" aria-hidden="true"><strong>Forma</strong></div>
        <div style="padding: 6px; border-bottom: 1px solid #444; border-right: 1px solid #444;" aria-hidden="true"><strong>Persona</strong></div>
        <div style="padding: 6px; border-bottom: 1px solid #444;" aria-hidden="true"><strong>Forma</strong></div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="yo: hablo"><strong>yo</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" aria-hidden="true">hablo</div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="nosotros: hablamos"><strong>nosotros/as</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc;" aria-hidden="true">hablamos</div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="tú: hablas"><strong>tú</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" aria-hidden="true">hablas</div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="vosotros: habláis"><strong>vosotros/as</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc;" aria-hidden="true">habláis</div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="él, ella, usted: habla"><strong>él/ella/usted</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" aria-hidden="true">habla</div>

        <div style="padding: 6px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;" role="listitem" aria-label="ellos, ellas, ustedes: hablan"><strong>ellos/ellas/ustedes</strong></div>
        <div style="padding: 6px; border-top: 1px solid #ccc;" aria-hidden="true">hablan</div>
    </div>
</div>