1.10 For complex data tables, use mark-up to associate data cells and header cells
Contents
WAI checkpoint 5.2
Full WAI text: "For data tables that have two or more logical levels of row or column headers, use mark-up to associate data cells and header cells."
A data table contains information which is presented in tabular format, e.g. financial accounts, timetables, etc. Row and column headers describe the contents of table cells, providing context for the information contained in the table as a whole.
Headers must be defined by inserting the correct HTML attribute, which indicates the table structure in a non-visual way.
When the information contained in a table is organised in a structural hierarchy with headings and subheadings, it is said to have 'logical levels'. Each heading and subheading corresponds to a logical level.
You must define the structural hierarchy of the headers and their relationship with the data cells of a table.
Note: Tables are also used to control the layout of images and text on a web page. Tables used solely for this purpose are not data tables and do not require row and column headers.
Rationale
People who can scan a table visually make sense of the information structure by visually comparing row and column headers with the contents of the table cells. However, users of text-only browsers or screen readers rely on the headers to gain an understanding of the table structure.
If the relationship between headers and data cells is not correctly identified in the underlying HTML, the contextual information required to make sense of the structure of a table will be lost when it is read by a text only browser or screen reader, rendering the information in the table useless.
Directions and Techniques
Use the correct HTML mark-up for building tables
When writing HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data. See the WAI recommended techniques on good HTML practice for defining logical relationships in tables
How you could check for this:
Test the page with a screen reader or an audio web browser
Doing this will tell you if the page is correctly coded as the speech synthesiser will read the contents of the table with the correct structure.
Guidelines for Web Accessibility - Priority 1- 1.1 Provide a text equivalent for every non-text element
- 1.2 Ensure that information does not rely on colour perception
- 1.3 Avoid causing the screen to flicker
- 1.4 Provide an auditory description of the visual information in multimedia presentations
- 1.5 For multimedia, ensure that timing of alternative descriptions is synchronised with the presentation
- 1.6 Use the clearest and simplest language appropriate
- 1.7 Identify language changes in text
- 1.8 Ensure that equivalents for dynamic content are updated when the dynamic content changes
- 1.9 For data tables, identify row and column headers
- 1.10 For complex data tables, use mark-up to associate data cells and header cells
- 1.11 Add titles to frames
- 1.12 Ensure that documents can be read without style sheets
- 1.13 Provide text links to emulate server-side image maps
- 1.14 Use client-side image maps rather than server-side image maps where possible
- 1.15 Ensure that scripts and applets that provide the only source of important functionality are directly accessible or compatib
- 1.16 Ensure that pages are usable without support for scripts, applets, or other programmatic objects
- 1.17 If you cannot make a page accessible, provide an equivalent accessible page
