CarrierLogo component

Accessibility

The CarrierLogo component has been designed with accessibility in mind.

It renders carrier images that provide visual recognition of transport companies but may not be accessible to all users. For that reason, it is important to ensure the information conveyed by the logos is also available in a text format.

Accessibility props

The following props are available to improve the accessibility of your CarrierLogo component:

Name	Type	Description
ariaHidden	`boolean`	When set to `true`, hides the CarrierLogo from screen readers. Use when the carrier name is displayed nearby.

Within each carrier object:

Name	Type	Description
name	`string`	Required. Used as the `alt` and `title` attributes for the carrier image for screen reader users.

Automatic accessibility features

The CarrierLogo component automatically implements the following accessibility features:

Each carrier logo image automatically receives alt and title attributes with the carrier’s name (the name property in each carrier object), ensuring screen readers can announce the carrier.

Best practices

Logos can create important context for users, but not everyone sees the logo. So make sure everything necessary is presented in a non-visual form.

By including the name of the carrier, anyone who doesn’t see the logo still gets the name. If the logo is presented next to some text with its name, make sure to hide the logo from screen readers by using the ariaHidden prop. This avoids duplicating the announcement of the carrier from screen readers.

Examples

Without text

<CarrierLogo
  carriers={[
    {
      code: "OK",
      type: "airline",
      name: "Czech Airlines", // This name becomes the alt and title text
    },
  ]}
/>

With visible text

<Stack direction="row" spacing="100" align="center">
  <CarrierLogo
    ariaHidden
    carriers={[
      {
        code: "OK",
        type: "airline",
        name: "Czech Airlines",
      },
    ]}
  />
  <Text>Czech Airlines</Text>
</Stack>

Multiple carriers

<Stack spacing="medium">
  <Stack direction="row" spacing="none">
    <CarrierLogo
      inlineStacked
      carriers={[
        { code: "FR", name: "Ryanair" },
        { code: "TO", name: "Transavia France" },
      ]}
      ariaHidden
    />
    <Stack direction="column">
      <Text>Ryanair</Text>
      <Text>Transavia France</Text>
    </Stack>
  </Stack>
</Stack>