Module 1 | Canvas | Tables Overview
Pretend for a moment that you are a screen reader. You are going to the web version of the fall class schedule to find out where the Biology-115 class is going to be held. You navigate to the 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, 110, 1, 15, 13, 5, Mon, Wed, Fri, 10:00, 11:00, Madge, 110, 2, 15, 7, 5, Tue, Thu, 11:00, 12:30, Indge, 115, 1, 15, 9, 6, Tue, Thu, 9:00, 10:30, Madge, 315, 1, 12, 3, 6, Mon, Wed, Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon, Wed, Fri, 9:00, 10:00, Roberts, 410, 1, 10, 9, 13, Mon, Wed, Fri, 8:00, 9:00, Rasid.
After listening to this information, do you have any idea where Biology-115 is going 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 properly formatted. This is the challenge that students using screen readers face - if not accessibly designed, tables produce non-sensical information making it impossible for students to understand the content being presented. Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers.
If a table is used in your course content it must include cell and row properties as well as a caption describing the purpose of the table.
People using screen readers can have the row and cell headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn't lose context. Additionally, blank cells in a table could also mislead someone using a screen reader into thinking that there is nothing more in the table.
One header
This image is an example of a table with one row designated as the header. You could also select one column to be the header if that were appropriate.
Two headers
This image is an example of a table with a row and a column designated as headers.
Caption
This image displays the caption at the top of the table, which should provide a brief title or purpose for the content of the table.
Data Tables vs Layout Tables
There are two basic uses for tables on the web: data tables and layout tables. The originally intended use of HTML tables was for tabular data like a price list or a spreadsheet. A table is a data table when row and cell properties, or both, are present (similar to the examples on this page). Unfortunately, tables are also sometimes used for page layout. Layout tables do not have logical headers that can be mapped to information within the table cells, and for this reason, it is generally recommended that the use of tables for layout purposes be limited.
Tables used for layout/design purposes often cause accessibility issues, especially when students are using screen readers. Limit the use of tables to displaying tabular data, not for adjusting page layout.
Please navigate to the next page to learn more about formatting accessible tables.