Tables
When formatted properly, tables are a great way to present two-dimensional data and be quite accessible. Here are a few things that can make tables more accessible.
Header Cells
Header cells help to orient someone in a table. By default, header cells will have their text centered and bolded. For this demo, I have also styled them to display as white text on a blue background to help them stand out even more visually. Screen readers will announce the headers for a row or column they navigate into before reading the content of the cell itself.
Captions
Captions serve as a title for a table. The text is centered above the table and screen readers will associate the caption with the table.
Examples
Example 1: Table with Header cells in first row
State | Capital |
---|---|
Alaska | Juneau |
Arizona | Phoenix |
California | Sacramento |
Texas | Austin |
Example 2: Table with Row and Column Headers
2018 | 2019 | 2020 | |
---|---|---|---|
ENG101 | 999 | 999 | 999 |
ENG102 | 999 | 999 | 999 |
HIS103 | 999 | 999 | 999 |
PSY101 | 999 | 999 | 999 |
CIS105 | 999 | 999 | 999 |