Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 2.5 - Core

If tables are used for layout they should make sense when linearized. Layout tables should not contain summary attribute, <caption> element or table headers <th>

WCAG 1.0 Priority 2

WCAG Guideline 5. Create tables that transform gracefully.

Generally, it is best not to use tables for layout purposes. Web page structure and presentation of information must be kept separate in the web page. This can be done with the use of CSS. HTML should not be used to manipulate the presentation of the information on the browser.

Tables also do not render at all until the entire table has downloaded. Along with the large amount of (X)HTML required to create the table, when tables are used for layout purposes only, the user can experience greatly increased load times. As such, tables should only be used for display of purely data-focused information and not as an aid to positioning (X)HTML elements or information on the screen.

As well as contributing to page size, table complexity and download times, nested tables are difficult to navigate using the tab key and screen readers and so present problems for users who rely on these mechanisms.

Screen readers and other assistive technologies need to be able to move logically through the content of a table and they do so by converting the table cells into a series of sequential paragraphs as defined in (X)HTML code order. This could be different to the order in which the tables are displayed visually. It works well for well-presented tabular data but can cause problems where tables are used for visual layout purposes as screen readers read the tabular data from left to right, starting with the first cell on the left hand column, and then running over into the first cell on the right column. This continues all the way down the page.

Requirement

If tables must be used for layout, make sure they still make sense when linearized and do not include <summary> attribute, <caption> elements and table headers (th). These are the structural markup components of the data tables.

Checking Tool

  • Use W3C (X)HTML Table Linearizer  (http://www.w3.org/WAI/Resources/Tablin/form)
  • Firefox - Web Developer's Toolbar: Choose Miscellaneous > Linearize Page
  • Internet Explorer - AIS Toolbar: Structure > Linearize information

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout)

 

Back to top