Web Accessibility Basics

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:


<tr class="firstrow">









<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>



<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>



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.

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.