Accessible Complex Tables

Simple Tables

Simple tables are generally easy to use with screen readers because table structure is predictable and repetitive. Just remember to use:

  1. aria-labelledby
  2. aria-describedby
  3. role
(If the above seems foreign to you, check out this post: Intro to ARIA

Here's an example of one:



Complex Table

Complex tables are tables with:
  1. Nested rows or columns
  2. Where a heading isn’t at the top of the column or to the left-most of a row
Visually impaired users use screen readers to understand table structure as well as the table values. When going through a complex table it can be difficult to follow along with the structure. For the screen reader to correctly interpret your intended meaning, follow these tips:
  • Give all th (table header) tags:
    • id attribute - unique identifier
    • scope attribute - values: col or row
  • Give all td (table data) tags a headers attribute with space-separated id’s of its related headers
  • Use the abbr tag (abbreviation), to define abbreviations
ex:



References:
  1. Aria Roles
  2. Marking up Tables Properly - University of Washington
  3. Web Accessible Tables - University of Washington

Comments

Popular Posts