Skip to main content

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

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:

Presidents of Stanford University
Name Start Year End Year
David Starr Jordan 1891 1913
John Casper Branner 1913 1915
Ray Lyman Wilbur 1916 1943
Donald B. Tresidder 1943 1948
J. E. Wallace Sterling 1949 1968
Kenneth S. Pitzer 1968 1970
Richard W. Lyman 1970 1980
Donald Kennedy 1980 1992
Gerhard Casper 1992 2000
John Hennessy 2000 2016
Marc Tessier-Lavigne 2016 Present

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.

Presidents of Stanford University
Name Start Year End Year
David Starr Jordan 1891 1913
John Casper Branner 1913 1915
Ray Lyman Wilbur 1916 1943
Donald B. Tresidder 1943 1948
J. E. Wallace Sterling 1949 1968
Kenneth S. Pitzer 1968 1970
Richard W. Lyman 1970 1980
Donald Kennedy 1980 1992
Gerhard Casper 1992 2000
John Hennessy 2000 2016
Marc Tessier-Lavigne 2016 Present

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.

Last modified