Keep Calm and Check Accessibility Week 7: Accessible Tables

When using a table in your document, it’s important to create an accessible one. To create an accessible table, you must use the in-built table tool for it to be accessible. Do not draw a table!

Screen reader users do not see the entire table at once, but instead navigate tables cell by cell. For this reason, the table must be programmed correctly so that the headings are read out when someone enters a cell. In the example table “Dogs’ Age and Weight” when a user navigates to the cell that reads “30 lbs.” the screen reader will announce “Fluffy, weight, 30lbs,” so the person will understand the data in context.

Table 1 Dogs’ Age and Weight

Dog’s Name Age Weight
Fluffy 4 30 lbs.
Spot 2 10 lbs.

 

If a table is not programmed correctly, a screen reader user will just hear “30lbs” and will not know what it is in reference to.

Similarly, tables should be simple and logical.

Simple: Don’t use split cells or merged cells or merge two tables together. An accessible table should have one header row across (Dog’s Name, Age, Weight) and one header row vertically (Fluffy, Spot) and a simple grid layout. Anything beyond this will be difficult to make accessible to a screen reader.

Logical: Sometimes people use tables to create a specific look or layout to their document rather than to display data. Here is an example:

Grades

A + = 100-95 B = 84-80
A= 95-90 C+ = 79-75
B + = 89-85 C= 74-70

 

This table is “illogical” because it is not a true table. This table is used to layout information, but not to display data. A screen reader would read the cell that says “C= 74-70″ as “B =84-80, B+=89-85, C =74-70.” In short, it would not make sense to the user. In a case liike this, it is best to list these grades out using a list.

To learn how to make an accessible table, follow these instructions.

Please go to the Keep Calm and Check Accessibility Moodle page and complete the Week 7 activity to get this week’s clue!