Welcome to our series of posts called, “How to make your website accessible.” We have discussed the ethical and legal reasoning behind accessibility, how to write alternative text, checking color contrast, how to write descriptive links, how to create accessible headings, and limitations on using color to convey content. The accessibility journey continues with the discussion of accessible tables.
Accessible tables are important
The purpose of data tables is to present information in a grid or matrix. Columns and rows are intended to show the meaning of the information within the grid. Users without visual impairments can visually scan a table and make associations between data in the table and their row and/or column.
Users with visual impairments cannot make visual associations. Those using screen readers have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells. Tables without structural markup to differentiate proper header and data cells create accessibility barriers.
Correct HTML markup not only helps those using assistive devices consume content more accurately, but it also improves the functionality that adapts the table layout on mobile devices. This functionality is intended to increase data comprehension and help users avoid zooming and side-scrolling on mobile devices.
What information goes into a table?
Before moving forward, we must talk about the purpose of a table. Tables are used for tabular data, making the HTML markup important to understand. Tabular data requires an ordered arrangement of rows and columns that rely on headers to group information. Tables should not be used for layout or to position elements on your web page.
Back to the basics
Let’s take a stroll through memory lane and recall the layout of rows and columns. Columns run up and down, whereas rows run right to left. As we continue, the importance of rows and columns will be addressed when organizing information in an accessible manner.
As we move forward, we will learn how to add the <thead>,<tbody> and headers.
Table markup
The <thead> element is used to group header content, the <tbody> element is used to group the body content and the <tfoot> element is used to group footer content. Every table must have a <thead> and <tbody> element for the mobile table styles to be applied.
The purpose of these elements are to specify the parts of a table. Browsers can scroll the body of a table independently of a fixed header or footer. Each of these tags will hold groups of rows inside them. An example is shown below:
| Item | In-state | Out-of-state |
|---|---|---|
| Estimated totals | $12,357 | $21,300 |
| Tuition | $8,844 | $17,787 |
| Student service fees | $2,028 | $2,028 |
| COB graduate level course fee | $1,485 | $1,485 |
<table>
<caption>Tuition and fees</caption>
<thead>
<tr>
<th scope="col" style="width: 70%;">Item</th>
<th scope="col" style="width: 15%;">In-state</th>
<th scope="col" style="width: 15%;">Out-of-state</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Estimated totals</td>
<td>$12,357</td>
<td>$21,300</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tuition</td>
<td>$8,844</td>
<td>$17,787</td>
</tr>
<tr>
<td>Student service fees</td>
<td>$2,028</td>
<td>$2,028</td>
</tr>
<tr>
<td>COB graduate level course fee</td>
<td>$1,485</td>
<td>$1,485</td>
</tr>
</tbody>
</table>
Identifying row and column headers
Having designated row and/or column headers is essential to creating an accessible data table. Let’s think of a header as a title for rows and columns. In the markup, the <th> element is used for table header cells.
When a <th> element is used in Web Press, the text will shade the cell background and bold the text.
Associating data cells with appropriate headers
Using “scope” attributes is the easiest way to associate header (<th>) cells and data (<td>) cells. The scope attribute tells a browser and screen reader which data is associated with each header. For example, everything within a column is associated with the scope="col" header. Similarly, it will see that a scope="row" is a header for all cells in that particular row.
For column header cells, simply include scope="col" in the <th> tag. For row header cells, use scope="row" in the <th> tag.
Using columns headers
The table below uses scope="col" to associate column headers to data cells underneath it.
| Homework Due Dates | Quiz Dates | Test Dates |
|---|---|---|
| 9/2/02 | 9/4/02 | 9/6/02 |
| 9/23/02 | 9/25/02 | 9/27/02 |
| 10/14/02 | 10/16/02 | 10/18/02 |
<table width="330">
<tr>
<th scope="col">Homework Due Dates</th>
<th scope="col">Quiz Dates</th>
<th scope="col">Test Dates</th></tr>
<tr>
<td>9/2/02</td>
<td>9/4/02</td>
<td>9/6/02</td></tr>
<tr>
<td>9/23/02</td>
<td>9/25/02</td>
<td>9/27/02</td></tr>
<tr>
<td>10/14/02</td>
<td>10/16/02</td>
<td>10/18/02</td></tr></table>
Using row headers
Let’s suppose we wanted to display students’ scores. To accomplish this, we will need to add row headers on the left side of the table. The table below uses scope="row" to associate row headers to the correct data cells.
| Homework 1 | Quiz 1 | Test 1 | |
|---|---|---|---|
| Bob | 87% | 86% | 80% |
| Scott | 92% | 98% | 94% |
| Tara | 94% | 82% | 91% |
<table width="440"><tr><td></td>
<th scope="col">Homework 1</th>
<th scope="col">Quiz 1</th>
<th scope="col">Test 1</th></tr> <tr><th scope="row">Bob</th>
<td>87%</td>
<td>86%</td>
<td>80%</td></tr> <tr><th scope="row">Scott</th>
<td>92%</td>
<td>98%</td>
<td>94%</td></tr> <tr><th scope="row">Tara</th>
<td>94%</td>
<td>82%</td>
<td>91%</td></tr></table>
Making table captions
Data tables typically have a brief descriptive text before the table, indicating the content of a table. The text should be associated with the table using the <caption> element. The <caption> element is used right after the opening <table> tag. The image below helps us understand the role of the <caption> element in a table.
<table>
<caption>Estimated program totals</caption>
The coding above can be visualized like this:
| Item | In-state | Out-of-state |
|---|---|---|
| Estimated totals | $12,357 | $21,300 |
| Tuition and fees | $12,357 | $21,300 |
Ask the Web Help Desk
How do I make an accessible table in Web Press?
- Open the Rich Text Block.
- Select Edit Content.
- Select the Table icon from the editor toolbar.
- Type the number of rows you want in the Rows box and the number of columns you want inside the Columns box.
- Select First Row, First Column or Both from the Header drop-down menu, depending on the location of your header(s).
Note: This will set your<thead>and automatically set other cells as<tbody>.
- Write the caption of your table in the Caption box.
- Select OK.
How do I edit code in the rich text editor?
Inside the rich text editor, select the button toward the right called, “Source View.” This button will allow you to examine and edit the code inside the text table.
How will my table look on a mobile device?
As part of our ongoing campaign to increase the accessibility of Missouri State’s web pages, we have added functionality that adapts the table layout on mobile devices. While this functionality is primarily intended to increase data comprehension, it also helps users avoid zooming and side-scrolling on mobile devices. Our Full Stack Developer/Engineer, Philip Bowles, wrote a blog about rewriting table elements for mobile devices.
More information about semantic HTML elements
You may visit these links for more information about relevant HTML elements.