3 Steps To Make HTML Tables Web Accessible

When it comes to web accessibility, many developers think that it's a lot of added work, and that it's too hard to get right. I wanted to break that myth when it comes to HTML Tables, based on an article I recently read that simplifies the requirements to making them satisfy the WCAG AA level of accessibility (Article titled: Under Engineered Responsive Tables by Adrian Roselli.

Basically, web accessibility has to include features that ensure the visually impaired can still use elements on the page in a friendly way (ie. even through the use of screen readers).

WCAG Accessibility Requirements for Responsive Tables (by level):

Level A

1. 1.3.1 Info and Relationships
2. 1.3.2 Meaningful Sequence
3. 2.1.1 Keyboard
4. 4.1.2 Name, Role, Value

Level AA

5. 1.4.10 Reflow
6. 1.4.11 Non-text Contrast
7. 2.4.6 Headings and Labels
8. 2.4.7 Focus Visible

Steps to Web Accessible HTML Tables

Step 1: Create Table With Appropriate HTML Tags

<table>
      <caption id="table1Caption">Example Accessible Table</caption>
    <thead>
      <tr>
        <th>Number</th>
        <th>WCAG Compliance Level</th>
        <th>Requirement</th>
        <th>Step Requirement is Hit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>A</td>
        <td>1.3.1 Info and Relationships</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>A</td>
        <td>1.3.2 Meaningful Sequence</td>
        <td>1</td>
      </tr>
      ...
      ...
  </tbody>
</table>

Requirements this hits:

1, 2, 7
When filling in your table with data, all you have to do is use the correct HTML tags in the appropriate locations, such as <thead> for the header row, <tbody> for the body rows, <tr> for a row, and <th> (header cell) or <td> (body cell) for cells within a row.

Step 2: HTML

<div role="region" aria-labelledby="table1Caption" tabindex="0">
        <table>[…]</table>
</div>

Requirements this hits:

3, 4
Keyboard readers require an accessible name for any element that receives focus. This is handled by the aria-labelledby and role attributes. Your table caption ID should match the aria-labelledby value, and region is used as the role value since it is a generic landmark.

Step 3: CSS

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: .1em solid rgba(0,0,0,.1);
}

Requirements this hits:

5, 6, 8
The overflow:auto CSS property identified under the [role="region"][aria-labelledby][tabindex] selector prevents the entire page from having two axes of scrolling, hitting requirement 5.
The outline CSS property, when used with a 3:1 contrast ratio covers both requirements 6 and 8.

Adrian Roselli also notes in his article:
This selector ensures the table will not be clipped unless the HTML is properly marked up to be accessible to keyboard and screen reader users. This approach is better than relying on a class or id as a selector since it helps enforce the needed HTML. You can tweak it to your needs, perhaps by using [tabindex="0"] instead of [tabindex] or [role] instead of [role="region"], but it partly depends on what you need to enforce.

Final Example

Resources

• Under Engineered Responsive Tables by Adrian Roselli
• W3 WCAG How to Meet WCAG Quick Reference with Table filter applied

Conclusion

Hopefully this list is somewhat helpful to some of my fellow Front-end developers in keeping their projects and websites web accessible. Accessibility doesn't have to be difficult!

What techniques do you use in making your own sites accessible?

Are there any accessibility tools or topics you would like to learn more about?

Let me know in the comments!