Tables
WCAG 2.0 States
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation
can be programmatically determined or are available in text. (Level A)
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a
correct reading sequence can be programmatically determined. (Level A)
Introduction
The above WCAG quotes do not mean much until one learns more about what exactly is meant by the
statements. With regards to tables, these statements refer to the necessity of creating a properly
structured table so that someone who is blind, low-vision and/or using a screen reader can make sense
of a table auditorily.
A sighted individual can see the table, and make sense of the info within by visually scanning. If coded
properly, someone using a screen reader will also be able to scan through the table and understand it.
Screen Reader Behavior
Screen reader software makes sense of a web page - in a linear way. Screen reader software cannot
visually scan a page and make sense of it; it can only scan a page linearly and present the content in that
fashion.
Now, think of a table, tables are not linear by nature, they are complex. The table below shows the
number of undergraduate students by class, enrolled at Oregon State University, measured in Fall Term
2007-2010. The table, a table not coded with accessibility in mind, can still be easily understood by a
sighted individual.
So, how does this table sound to someone using a screen reader? Remember, screen readers linearize
content.
Screen Reader would read the following:
table with 8 columns and 5 rows. Fall Term, Freshman, Sophomore, Junior, Senior, Post Bac, NonDegree, Total, 2007, 4240, 3218, 3418, 4639, 344, 369, 16228, 2008, 4376, 3319, 3571, 4641, 359, 407,
16673, 2009 ... table end
This can be extremely confusing, and making sense of what the numbers mean would be almost
impossible if not coded correctly. When coded correctly, someone using a screen reader can much more
easily scan the table using screen reader navigation, and hear the headers associated with each row
and/or column.
Table Markup
Table markup refers to how a table is coded with proper HTML technique. There are a few items to keep
in mind; including table header cells, and then connecting the headers with the data in the cells.
Table Headers
Data tables should always be marked up using <tr>, <th>, and <td> tags.



<tr> tag refers to the table row
<th>tags refers to table header cells
<td> tags refer to table data cells.
All of the header cells, sometimes just the top row, sometimes the top row and first column, should use
the <th> tag, never the <td> tag.
All of the data then within the table should be coded with <td> tags. You should never use bold, italicize
or font size to style your table headers, use the <th> tag.
When you properly associate headers with the <th> tag, screen readers will announce the headers when
someone is scanning through the table. So, with the table example from above, if a user was using a
screen reader and looking for the number of Juniors in Fall 2008, and the table was coded with <th> cells
properly, the user could scan down and find the 2008 Fall Term cell, and then navigate to the Junior
column, where the screen reader would announce "Junior 3571" instead of just "3571" as the previous
inaccessible table example would read.
Here is the table above, with the <th> cells added in the proper places. Notice that there is also
a <caption> tag added, which provides space for a short summary of the table.
First the code:
Here is the actual table
The table below shows the number of OSU undergraduate students, counted Fall Term of 2007 to 2011,
broken down by class standing.
Connecting Headers and Data Cells
For simple tables, you should always include the <scope> attribute on all <th> tags. This tells the screen
reader software that everything located underneath a column header is connected, and everything in
the row of a row header is connected.
In this example, you can see that <th scope="col"> is used to associate headers with the column,
while <th scope="row"> is used to associate headers with the row.
Creating an accessible Table on GHC’s Website
The content management system is already coded to create an accessible table. Follow the 6 steps
below to ensure the table is accessible for a screen reader.
Step 1: Select the Table Icon located on the right side on the top row
Step 2: Enter the number of rows and columns for the table
Step 3: From the Headers drop down menu select “Both” (This will create headers for the columns and
rows
Step 4: Write a caption which will be the Title of the Survey
Step 5: Write a summary for the screen reader to access
Step 6: Under the Advanced Tab the language direction can also be selected
Finished Table using GHC’s website:
Code for Candy Bar Graph
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;" summary="Snack Shack
surveyed students over the last three years about their favorite candy bar.">
<caption>Students' favorite candy bars last three years</caption>
<thead>
<tr>
<th scope="row">Fall Quarter</th>
<th scope="col">Snickers</th>
<th scope="col">Skor</th>
<th scope="col">Butterfinger</th>
<th scope="col">Baby Ruth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2013</th>
<td>45</td>
<td>35</td>
<td>80</td>
<td>10</td>
</tr>
<tr>
<th scope="row">2014</th>
<td>63</td>
<td>25</td>
<td>37</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2015</th>
<td>21</td>
<td>45</td>
<td>29</td>
<td>50</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>