Page Content

A table can be classified as a data table whenever you need to specify a row or column with header information about that row/column. If no informational header is needed, then it is a formatting table.

Simple Tables vs. Complex Tables

A simple table here means means that there is a maximum of one header row and one header column where a header column specifies the type of information in the column. In addition, there are no merged cells within a simple table. Below are examples of simple and complex tables. Because screen readers present information linearly (i.e. table cell by table cell), it is generally easier to parse tables when they are set up as simple tables.

Simple Table (More Accessible)

Top 2008 Presidential Candidates by Party
(num) = Primary Delegate Count
Rank Democratic Republican
1 Barak Obama (1828.5) John McCain (1575)
2 Hilary Rodham Clinton (1726.5) Mike Huckabee (278)
3 John Edwards (4.5) Mitt Romney (271)

 

Complex Table (Less Accessible)

Top Presidential Candidates 2008
Democratic Republican
Name Del Name Del Name Del Name Del Name Del Name Del
Barak Obama 1828.5 Hilary Rodham Clinton 1726.5 John Edwards 4.5 John McCain 1575 Mike Huckabee 278 Mitt Romney 271

Mark Table Headers

When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in and what the data means. On the other hand, a screen reader can only read aloud each cell one by one from left to right top to bottom.

One way to help blind users process the information is to read out what row and column header the cell refers to. In the table below, the headers are the top row (color names) and the left column (language names).

Because the headers are properly tagged, the cell for noir is read as “black, French noir“. To learn the specifics of how to mark table headers in different software packages, please see the Related Links section.

Examples of Table Headers

Color Names in Multiple Languages
Color Spanish French Irish Welsh
Black negro noir dubh du
White blanco blanc bán gwyn
Red rojo rouge ruadh coch
Blue azul bleu gorm glas
Green verde vert glas gwyrdd
Yellow amarillo jaune buí melyn

Note: Gray cells with bold, centered text are headers.

In Screen Readers

Because this table contains TH tags
with the proper SCOPE definitions, a screen reader user tabbing through the second row may hear something like thisL

black,
Spanish: negro
French: noir
Irish: dubh
Welsh: du

Don’t Merge Cells

Even with headers properly marked, if cells are merged, a screen reader could find it difficult to determine which cell when cells become merged. Therefore it is recommended not to merge cells.

Titles (Captions) for Tables

It is also good practice to provide titles for tables, even for sighted users. This is sometimes also called a “caption.”

Export Excel Data to HTML Tables

If you need to export Excel data to accessible HTML tables, then you may want to use the College of Agricultural Sciences Convert Excel tables to HTML. This tool allows you to cut and paste data from Excel, add captions and summary text then have it converted to HTML.

Even if you don’t know much about HTML, you can cut and paste this code into the HTML view of any online blog, content manager or an HTML editor such as ANGEL.

WCAG 2.0 Guidelines

The following WCAG 2.0 Guidelines can be addressed by using the techniques above.

WCAG 2.0 Guideline 2.4.6—”Headings and labels describe topic or purpose.”

WCAG 2.0 Guideline 1.3.1 – “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.”

Top of Page