Accessible Tables

A handful of specific habits separate a table that merely displays data visually from one that's genuinely usable with a screen reader.

Syntax — The Full Accessible Pattern

<table>
    <caption>Semester 1 Results</caption>
    <thead>
        <tr>
            <th scope="col">Student</th>
            <th scope="col">Math</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Aman</th>
            <td>92</td>
        </tr>
    </tbody>
</table>

Basic Example

Every technique in this note has already appeared individually elsewhere in this section — this note pulls them together as one accessibility checklist.

The Checklist

How It Works

Together, these techniques let a screen reader user navigate a table cell by cell while always hearing both the row and column context — "Aman, Math: 92" — instead of a disconnected string of values with no relationships.

Important Attributes

Real-World Example

<table>
    <caption>Weekly Class Schedule</caption>
    <thead>
        <tr>
            <th scope="col">Day</th>
            <th scope="col">Topic</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Monday</th>
            <td>HTML Basics</td>
        </tr>
    </tbody>
</table>

Every accessible-table technique combined in one realistic example — this is what a genuinely well-built data table looks like in production.

Common Mistakes

• Building a large, complex table with no scope attributes at all, leaving header/data relationships purely implicit
• Using a screenshot or image of a table instead of real HTML markup, which is entirely inaccessible to screen readers

Best Practices

• Apply every technique in the checklist above to any table that carries real information
• Test with an actual screen reader (or browser accessibility inspector) when a table is genuinely complex

Accessibility Considerations

This entire topic is accessibility — a table missing these techniques can still look perfectly normal visually while being effectively unusable for a screen reader user trying to understand the data's real structure.

SEO Considerations

Well-structured, accessible tables are also the tables most likely to be correctly parsed and surfaced by search engines in rich results.

Browser & Modern HTML Notes

All these techniques are long-standing, universally supported HTML features — accessible tables require correct markup, not any special modern API.

Mini Practice

1. Take a table missing scope attributes and add them correctly to every header cell.
2. Build a fully accessible table from scratch using every technique in the checklist.

Related HTML Notes

• table-header
• table-caption
• HTML Accessibility