Accessibility

Seat

The Seat component has been designed with accessibility in mind.

It can be used with keyboard navigation, and it includes the following properties that allow to improve the experience for users of assistive technologies:

Name	Type	Description
aria-labelledby	`string`	Id(s) of elements that announce the component to screen readers.
title	`string`	Adds the `title` attribute to the rendered SVG element. Announced by screen readers after the `aria-labelledby` element(s).
description	`string`	Adds the `description` attribute to the rendered SVG element. Announced by screen readers after the `title` value.

All the props above are optional, but recommended to use to ensure the best experience for all users.

The aria-labelledby prop can reference multiple ids, separated by a space. The elements with those ids can be hidden, so that their text is only announced by screen readers.

The title and description props are used to provide additional context to the rendered SVG element that visually represents the seat. They are also announced by screen readers.

The conjugation of these properties allows to provide a detailed description of the seat to users of assistive technologies.

For example, the following code snippet shows how to use these properties:

<p id="l1" style={{ display: "none", visibility: "hidden" }}>
  For passenger John Doe
</p>
<Seat
  aria-labelledby="l1"
  title="Seat 1A"
  description="Extra legroom"
  label="25€"
/>

It would have the screen reader announce: “For passenger John Doe. Seat 1A. Extra legroom.”.

Note that the label prop is not announced by screen readers, as it is intended for visual representation only. So be sure to include all relevant information on the three properties that are announced by screen readers.

Alternatively, the paragraph element with the id l1 is visually hidden, so that its text is only read by screen readers but not present on the screen.

It is also recommended to have those strings translated and change dynamically based on the state of the user journey (eg: if the seat is selected and the user is about to deselect it, the screen reader should announce it).

SeatLegend

The SeatLegend component is not interactive. However, it accepts the aria-label prop, that is passed to the rendered SVG element.

It allows for screen readers to provide a meaningful description of the seat type, which can be useful for users of assistive technologies.

The label prop is also announced by screen readers.