Website accessibility Hints and Tips

Presenting Information in tables

Tables used to represent tabular data - such as job listings need to be made accessible for screen readers. Screen readers read left to right, a line at a time in their standard mode, which means they can often understand simple tables of information, but for more complex data they reply on the tables being marked up in the relevant HTML code.

In the example table on this page - Fig A - you need to do two main things to make it accessible.

Firstly, ensure that the column headers - e.g. Job, Job Ref, Area and Type are labelled properly in HTML using the Table header tag TH as illustrated in fig B .

Fig A - Typical job search results in a table

Secondly, you need to explicitly associate each data item with its relevant column header - for example in the first row the data item 'Mechanical Design Engineer' needs to be linked to its corresponding column header 'Job'. There are a number of techniques to do this; one of the most common is the use of the 'headers' attribute. If you look at Fig B the 'Job' column header has an extra tag - id="c1" and you will see that the 'Mechanical Design Engineer' table data cell TD has a corresponding headers ="c1" tag, as you can see the common link is the c1 text - you can replace this with anything you want as long as it is consistent.

More guidance can be found in the Macromedia e-recruitment paper and the W3C paper on Accessible HTML techniques.