Cookies

We use cookies to ensure that we give you the best experience on our website. You can change your cookie settings at any time. Otherwise, we'll assume you're OK to continue.

Durham University

Computing and Information Services

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).

Misusing structural markup that applies to data tables can cause severe accessibility problems as the browser tries to interpret part of the layout as a header.

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 meet.

Ensuring that tables linearise successfully requires thought about the order of elements in the table cells. Use of the colspan and 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.

Checking

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.