V8 background

Data tables: simplify and markup with special HTML

Whenever possible, data tables should be avoided as they often do not respond appropriately on smaller devices such as mobile phones, however when data tables are in use, they should appear in the simplest form possible - this makes it easier for all people to understand, particularly those using adaptive technology (e.g., Screen reader users). 

  • Use the simplest 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).
  • Specify additional information that the developer will code for added accessibility:
    • Identify header rows and columns:
      • 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).