Accessibility - Tables

Tables for layout

HTML tables were intended for data layout but are commonly used for page layout. To meet the univesity's accessibility requirements, tables may be used for layout but they should make sense when linearised. For many screen reader| and text-to-speech users, text presented in table columns creates a significant barrier. Most of these technologies read across the page. Hence text on the same row but in different columns may be read as one sentence. For example, the display below shows a table with text in two side-by-side cells, as it would be viewed via your browser:

Tim Berners-Lee, W3C The University's Accessibility Policy
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
"It is the policy of the university to make all web-based information and services on the university web site accessible and equally effective to all users, regardless of their disability."


Although this is understandable when read on screen, it would not linearise well:

Tim Berners-Lee, W3C The University's Accessibility Policy
"The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect."
"It is the policy of the university to make all web-based information
and services on the university web site accessible and equally
effective to all users, regardless of their disability."

Try rearranging the information on the page so that people using screen readers will be able to make sense of your table, or consider creating an alternative page. In the above example, simply merging the cells in the two columns makes the content readable via a screen reader:

Tim Berners-Lee, W3C
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
The University's Accessibility Policy
"It is the policy of the university to make all web-based information and services on the university web site accessible and equally effective to all users, regardless of their disability."


Always check that your table makes sense when linearised
If you do use tables for layout check that the information they contain makes sense when linearised| (ie the contents of the cells are displayed as a series of paragraphs one after the other by text browsers). Try linearizing your table using Tablin|, a filter program developed by the WAI Evaluation & Repair group. You can select several different options in Tablin to try different ways of presenting your table.

Another way of checking is to run your page through a text-only browser eg Lynx| and see whether the resulting document is understandable.

The preferred method for dealing with columnar text layout is to use Cascading Style Sheets (CSS) for layout and positioning and not the <table> tag. However, at present, browsers are not consistent in how they implement style sheet features, particularly in relation to placement of items on a page and use of CSS layout may not always be practical. When browsers include consistent support for the W3C Cascading Style Sheet Recommendations CSS 1| and CSS 2|, it will become important to do all positioning of text and images on a page via style sheet markup.

Note that use of the PRE attribute to display tables is no longer recommended; instead use the <TABLE> element so that assistive technologies can recognise there is a table.

Tables for Data

For data tables, identify row and column headers

If you present data in a tabular format, you should use the HTML TABLE element and its supporting elements and attributes (eg TR, TD, TH and CAPTION). For example:

<table border=0 summary="This table charts the weight and height of Angela and Tom">
<caption>Weight Height chart</caption><tr>
<TH id="t1">Name</TH>
<th id="t2">Weight</th>
<th id="t3">Height</th>
</tr>
<tr>
<td headers="t1">Angela</td>
<td headers="t2">100</td>
<td headers="t3">5'2"</td>
<tr>
<td headers="t1">Tom</td>
<td headers="t2">120</td>
<td headers="t3">5'10"</td>
</tr></table>
A speech synthesizer might render this table as follows:
Caption: Weight Height chart
Summary: This table charts the weight and height of Angela and Tom

Name: Angela, Weight: 100, Height: 5'2"

Name: Tom, Weight: 120, Height: 5'10"

See Table rendering by non-visual user agents| to show how assigning titles to cells and columns leads to more intuitive grouping and cross referencing of table data; also, by naming headers with the <ID> attribute, a screen reader is able to "display" group cells with relevant header information.

For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells

Complex data tables that have two or more row or column headings or headings that span multiple columns require additional markup to explicitly associate the heading with the data. In the table data cells, the headers attribute is used on the TD element to specify which heading cell is associated with a specific data cell. For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.

[Top of Page|]

 

 
 

The University is an exempt charity under the Charities Act 2006.
Accessibility|| | Disclaimer|| | FOI|| | Data Protection|| | Charitable Status||

The University of Bolton, Deane Road, Bolton, BL3 5AB Tel: +44 (0)1204 900600