Adding Table Headers
Continuing with the same table, we will now add table headers (i.e., th tags) in place of the td tags to identify both the column and row headers (See the HTML code snippet below):
HTML code snippet:
<table>
<tr class="firstrow">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th class="firstcol">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">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 the difference in what was announced?
By simply adding the th tags, the header cells are now announced prior to the cell data being announced. This change provides more information to the screen reader user, thus allowing for a better understanding of the information being presented.
Below is an updated visual representation of how tabular data (with table headers) is presented to a screen reader user at any given time.
Thursday | |||||
---|---|---|---|---|---|
Eric | MATH 100, 1:30pm-2:45pm | ||||
As you can see, in addition to the cell data that is in focus (highlighted in yellow), the screen reader user also has both the column and row header data (if applicable) available to them. This provides the end user with the necessary information to make sense of the cell data.