Many consider data tables to be one of the most challenging elements of a web page to try and make accessible to blind and visually impaired users, as screen readers can often encounter many difficulties when trying to handle tables. However as long as a data tables is coded properly a screen reader should easily handle it.
There are a number of methods that a web developer can use to make a table accessible. The type of table often dictates the method that the web developer chooses to use that they are gong to use, examples of all of these methods are given below. Regardless of the method used a data should have a summary and a title these are also discussed below.
If the table to be used is only going to contain row or column headers (not both) then this first method is recommended. Figure 1 shows a table and Figures 2 gives the source code for the table. It can be seen from the source code that the TH element is used to identify the headers in the table, while TR element is used to identify the rows and the TD elements are used to identify the individual pieces of data in each cell. this is the simplest table method.
| Module Leader | Module Name | Number of Credits |
|---|---|---|
| Andy Laws | Business Systems Analysis and Synthesis | 24 |
<TABLE border="1" cellpadding="0">
<CAPTION>CS Level 3 Modules</CAPTION>
<THEAD>
<TR>
<TH>Module Leader</TH>
<TH>Module Name</TH>
<TH>Number of Credits</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Andy Laws</TD>
<TD>Business Systems Analysis and Synthesis</TD>
<TD>24</TD>
</TR>
</TBODY>
</TABLE>
Obviously this table only has one row to add more rows addition TR elements need to be added into TBODY, for example:
<TR>
<TD>Bob Askwith</TD>
<TD>Computer Networks</TD>
<TD>12</TD>
</TR>
The use of the TH element to identify table headers is vital. If the TH element is not used then a screen reader will automatically assume that the first row in the table is a table heading and this may be the case e.g. the first row in the table could be a title or the table could use column headings rather than row headings. If the TH heading is not used the screen reader only announces the headings once for the first row of the table for all other row the user needs to remember what the heading were. If the table above did not use the TH element the output from the screen reader would be:
Module Leader
Andy Laws
Module Name
Business Systems Analysis and Synthesis
Number of Credits
12
Bob Askwith
Computer Networks
12
If the TH element is used on this table then the screen reader will announce each heading before announcing the cell of data, regardless of how many rows is in the table. The output from the screen reader would be as follows:
Module Leader
Andy Laws
Module Name
Business Systems Analysis and Synthesis
Number of Credits
12
Module Leader
Bob Askwith
Module Name
Computer Networks
Number of Credits
12
If a data table is going to contain both row and column headings then the TH element along cannot be used because the screen reader would be unable to differentiate row headings from column headings, it would treat them all as headings. In order for a screen reader to be able to differentiate between row and column headings. To demonstrate the scope attribute the example table from above have been changed slightly.
| Number | Module Leader | Module Name | Number of Credits | 1 |
|---|---|---|---|
| Andy Laws | Business Systems Analysis and Synthesis | 24 | 2 |
| Bob Askwith | Computer Networks | 12 |
<TABLE border="1" cellpadding="0">
<CAPTION>CS Level 3 Modules</CAPTION>
<THEAD>
<TR>
<p>TH width=”10%” scope=”col”>Module Leader</TH>
<p>TH width=”10%” scope=”col”>Module Name</TH>
<p>TH width=”10%” scope=”col”>No of Credits</TH>
</TR>
</THEAD>
<TBODY>
<p>TH width=”10%” scope=”row”>1</TH>
<TR>
<TD>Andy Laws</TD>
<TD>Business Systems Analysis and Synthesis</TD>
<TD>24</TD>
</TR>
<p>TH width=”10%” scope=”row”>2</TH>
<TR>
<TD>Bob Askwith</TD>
<TD>Computer Networks</TD>
<TD>12</TD>
</TR>
</TBODY>
</TABLE>
Tables that contain nested row or column heading are considered to be complex tables. They often require a lot of coding in order to be made accessible to blind or visually impaired users who use screen readers. Each heading is assigned an ID using the ID attribute. Each row of data in the table is then given a combination of id’s, which will tell the blind or visually impaired user using a screen reader what heading that a cell of data relates to. For example looking the source code below it can be seen that the data cell containing the figure of 112 has the references “C2”, “R2”, “R3”. Comparing these references with the heading references it can be seen that this data cell applies to hotels, San Jose, 25th August 1997. There are very few examples of tables that have nested headings, but in the book Constructing Accessible Websites Jim Thatcher provides the following example.
| Meals | Hotels | Transport | subtotals | |
|---|---|---|---|---|
| San Jose | ||||
| 25-Aug-97 | 37.74 | 112.00 | 45.00 | |
| 26-Aug-97 | 27.28 | 112.00 | 45.00 | ...|
| Totals | 196.27 | 442.00 | 162.00 | 800.27 |
The caption attribute works in a very similar way to alt text for images. It is designed to provide a brief summary of the information that the table is trying to display. For example a caption for the table of level 3 modules above might be “some of the modules studied by Computer Studies students at level 3”.
Meanwhile the summary attribute works in a similar way to the long description attribute. It cannot be seen by sighted users, it can only be accessed by using screen readers or some other sort of assistive technology. It is designed to provide additional information about the table where it us felt that caption to not fully convey what the table is trying to show. A summary for the level 3 modules example above could be: “The table shows a subset of the modules that a final year computer studies student could study at level 3. The SSMD module is a core module and must be taken while the computer networks module is optional for Computer Studies students.”