Semantically correct table

A semantically correct table is important for the use of screen readers. A semantically correct table looks like this:

<table>
    <caption>Things to eat</caption>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Vegan</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Peach</th>
            <td>1.99 €</td>
            <td>yes</td>
        </tr>
        <tr>
            <th>Cucumber</th>
            <td>0.99 €</td>
            <td>yes</td>
        </tr>
        <tr>
            <th>Cheeseburger</th>
            <td>7.99 €</td>
            <td>no</td>
        </tr>
    </tbody>
</table>

The <caption> tag is important for a screen reader. This makes a screen reader say the following: "Things to eat 3 columns, 5 rows". Furthermore, it is important to neatly divide your table into a ,

and possibly .

A graph that has been placed in html via an image can best be explained with the alt text. This allows a screen reader to explain what it says. However, this requires an extensive explanation of the image.

Sources

• N. (z.d.). Tables - Accessibility Introduction. Geraadpleegd op 7 april 2021, van https://a11y-101.com/development/tables
• How screen readers navigate data tables - Tink - Léonie Watson. (2020, 28 september). Geraadpleegd op 7 april 2021, van https://tink.uk/how-screen-readers-navigate-data-tables/