Tables
Tables help screen readers process information presented in a tabular format. When information is presented using table markup, screen reader users can read down columns and across rows, and even hear column and row headings as they do so.
Semantic table​
The following table uses semantic table markup. HTML provides many elements and attributes to create fully
accessible tables. Note: ARIA 1.0 does not include HTML table equivalence; that is coming in ARIA 1.1. So
it is best to stick to native HTML unless you are building an interactive grid that includes two-dimensional
arrow key navigation of the table content. To test the table below with VoiceOver:
- Press Ctrl + Opt + Cmd + h repeatedly until you reach the "Editor Output" region.
- Now press Ctrl + Opt + Right Arrow repeatedly to navigate the table cells.
At this time, VoiceOver does not read the column headers in Chrome. However, VoiceOver does read them in Safari. Windows screen readers typically read column and row headers as well.
| Week1 | Week2 | |
|---|---|---|
| Clicks | 100 | 90 |
| Likes | 60 | 55 |
Exercise: Unsemantic table​
If the information is tabular, using CSS to create the appearance of a table makes the information almost impossible for a screen reader user to understand and use. Convert the following tabular data into an accessible HTML table.