Accessible Tables on Websites

Whether it’s for course schedules or detailed financial overviews, some information is best presented in tabular form. However, tables can be cumbersome and often display differently on mobile devices compared to PCs. Wide tables frequently break awkwardly, making it unclear which headers belong to each cell. With a few simple rules, however, accessible tables can be created.

For visually impaired individuals, tables can also present a challenge. It must be ensured that a screen reader reads the information in the same order as it is perceived by sighted users. This includes specifying the number of rows and columns. Additionally, the cells must be read with the corresponding row and column headers. To implement accessibility, a distinction is made between simple and complex data tables.

Tables should only be used when data needs to be structured and organized. For layout and purely visual presentations, tables should not be used. In such cases, CSS can be better utilized.

Simple Tables

Simple tables have only one row or column header. To make a table accessible, each table cell must be associated with the appropriate table header. In simple data tables, this can be achieved using the “scope” attribute. The values “row” or “col” can be used to associate all horizontal or vertical cells with a table header.

<table border="1" cellpadding="1" cellspacing="1" style="width:100%">
    <caption>Course Schedule</caption>
    <thead>
        <tr>
            <th scope="col">Day</th>
            <th scope="col">Time</th>
            <th scope="col">Course</th>
            <th scope="col">Instructor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Monday</td>
            <td>10:00</td>
            <td>Yoga</td>
            <td>Anna Müller</td>
        </tr>
        <tr>
            <td>Tuesday</td>
            <td>14:00</td>
            <td>Pilates</td>
            <td>Tom Schmidt</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>18:00</td>
            <td>HIIT</td>
            <td>Sara Meier</td>
        </tr>
    </tbody>
</table>

Complex Tables

Complex tables have more than one row or column header. Here, a clear cell assignment via the “headers” and “id” attributes is required. This ensures that each individual cell can be precisely assigned, which is even more accurate than the “scope” attribute.

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
    <caption>Financial Overview</caption>
    <tbody>
        <tr>
            <th colspan="1" id="j" rowspan="2"><strong>Year</strong></th>
            <th colspan="3" id="e" rowspan="1"><strong>Income</strong></th>
            <th colspan="3" id="a" rowspan="1"><strong>Expenses</strong></th>
        </tr>
        <tr>
            <th headers="e" id="e1">Q1</th>
            <th headers="e" id="e2">Q2</th>
            <th headers="e" id="e3">Total</th>
            <th headers="a" id="a1">Q1</th>
            <th headers="a" id="a2">Q2</th>
            <th headers="a" id="a3">Total</th>
        </tr>
        <tr>
            <td headers="j">2021</td>
            <td headers="e e1">€10,000</td>
            <td headers="e e2">€12,000</td>
            <td headers="e e3">€22,000</td>
            <td headers="a a1">€8,000</td>
            <td headers="a a2">€9,000</td>
            <td headers="a a3">€17,000</td>
        </tr>
        <tr>
            <td headers="j">2022</td>
            <td headers="e e1">€11,000</td>
            <td headers="e e2">€13,000</td>
            <td headers="e e3">€24,000</td>
            <td headers="a a1">€7,000</td>
            <td headers="a a2">€10,000</td>
            <td headers="a a3">€17,000</td>
        </tr>
    </tbody>
</table>

Checklist - Tables

• Avoid tables that are used solely for the visual presentation of text in columns (layout tables). Instead, use CSS for such presentations.
• Ensure tables are responsive on various devices. Content must not be cut off and should wrap sensibly.
• Ensure that the cells in data tables are associated with the respective row and column headers.
• Use the “scope” attribute or the assignment of “headers” and “id” attributes to associate cells with headers.
• In complex data tables, it is essential to assign each cell using “headers” and “id” attributes, especially when there is more than one row or column header.

By following these guidelines, you can create accessible tables that are usable for all users, including those with disabilities.