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

Published in

UX Collective

18 min readJul 19, 2019

What is accessibility?

Digital ‘accessibility’ relates to the design of content (on the 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 a 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 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.

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 a 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.

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 your 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 an extra resource for development and/or training, or bring in someone to fill the gap.

2. Implement sufficient colour contrast

Colour contrast is often overlooked, yet the World Health Organisation (WHO) estimates that 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 colour if it has low contrast. As an example, never use light grey text on a dark grey background.

Black on white or vice versa is optimal. The exception to this rule is where elements are in an unavailable state. This includes buttons in the disabled state or inactive menu items. The WCAG Guidelines indicate the contrast ratio should be a 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 colour 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 the 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 a fighter pilot! Yet the principle remains and examples of poor contrast will render content unreadable.

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

3. Use more than one variable to visually differentiate information

Using colour as a singular visual cue can make it hard for people with low visual acuity or colour 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 colourblind mode is a brilliant exponent of this.

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.

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.

The 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 do 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.

5. Make use of alternative text fields to describe information

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

By assigning text within the <alt> attribute of the image element.
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.

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 the purpose and establish a hierarchy within the context of a given page. It is essential that design documents convey 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 become self-explanatory.

No one will read every word on every page. Instead, we normally look 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 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.

Another example from the Government Home Page has what appears to be a sound design, but on closer inspection suffers from a couple of problems. The <h2> text size is smaller than the <h3> distorting the priority. There is also H2 text which not displayed, meaning it will be read out but cannot be seen.

Having a style guide with rules for use by the team will reinforce consistency for images and alternative text, form labels, and headings across a site or system. There should also be a peer review in place to ensure the implementation is correct.

7. Interactive elements must be clearly distinguishable

Users need to be able to determine if elements are interactive or static. Elements which have actions such as links, buttons, navigation and other controls (including swipe areas on touch devices) may be less obvious.

Actionable elements must be identified visually, by convention, and by information provided to assistive technologies. Using proprietary components within platforms can help with this as they already contain such information.

Focus indicators help people know which element has the focus on an interface. This helps them understand where they are when navigating on your site. This is equally valid for point and shoots remote control interactions, as well as when using keyboards.

They are required by people with a variety of disabilities:

Low visual ability and require screen readers

Those with low mobility, or individuals who have suffered injuries like carpal tunnel syndrome
Power users who prefer this type of navigation
Those who prefer the keyboard as opposed to using a mouse

Elements that require focus include hyperlinks, form fields, widgets, buttons, and menu/list items. The focus indication needs to differentiate itself from the other elements around it in context.

While they should fit the visual language if the interface and be on brand, it should also be highly visible, with good contrast and stand out.

The UK Government websites for public service are usually very good at this. Links are presented in a common colour and are underlined on hover state. Interestingly though, the breadcrumb items are always underlined whereas the action buttons to different pages are not.

8. Support keyboard navigation

Following on from the previous tip, keyboard navigation is a vital aspect of web accessibility. The Tab key supports quick navigation with the focus state providing a visual indication for what is currently active.

The order of interactive elements as pages are navigated is essential and must be logical and intuitive, following the visual flow of the page. This is pre-determined to be from left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer.

Use the Tab key to navigate and the Enter key to select items on your site. You should verify all interactive components have predictability and logical order. If a site can be used without a mouse, happy days!

The size of navigation elements should also be considered, inclusive of a number of links and text string length. Tabbing through long menus is demanding for those with motor disabilities. And listening to lengthy links can be cumbersome for people that use screen readers. As with all content, be concise and to the point.

In the example below, MailChimp uses the default browser visual focus state to make it clear that the user is on the link ‘Email Designer.’ Pressing Enter would direct them to that page.

Unfortunately in this Barclays example, it is not intuitive how to select the save for next time option. The tab action highlights the descriptive text and info icon, and pressing Enter brings up the relevant information. It’s not clear how to check the box.

There are many stereotypical keyboard shortcuts in use [12]. It is good practice to test your site only using a keyboard to see how your site performs under such a test.

Image credit — WebAIM.org

9. Ensure touch targets and large enough and within reach

Everyone benefits from larger touch targets, in particular users with motor and/or vision impairments, as accuracy can be difficult. Interactive elements should be easy to hit accurately and consistently.

Recommended sizes of touch targets can vary, though they should be large enough to tap comfortably with one finger. For a device in hand, a good steer is to have a minimum interactive target area should be at least 7㎟, but ideally 10㎟ [13]. There are instances where text is large enough to read, yet is too small to touch.

For example, a linked letter in an A-Z listing may be too fine to touch accurately and could invoke a dedicated dialogue for easier, accurate interaction of the individual elements.

Alternatively, a second related interaction which aids finer control to find what you need will also help, such as moving your finger along the screen to dynamically change the parameter being adjusted i.e. moving down the list as in iOS. OnePlus Android does the same, with an additional dialogue to visualise where you are in the list to aid usability.

Grouping related elements in close proximity that link to the same point can act as a single touch target. This augments the touch area and simplifies the interface.

Where elements are not easily within reach, for example in touch-based in-vehicle infotainment systems, extra consideration should be given to the size and placements of buttons. Primary interactive elements that are more important and/or are used more frequently should be given priority and within easier reach.

In this Range Rover, there are two large touch screen display devices. This allows the user to configure what they would like to be displayed, and where at any given time. The primary screen is located higher in the line of sight of the driver and can therefore display more complex information and features.

It is compartmentalised into the main feature window, summary panel, header and footer. The main window is closest to the driver for viewing and easier access to primary controls.

Dedicated feature buttons are placed in the footer for increased accuracy — although there are a lot of them that compromise ease of use. The back button, the highest frequency of use button, is closest to the driver in a corner for the same reason.

The secondary screen displays less complex features, which the driver needs quick access to or regularly wants to check. It is supported by hard controls for frequently used functions, which can then be operated ‘blindly’ comfortably by the driver.

10. Test, test, and test again

Unless you have personal experience with someone with a disability, assessing accessibility can be problematic but is not insurmountable. Try putting yourself in the same position and simulate experiences as if you were in the world of the people you are designing for.

Use voice interaction tools to read something out to you (like a news article or email message). It’s the same technology that drives screen readers. Try viewing content at different zoom levels to simulate different screen magnification experiences required depending on an individuals eyesight. Finally, when testing digital interfaces with a mouse and touch, also try keyboard interactions.

These are all simple versions of the same technologies and/or experiences that someone using assistive technology will have. Many devices now have accessibility settings too. These will help also guide you to what some users are experiencing and what they would benefit from.

Given a large proportion of developers and designers are often young able-bodied people, getting those guys to do carry out such tricks is useful too. It will help put them in the same mindset and help you to convince them why you are advocating accessibility so much.

It is imperative to test your experience with real, representative users, however. This will give you absolute clarity on whether you have an inclusive experience. To facilitate this, ensure you have included a spread of users across the digital inclusion curve.

Researching with people with disabilities can also quickly highlight other usability issues.

11. Make use of the tools and information available

There is a great deal of information available to help you reach the targets set out in AA of the Web Content Accessibility Guidelines (WCAG 2.1). Following these will optimise your customer experience on commonly used assistive technologies such as screen readers, screen magnifiers and speech recognition devices.

Here are some tools and guidelines which can also help you:

iOS Accessibility Guidelines are a useful reference built-in accessibility features, accessibility APIs, and developer tools.
Android Accessibility Overview is equally a valuable resource for improving accessibility and integrating features.
BBC Accessibility Standards and Guidelines also has some useful information to access about their standards and practices.
WebAIM Color Contrast Checker provides results in real time for regular and large text.
Inclusive Components is a pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
Color Oracle is a free colour blindness simulator. It works on Windows, Mac, and Linux and demonstrates in real-time how people with common colour vision impairments see things.
Vox Product Accessibility Guidelines provide detailed, bespoke checklists for people with different roles within a project team.
AXE Google Chrome Extension allows you to test accessibility violations using its inspector, though you will need to use Chrome.
WAVE Web Accessibility Evaluation Tool is an automated tool to provide guidance on where your site needs tweaking to improve its accessibility. While no substitute for real users, it can provide valuable insights.
ARIA Authoring Practices Guide (APG) provides design patterns for common interface elements i.e. checkboxes, tab panels, sliders, toggle buttons, toolbars etc.).

12. Do the hard work, so your customers don’t have to!

Whether it is related to accessibility, usability or otherwise, doing the hard graft so that your users don’t, is one of the fundamentals of great user-centred design. It doesn’t matter if the experience is on websites, apps or in-vehicle infotainment, designing experiences or products that people can use is our duty and we should get it right.

As we have seen, the impact that can be seen by business is massive. The changes that can be made, small or large, should not be underestimated you can make, and your customers will appreciate it.

Having accessibility as part of the customer experience process will only serve to reinforce the significance it has within your business. Ensuring your design teams and workforce thinking in that way has to be of benefit. So long as we do the best we can, we can only improve!

Summary

Millions of people are affected by limiting conditions every day. We are duty-bound and empowered to do something about it. As a result, it will help not only these potential customers but everyone who interacts with your products.

Taking steps to improve your digital accessibility will undoubtedly improve your user's experience and boost your business. Here is my 12 step summary as to how you can go about it: