526 - Tables

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.