CP 10 Data tables: simplify and mark up with special HTML

Recommendations

• Use the most simple data table possible:
  • Split single, large, complex data tables into multiple, smaller, simple ones:
    • The vast majority of complex tables can be made into simple tables;
  • If possible design so that the table reads out logically row by row and the data values themselves are indicative of their values (see the 'important birthdays' example);
  • Avoid unnecessary rowspan and colspan if possible:
    • Some screen readers have problems with these although modern ones can now cope.
• Specify additional information that the developer will code for added accessibility:
  • Identify header rows and columns:
    • These will be inserted as special tags (called <th> tag),
    • Some screen readers (most modern ones) can use this information to read out the header rows and columns before the data - this helps avoid people getting lost in long tables;
  • Specify a caption to describe the nature (title) of the table:
    • If your system cannot handle captions, make sure you just give the table a good title in normal text;
  • Write a Summary to explain the contents of the table and provide orientation to people who listen to the table:
    • The summary can be coded into the table to provide more information to people who may require it (e.g. screen reader users).

Note: If you are passing your pages onto someone who publishes your content to the web, you need to specify this information somewhere on the content that you provide - only you as the content provider know the exact purpose and, therefore, appropriate headings, title (caption) and description (summary) for the table.

Examples