Table Accessibility Principles for Websites

A key step in ensuring an accessible workplace is to ensure that all web resources used by employees and jobseekers are accessible. And because tables are used in structuring many webpages, you’ll want to be sure that yours are correctly formatted.

Table accessibility is important to people with the following disabilities:

• Blindness
• Low vision
• Cognitive disabilities

When presented meaningfully, tabular content is of benefit to many users and can increase a person’s cognitive ability to understand complex information. When tables are used in an accessible manner, they can also support and add meaning to page content. For example, the information conveyed in a graphical image can be difficult to adequately represent in the ALT attribute but if the alternative is provided in an accessible data table the equivalent information is then fully accessible to a screen reader user.

Descriptive and meaningful headings should be provided for information presented in data table format. All users benefit from this. In addition, when data tables are coded using TH, ID, SUMMARY and CAPTION, the accessibility of tabular data for users of assistive technology devices (such as screen readers) is also greatly improved.

To effectively assess the accessibility of a table it is first necessary to identify the nature or purpose of the table. There are two types of tables commonly used:

• Data tables are used to present tabular data, often numeric, in an easy to understand format. The meaning of a piece of content is affected by its relationship to the table column and row headings
• Layout tables are used to present, space or “lay out” page content and can be purely decorative. The arrangement or position of information within a layout table should have little or no bearing or impact on its meaning.

Data tables

Data tables should only be used to present data. In order to understand the data in the table, column and row headings are required. Data tables can be simple or complex.

Simple data tables

A simple data table can be thought of as having one row of column headings and/or one column of row headings:

The text “Number of staff, by location and year” is the title of the table. In the code, this table also needs a summary, which summarizes the results. A valid summary for this table would be:

“Number of staff in Arlington, Alexandria, Bethesda and Fort Lincoln in 2014, 2015 and 2016. Arlington has the largest number of staff increasing from 402 in 2014 to 416 in 2016. Alexandria has the smallest number of staff increasing from 35 in 2014 to 51 in 2016. Staff numbers increased in all locations from 2014 to 2016.”

Complex data tables

A complex data table may have multiple columns or row headings nested within other columns or rows:

The text “Number of staff, by location, quarter and year” is the title of the table. In the code, this table also needs a summary, which summarizes the results. A valid summary for this table would be:

“Number of staff in Arlington, Alexandria, Bethesda and Fort Lincoln in 2014, 2015 and 2016, broken up by quarter. Arlington has the largest number of staff increasing from 402 in Quarter 1, 2014 to 419 in Quarter 4, 2016. Alexandria has the smallest number of staff increasing from 35 in Quarter 1, 2014 to 53 in Quarter 4, 2016. Staff numbers increased in all locations from 2014 to 2016.”

How to create accessible data tables

Many Content Management Systems automate the required coding for data tables. If they don’t, you will need to add specific HTML code to your table.

1. Identify the table headers in your table.
2. Write the caption (or title) for the table.
3. Write the summary for the table. Remember, the summary must summarize the important information in the table.
4. Open the code. In the code, the beginning of a row is specified with a TR. The beginning of a data cell within a row is specified with TD. The end of the data cell is specified with /TD.
5. Find your first table heading and change the TD to a TH
6. Change the /TD to a /TH
7. Repeat steps 5 and 6 for all table headings.
8. At the beginning of the table will be the code <TABLE …>. Immediately after the word “TABLE” insert the text: SUMMARY=“add your summary here”
9. At the beginning of the table code, but at the end of the first close bracket (>) insert the following: <CAPTION=“insert your caption here”>

Note: Coding a complex data table (where row headers or column headers have two or more structural levels) using HTML is more complicated, and not covered here.

Layout tables

Layout tables are used to present, space or “lay out” a page. Layout tables are used to control the placement of content only. For instance, the content of each row of a layout table is meaningful when moving from left to right.

For example, a screen reader would read the following table as:

Name, Department of Labor, Website, www dot d o l dot g o v Phone 1 866 487 2365

Whereas, in the next example, the information is not presented meaningfully for a layout table and a screen reader would read:

Name, Website, Phone, Department of Labor, www dot d o l dot g o v, 1 866 487 2365

In this example the information should be coded in data table format.

How to ensure your layout table is presented meaningfully

No specific coding is required for a layout table; however, it is important that the table makes sense when read cell-by-cell, top-left to bottom-right.

Other issues around tables

Tables can often be manipulated easier than plain text on a webpage. Therefore, there are some issues you need to consider:

• Ensure all colors meet color contrast requirements. This can be tested with the Paciello Group’s Color Contrast Analyzer.
• Do not use color or shading as the only means to convey information. Instead, use text to convey this information. For example, you might use capital letters for emphasis, instead of different text color. However, once this information is in text, feel free to also use color to emphasize the information!
• Avoid asterisks and superscripts to indicate additional information is elsewhere. Instead use a link to convey this information.
• Do not use shapes only to convey information. Shapes, such as stars, bullets and crosses need to be coded in a specific way in order for screen readers to announce them.
• If you use a layout table to present complex information, such as a flowchart or an equation, make sure there is a text alternative available.

For more resources on accessible technology training, please visit Knowledge is Power: Training Your Staff on Accessible Technology Issues.

This page's content was drawn from "Tables" by AccessibilityOz, which was created with funding from the Australian Bureau of Meteorology. It is licensed under a Creative Commons Attribution Non-commercial license.