Using Tables Effectively

If you're not a screen reader user, let's pretend that you are for just a moment. You're going to a web site to find out where the biology 205 class is going to be held. You go to a web page that has this information, and this is what you hear:

Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

After listening to this information, do you have any idea where biology 205 is supposed to be held? Probably not. When you listen to tables straight through, without going into table reading mode in a screen reader, this type of information can be quite confusing. Even when you do go into table reading mode, it can still be confusing if the table is not marked up properly.

© WebAIM Used with permission http://webaim.org


Using tables is a common way for teachers to design their content without having to learn any complicated HTML or CSS coding for styling their pages. They're easy to manipulate and move content around. The problem is how a screen reader might interact with them.

Continue reading this table accessibility introduction to see how a screen reader breaks down the text in a table for the listener. There are tips for different types of tables and how they might be displayed. Whenever possible, try to avoid using tables for design purposes. Keep it simple.

The following video demonstrates how to update an existing table to make the column headings accessible. 

Check out Web Accessibility in Mind for a deeper dive into accessibility issues in tables and how to fix them. Column Headers aren't the only thing that you need for table accessibility, sometimes the headers are defined in rows, sometimes table design is necessary for conveying information. Reviewing the information at WebAIM will show you what is and isn't appropriate.


This work on Table Accessibility by Jon Fila at Intermediate District 287 is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Last modified: Thursday, January 11, 2018, 12:25 PM