Making complex tables accessible
Whenever possible, keep your tables simple. I will repeat that...whenever possible, keep your tables simple! In other words, use a single row for column headers, a single column for row headers, and never used merged cells.
In reality, there are millions and millions of websites with many more millions of complex tables. So let's focus on some additional basics. In addition to the scope attribute, we will also highlight resources for adding table captions, summaries, and using more complex table attributes. We will cover each in the following sections.
The scope attribute
The scope attribute defines whether a header cell spans a column or a row. Although the visual representation of the table is unchanged, this attribute does provide valuable information for screen reader users. Given that most screen readers require only the th tag nowadays to appropriately identify table headers, the scope may seem a bit redundant; nonetheless, this attribute plays a critical role when you have more complex table configurations.
See the code snippet below:
HTML code snippet:
<table>
<tr class="firstrow">
<th></th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th class="firstcol" scope="row">Eric</th>
<td>FREN 100, 9:00am-10:15am</td>
<td>MATH 100,1:30pm-2:45pm</td>
<td>No class</td>
<td>MATH 100, 1:30pm-2:45pm</td>
<td>BIOL 100, 3:30pm-4:45pm</td>
</tr>
<tr>
<th class="firstcol" scope="row">Jessica</th>
<td>ENGL LAB 200, 9:00am-11:00am</td>
<td>No class</td>
<td>ENGL LAB 200, 9:00am-11:00am</td>
<td>No class</td>
<td>ENGL LAB 200, 9:00am-11:00am</td>
</tr>
</table>
| Monday | Tuesday | Wednesday | Thursday | Friday | |
|---|---|---|---|---|---|
| Eric | FREN 100, 9:00am-10:15am | MATH 100,1:30pm-2:45pm | No class | MATH 100, 1:30pm-2:45pm | BIOL 100, 3:30pm-4:45pm |
| Jessica | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am |
Screen Reader Output...
Monday, Tuesday, Wednesday, Thursday, Friday, Eric, MONDAY, FREN 100, 9:00am-10:15am, TUESDAY, MATH 100, 1:30pm-2:45pm, WEDNESDAY, No class, THURSDAY, MATH 100, 1:30pm-2:45pm, FRIDAY, BIOL 100, 3:30pm-4:45pm, Jessica, MONDAY, ENGL LAB 200, 9:00am-11:00am, TUESDAY, No class, WEDNESDAY ENGL LAB 200, 9:00am-11:00am, THURSDAY, No class, FRIDAY, ENGL LAB 200, 9:00am-11:00am
Screen Reader Testing Activity:
Using NVDA, press the down arrow key to move through the table. As the screen reader's focus moves left-to-right announcing the content of each data cell, note the information provided to the end user. Did you notice a difference from the previous example?