Comparison Table - Accessibility & Handover

Table content setup

To make the table accessible and easy to navigate with assistive technology, more information than is visible to the user needs to be defined. Each row needs a defined row header (highlighted below in blue), so screen reader users can skim the table content easier.

Navigating the Comparison Table with a screen reader

Screen readers will read the table cell by cell as the user navigates through it.

Option 1 — Navigating row by row

The user can travers the table horizontally (row by row). In this case, the screen reader will repeat the table header on each row, before reading out the cell value.

Option 2 — Navigating column by column

The user can travers the table vertically (column by column). In this case, the screen reader will repeat the row header when switching between columns, before reading out the cell value.

Example

This example describes two possible ways of navigating through the below table:

Requirements for development handover

When handing a table over to an engineer, it’s important to make sure the table is well documented so the engineer has everything they need to ensure complete and proper accessibility support.

Checklist for development handover

1. Provide a title (row header) for each row.

2. Provide alt text for all images. If they’re purely decorative make a note that they need an empty alt tag.

3. If you’re using a collapsible header, specify what content the full and collapsed versions should contain.

Example one – Sky Glass Comparison

Example two – TV Packages