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
- If you haven’t already done so, download the WAVE toolbar for firefox.
- After restarting Firefox, the following toolbar will appear at the top of the browser window:
- Click on the Errors, Features, and Alerts icon on the menu bar.
- The web page will be refreshed, and you will see that accessibility icons have been added to the page:
- 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
- Click on the WAVE Reset Page button on the menu bar to clear the icons off the page.
- 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.
- To use the Firefox extension to check the table structure, select the Data Tables menu item from the Navigation drop-down menu:
- A popup window will appear over your existing web page listing any accessibility errors in the table:
- 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.
- 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.
- 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.