What are the accessibility requirements for interactive data tables on websites?

Question

Accepted Answer

Data tables are often used to present complex structured information, but without proper markup, they can become completely inaccessible to users employing screen readers. Unlike layout tables, data tables require strict linking of content cells with their row and column headers.

The main task of a developer when creating an accessible table is to ensure that the screen reader can at any moment tell the user which specific column or row a particular cell belongs to. To achieve this goal, semantic tags and special relationship attributes are used that explicitly define the structure and context of the data.

When building and programming accessible tables, you must follow these steps:

1. Wrap the entire table in a standard semantic table tag and add a short description using the caption tag or the aria-describedby attribute.
2. Highlight the table header using the thead tag, and style the header rows using th tags instead of regular td tags.
3. Add the scope attribute with col or row values for each th tag to explicitly indicate the header orientation.
4. For complex tables with multi-level headers, use unique id identifiers on th elements and link them to data cells via the headers attribute.
5. Provide horizontal table scrolling from the keyboard for mobile device users and people with low screen resolution.

High-quality semantic table markup turns arrays of digital or text data into an understandable structure. A user with special software will be able to consistently examine information without losing context and understanding which exact parameters the selected cell describes.

What are the accessibility requirements for interactive data tables on websites?

More questions in this topic

Related questions from other topics