Info Banner

A way to highlight important information for travellers.

Accessibility testing

Find guidance on how to test info banners for travellers who use assistive technology.

Screen reader checks

NVDA on Chrome

  1. Navigate to the info banner to test using the down arrow until you reach the content.
  2. Make sure that the visually-hidden text is announced to communicate the importance of the icon, e.g. “Information”, “Success”, “Warning”, “Error”, followed by the banner text.

VoiceOver on Safari

  1. Navigate to the info banner by pressing the CTRL + OPT + Left (or Right) arrow keys.
  2. Make sure that the visually-hidden text is announced to communicate the importance of the icon, e.g. “Information”, “Success”, “Warning”, “Error”, followed by the banner text.

VoiceOver on iOS

  1. Navigate to the info banner by swiping left or right on the screen.
  2. Make sure that the visually-hidden text is announced to communicate the importance of the icon, e.g. “Information”, “Success”, “Warning”, “Error”, followed by the banner text.

Talkback on Android

  1. Navigate to the info banner by swiping left or right on the screen.
  2. Make sure that the visually-hidden text is announced to communicate the importance of the icon, e.g. “Information”, “Success”, “Warning”, “Error”, followed by the banner text.