The A to Z of UX - A is for Accessibility - 12 top tips for designing an inclusive user experience

Updated: Dec 16, 2019

Darren Wilson

Image showing accessibility related issues and where they appear

What is accessibility?

Digital ‘accessibility’ relates to design of content (in web or otherwise) so it can be used by everyone, inclusive of those with (varying) limitations of the following abilities:

  • Visual: Blindness, low vision and colour-blindness

  • Motor: Reduced ability to use a mouse, slow response time, limited fine motor control

  • Auditory: Profound deafness and hard of hearing

  • Cognitive: Learning difficulty, easily distracted, an inability to focus on large quantities of information or data

Accessibility is one facet of usability. Unless deliberately alienating users with such limitations, you cannot claim your user experience as usable until it is accessible [1].

Not everything is easy to implement, but I will share some top tips to help ensure you can make some quick wins to make your digital experiences more accessible.

No users should be ostracised because of their disability.

As user-centred design professionals we have responsibility to ensure everyone can access to what we create irrespective of ability, context or situation. We have the competence and should be empowered to do so.

We should also regularly challenge information we believe to be correct, and engage our users including ‘outliers’ outside of the norm and ‘the rest of us’, to ensure we provide a compelling experience for all.  

Inclusive design produces better experiences for everyone.

Why is accessibility important?

Approximately 13.9m disabled people live in the UK (circa 20% of the population) [2] and there are over 1bn worldwide [3]. Such numbers cannot be ignored.

There are obligations to consider. Under the Equality Act 2010, all retailers must provide access to their goods online as well as in store.

In 2016, the EU adopted the Web Accessibility Directive to support improved access to the public service websites and mobile applications, especially those used by people with disabilities, and those with vision or hearing impairments.

This Directive has now been integrated into UK legislation and will enforce obligations for new websites from 2019, for pre-existing websites from 2020, and for all public sector apps from 2021 [4].

All of us have abilities and limitations to those abilities.

Crowd of people with varying abilities who are all vital to your business success
Image credit - Carleton University

How can my business benefit?

The potential target market is huge. From a business perspective it makes sense to sell to them just as you would anyone else.

Studies have also proven that websites with good accessibility produce better search results, reaching a larger audience, are kind to SEO, have quicker download speeds and always have better usability [5].

These improvements can have significant impact on the profitability for even the largest of companies [6]:

  • “Improvements in accessibility doubled Legal and General’s life insurance sales online.”

  • “Improvements in accessibility increased Tesco’s grocery home delivery sales by £13 million in 2005… To their surprise they found that many normal visitors preferred the ease of navigation and improved simplicity of the [parallel] accessible site and switched to use it. Tesco have replaced their ‘normal’ site with their accessible version and expect a further increase in revenues.”

  • “Improvements in accessibility increased Virgin online sales by 68%.

You cannot meet the standards required without designing for and researching with users with access needs.

Graphic showing different demographics of people can contribute to your business success

How can I do it?

I have shared 12 simple to follow steps and guidelines to follow to help improve the accessibility of your digital experiences.There are some well established design techniques to follow that will help assist you in creating an accessible experience that many people will appreciate, and also some process techniques that will help you.

1. Make accessibility part of your day to day activity

Given time and opportunity, always design for accessibility as part of your day to day activity and project process. Ideally, whatever you software delivery process, before even the first line of code is developed accessibility requirements should have been considered as part of the user research, clarified and are then disseminated to the project team.

It will save you time and money later.

Unfortunately when projects become stressed, it’s often the first thing to be deferred. A caveat may be that it will be added back later, which may be true. However, it can prove difficult to crowbar in and/or the end user experience may be compromised as a result.

As an absolute minimum, accessibility should be covered as part of the testing protocol to ensure that final design and experience is adequate. However, the most successful, accessible designs rely on sound decisions made at the outset of a project.

These decisions may relate to design calls or tools employed. Do remember though, that if you create designs which make it difficult for people to interact with, changing them afterwards will incur cost, time and effort.

If you have knowledge in your team great, you may only need to allocate additional support for testing. However, if you have a knowledge gap you should consider extra resource for development and/or training, or bring in someone to fill the gap.

UX process including accessibility requirements collection in Discover phase and accessibility testing  during Test & Learn phase

2. Implement sufficient colour contrast

Color contrast is often overlooked, yet the World Health Organization (WHO) estimates approximately 1.3 billion people live with some form of vision impairment [7].

It is critical to display text with sufficient contrast. People with low visual ability can find it difficult to read text from a background color if it has low contrast. As an example, never use light grey text on a dark grey background.

Image showing how poor contrast affects readability

Black on white or vice versa is optimal. The exception to this rule is where elements are in a unavailable state. This includes buttons in disabled state or inactive menu items. The WCAG Guidelines indicate the contrast ratio should be minimum 4.5:1.

Ratios are more lenient with larger and heavier fonts which are easier to read at lower contrast [8]. Tools to check this objectively are available e.g. the Contrast app on Mac, which checks contrast using a color picker. Use the WebAIM colour contrast checker for greater detail. This tool will calculate the score for text sizes according to different conformance levels.

As a sufferer of red-green colour blindness, as 1 in 12 men (8%) and 1 in 200 women in the world, I appreciate the value of ensuring colour contrast. In the United Kingdom alone, this equates to approximately 3 million colour blind people (about 4.5% of the entire population), mostly male [9].

What it means in real terms is that I cannot deal with issues seen below. This is an illustration of the Ishihara test which I failed at school. This admittedly is an extreme case and dashed my dreams of becoming fighter pilot! Yet the principle remains and examples of poor contrast will render content unreadable.

Ishihara test example illustrating how poor contrast can affect readability

Finally, perform verification testing with actual users in different brightness conditions that are representative of where your product will be be used or viewed. Nothing can beat representative data.

3. Use more than one variable to visually differentiate information

Using color as a singular visual cue can make it hard for people with low visual acuity or color blindness to comprehend that content. By applying an additional variable it will help users to differentiate information and process it.

For example, simple tricks such as text labels or patterns can help differentiate information beyond colour alone i.e. use in charts. Trello’s colorblind mode is a brilliant exponent of this.

Trello Colour Blind friendly label patterns

When activated, labels become more accessible by adding texture. Another useful technique is to print content in monochrome and see if you can still interpret it correctly.

For informing the user of an error, adding an icon a title to the description of the error can help. Using formatting such as font weight or underline text style can also create prominence for hyperlinks.

This will help beyond just use of colour, though both would be preferable as this will help everyone. The description helps, but the colour is a strong indicator too and the cue is diluted when it is removed.

Form illustrating how colour and another parameter to articulate warnings can be more powerful

4. Apply instructions on form fields and text inputs

It has been commonplace to use placeholder text as a label when designing a form. Don’t, it’s a mistake, for a couple of reasons. Text used inside the fields usually has low contrast and is harder to read. It’s also easy to forget what you need to write when you’ve clicked the box so maintaining an instruction is useful.

For those using screen readers navigating through a form is achieved using the Tab key. Any non-label text such as placeholder text is usually skipped over meaning a completely unintuitive experience.

If labels, and indeed any other information related to a specific field does not get removed having interacted with it, people shouldn’t lose context with what they’re doing. By removing content, the designer is pushing simplicity in preference to usability [10].

This practice doesn’t mean that you have to clutter your design with unnecessary information, just make sure to provide essential cues. Too much instructional text can be just as much of a problem as too little. The goal is to confirm that the individual has enough information to complete their tasks without friction.

Gmail UX to show text label is retained after selecting the field to aid usability

5. Make use of alternative text fields to describe information

Those with low visual ability employ assistive technology such as screen readers so that “hear” web content rather than read it. To describe what is happening in context, designers can apply two techniques to present alternative text.

  1. By assigning text within the <alt> attribute of the image element.

  2. By adding context or surroundings of the image itself.

The trick is to describe what is going on within an image as below and contextually how it relates to surrounding content. Simply stating “image” does not help the reader.

Alt text label in WIX to help users understand context and content of images in webpages

If an image is redundant because additional content describes what is happening, adding an empty <alt> attribute will provoke screen readers to skip it.

If you don’t write any alt text, some screen readers will read the file name to the individual. This is the worst experience of all.

6. Use formatting to give information structure and hierarchy

Much like printed documents, headings indicate where content begins. They are  tags assigned to text to articulate purpose and establish hierarchy within context of a given page. It is essential that design documents conveys the intended structure of content. Titles with larger font enable users to comprehend the order of the content more easily, and also scan it more quickly for what they are looking for.

Much in the same way, screen readers also use the heading tags to read page content. As such, people using assistive technology can get an overview of the page by utilising page headings hierarchically.

Tag should not be used for style impact in isolation. Not using headings correctly affects accessibility. When implemented correctly, people can that use them to listen to a list of all of the headings, and be able to navigate directly to what it is that they need.

  • Use <h1> for the page title or main heading

  • Use <h2> for the main section headings

  • Use <h3> for subheadings etc…

  • CSS can then be applied for defining the visual language for each level       

Adding an ability that skips to main content will also aid usability. In that sense you don’t have to listen to the global navigation at the beginning of each page. Once you’ve tried it, it will be become self-explanatory.

No one will read every word on every page. Instead we normally looking for the general summary. Screen reader users are no different from the rest of us. Experienced users often like to speed up the reading rate to 300 words per minute or more, which their equivalent of scanning the page [11].

The BBC are good produce good examples of page structures that are both visually ease to interpret and helps assistive technologies. The text size and heading level are proportioned appropriately in terms of their importance, and are in presented in order. Visually, it’s easy to scan and pick out what you would like.

BBC home page showing clear and logical headings structure for visual readers and screen readers