UX design, UX challenge

UX design challenge: accessibility

The aim of this challenge is to perform an accessibility audit and outline what the website does well and what can be improved.

Why is accessibility important? 

Over one billion people live with a disability worldwide. As designers, we have the power to make sure that everyone has access to content online; regardless of ability or situation.

Accessibility is not limited to a group of users with different visual, motor, auditory, speech or cognitive abilities. Accessibility is relevant to anyone who is experiencing a permanent, or temporary, or situational disability. Loosing an arm is a permanent condition, breaking an arm is a temporary condition and holding a baby in one arm is situational.

Studies have also shown that content which is accessible performs better. Websites reach a bigger audience when they follow accessibility guidelines as they gain higher SEO scores.

Web Content Accessibility Guidelines (WCAG)

WCAG were developed to create a single web accessibility guideline that could be recognised globally. The WCAG 2.0 guidelines define how to make web content more accessible for people with a range of disabilities.

There are four principles that web designers and developers must meet to be compliant with the guideline:

Levels of conformance:

There are three levels of conformance, with A being the least accessible and AAA being the most accessible. Most websites should aim to meet AA - meaning the website is usable and understandable for the majority of people with or without disabilities. Very few websites are AAA compliant.
About this audit
In this project, I am going to make recommendations to make the Booking.com website WCAG AA compliant.

Keyboard access

All websites should be able to be navigated with a keyboard. Interactive elements, such as forms should have focus states to indicate the user that they are selected.

How this benefits users:

People who have motor disabilities or short term memory limitations will be able to navigate the website easier.
There’s limited
keyboard accessibility on the booking.com website.
A user can interact with some of the elements on the Booking.com website - but as the user can not interact with all of them, the website fails to be AA compliant.

Very few of the elements have a hover state; therefore it is hard to keep track of where you are on the page.

Some key features can not be accessed via a keyboard: such as the filters. Overall, Booking.com has a challenging user experience for anyone who can not use a mouse.

To improve, consider: 


Some users will not be able to see the images on a website. All images on a website should have alt text that describes the image - unless they are purely decorative. It is preferable to have the image description in an alt tag, over in the copy surrounding the image.

How this benefits users:

Screen readers can be used to read out alt text of images, to users who have a visual disability - empowering them to engage with the content.
Users with a visual disability may struggle to use this website.
I used the inspect tool to have a close look at the website code. I aimed to find alt (alt=“”) tags, when I inspected the images; there were none.

After, I also used a screen-reader to tab through some of the pages with images. As I predicted, from the lack of alt tags, there were no image descriptions via the screen-reader.

To improve, consider: 

Colour contrast

Colour contrast is the ratio of the foreground colour (text) and the background colour. There should be a contrast ratio of at least 4:5:1 or greater.

How this benefits users:

The World Health Organisation has estimated that there may be 212 million people with a moderate to severe vision impairment.  Having a high contrast ratio can make the text clearer to read for people with vision impairment.
The colour ratio on the website is higher than 4:5:1.
I took screenshots to gather various colour swatches of the foreground and background colours.

All of the HEX codes were placed into the webAIM contrast checker.

Here, the website performed very well as all of the swatches met the AAA standard.

To improve, consider: 


Making forms accessible is simple. Each field should have a title, that is above the field. Using placeholder text as the feild title is a common mistake; the design may look sleek and modern, but the usability is compromised.

How this benefits users:

Forms that do use placeholder text as the field title can be troublesome for users with disabilities. People who have memory difficulties may struggle to complete a form that does not have a static label. Others may struggle to read the low contrast placeholder text. Whilst people who rely on a screenreader may not be able to complete the form as placeholder text may not be read out

Using forms correctly negates all of the problems listed above.
Booking.com's forms are fairly accessible but can be improved.
The main forms do use placeholder text as field labels however, they have been designed to combat the typical issues that this practice presents.

Other forms on the website do have typical field titles that are above the box.

I used a screen-reader to help empathise with someone who would have to use one and found that this form was simple and intuitive to fill out. The screen-reader read 'please type your destination with hint 'where are you going?"

Yet, an individual who may have memory difficulties could struggle to fill out this form.

All of the text within the form had a rating of AAA when I completed a contrast ratio check.

To improve, consider: 


Settting a language tag for a website can help assistive software interact with the content effectively.  

How this benefits users:

Assistive software will read foreign languages but they also need to know the language of the page and when the content on the page differs from the default language.

Booking.com uses effective, AA standard, language tags.
I used the inspect tool when on the booking.com website. When looking at the code, I searched for the 'lang' tag; throughout the site there were nearly 600 tags. There was also a language tag in the header that set the language for the entire site.

Booking.com effectively uses the language tag.

To improve, consider: 


Websites that use descriptive micro-copy, like link names, are more usable.le.

How this benefits users:

Links are often used to navigate a page quickly using screen-readers. Screen-readers rarely read the entire page, and just read the links. However, some links only make sense in context, such as 'click here' or 'find out more'. Websites that use descriptive text links are beneficial as they are easier for the user to understand. This can also save time and the patience of users that would otherwise have to click on every link - only to find out that it is no use to them.
The weblinks are WCAG AA compliant.
I browsed through various pages on the website to investigate the use of micro-copy.

What I found were descriptive text and button links that avoided vague terms, like 'more' and 'click here'.

To be sure I didn't miss any, I searched for a few common phrases in the code, using the inspect tool.

To improve, consider: 

To conclude

The Booking.com website is  accessible, as you would expect from such a large company. There are a few things that they need to look at to hit the AA rating.