---
title: "Comparison Table — Accessibility & Handover"
canonical: https://sky-ui.cf.sky.com/components/comparison-table/accessibility
---

# Comparison Table — Accessibility & Handover

To compare options like product offers, features or price plans.

## 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**<br/>
Sky Protect, available<br/>
Other home insurers, not available<br/>
Smart Home Systems, available

**Home Emergency Cover**<br/>
Sky Protect, available<br/>
Other home insurers, may be additional cost<br/>
Smart Home Systems, not available
  ### B) Navigating column by column

**Sky Protect**<br/>
Detection and Alerts, available<br/>
Home Emergency Cover, available

**Other home insurers**<br/>
Detection and Alerts, not available<br/>
Home Emergency Cover, may be additional cost

**Smart Home Systems**<br/>
Detection and Alerts, available<br/>
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

### 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.