Reducing image complexity or adding a scrim will include more people, including those with colour vision impairments. Sometimes, we can consider more things to prevent accessibility barriers or improve the user experience.

Placing text over the content

Zoom and font settings

Users visiting the website may increase or decrease the font size either in their browser or system settings or manually, such as by pressing Command and + on a Mac keyboard. This could make certain parts of the text difficult to read. This needs to be seen and checked in live code.

Narrow and wider viewports

Desktop users may view the website in a narrower or larger browser window. Although we build responsive websites, the placement of the text will change as the window reflows. This could make certain parts of the text difficult to read.

Checking contrast

Testing for all font and viewport size settings is impossible, but by sampling surrounding colours that could compete with the font colour, we can see if this design solution is the most appropriate.

Embedding text on the image

• Do not overlay text on images. Although it may be tempting to do this to prevent contrast issues, it leads to the text appearing pixelated on some screens when the image is compressed.

Include alternative text

Graphic promos create an emotionally rich experience for users, including visually impaired people who use assistive technology.

To include more people, use alternative text to describe the image.

• Convey the emotion in the alternative text description

• Create a description that does not get across the emotion.
• Elaborate too much.
• Mark it as decorative if the image is emotionally rich.

Fallback colour

Where we place text over an image, the component should have a fallback colour in case the image doesn’t load. This should be surface-contrast (#05203C) to provide sufficient contrast against the white text.

Accessibility testing

Find guidance on how to test the graphic promotion component for travellers who use assistive technology.

Visual checks

1. Increase the zoom level in the browser using CTRL + ‘+’ key (for Windows) or Command + ‘+’ key (for MacOS).
2. Check if the text appears to blend into the background image.
3. Repeat step 1 around 6 times until you reach a zoom level of 200% to check the usability.
4. Resize your browser window to simulate different screen sizes and check zoom levels.

Screen reader checks

NVDA on Chrome

1. Navigate to the Graphic Promotion to test. This can be done in two ways:

• Open the elements list by pressing the ‘NVDA’ key + F7 and use the arrow keys to move to the ‘Links’ menu.
• Press the ‘K’ key to move through the links on the page and use the arrow keys or press ‘Tab’ to move to the graphic promotion.

1. The heading and body copy should be announced using an aria label. Make sure that the information and the link CTA are announced.
2. Press ‘Enter’ to follow the link.
3. Check that the result is what’s expected for a usable experience.

VoiceOver on Safari

1. Navigate to the graphic promotion to test. This can be done in two ways:

• Open the rotor by pressing CTRL+OPT+U and use the arrow keys to move to the ‘Links’ menu.
• Press CTRL + OPT + CMD + L to move through the available links on the page.

1. The heading and body copy should be announced using an aria label. Make sure that the information and the link CTA are announced.
2. Press CTRL + OPT + Spacebar to follow the link.
3. Check that the result is what’s expected for a usable experience.

VoiceOver on iOS

1. Swipe left or right to navigate to the graphic promotion.
2. Check that the text and role are announced. For example, “Search hotels to get the right deal for you, button”.
3. Double-tap anywhere on the screen to activate the button.
4. Check that the result is what’s expected for a usable experience.

Talkback on Android

1. Swipe to navigate to the graphic promotion.
2. Check that the text and clear instructions are announced. For example, “Search hotels to get the right deal for you, double tap to activate”.
3. Double-tap anywhere on the screen to activate the button.
4. Check that the result is what’s expected for a usable experience.