Data Tables

Data vs. Layout Tables
Fixing Data Tables
Multiple Levels of Headings
Layout Table Recommendations
Resources
Next Topic: Frames
Previous Topic: Client-Side Image Maps
Web Accessibility Home

Data tables are used to display facts and figures of information. When a screen reader encounters a data table, it can be difficult for the listener to understand the information being conveyed unless the table contains appropriate mark-up. Below is an example of a data table.

The days of the week are the column headers for the data of the table, the hours of operation. The headers have a special HTML tag <TH> which indicate they are headers. This enables to screen reader to appropriately read the table. Another special HTML attribute is added to the header tag so it reads <TH scope="col"> to indicate that this is a column heading. If there were additional row headings they would have a scope="row" attribute.

Data vs. Layout Tables

Anytime you verify your web pages using AccVerify or another validation tool, you will get a warning that a table is present. However the Section 508 guidelines (G&H) regarding tables only apply to data tables. The majority of tables in your web pages are probably layout tables.

A data table will contain facts, figures and organized information. It will have either column or row headings or both. This type of table requires special consideration and work to make it accessible according to Section 508. The Hours of Operation table above is a sample of a data table.

A layout table is more commonly used and it is purely for presentation and appearance purposes. Frequently, people use tables to place graphics and text in column format or create a navigation area on the left hand side of the screen. Section 508 guidelines do not apply to layout tables, but there are some recommendations to make the use of layout tables more accessible.

Sample Data Table   M T W Th F Mark 8am 8am 8am 8am Off Jane 10am 10am 10am Off 8am Joan Noon Noon Off 10am 10am

Sample Layout Table A winking face A sad face

Back to top

Fixing Data Tables

Adding table header tags in FrontPage
Printable/Accessible Version (opens in new window)

Adding scope attributes to table headers in FrontPage
Printable/Accessible Version (opens in new window)

Viewlets require Macromedia Flash Player.

Back to top

Multiple Levels of Headings

Sometimes data tables will have multiple layers of headings. This format of table can be extremely difficult to read by a screen reader. Multiple layers of headings means that there are two or more column headings or row headings. Look at the example below.

This type of table can be very confusing to a screen reader and is almost impossible to make accessible. Instead of using multiple layers of headings, look for a way to present the information in a different fashion or link to a text-based paragraph type description. In other words - AVOID this type of data table and if used, always provide the information in an alternate format.

Back to top

Layout Table Recommendations

Even though Section 508 rules apply only to data tables, there are four things to remember when using layout tables for appearance. Following these recommendations will ensure that your layout tables display correctly to all users.

1. Make sure the table reads correctly when linearized. This means when it is read from left to right and from top to bottom. For a great example of when this can be a problem, check out the WebAim tutorial on tables. (Look for the Basement toilets example)
2. Do not mark items as table headers in a layout table (the <TH> tag). This will confuse the screen reader.
3. Use proportional sizing (%) rather than absolute sizing (pixels) for width to ensure that the information does not flow of the edge of the screen and cause users to scroll from left to right.
4. Use the simplest table configuration possible.

   Back to top

Resources

WebAIM tutorial on accessible tables

WAVE accessibility tool (shows you the order your table would be read by a screen reader)

W3C Recommendations for tables

Jim Thatcher's Course on Web Accessibility (tables section)

Back to top