DES 6.1 Data tables: simplify and mark up with special HTML

Data tables should appear in the simplest form possible - this makes it easier for all people to understand, but particularly for those using adaptive technology (e.g. Screen reader users).

Special HTML code also assists the accessibility of tables - you need to specify certain things so that the developer can insert this code.

  • 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.

Example summary and caption for the simple table shown below

summary="Important childrens' birthdays to remember. First column: child's name, second: child's age, third: date of birthday"

caption="Important Birthdays" - this is shown by default above the table - but can be moved.


Visual appearance of a simple table - caption appears above the table, the appearance of the column and row headers are distinctive