Neglecting accessibility in UX design can spell disaster for business owners. Accessibility is the mechanism through which UX designers make positive browsing experiences for disabled, but also non-disabled, users. A recent study found that a shocking 71% of customers with accessibility needs will leave a website they find difficult to use. And given that approximately 16% of the global population have accessibility needs, accessible UX web design has a crucial role to play in the retention of customers.
What is accessibility in UX?
Accessibility and UX are two entirely different subjects, so it is important to understand each independently to better understand how they intertwine:
What is UX?
UX, or user experience, refers to how people feel when interacting with a product or service, and is often used in reference to websites. Good UX design favours clean, well-organised content which makes it easy for users to get the information they need.
Whether UX is good or bad correlates directly to whether your users have a positive or negative experience. A website that confuses its users or puts hurdles in the way of them using it effectively is an example of poor UX design.
How does accessibility fit in?
So how does accessibility fit in? Well, UX design and accessibility are essentially two sides of the same coin. For users to have a good web browsing experience, they must also be able to access the content and features they require without unnecessary difficulty. By default, this means tearing down barriers that pertain to cluttered design, complex navigation, or illegible content.
Crucially, accessible UX design does not just benefit individuals with disabilities. Consider the example of video captions. This is an accessibility feature which allows users with hearing impairments to perceive media. However, it also serves non-native English speakers or anyone trying to watch a video in a noisy environment.
You can find a long list of different considerations at our Accessibility Checklist for UX designers.
Free Accessibility Check of your Website
Detecting accessibility issues has never been easier than it is now. At Recite Me we offer a free automated scan of your websites homepage. This will identify and highlight any non-compliance on your website. Followed by recommendations on how to implement the necessary changes to improve your websites accessibility score and standing.
Why is accessibility for user experiences?
Accessibility and UX design share roughly the same aim: to ensure that all users can interact with digital content easily, effectively, and enjoyably. While UX design tends to focus more on ease of use and aesthetics, accessibility is primarily concerned with the experiences of disabled users.
However, when combined, this makes for a formidable approach to web design which serves every aspect of society. Accessibility strategies play an especially crucial role in this partnership because, while primarily aimed at the disabled community, they benefit everyone. For example, keyboard navigation ensures usability for individuals with motor impairments, but it also aids power users who prefer shortcuts for faster interactions.
Put simply, accessibility is the foundation of great user experiences.
Guidelines for designing accessible websites
In order to create a truly accessible website, you need to be aware of the Web Content Accessibility Guidelines (WCAG). WCAG is the international gold standard of everything web accessibility.
Introduced by the World Wide Web Consortium (W3C), these guidelines outline specific criteria about how to make web content more accessible to people with disabilities, covering everything from colour contrast to keyboard navigation. It serves as a comprehensive roadmap for accessible UX design.
At its core, WCAG is built around four core principles, known as POUR principles:
- Perceivable: Information and content must be presented in ways that users can perceive.
- Operable: Users must be able to interact with and navigate the site effectively.
- Understandable: Content should be clear and consistent to aid comprehension.
- Robust: Websites should work with current and future assistive technologies.
From these principles, the W3C prescribes specific criteria for how to make websites more accessible. The criteria are categorised according to three different levels of compliance – Level A, AA, and AAA – where Level A represents minimal compliance and Level AAA optimal compliance.
While only recommendations, WCAG is referenced throughout several key accessibility regulations across the world. Most accessibility regulations require a minimum of Level AA compliance. Therefore, adhering to WCAG’s requirements will not only enhance your website’s overall user experience, but protect you legally as well.
Best practices for embedding accessibility in your website’s UX design
We’ve come up with a series of strategies and best practices, based on WCAG’s recommendations, that will help improve your website’s accessible UX design. Let’s get into it.
Use Alt Text for Images
Alt text describes the contents of an image so that it can be interpreted by screen readers. This ensures that visually impaired users still have a means of perceiving visual elements, which provide much-needed context. As a result, users are able to better comprehend written content, making for a positive user experience and good UX design.
Under WCAG Level AA, all non-text content must have a text alternative that serves the equivalent purpose. This means that text should be appropriately descriptive, such that it is detailed enough to convey all key aspects of the image without overwhelming the user with unnecessary jargon.
Design accessible forms
Forms are used for everything from purchasing products and submitting applications to contacting business owners about their available services. They are essentially the bridge between a company and its customers, making forms a crucial player in accessible UX design.
Forms fields must be clearly labelled, providing instructions where needed. Error messages should offer specific corrective instructions instead of generic red “Error” text, and users should be able to use the Tab function to alternate between fields logically. These practices reduce frustration and enhance the overall user experience.
Maintain sufficient colour contrast
Colour contrast refers to the difference in colour and brightness between text and its background. The higher the contrast, the more legible it becomes. Consider black text on a white background, for example. This classic colour combination improves readability for all users, but particularly those with low vision or colour blindness, by reducing eye strain and cognitive load.
Note that WCAG recommends a minimum colour contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text. Tools like an accessibility toolbar can be useful aids in achieving this, allowing users to customise website colours, and other things, according to their specific needs.
Enable keyboard navigation
Keyboard navigation ensures users who cannot use a mouse, such as individuals with mobility impairments, can still interact with your website. For these individuals, good keyboard navigation makes for a seamless browsing experience.
To be sure your website is easily navigable with a keyboard, it’s a good idea to test it for yourself. Use the Tab function to cycle through menu options, links, buttons, and form fields. The tab order should follow a logical pattern with clear focus indicators which highlight the selected element.
Add video captions
Video captions provide text representations of spoken dialogue and other audio cues in video content, so that deaf users and those with hearing impairments can follow along. But they’re not the only ones to benefit. Non-native English speakers and those in sound-restricted environments also rely on captions to perceive video content.
As you can see, implementing video captions allows your content to be digested by a wide audience by giving them alternative options. This flexibility gives people the opportunity to engage with videos who might not otherwise have been able to. Users leave happy as a result, and happy users mean good UX design.
Developing the right mindset for designing accessible UX
Achieving accessible UX design means adopting the right mindset. For that, you have to try to get inside the minds of your users, to understand them and the challenges they face on a day-to-day basis. Then think about what you could do to assist them in overcoming these challenges.
Understand your audience
Your users aren’t all the same. They include individuals with diverse needs, from someone with dyslexia to an older adult with limited mobility. Designing with empathy means considering how these users might navigate your site, read your content, or watch your videos.
You might consider, for example, how a person with low vision might think when they arrive on your site. Perhaps the first challenge they’ll face is being able to read the text on your home page, so you increase text size accordingly. They might also have difficulty making out different website elements, so you adjust the colour contrast. If their condition is particularly severe, they may even rely on screen readers to interpret visual content, so you ensure each image is embedded with descriptive alt text.
Invest in accessibility training
Adopting the right mindset for accessible UX design doesn’t come naturally to those without lived experience as a disabled individual. However, it is a skill that can be honed. How? Through regular training. Training sessions should cover topics like WCAG standards, assistive technologies, and inclusive UX design principles.
Be sure to check out the free Accessibility Training Course for UX Web Designers.
Prioritise simplicity
Cluttered designs overwhelm users, particularly those with neurological conditions, such as dyslexia or ADHD. Focus on clean layouts, intuitive navigation, and concise content. Consider using accessible fonts like Arial and Tahoma, or condition-specific fonts like Dyslexie.
Think beyond traditional input methods
Not all users rely on traditional means of website browsing like keyboards and mice. Consider how those using alternative inputs like voice commands, touch screens, and adaptive technologies may operate your website, and ensure they have all the necessary means to do so.
Online Accessibility and Inclusion Toolkit
This year we published our Digital Inclusion Toolkit that was developed to help businesses make a real difference to the lives of the millions of people around the world who encounter online barriers. The 40 page document provides practical advice covering the complete landscape of online accessibility from how to write an accessibility statement to our top tips for providing an inclusive recruitment journey.
The importance of accessibility testing for UX web designers
Accessibility testing gives UX web designers critical information about what needs improving. And for that reason, it’s a great start point. Without testing, any effort to improve accessible UX design is a mere shot in the dark.
Accessibility testing comes in several shapes and sizes, but automated testing is perhaps the most useful for UX web designers. Tools like an accessibility checker are able to scan your website’s code in accordance with WCAG criteria, flagging any inaccessible or non-compliant features. Test results are compiled into a concise list complete with actionable recommendations for improvement. You can even access testing history to monitor how your UX design strategies have improved accessibility over time.
