Accessibility in tables
Screen readers do have a table reading mode, which can decipher tables that have correct markup
Two types of HTML tables
Data Tables
Lists of numbers in columns, statistical purposes
Layout Tables
Tables for web page design layout let you place content across and down the page. Allows side-by-side content
- The use of spanned rows and columns can make tables difficult to understand when they are read in linearized mode by a screen reader.
- The screen reader ignores HTML markup.
- Example:
Checking for good table linearization
- The Wave Validator lets you see how the table will be read.
- The Opera browser lets user turn tables off completely.
top
Designing tables for accessibility
- Use <th> tags to identify column and row headers
- Use liquid layout (% table and column widths). You can simulate effect of screen magnifier in Opera browser, but changing size up to 1000%
- Use simple table configuration
Data Tables
- Use <th> tags to identify column and row headers
- Associate data cells with appropriate headers via "scope" attribute of <th> tag: Example
<th scope="col">Name</th>
<th scope="row">Barbara</th>
- Or use headers and id attributes of <th> tags to group information in table.
Example:
<th id="jackie">Jackie</th>
<td headers="birth jackie age">5</td>
<td headers="birth jackie birthday">April 5</td>
- Use <caption> tag to provide table names or titles.
- AccessibilityUse summary attribute of table tag to describe what is in table.
- Or use text following table to describe what it means.
- Avoid spanned columns and rows because older screen readers have difficulty with them.
- Avoid nested tables or tables with more than two levels of headers or column headers
top
Readings
