Accessibility is UX: How inclusive design benefits EVERY user

For too long, web accessibility has been treated as an afterthought. Yes, everyone knows we should build inclusive experiences but accessibility is widely thought of as an optional extra, rather than a priority.

Not only is this mindset discriminatory, it wrongly assumes that accessibility only improves the experience for a minority of users. While it’s true that people dealing with usability challenges are (and should be) the priority in accessibility, designing inclusive experiences benefits everyone.

Poor accessibility is bad for business

Unfortunately, many businesses treat accessibility as an afterthought because they don’t see the profitability in optimising for a minority of their user base. This is completely the wrong attitude – not only in terms of UX design, but also business sense.

We have plenty of evidence that shows accessibility increases conversions (and profits) among all users, not only those living with disabilities and usability challenges.

Here are some telling stats to keep in mind:

• 22% of people in the UK live with a disability – and the number is rising quickly. (Gov.uk, 2020-2021)
• In the UK alone, people living with disabilities add £274 billion to the economy every year. (We Are Purple, 2020)
• 90% of disabled consumers are affected by poor accessibility during the decision-making stage of purchases – either by limitations of design, lack of information or poorly-presented information. (Business Disability Forum, 2021)
• 43% of disabled consumers regularly abandon shopping tasks due to accessibility issues. (Business Disability Forum, 2021)
• Up to 94% of top-grossing eCommerce sites have accessibility issues (Baymard, 2021)
• 63% of customers prefer to buy from socially responsible companies, while 54% want to buy from companies that prioritise diversity, equity and inclusion. (Zendesk, 2021)

Source

Improving accessibility for everyone isn’t limited to the web. We see this all around us in the real world. For example, automatic doors were initially designed for people using wheelchairs but they benefit people with a variety of impairments, including arthritis, motor limitations, people carrying shopping bags – and so many more.

Automatic doors also save companies money by automatically closing and keeping more warm or cold air inside the building. This saves money on heating during the winter and air-conditioning in the summer. In fact, this phenomenon even has a name in the accessibility field: the “curb cut effect”.

Like electric doors, curb cuts were first introduced to help wheelchair users but they make life easier for a wide range of people, including those with mobility issues, temporary injuries, visual impairments, young children, the elderly and many more.

Who are you optimising for with accessibility?

With accessibility, you’re optimising for everyone to the best of your ability. You’re not assuming everyone has the same digital or physical capabilities and you’re taking every possible step to create inclusive experiences.

Arguably, the most important group you’re optimising for is people with impairments that can hinder accessibility. This includes – but isn’t limited – to the following:

• Vision impairments: A variety of medical issues limiting the vision of users – eg: loss of sight, colour blindness, etc. – or environmental factors, such as bright sunshine.
• Hearing impairments: Any scenario where users are unable to fully hear audio, either due to health reasons or environmental factors like background noise.
• Neural impairments: A diverse range of health issues that can impair any part of the nervous system, including cognitive ability, motor functions, comprehension skills, and plenty more.
• Physical impairments: Broadly refers to any issue that limits a person’s mobility or motor functions – including permanent and temporary health conditions.
• Learning impairments: A diverse range of factors that impact the learning abilities of individuals.
• Mental health conditions: As our understanding of the links between mental and physical health improve, this becomes increasingly important in web accessibility.

Scientific understanding of many impairments is limited and constantly evolving, particularly when it comes to neurology, neurodiversity and mental health. You might notice, the list above isn’t limited to people with disabilities or permanent health conditions. While these groups are the priority, it’s important to realise that everyone has accessibility needs to varying extents – and these needs can change at any time.

We can’t provide a complete list of all potential impairments in this article but we can group them all into three categories:

1. Permanent impairment: These are typically the result of medical conditions or injuries that result in life-long impairment – limited vision, limited hearing, restricted mobility, etc.
2. Temporary impairment: This can include temporary issues with vision, hearing, mobility and other accessibility concerns, often as the result of medical issues, treatments or procedures (temporary loss of hearing, surgery, a broken bone, an eye patch, etc.).
3. Environmental impairment: Temporary impairments resulting from the environment or actions of the user – eg: background noise restricting their ability to hear, bright sunlight making it hard to see a screen, or their hands being occupied by something more important (like driving).

Accessibility optimises experiences for diverse user needs, including people with permanent impairments. However, you also need to consider environmental and situational factors. User needs can change drastically when they’re driving, using public transport or trying to get a baby to sleep.

By extension, you also have to consider environmental factors for people with permanent impairments. Always remember that environmental and situational factors can impact different users disproportionately and people with permanent impairments are often the most affected.

Accessibility is UX design

The misconception that accessibility is a niche subset of UX design needs to end. Aside from the moral (and legal) obligations to cater for users living with permanent impairments, a comprehensive accessibility strategy benefits every user. In turn, this increases conversions, revenue and profits across the board.

Let’s take a look at some specific examples to see how accessibility best practices improve web experiences for everyone.

Visibility & visual clarity

Improving the visual clarity of your pages can improve the experience for people with a variety of sight impairments, learning difficulties and other needs.

Here’s a quick list of some of the most important techniques for increasing visual clarity:

• Contrast: The difference in brightness between elements and their backgrounds and/or adjacent elements.
• Visual hierarchy: Using subheadings, text, bullet point lists and other elements to create a clear visual hierarchy throughout each page.
• Element size: Firstly, making sure all elements on the page are large enough, but also sizing individual elements to prioritise the most important things on the page.
• Space: Placing enough space between elements on the page to make them distinguishable and the page visually navigable.
• Text size: Ensuring text is large enough and enabling users to zoom or increase text size without breaking the layout of your pages.
• Legible fonts: Choosing fonts that are legible, clear and as easy to read as possible.
• Text styles: Using line heights with sufficient letter spacing and word spacing.

As you can see, these techniques are good practice for all users. Also, keep in mind that all users deal with situational impairments from time to time. For example, people using their devices outside during daylight hours will struggle to see low-contrast pages.

Accessibility software provider, AudioEye explains that colour contrast “can be the difference between a site that is easy to read and navigate and one that is completely illegible” for people with visual impairments.

Source

For more information, take a look at the W3C documentation on accessibility requirements for people with low vision.

Image file names, alt text & captions

Image file names, alt text and captions can provide users, screen readers and search engines with important context about the images on your page.

Google has plenty of guidance on image accessibility for users and SEO, including one appropriately titled How accessible design helps everyone.

It runs through the essentials of file names, alt text and captions for images. It also explains how you can use elements like file names to provide helpful context for groups of images, such as a series of images illustrating steps in an instructional post.

Most screen readers will ignore the filename of an image if you provide alt text. However, descriptive image filenames are still good practice and they’ll help with SEO, especially when it comes to image searches.

Make sure your alt text describes each image within the context you’re using it. Screen readers will also read image captions so use them to add more info, not simply repeat your alt text.

According to data from Baymard Institute, 82% of websites have compliance issues with image accessibility. This is one of the most prevalent areas where website owners need to address accessibility issues.

Clear, simple language

Using clear, simple language makes your content easier for everyone to understand, especially users with learning disabilities, language impairments, cognitive issues, neurodivergencies and a variety of other accessibility needs. It also improves the experience for travellers, language learners and other non-native speakers.

Crucially, clear and simple messages are more convincing. Campaigns that inspire people to take action speak to them on an emotional level. Consumers aren’t swayed by fancy lingo; they’re moved by the relatable, effortless and irresistible.

Your content should make people feel, not think. If your message isn’t clear enough for every user to easily understand, you don’t have a clear enough understanding of it yourself (also consider non-native speakers).

Consider how simplistic Apple’s messaging is with its iPhone ads or how simple, but effective Nike’s Just Do It tagline is.

Accessible CTAs

Calls to action are one of the most important elements on any page. All of your UX design efforts could be for nothing if users quit the session at the key moment. As a general rule, conversion actions should be as simple as possible – so accessible CTAs make conversions easier for everyone.

Here are some key considerations:

• Make them actionable: Create simple, actionable conversion goals that are simple to complete.
• Clear messaging: Your CTA text should be clear, concise and descriptive.
• Colour contrast: Use plenty of colour contrast between CTA text, CTA buttons and backgrounds.
• Make them prominent: Ensure your CTAs stand out enough visually that users can’t miss them (size, colour, contrast, text, spacing, etc.).
• Keyboard accessibility: Allow users to access and interact with your CTAs using their keyboard or keyboard emulators.
• Hammer it home: Your page content needs to ramp up purchase intent to the point users are begging to take action and your CTAs put satisfaction one click away.
• Test your CTAs: Experiment with your CTAs and test them in focus groups to understand how stylistic changes affect accessibility.
• Optimise conversion actions: Optimise your conversion actions to make them accessible and reduce friction for all users.

Flower subscription box provider Bloom & Wild has a clear message in its CTA text with an actionable button telling users what to do next.

Every call to action is asking users to complete some kind of task so you also need to think about what it is you’re asking people to do. Consider accessibility needs and potential challenges people may face when completing your conversion actions. This will help you design conversion goals that are accessible to everyone and remove potential friction points for all users.

Accessible forms

Most conversion goals require users to fill out a form of some kind. Forms are a pain for everyone but they’re always more frustrating to complete on mobile devices. Now, imagine how challenging they can be for users with accessibility needs.

This CXL article explores seven ways you can make your forms more accessible for all users:

1. Tabbing navigation: Allow users to navigate your forms using the tab key.
2. Label fields correctly: Label your form fields so users know exactly what information they should provide – and never use placeholders as labels.
3. Contextual information: Always provide contextual information when data inputs have special requirements – eg: specify that a user’s name needs to match their payment card, show the date format required, etc.
4. Form validation: Provide in-line validation that catches user mistakes and conflicts before they submit the form.
5. Avoid icon fonts: Some screen readers and assistive tools are unable to “view” icon fonts so avoid using them.
6. Avoid drop-down menus: These can make the experience worse for all users but they’re particularly challenging for people with accessibility needs.
7. Ditch the CAPTCHAs: CAPTCHAs are bad news for conversions but they’re a major barrier to people with accessibility needs – so use alternatives like the honeypot method.

This Smashing Magazine article on accessible form validation is a great resource. It explores accessible form design and validation, including examples of how screen readers interact with form elements.

Source

Form accessibility and optimisation is a science in itself but these are one of the most important elements of any website. Users simply won’t convert if your forms let them down. So it’s worth investing time into form optimisation and testing. For more information, take a look at W3C’s documentation for web form accessibility.

Subtitles, captions & transcripts for video

Subtitles and captions can help people with hearing impairments understand video footage. However, research has found that the majority of people using subtitles and captions have no hearing issues whatsoever. In the age of streaming and online video, an increasing number of people prefer to watch content with subtitles.

Transcripts also provide a complete text version of dialogue from video or audio content – as seen from Queen Mary University of London below:

This is helpful for any user that simply wants to read content, rather than watch a video. In some cases, this might be due to environmental impairments, such as background noise, but it’s also a legitimate preference. Some people simply prefer to read while transcripts are also helpful for a variety of tasks, such as research, notes and quoting. Transcripts also provide text that search engines can crawl and index.

Autocomplete & smart suggestions for on-site search

Typing is one of the most intensive tasks for users with accessibility needs. Search and navigation are also more difficult on mobile and on-site search has an inherent problem for all users. Without extensive knowledge of your website, there’s a high chance users will search for something that doesn’t exist.

By implementing autocomplete and smart suggestions into your on-site search system, you can solve most of these problems. Instead of manually typing out full queries, your search system provides relevant options as they type – so they can select what they’re looking for. This reduces the typing workload for all users and provides contextual feedback for what your site includes.

How to implement a web accessibility strategy

To implement a complete accessibility strategy into your UX design process, you’ll need to take the following steps:

• Hire web accessibility experts: You need at least one accessibility expert involved in your design.
• Use the right tools: Implement tools like accessibility analysis software and design tools like the contrast checker.
• Manually analyse your website: While software tools are great for automating accessibility checks, you’ll also need to manually analyse and review your website regularly.
• Run accessibility experiments: Run tests with focus groups and get feedback from real users with accessibility needs.

If you’re having trouble with any of the above or lack the right personnel to implement a complete accessibility strategy, we can help. Call our UX design team on 023 9283 0281 or send us your details for a chat with our accessibility experts.