AirportIllustration

The AirportIllustration component has been designed with accessibility in mind, providing appropriate ARIA roles and alt text options for screen reader users.

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

• The component automatically manages ARIA attributes:
  • Default role is set to "presentation" to hide the illustration from screen readers.
  • When using role="img", the alt text is announced to screen readers.

• Use role="presentation" (default) for illustrations that are purely decorative and do not convey important information.
• Use role="img" with a descriptive alt text when the AirportIllustration conveys important information that users need to understand.
• Keep alt text descriptions concise but descriptive when the illustration has informational value.
• The alt text should always be translated to the user’s language.
• Do not use empty alt text (alt="") with role="img" as this creates confusion for screen reader users.
• Consider providing text alternatives in the surrounding content for complex illustrations.

<AirportIllustration name="PRGSmartPass" />

Nothing is announced by a screen reader (illustration is skipped as it has role="presentation" by default).

<AirportIllustration
  name="PRGSmartPass"
  role="img"
  alt="Prague Airport SmartPass illustration showing fast track entrance"
/>

Screen reader announces: “Prague Airport SmartPass illustration showing fast track entrance”.

<div>
  <Heading>Prague Fast Track</Heading>
  <AirportIllustration name="PRGSmartPass" role="presentation" />
  <Text>Skip the regular security lines with our SmartPass option at Prague Airport.</Text>
</div>

Screen reader announces the heading content (Prague Fast Track) and text content (Skip the regular security lines with our SmartPass option at Prague Airport.), but skips the illustration.