Three (more) ways to make your website more accessible

With 1 billion (and counting) disabled people worldwide, airlines are making an increasingly conscious effort to ensure that their digital services can be accessed by all users, including those with a disability.

In System Concepts’ previous post we outlined the importance of airlines creating accessible websites. Accessible websites lead to a better user experience for everyone, and make financial sense too, given the spending power of the disabled community. There is also a legal obligation to ensure websites are accessible and, of course, it’s simply the right thing to do.

Creating accessible websites is not always easy or obvious; below we have outlined three key accessibility tips with good practice examples from different airlines.

1. Ensure that there is an option to pause, stop or hide moving, blinking or scrolling content

Content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly, as well as anyone who has trouble tracking moving objects. Providing an option for users to pause or stop the carousel from moving will allow them to control and absorb the content at their own pace (for example, this can be done by adding an accessible ‘pause’ button). It will also minimise distraction.

An example of a pause button on a carousel from the Kenya Airways homepage is shown below.

2. Use the alt attribute for all images

All images should be given a text alternative using the alt attribute. This HTML attribute allows assistive technologies such as screen readers to communicate to visually impaired users what is shown in the image. It is therefore important that the text within the alt attribute is meaningful so that all users understand the information shown in the image. If the alt attribute is not used, screen readers will often announce ‘blank’, which may confuse screen reader users as they know that something is visually presented on the screen but they are unable to access it. Decorative images which do not convey any information should still have a null alt tag (alt=””) so that assistive technologies know to skip it.

The below screenshot shows several images on the Emirates homepage which show which payment methods they accept. This is crucial information for any user wishing to proceed with a booking. The alt attribute provides a meaningful text alternative for each image.

Code extract of the Mastercard image: <img id=”IBE_COMMON_MAST” alt=”Mastercard” src=”/uk/english/images/mastercard_tcm275-1853592.png” title=”Mastercard”>

3. Include skip links to skip navigation

[Skip links] are very useful for screen reader and keyboard only / alternative input device users. This is because skip links enable these users to bypass certain content, which speeds up navigation. Most often, these skip links appear at the start of each page and offer users an option to skip to main content. These links usually only visually appear when using the keyboard to navigate through the page immediately after landing on the page.

An example of a skip link from KLM homepage is shown below.

There are many other considerations airlines need to make to ensure their websites are accessible (check out our other post for some more tips). Investing in accessibility makes sense. It results in a better user experience for everyone, covers any potential legal obligations (depending on the countries you operate in), enhances your brand reputation and allows you to fully access the large spending power of the disabled community. Additionally, if you invest in accessibility consistently and early on you will reduce your costs further down the line.

Get in touch with our experienced consultants for advice and guidance on making your website or app fully accessible.