Accessibility of Layout Tables
Tables are commonly used for page layout as well as for storing data. The use of layout tables is discouraged and can cause noticeable accessibility issues in some browsers, as well as going against the principles of structural markup. However, when a site is being moved to structural markup, it is useful to make existing table-based layouts more accessible as an interim stage.
Web Accessibility Initiative Guidelines
This page explains how to meet:
- Guideline 5.3:
"Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version)."
- Guideline 5.4:
"If a table is used for layout, do not use any structural markup for the purpose of visual formatting.".
Reasons for following these recommendations
Tables used for layout can be inaccessible to a number of users, especially those using speech-based browsers, text only displays, or narrow displays (for example, on a PDA or mobile phone).
When a browser that does not support tables views a table, then the cells will be displayed from left to right, and then from top to bottom. If displaying the cells in this order does not make sense, then the site will be difficult to use in some browsers.
How to use tables for layout.
Firstly, remember that these recommendations should be a transitional stage before moving to structural markup for layout.
In a layout table, never use any tags intended to
structure data, such as
<th>. In Dreamweaver, table cells will only be
given structural markup if you request it, so this is simple to
Ensuring that tables linearise successfully
requires thought about the order of elements in the table cells. Use
rowspan attributes and
nesting tables can alter the linearisation order of the content
without changing the visual appearance. However, bear in mind that
nesting tables within each other will considerably exacerbate any
accessibility problems of layout tables.
Since accessibility checkers cannot determine whether a table is used for data or layout, they are unlikely to detect improper use of structural markup (unless they note all uses of structural markup as possible problems). Likewise, they cannot check linearisation as this requires knowledge of the content's structure.
The Web Page Backward Compatibility Viewer allows table display to be disabled to check linearisation. Text browsers such as Lynx have limited table support, which can assist checking, and the Opera browser has a function to disable table viewing.