Web Accessibility Testing

Data Tables

Definition

Accessible tables are semantically sound, using <th> and <td> to distinguish between headings and data.  Heading and data cells should include SCOPE, and ID or HEADERS to associate data with the correct headings.   Tables should also include a meaningful SUMMARY attribute, and a <caption> element to aid in describing the purpose of the table. 

Note: While valid HTML permits the use of tables for layout purposes, accessibility best practice suggests that semantic tables should be used for data presentation only.

Why is this an accessibility issue?

Some users are unable to perceive or recall multidimensional information, as in a table.  For these users, associating table headers and data cells, as well as summary information, can reinforce the purpose of a table, and help to make sense of the data.  Page layouts presented in table format can also present barriers to screen readers and keyboard users.

Testing Methodology

  • Ensure that the <table> tag includes an appropriate summary
  • Check for the presence of a <caption> tag inside the <table>;
  • Review row and column headers for use of the <th> tag, with SCOPE attribute;
  • Review data cells for use of the <td> tag;
  • If <th> elements use ID, ensure that <td> uses corresponding HEADERS attribute;
  • Examine the table in a screen reader (or linearize the table) to ensure that table content makes sense when presented linearly;

Tools

  • NVDA/JAWS/VoiceOver (Screen reader)
    • Yields text-to-speech rendering of table
  • JuicyStudio Toolbar (Table Inspector)
    • Creates overlay to expose table headers and summary
  • Web Developer Toolbar (Information/Display Table Information)
    • Displays table headers and summary
  • WAVE Toolbar (Structure/Order)
    • Reveals scope and reading order of table

Conformance

A table meets accessibility guidelines if:

  • The purpose of the table is the tabular presentation of data;
  • Headers and data cells are marked up correctly;
  • All of the component parts include appropriate, descriptive attributes;
  • The SUMMARY attribute and <caption> tag are present, and descriptive;
  • No other barriers are presented by the use of the table