Data Tables

Data tables are accessible to the visually impaired as long as you follow a few simple rules:

  • Provide a table summary
  • Use table headings
  • Use the scope attribute

The procedure

  1. If you haven’t already done so, download the WAVE toolbar for firefox.

  2. After restarting Firefox, the following toolbar will appear at the top of the browser window:

    screen shot of webaim toolbar
    3. Click on the Errors, Features, and Alerts icon wave error menu bar icon on the menu bar.
  3. The web page will be refreshed, and you will see that accessibility icons have been added to the page:

    screen shot of wave accessibility icons on web page
  4. Information about the table structure appears next to each table cell. Check to make sure that the table header is present and the row and column headings are marked as scope="row" and scope="col", respectively.

  5. Click on the WAVE Reset Page button wave-reset on the menu bar to clear the icons off the page.

  6. Data tables should also have a table summary explaining the purpose of the data table. You may check this by visual inspection of the code or by using the Firefox Accessibility Extension. Let’s use this extension as well to examine the table. If you have not downloaded the Firefox extension, do so now, install it, and restart Firefox.

  7. To use the Firefox extension to check the table structure, select the Data Tables menu item from the Navigation drop-down menu:

    screen shot of web accessibility toolbar table menu pick
  8. A popup window will appear over your existing web page listing any accessibility errors in the table:

    screen shot of web accessibility toolbar table popup window
  9. Click on the data table heading title for the table you wish to examine in the Data Tables pane. If no title is present, the generic “Table 1: (no title)” will be displayed.

  10. Navigate through the selected table’s cells (which will be highlighted in yellow on the original web page) using the directional keys at the bottom of the List of Data Tables window.

  11. Make sure that the correct associated heading and row and column information is displayed for each cell.

On the above screen shot, the table summary is missing, but the table is set off with a proper <h1> heading, making it obvious what the table’s purpose is. Also, the complex heading information is executed perfectly on this page. The Firefox add-on is a bit more cumbersome to use than the WAVE tool for table inspection, but it has the advantage of displaying specific information for each cell.

View the tables best practices page for more information on correct table coding.

back to top