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:

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.

Books I May or May Not Have Read
Author
Title
Year
ISBN-13
ISBN-10
Miguel De Cervantes
The Ingenious Gentleman Don Quixote of La Mancha
1605
9783125798502
3125798507
Mary Shelley
Frankenstein; or, The Modern Prometheus
1818
9781530278442
1530278449
Herman Melville
Moby-Dick; or, The Whale
1851
9781530697908
1530697905
Emma Dorothy Eliza Nevitte Southworth
The Hidden Hand
1888
9780813512969
0813512964
F. Scott Fitzgerald
The Great Gatsby
1925
9780743273565
0743273567
George Orwell
Nineteen Eighty-Four
1948
9780451524935
0451524934

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.

(Column Spans) Books I May or May Not Have Read
ISBN Numbers
Author
Title
Year
13
10
Miguel De Cervantes
The Ingenious Gentleman Don Quixote of La Mancha
1605
9783125798502
3125798507
Mary Shelley
Frankenstein; or, The Modern Prometheus
1818
9781530278442
1530278449
Herman Melville
Moby-Dick; or, The Whale
1851
9781530697908
1530697905
Emma Dorothy Eliza Nevitte Southworth
The Hidden Hand
1888
9780813512969
0813512964
F. Scott Fitzgerald
The Great Gatsby
1925
9780743273565
0743273567
George Orwell
Nineteen Eighty-Four
1948
9780451524935
0451524934

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.

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 <div>s.

(No Styles) Books I May or May Not Have Read
Author
Title
Year
ISBN-13
ISBN-10
Miguel De Cervantes
The Ingenious Gentleman Don Quixote of La Mancha
1605
9783125798502
3125798507
Mary Shelley
Frankenstein; or, The Modern Prometheus
1818
9781530278442
1530278449
Herman Melville
Moby-Dick; or, The Whale
1851
9781530697908
1530697905
Emma Dorothy Eliza Nevitte Southworth
The Hidden Hand
1888
9780813512969
0813512964
F. Scott Fitzgerald
The Great Gatsby
1925
9780743273565
0743273567
George Orwell
Nineteen Eighty-Four
1948
9780451524935
0451524934