OREGON STATE UNIVERSITY
Open search box
The below WCAG quotes don't mean much until we learn more about what exactly is meant by the statements. With regards to tables, these statement refers 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 you code tables properly, someone using a screen reader will also be able to scan through the table and understand it.
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)
You can also learn more about these success criteria by visiting Understanding Success Criteria 1.3.1.
There are two kinds of tables used on websites today; layout tables, and data tables. Most of this page is written towards data tables, but a brief mention of layout tables is important.
A layout table is a table used to provide some sort of visual structure to a page, sometimes people want to design columns on a page, some people find using layout tables easier for Forms, etc. When you use a table for anything but providing data, you are using a table for layout. Layout tables are inadvisable, although not necessarily inaccessible. For those of us using Drupal, and those of us without much web design expertise, they can be much easier to use than providing the preferable CSS markup. If you use a layout table, but still do so that makes sense in a linear way, it will still be accessible. Learn much more about this topic in Creating Accessible Tables by WebAIM.
A data table is therefore, any table where you provide data or content designed to use some sort of spreadsheet format. Data tables need to be coded properly so that they are accessible. The rest of this page dives deeper into this topic.
Think about how screen reader software makes sense of a web page - in a linear way. Screen reader software can not 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 OSU, 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.
| Fall Term | Freshman | Sophomore | Junior | Senior | Post Bac | Non-Degree | Total |
| 2007 | 4240 | 3218 | 3418 | 4639 | 344 | 369 | 16228 |
| 2008 | 4376 | 3319 | 3571 | 4641 | 359 | 407 | 16673 |
| 2009 | 4621 | 3681 | 3910 | 4927 | 427 | 501 | 18067 |
| 2010 | 5002 | 3880 | 4206 | 5378 | 517 | 576 | 19559 |
So, how does this table sound to someone using a screen reader? Remember, screen readers linearize content.
table with 8 columns and 5 rows. Fall Term, Freshman, Sophomore, Junior, Senior, Post Bac, Non-Degree, Total, 2007, 4240, 3218, 3418, 4639, 344, 369, 16228, 2008, 4376, 3319, 3571, 4641, 359, 407, 16673, 2009 ... table end
Listen to this table in JAWS.
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 refers to how a table is coded with proper HTML technique. There are a few items to keep in mind; table header cells, and connecting the headers with the data in the cells.
Data tables should always be marked up using <tr>, <th>, and <td> tags. A <tr> tag refers to the table row, <th> tags refers to table header cells and <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, say you were using a screen reader and looking for the number of Juniors in Fall 2008, and the table was coded with <th> cells properly. You 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:
<table>
<caption>The table below shows the number of OSU undergraduate students, counted Fall Term of 2007 to 2011, broken down by class standing.</caption>
<tbody>
<tr>
<th>Fall Term</th>
<th>Freshman</th>
<th>Sophomore</th>
<th>Junior</th>
<th>Senior</th>
<th>Post Bac</th>
<th>Non-Degree</th>
<th>Total</th>
</tr>
<tr>
<th>2007</th>
<td>4240</td>
<td>3218</td>
<td>3418</td>
<td>4639</td>
<td>344</td>
<td>369</td>
<td>16228</td>
</tr>
<tr>
<th>2008</th>
<td>4376</td>
<td>3319</td>
<td>3571</td>
<td>4641</td>
<td>359</td>
<td>407</td>
<td>16673</td>
</tr>
<tr>
<th>2009</th>
<td>4621</td>
<td>3681</td>
<td>3910</td>
<td>4927</td>
<td>427</td>
<td>501</td>
<td>18067</td>
</tr>
<tr>
<th>2010</th>
<td>5002</td>
<td>3880</td>
<td>4206</td>
<td>5378</td>
<td>517</td>
<td>576</td>
<td>19559</td>
</tr>
</tbody>
</table>
Here is the actual table
| Fall Term | Freshman | Sophomore | Junior | Senior | Post Bac | Non-Degree | Total |
|---|---|---|---|---|---|---|---|
| 2007 | 4240 | 3218 | 3418 | 4639 | 344 | 369 | 16228 |
| 2008 | 4376 | 3319 | 3571 | 4641 | 359 | 407 | 16673 |
| 2009 | 4621 | 3681 | 3910 | 4927 | 427 | 501 | 18067 |
| 2010 | 5002 | 3880 | 4206 | 5378 | 517 | 576 | 19559 |
Notice that this table is styled beyond just the HTML provided above. This is because this site is built in Drupal, OSUs content management system. OSU has already defined some of the features of tables, and some are built into browsers. That is why the headers are bold in this table, but not in the previous example.
The Resources & Tools provided below have full knowledge of how to create accessible tables, including how to connect headers and data cells, a very important concept for all tables as it helps associate content for easy recognition by screen reader software. This page will only briefly touch on this topic as those resources are well established and through, you should use them to fully learn about this topic.
There are multiple ways to interconnect a table, ranging from techniques useful for accessible simple tables, to techniques necessary for accessible complex tables.
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.
Using a paired down version of the tables above, the following is an HTML example of a table using the <scope> attribute.
<table>
<caption>The table below shows the number of OSU undergraduate students, counted Fall Term of 2007 to 2011, broken down by class standing.</caption>
<tbody>
<tr>
<th scope="col">Fall Term</th>
<th scope="col">Freshman</th>
<th scope="col">Sophomore</th>
</tr>
<tr>
<th scope="row">2007</th>
<td>4240</td>
<td>3218</td>
</tr>
<tr>
<th scope="row">2008</th>
<td>4376</td>
<td>3319</td>
</tr>
<tr>
<th scope="row">2009</th>
<td>4621</td>
<td>3681</td>
</tr>
<tr>
<th scope="row">2010</th>
<td>5002</td>
<td>3880</td>
</tr>
</tbody>
</table>
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.
Below is information about how to create accessible tables in Drupal.
There are two ways to create tables in Drupal; HTML code or using the table icon in the Drupal menu.
To use the Drupal table icon, locate and click it from the toolbar as shown in the following picture.
Next, a small pop up window will appear. In this window are options for how many rows and columns you would like to include. Note that in this window, there are no options for adding headers in this Drupal feature, you must edit the HTML code to add headers, and you must add headers to data tables to make them accessible.
This Drupal table menu does allow for the entry of table captions, which are very useful, as mentioned in the Table Headers section above. Checking the "Table Caption" box will provide you with a "cell" at the top of the table to enter a caption. It is encouraged that you use this feature.
After you input how many columns and rows you want, along with a border size, a caption, or other features, the table will be inserted into your page where your cursor was when clicking the table icon. If you had created a table with two columns, two rows, with a 1px border, aligned left, and a caption, the HTML would look like the following image.
To make this more accessible, you must go into the HTML and change where ever you have a table header from <td> to <th>. In many tables, the top row is a row of headers, and many times the left side of the table as well.
You must also connect the header and data cells using either the technique talked about above, or by using a technique for complex tables as described in the resources listed.
If you know HTML code tables can be much easier build. Spend some time learning basic HTML and in no time you will probably prefer editing your table content in HTML.