Pan of gold nuggets Tables Pan of gold nuggets

This page demonstrates coding techniques to make tables accessible and usable for all.


Table Examples

Key Points for Accessible Tables

  • If possible, avoid spanned cells and multiple levels of header cells.
  • Correct use of <th>, <tr> and <td> is required.
  • Column and row headers should use the appropriate scope indicator. Examle <th scope="col">

The following examples explore various accessible and non-accessible tables. We provide ways that properly display the tables, and allow screen readers to announce table headings, captions, and data.

Table Examples: Not Accessible

Table With No Caption Using No Styles

Not Accessible
First Name Last Name Age
Jill Smith 50
Eve O'Hara 94

Table With Caption Using style="hidden;"

Not Accessible
First Name Last Name Age
Jill Smith 50
Eve O'Hara 94


Table Examples: Accessible

Table With Caption Using style="indent:9999;"

Accessible
Table With Indented Caption
First Name Last Name Age
Jill Smith 50
Eve O'Hara 94

Table With Caption Using class="sr-only"

Accessible
Table with caption using sr-only class
First Name Last Name Age
Jill Smith 50
Eve O'Hara 94


JAWS Table List

Figure 1 below demonstrates what JAWS displays when pressing CTRL-INS-T.

Screen capture of JAWS table list
Figure 1: JAWS Table List

Gold NuggetAdditional Considerations for Accessible Tables

The accessible table examples above are enhanced with the use of scope indicator for column headers and rows. See the articles below for detailed information on additional accessibility considerations.

Gold Nugget The W3C Web Accessibility Caption and Summary tutorials can be found here: Caption & Summary tutorial.

Gold Nugget WebAIM Article: Creating Accessible Tables can be found here: Creating Accessible Tables.

Gold Nugget The W3C Web Accessibility Guideline for using caption elements to associate data table captions with data tables can be found here: H39: Using caption elements to associate data table captions with data tables.

Gold Nugget The final table example above also makes use of some additional markup as suggested here: Under-Engineered Responsive Tables article can be found here.