Accessibility UI Guidelines: Tables

Tables

2.3 Tables

Design and implement tables in a way that ensures they are accessible to all users, including those using assistive technologies. Properly structured tables enhance data comprehension and navigation.

2.3.1 Table Structure

Use semantic HTML elements to define table structures. Utilise <table>, <thead>, <tbody>, <tr>, <th>, and <td> to create clear and meaningful table layouts.

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Occupation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>30</td>
            <td>Engineer</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>25</td>
            <td>Designer</td>
        </tr>
    </tbody>
</table>

2.3.2 Table Headers

Ensure that header cells are properly associated with their corresponding data cells. Use the scope attribute to define whether a header applies to a row or column.

<th scope="col">Product</th>
<th scope="row">Laptop</th>

2.3.3 Captions and Summaries

Provide a descriptive caption for each table using the <caption> element. If the table is complex, include a summary to explain its purpose and structure.

<table>
    <caption>Sales Data for Q1 2024</caption>
    <thead>
        <tr>
        <tr>
            <th scope="col">Region</th>
            <th scope="col">Sales</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>North America</td>
            <td>$1,000,000</td>
            <td>5%</td>
        </tr>
    </tbody>
</table>

2.3.4 Avoiding Complex Structures

Keep tables as simple as possible. Avoid nested tables, merged cells, and other complex structures that can confuse assistive technologies and make navigation difficult for users.

2.3.5 Responsive Tables

Ensure that tables are responsive and readable on all devices. Use CSS techniques to allow tables to adapt to different screen sizes without losing their accessibility features.

table {
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    td {
        position: relative;
        padding-left: 50%;
    }
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 15px;
        font-weight: bold;
    }
}

2.3.6 Keyboard Navigation Ensure that users can navigate through tables using keyboard controls. Implement logical tab orders and focus indicators to facilitate seamless interaction for users who rely on keyboards.

2.3.7 Accessible Data Presentation

Present data in a clear and concise manner. Use appropriate data formatting and avoid unnecessary embellishments that can distract or confuse users.

<td>$1,000,000</td>
<td>5%</td>