Where It's AT – Assistive Technology Blog

Simplify Data Tables

Accessibility of data tables can be achieved by identifying table headers and defining whether they are row or column headers (for example, <th scope=”col”>). Complex tables (those that have more than one level of row or column header, or spanned data or header cells) can easily become too complex for screen reader users to comprehend even though markup may technically provide the necessary associations between data cells and headers. Consider a table where 3 or 4 or more headers are identified for each data cell; understanding the relationships between the data and the appropriate headers can be difficult for users, especially for users that cannot see the table. When possible, simplify or ‘flatten’ data tables so that there is no more than one row and column header for each data cell.

Layout Tables

Tables in HTML are intended for tabular data. Although using tables for page layout is not considered best practice, this typically has minimal impact on accessibility, as long as two primary guidelines are kept in mind. First, do not use any markup that is typically used to identify data tables. This includes table headers (<th>), <caption>, and <summary>. These tags are often used by a screen reader to detect the presence of a data table, which is read very differently. Second, the reading and navigation order of layout table content (based on the source code order) must be logical and intuitive (e.g., typically the same as the visual order).