Tables - Information For This Demo

Quick tips for data tables:

  • Always label your data tables so a screen reader user knows what is in the table. This can be done with a caption tag or an ARIA label.
  • Always provide either column headers or row headers in your data tables. (Use the TH tag to code table headers.)
  • Never merge data cells in a data table.
  • Avoid merging header cells when possible. Complex table structures require extra care when coding.

Quick tips for layout tables:

  • Never label a layout table.
  • Never use a table header tag (TH) in a layout table.
  • Be very careful when using layout tables. They can easily mess up your tab order and the screen reader's reading order.
  • Consider using role="presentation".

How to test this issue

  • Test technique: Data Table bookmarklet.
    • The Data Table bookmarklet will show you where table tags are used in a page. The borders of the tables are shown, along with any captions and header cells.
    • Confirm that no caption is provided for layout tables.
    • Confirm that th tags are used for column or row headers in data tables, but are not used for any content in a layout table.
  • Alternate test technique 1: WAVE.
    • WAVE shows the existence of tables, with icons showing layout table or a data table, captions, and header cells. (These icons are more difficult to interpret than the Data Table bookmarklet.)
    • Confirm that the data table icon is displayed for data tables, and the layout table icon is displayed for layout tables.
    • Confirm that the th tag is shown for column or row headers in data tables, but are not used for any content in a layout table.
  • Alternate test technique 2: JAWS.
    • Press T to tell JAWS to jump to the next table on the page. Confirm that a caption is announced rather than the entire first row of the table.
    • For layout tables, confirm that JAWS announces all content in the correct reading order.
    • For data tables, use JAWS table reading keys to move through the table. Confirm that JAWS announces column headers when changing columns, and announces row headers when changing rows.

Failing WCAG Guidelines and Test Tips

For the data table, the following WCAG guidelines fail:

  • 1.3.1: Info and Relationships

For the layout table, the following WCAG guidelines fail:

  • 1.3.2: Meaningful Sequence