Accessible Tables

Tables are one of the most common elements you would see in websites. If you need to display information in rows and columns, creating a table is your first and oftentimes only option. Fortunately, making a table is generally easy: you just enter the data, and indicate which are the rows and which are the columns.

But despite of the simplicity of this element, tables play a crucial role in helping users understand the contents of a web page. Persons with disabilities are no exception to this fact. It is therefore important for you to know how to make tables accessible for all types of users.

Here, I will show you how to create accessible tables.

Two Types of Tables

Layout Tables

Layout tables provide you with a means to organize information in your web page. You use layout tables to make your web content appear visually logical.

It is highly recommended that instead of layout tables, you use CSS in forming the layout of your page. This helps you reduce the file size of your web pages and increase their accessibility for users of assistive technology. As much as possible, you would want to use tables only for representing data.

Nevertheless, there is nothing wrong with using layout tables in forming the structure of your page. In fact, many websites use layout tables and they work perfectly fine for these sites. Also, layout tables are designed for the very purpose of forming the structure of your page’s content.

Data Tables

We will actually focus more on this type of table. Data tables, as their name suggests, provide you with a means to display your data in a tabular form. As you may know, creating tables for your data is easy. Fortunately, so is making your tables accessible.

How to make your Tables Accessible

Here are a few steps to ensure the accessibility of the tables in your web pages.

Use Table Headers

If you have data tables in your site, it is very important to use table headers. You need to determine the information that represents the header for the row and the header for the column. Sometimes, it is only for the row, sometimes it is only for the column, and sometimes it is for both.

Users of assistive technology benefit greatly from table headers. For example, let us say a blind person using a screen reader is trying to access your table. If your table has headers, the screen reader will announce the column or row headers of the table each time the user moves from one cell to another. This is very helpful to the blind person accessing the table, since he cannot look at the column or row headers while navigating through the data cells.

Use the <th> tag

The <th> tag is one of the most common means of indicating table headers. Here is an example of a case wherein you should use the <th> tag. Let’s say you want to create a calendar. On the top row, you will have the seven days: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday. And below them, you have the numbers: 1 under Sunday, 2 under Monday, and so on.

At this point, your header information consists of the days. You can indicate the header information using the <th> tag. Here is the actual code for the table for the calendar. Note: the use of the <caption> tag will be explained later in the article.

<table border=“1”>

<caption>Sample Calendar</caption>

<tr>

<th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th>
<th>Friday</th><th>Saturday</th>

</tr>

<tr>

<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>

</tr>

<tr>

<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>

</tr>

<tr>

<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>

</tr>

<tr>

<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>

</tr>

<tr>

<td>29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td>

</tr>

</table>

Use the Scope Attribute

You can use the scope attribute if you have a table that contains headers for both rows and columns. You add this attribute to the <th> tag. Here is an example of a case where you should use the scope attribute.

Let us say you have a table for your class schedule. Your column headers represent the hours, and your row headers represent the days.

Using the scope attribute, you will have the following lines of code:

<table border="1">

<caption>Class Schedule</caption>

<tr>

<td> </td>

<th scope=”col”>9:00 – 10:00</th>

<th scope=”col”>10:00 – 11:00</th>

<th scope=”col”>11:00 – 12:00</th>

</tr>

<tr>

<th scope=”row”>Monday</th>

<td>English</td>

<td>Algebra</td>

<td>Biology</td>

</tr>

<tr>

<th scope=”row”>Tuesday</th>

<td>Music</td>

<td>Trigonometry</td>

<td>History</td>

</tr>

<tr>

<th scope=”row”>Wednesday</th>

<td>English</td>

<td>Algebra</td>

<td>Biology</td>

</tr>

<tr>

<th scope=”row”>Thursday</th>

<td>Religion</td>

<td>Trigonometry</td>

<td>History</td>

</tr>

<tr>

<th scope=”row”>Friday</th>

<td>Basic Computer</td>

<td>Speech</td>

<td>Physical Education</td>

</tr>

</table>

Use the headers and id attributes

For tables with two or more levels, you can use the headers and id attributes. These attributes are useful in situations where you need to link multiple headers with a single data cell.

To use the headers and id attributes, you first have to select the cell you want to be a header. Then you have to attach an id attribute to it. Next, you have to take the id’s of each header cell, and add them to the headers attribute of the corresponding data cell.

Here is an example of a table that uses the headers and id attributes. This table contains a music store’s available instruments and their quantity and price. Instruments are divided into two types: wind and string instruments.

Note: the summary will be explained in the next section of the article

These are sample blocks of code from the table:

<tr>

<td></td>

<th id="instrument">Instrument</th>

<th id="quantity">Quantity</th>

<th id="price">Price Per Unit</th>

</tr>

<tr>

<th rowspan="2" id="wind">Wind Instruments</th>

<th id="flute">Flute</th>

<td headers="wind flute quantity">4</td>

<td headers="wind flute price">$80.00</td>

</tr>

Use Caption and Summary

Apart from headers, the caption and summary are other pieces of information you can assign to your table.

The caption refers to the title of your table. You place the <caption> tag after the <table> tag.

Here again is a block of code from the class schedule table containing the caption tag:

<table border=“1”>

<caption>Class Schedule</caption>

<tr>

<th scope=”col”>9:00 – 10:00</th>

<th scope=”col”>10:00 – 11:00</th>

<th scope=”col”>11:00 – 12:00</th>

</tr>

The summary provides a brief description of the contents of the table. You place the summary=”” attribute inside the <table> tag, with the actual summary inside the quotes. In most cases, the summary is optional. But if you have a complex table, you may want to include a summary for it. Through the summary, you can emphasize the major data in the table and help readers quickly find a particular data.

Complex Tables

Sometimes, you would have to work with a very large table. In this table, there may be cells containing information which in itself is a small table. This is what many web developers call a complex table. In other words, it is a table that has tables inside them.

Let’s use our class schedule table as an example. One of the subjects in the table is History. In a complex table, the cell for History may contain additional information such as professor, topics, and assignments. And these pieces of information may be displayed in a complex structure inside the cell for History.

You may at one time need to create complex tables, and there is nothing wrong with that. But if a table becomes too complex, persons reading your page would have a hard time understanding the information in the table. Generally, a table having 4 to 5 levels is already too complex.

As much as possible, you need to avoid using complex tables. Always try to make a simple structure for your tables. As stated above, this helps readers quickly understand the table’s layout. Also, in a complex table, you may have to mark up headers for several data cells. Sometimes, you might even have to write the code separately for each cell. But if you display data using a simple table, you only have to mark up headers once.

Also, read this article in Belorussian (opens in new window)