Accessible Data Tables

Tables are a great way to visually display lots of complex information in a simple way to understand. However, because they are a visual medium, tables can be difficult for users with disabilities to understand what is visually apparent about the information being presented. Creating accessible data tables that work for all users can be done for both the web and documents by paying attention to a few techniques.

Most of the examples presented here are designed to be the simplest version of an accessible table and can serve as the starting point for your tables.

Contents

Table Basics

• Table Basics
• Creating Accessible Tables
• Design Problems: Splitting and merging cells, and more.

Advanced Designs

• Column and Row Groups: Column or Row groups are headers that span multiple columns or rows.
• Headers and ID: Have a table design that doesn't fit any other structure? Using headers and ID values can create almost any structure if done properly.
• CSS/ARIA Table: Create an accessible table with using DIV elements.
• Sticky Headers: Have a table header remain fixed while the body scrolls.

Table Basics

Consider the following simple data table:

On a simple table like this, a user can understand the data by looking at two different 'headers' on the table. The first row are the column headers (Name, Start Year, End Year) and then each row has a row header (individual names). Using those two pieces of information, a user can visually determine quickly that Richard Lyman ended his presidency in 1980.

What is obvious visually needs to be obvious programmatically in order to be accessible — you must define certain cells as header cells. How you do that will depend on how you are creating your digital materials.