Skip to content Skip to navigation

Tables

As most Web developers know, tables should be used to present data, rather than to assure proper page layout. This is simply best practice, in terms of coding.

If you must use a table for layout, this portion of an article from the WebAIM site about creating accessible layout tables will be helpful. Note that Summary is depricated in HTML5, and it should not be used on layout tables. In addition, adding the ARIA role of presentation to a layout table can provide a better experience for assistive technology users. This from Web Axe provides further explanation and code.

When making data tables accessible, it is essential to assure that screen readers can associate column and row headings with appropriate data cells. Also, take care not to make data tables so complex that they become difficult to understand for everyone i.e. consider limiting nesting to two levels, at most. The resources section contains detailed articles with code samples.

Finally, creating responsive data tables, or other kinds of complex data tables that are both functional and accessible to all, can be a challenge. Note that testing complex data tables with screen reader and browser combinations is ideal since capabilities improve over time. Be sure to consult screen reader documentation to understand how the screen reader you are using will work with tables and what keystrokes are required. Here are a few articles that may help in resolving unusual table coding situations:

Target Audience: 
Content Creator
Designer
Developer
Last modified: 
April 22, 2015