2.10 Do not use structural mark-up to format information laid out using tables
Contents
WAI checkpoint 5.4
Full WAI text: "If a table is used for layout, do not use any structural mark-up for the purpose of visual formatting." A table is an HTML element which can be used to present information in tabular format or to control the visual presentation of a web page. Do not define information contained in table cells as structural elements purely to achieve a visual effect if the table is used to control the layout a page.
Defining the text content of a table cell as a column heading so it displays as bold text is an example of misusing structural mark-up to achieve a visual effect.
Rationale
People who can visually scan a page that is laid out with tables can determine the structure of information by visually identifying and comparing structural elements - row and column headers, headings and subheadings. However, people who use a text-only browser or who can't see the page rely on an accurate description of structural elements to gain an understanding of it's structure.
If content items are incorrectly identified as structural elements in the underlying HTML, the page structure will not make sense when it is presented by a text only browser or screen reader.
Directions and Techniques
Separate structure and presentation
Design the structure of documents or web pages before thinking about how they will be presented to the user. Consider how the page will be read by a screen reader or with tables linearised. Refer to WAI Recommended Techniques for separating structure and presentation
How you could check for this:
Read tables in a text-only browser
A text only browser, such as Lynx will show you how the page renders when the table is linearised. Opera is a web browser which allows you to linearise tables and this can also be used. Read the content of the table to see if it makes sense when linearised.
Test the table with a screen reader
Some screen readers don't cope well with tables and it is best to read the content of the table with one of these to see how the content reads when the table is linearised.
Guidelines for Web Accessibility - Priority 2- 2.1 Ensure that images have sufficient contrast for people with colour deficient vision
- 2.2 Avoid causing content to blink
- 2.3 Avoid movement in content
- 2.4 Ensure that dynamic content is accessible or provide an alternative presentation or page
- 2.5 Use style sheets to control layout and presentation
- 2.6 Use relative rather than absolute units
- 2.7 Use header elements to convey structure
- 2.8 Break up large blocks of information where appropriate
- 2.9 Ensure that information laid out using tables make sense when linearised, or provide an alternative equivalent
- 2.10 Do not use structural mark-up to format information laid out using tables
- 2.11 Describe the purpose of frames and how they relate to each other if it is not obvious by their titles alone
- 2.12 Clearly identify the target of each link
- 2.13 Provide information about pages and sites in metadata
- 2.14 Provide information about the general layout of a site
- 2.15 Use navigation mechanisms consistently
- 2.16 Associate labels explicitly with their controls
- 2.17 Properly position the labels of form controls
- 2.18 Ensure that user interfaces are device-independent
- 2.19 Use logical event handlers in scripts
- 2.20 Use input device-independent event handlers in scripts and applets
- 2.21 Ensure that scripts and applets are accessible
- 2.22 When an appropriate markup language exists, use markup rather than images to convey information
- 2.23 Create documents that validate to published formal grammars
- 2.24 Mark up lists and list items using the proper HTML tags
- 2.25 Use quotation mark-up for quotations, but not for formatting
- 2.26 Where possible, use appropriate W3C technologies of the latest supported versions
- 2.27 Avoid deprecated features of W3C technologies
- 2.28 Do not periodically auto-refresh pages
- 2.29 Do not use mark-up to redirect pages automatically
- 2.30 Do not generate pop-ups or other windows and do not change the current window without informing the user
