Staying Inn Accessibility Demo

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

Selected State Capitals
State Capital
Alaska Juneau
Arizona Phoenix
California Sacramento
Texas Austin

Example 2: Table with Row and Column Headers

Enrollments in Classes by Year
2018 2019 2020
ENG101 999 999 999
ENG102 999 999 999
HIS103 999 999 999
PSY101 999 999 999
CIS105 999 999 999