Rationale
Tables can be used for either layout or data. Data tables are those that contain information which requires a row and/or column headings in order to understand content within the table. Examples of data tables include schedules, timetables and calendars.
Data tables can primarily cause a problem for people who use screen readers or braille displays. If a data table does not have structured row and or column headings, captioning or a summary, it can be confusing to navigate.
People who use screen magnification software tend to have trouble comprehending a data table if it is large. The same is true for people with cognitive problems such as dyslexia. In general, long complex tables are difficult for everybody, especially on the web.
Tables that use fixed values for widths may cause sideways scrolling for people who use lower screen resolutions, making it difficult or impossible to check where they are in the data. Fixed values for row heights may mean that cell contents may become unreadable if the user chooses a large font size.
Techniques
-
Provide table headings using the <th> tag to mark up row or column headings. These will then be picked up by screen reader or Braille output software and the user can be made aware of which text is a heading and which text is data within the table.
-
Use valid HTML many table attributes are now deprecated in favour of Cascading Style Sheets (CSS). Where possible avoid using these, this will result in your tables rendering better in newer releases of browsers and mobile technologies.
-
Complex data tables are defined by the WAI as having two or more logical levels. While these are relatively easy to follow with the eye it can be complex for screen reader and braille output users.
A number of coding techniques can be used to help users understand the tables:
<caption> can be used to explain the relationship between cells such as those with nested headings or spanning columns.
<scope> can be used to identify the headers of a row or column when there are several layers within the table. This will allow browsers and access technology to select data from a table by filtering on categories.
<abbr> can be used to provide short abbreviations for long headers. This is important as the header of a row or column is repeated by a screen reader as it works it's way through the table.
<thead>, <tbody>, <tfoot>, <colgroup> and <col> can be used to provide proper structural markup for tables that repeat header and footer elements.
-
Use of colour as background for alternate rows can make a data table a lot easier to follow for sighted users, users with poor vision, dyslexia and cognitive problems. Colouring alternative rows simply makes the data easier to follow with the naked eye.
-
Use flexible sizing (for example per cent - %) values for the sizes of a table and it's elements. This ensures that if a user enlarges text in the web page via their browser that the data table will scale with the text. If the data table is coded using fixed (for example pixel - px) values and the text using relative, then the enlarged text will overlap line by line within the data table.
-
Table summaries are a useful way of providing additional useful information for users with speech and braille output as well as text-based browsers. A summary attribute can explain the relationships between cells, such as how many headings there are, columns and rows i.e.
<TABLE SUMMARY="This table is a monthly calendar for January with column headings for the days of the week.">
This gives a screen reader user a contextual overview of the data table and helps with navigability. The key is to not replicate all the information contained in the data table in the summary but simply give a structural overview so a user knows what to expect.
Testing tips
Verify that table rows and columns have TH coded around headings, visually check that your table is easy to follow with the eye. Ensure that the base font size is not too small and that the table enlarges together with the text when it is resized in the browser.
-
Accessibility toolbar - Go to Structure - Simple Data Table or Complex data table and check for TH and summaries. Alternatively go so Structure - Show Table Headers.
-
Browser - Go to View - Source. Edit - Find <TH.
Further information
Compliance with WCAG 1.0
-
5.1 For data tables, identify row and column headers. Priority 1
-
5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. Priority 1
-
5.5 Provide summaries for tables. Priority 3
-
5.6 Provide abbreviations for header labels. Priority 3
For more information on techniques visit the
Web Accessibility Initiative techniques page.