Accessible tables are one of the most commonly missed areas of web
accessibility. A table without proper semantic markup is a grid of
cells with no relationship structure. A screen reader reads it as
a sequence of values with no context for which column or row each
value belongs to.
The four things that make a table accessible:
Semantic HTML. Use table, thead, tbody, th, and td. Do not build
tables with divs and CSS grid. Screen readers have built-in table
navigation that relies on the semantic elements.
Scope attributes. The scope attribute on th elements tells the screen
reader whether the header applies to a column (scope="col") or a row
(scope="row"). Without scope, the reader cannot tell which header
corresponds to which data cell.
Caption. The caption element provides a title for the table that is
announced before the table content. It is the equivalent of an alt
text for the table as a whole.
Keyboard navigation. Users who navigate by keyboard should be able
to move between cells, rows, and columns using arrow keys. The ARIA
grid pattern provides the interaction model for this. The table is
treated as a composite widget with keyboard-managed focus.
Tablesmit implements the ARIA grid pattern. The table editor is
navigable by keyboard using arrow keys, Tab, and Enter. Screen readers
announce cell content with the correct column header context. The
caption field is announced before the table content.
For exported tables, the PDF and PNG formats are not accessible in
the same way. They are visual representations. The LaTeX export
produces semantic table structure that LaTeX renders accessibly in
the compiled PDF through hyperref and accessibility packages.
Free, no account, MIT licensed. tablesmit.com
This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/web-table-accessibility-guide. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.
Top comments (0)