Non-Table Mark-up Using ARIA Table Roles
If it is impossible to use table mark-up for some reason, ARIA roles can insert the semantic structure for screen readers. Some important notes:
- You must still create valid nesting structures with an overall wrapper, a wrapper for each visible row, and a wrapper for each data cell and column header.
- The author must still style the layout as browsers will not assign styles based on ARIA roles. I use CSS Grid below.
- If you can edit elements to include the needed ARIA roles, then it may be more efficient to re-write the original elements as table elements instead.
- Using native table elements will also reduce compatbility issues across browsers, assistive technology, and versions.
Standard ARIA Table
This uses CSS Grid to approximate the layout that comes with native tables. This works back to IE11 (with JAWS as well) but will require changing the column widths on a per-table basis to prevent overlap. Avoid hiding the text when it overflows.
ARIA Table with a Spanning Header
HTML tables natively support associating spanning headers with their associated rows and/or columns. This feature is not supported by other elements, so ARIA must be used to mimic some of these features.
- There is no replacement ARIA to create a relationship between spanning column headers (nor rows).
<div>element does not allow the
headersattribute that is a feature of
- JAWS/IE11 will announce the spanning header with the first column it spans only.
aria-labelledbyto each header-spanned cell results in double announcing in JAWS/IE11.
- You must add
<th>replacement that is not in the same starting column as the spanning
<th>replacement, and its value must match the
idof the spanning
<th>replacement for JAWS/IE11 to read the fake header spans.
Standard ARIA Table Made from List
You may assume that each list will have a column header and then all the data in that column. That is not how it works, so tis may seem a bit counter-intuitive.
- Each row must be its own list.
- It won't live in another list item, though they all live under a single list item.
- The first list makes up the column headers.
- If each list represented a single column then you would have effectively rotated the table 90° to put its axis on the side instead of across the top.
- This approach works in JAWS/IE11, but not other screen readers, so there is a chance over time JAWS support will wane.
- Miguel De Cervantes
- The Ingenious Gentleman Don Quixote of La Mancha
- Mary Shelley
- Frankenstein; or, The Modern Prometheus
- Herman Melville
- Moby-Dick; or, The Whale
- Emma Dorothy Eliza Nevitte Southworth
- The Hidden Hand
- F. Scott Fitzgerald
- The Great Gatsby
- George Orwell
- Nineteen Eighty-Four
Standard ARIA Table with No Styles
This demonstrates how the semenatics are assigned even when styles are not. You can still navigate the table with the JAWS table navigation keyboard commands regardless of its appearance. This replacement table is coded using