Data tables, Data tables in Office, Tables for layout
Tables - Ensure that tables read logically to all users
Tables may be used in two ways: to organise data or for page layout. Tables can be a very useful visual aid for organising data, however without careful design and appropriate labelling tables can become almost impossible to interpret for screen reader users. If tables are used for layout purposes the reading order should be checked with a screen reader, or accessibility evaluation tool. The RNIB give some simple and very useful guidelines for designing tables for accessibility. For a more in depth guide see the WebAIM tables tutorial which explains clearly and simply how tables used for data and page layout can be made more accessible.
Data tables in MyAberdeen (and HTML)
Some types of information can only be effectively presented as a table. A data table can be made more accessible to screen reader users if you:
- provide a caption - When creating a table in the content area of MyAberdeen Blackboard Learn 9.1 offers you the chance to input a caption, see below:
Fig 1: Inserting table caption in MyAberdeen
- provide a summary to give more details if required, using the 'summary' attribute, e.g. <table name="farm output" summary="table shows quantity and sales value of all crops produced on SunnyHill farm for the year 2001-2002">
- for data tables, identify row and column headers using <th> attribute. In MyAberdeen the easiest way to do this is to create the table using the text editor and then edit the HTML code with the text editor turned off, see below:
Fig 2: Table in MyAberdeen, created using Text Editor
Fig 3: Viewing the table in MyAberdeen in HTML with the Text Editor turned off, notice table headers are marked up as <td></td>, the same as the data entries which can be confusing for screen reader users (highlighting done to aid illustration)
Fig 4: Table header attributes added - the <td></td> surrounding the table headers have been replaced manually with <th></th> tags between the first set of <tr></tr> tags (the first table row)
The W3C site also shows how to associate table headers with data using HTML in Data sheet H51 Using table markup to present tabular data.
It can also be helpful to identify key rows or columns by a different background colour or shade. This can make a data table easier to read for all users. Combining CSS and accessible table design can produce the best results, see Mike Cherim's Web log tutorial: Accessible Smart Tables.
Data tables in Office documents
Amongst their recommendations Microsoft's Creating Accessible Excel Files explains how to specify table header information, recommends specifying unique names for sheet tabs and avoiding blank cells for formatting.
Unfortunately it is not possible to specify headers for data tables in Word (up to and including Word 2011).
Tables for page layout
These days most well designed web pages use Cascading Style Sheets (CSS) and thus avoid using tables for layout. CSS can be extremely difficult for all but the most basic layout and as not all browsers interpret CSS data in exactly the same way. The use of tables for layout is not recommended but is still acceptable under WCAG 2.0 recommendations. If multiple columns are used for layout check that the reading order makes sense using a screen reader or accessibility evaluation tool such as WAVE. A guide to checking table reading order for screen readers is given in WebAim's Tables tutorial.
Note: If using tables for layout do not complete the table 'caption' box in MyAberdeen (Blackboard Learn 9.1).