BIT Accessibility Website

Properly Adding Tables

Tables can be very difficult for those with disabilities to understand. Even if a table is created correctly, it can still be difficult to understand depending on the complexity of the table. When possible, make tables as easy to read as possible. Below is an example of what a screen reader sounds like when reading a table.

Transcript of audio file.

This table contains information about how to make tables accessible.
Guideline Title Description
1.3.1 Info and Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.3.2 Meaningful Sequence When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
This information was found on the W3 Website for how to meet WCAG 2.0


            <table>
            <caption>This table contains information about how to make tables accessible</caption>
            <thead>
                <tr>
                    <th scope="col">Guideline</th>
                    <th scope="col">Title</th>
                    <th scope="col">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.3.1</td>
                    <td>Info and Relationships</td>
                    <td>Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.</td>
                </tr>
                <tr>
                    <td>1.3.2</td>
                    <td>Meaningful Sequence</td>
                    <td>When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">This information was found on the <a href="https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_customize&tags=tables">W3 Website for how to meet WCAG 2.0</a></td>
                </tr>
            </tfoot>
        </table>