DES 6.1 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:
    • The developer will code these specially (using a <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;
  • Write a Summary - to explain the contents of the table and provide orientation to people who listen to the table:
    • The developer will code this into the table - it will only appear by request and not be visible by default.

Note: You need to specify this information on the design specification that you pass to the developer - only you know the exact purpose and, therefore, appropriate headings, title (caption) and description (summary) for the table.

Examples