Comparison Table - Accessibility & Handover
Navigating the Comparison Table with a screen reader
Screen readers will read the table cell by cell as the user navigates through it.
Navigating row by row
If the user is traversing the table horizontally (row by row), the screen reader will repeat the Column Header with each cell, before reading out its value.
Navigating column by column
If the user traverses the table vertically (column by column), the screen reader will repeat the Row Header with each cell, before reading out its value.
Example
This example describes two possible ways of navigating through the below table:
A) Navigating row by row
Detection & Alerts
Sky Protect, available
Other home insurers, not available
Smart Home Systems, available
Home Emergency Cover
Sky Protect, available
Other home insurers, may be additional cost
Smart Home Systems, not available
B) Navigating column by column
Sky Protect
Detection and Alerts, available
Home Emergency Cover, available
Other home insurers
Detection and Alerts, not available
Home Emergency Cover, may be additional cost
Smart Home Systems
Detection and Alerts, available
Home Emergency Cover, not available
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 a development handover
- If you're using a collapsable header, make sure this is specified and documented, otherwise all the information will be repeated each time the screen reader reaches the header row.
- If your content rows don't have a row header, you still need to provide content for them as they're still there in the code and need relevant content.
- Provide alt text for all images, if they're purely decorative you need to state that they require an empty alt tag.
- Provide information on type of table (i.e. comparison table with sticky first column, or basic table) and any additional instructions on formatting.
Example 1 - Comparison table for broadband
This table has a collapsable header, so it's important to show the developer both the full header and the collapsable header content.
Example 2 - Comparison table for broadband upgrade
This table has hidden row headers, so it's important to document them so the developer knows what needs to sit in the aria tags.
Example 3 - Comparison table for Sky Glass
This table needs additional notes to specify that the Sky option should always be on display and that the border needs to be formatted in a certain style.
It’s very time consuming to change the border colour in Figma, therefore we recommend using the default style and annotating which style should be used in development instead.
