Spring 2020 classes have resumed online.Please visit
dcccd.edu/coronavirus for additional information and to
learn how to prepare for online classes.
Tables are a great way to organize data. They're also easy for screen readers to read if you follow the guidelines below for making them accessible.
Important: In most cases, you should avoid using tables just to make the layout of a page look a certain way. It's best to only use tables when presenting rows and columns of related information.
The first row of the table should state what kind of information is contained in each column (rows go across and columns go down). This provides context for the data and assists screen readers in navigating the table.
Example of a simple accessible table with a header row:
Note: Like headings, header rows also require a little extra formatting to be meaningful to screen readers. You will need to label the table's header row within the website or software you're using. For more information, see How Do I Create an Accessible Table.
Avoid tables nested within other tables. Also avoid merged or split cells. All of these will make it very difficult, if not impossible, for screen readers to read the information in the table aloud in a way that makes sense.
In the table above, the “Tests” and “Projects” rows are made of 3 merged cells. The “Group Project” information contains a split cell in the “Due Date” column. When a table does not have the same number of rows and columns throughout, it will be difficult for screen readers to read, and the cells may be read out of order.
It can be time-consuming to
read a table with a screen reader. Use alt text to add a short summary of the information provided in the table so that screen reader users can decide if they want to read the table in its entirety (see tutorial links below for instructions).
You should never leave the left uppermost cell blank, as it's the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there's nothing more in the table.
Build a table in your document, website or eCampus textbox rather than just including a screenshot. A screen reader can't read an image, so a person using a screen reader won't know what data is contained in a screenshot of a table.
Tip: Not sure if your table is a screenshot or not? Try selecting just the text in one particular cell of the table. If you're not able to select the text, it's just an image of a table and it is not accessible.
The following tutorials demonstrate how to make an accessible table:
Note: Never use tabs or spaces to create the appearance of a table. You need the actual structure of a table as described above in order for the content to be accessible.