User experience accessibility: designing for everyone, not just some
Imagine trying to navigate a website using a screen reader, only to find that important buttons are missing labels, or that you can’t access key content. For many people with access needs, this is a daily struggle. But what if we could change that? What if every digital product was designed with everyone in mind? This is where user experience accessibility enters the conversation.
User experience accessibility isn’t just a buzzword; it’s a commitment to inclusivity. By following accessibility standards, engaging in user research, and leveraging the right tools, we can create designs that truly welcome all users.
Follow accessibility standards
One of the first steps to creating accessible designs is adhering to the Web Content Accessibility Guidelines (WCAG). These guidelines provide a framework for ensuring that web content is accessible to users with different access needs. Here are the four main principles you need to follow for accessible designs.
Perceivable: Make sure content is easy to see or hear. This means using text descriptions for images and ensuring videos have captions.
Operable: Your site should be easy to navigate for everyone, including those who rely on keyboards or assistive technology.
Understandable: Keep your content clear and straightforward. Users shouldn’t have to guess how to use your site.
Robust: Ensure your content works well with different technologies, like screen readers.
To remember these principles, just think of the mnemonic POUR.
Aiming for WCAG 2.2 Level AA compliance ensures your design meets the needs of a broad range of users with access needs.
Conduct user research with individuals with access needs
Involving users with access needs during the design process is crucial for understanding their needs and gathering insights about their specific challenges.
Interviews and Observational Studies: Conduct interviews and observe how individuals with access needs interact with your product or similar ones. This hands-on approach can reveal valuable insights that can be used to improve your design.
Usability Testing: Include users with access needs in usability testing to gain direct feedback on how accessible your product is. This real-world testing will provide insights into any barriers that users face.
Design for visual accessibility
For users with visual impairments, certain design adjustments can make a big difference:
Colour Contrast: Use tools like the A11y Color Contrast Accessibility Validator to check the contrast ratio between text and background. The contrast should be high enough to make text readable for users with low vision.
Text Alternatives: Provide descriptive alt text for all non-text elements, such as images and infographics. This allows screen reader users to understand the context of visual content.
Scalable Text: Ensure that text can be resized without breaking the design. This helps users with low vision who may need to increase the size of the text to read it comfortably.
Ensure keyboard navigation
Many users with mobility impairments rely on keyboards or alternative input devices to navigate websites and applications. To ensure your design is accessible to these users, be sure to implement the following:
Keyboard Shortcuts: Ensure that all interactive elements, such as buttons and forms, are accessible via keyboard. Users should be able to tab through the interface logically and efficiently.
Skip Links: Implement a "Skip to Content" link to allow keyboard users to bypass repetitive navigation elements like headers and menus, getting them straight to the main content.
Accessible Forms and Buttons: Design form fields and buttons that are large enough for easy selection. This is especially important for users with limited dexterity.
Here’s a table of shortcuts you may want to test for accessibility purposes:
| Shortcut | Function |
|---|---|
| Tab | Move forward through links and form controls. |
| Shift + Tab | Move backward through links and form controls. |
| Enter | Interact with a focused link or button. |
| Space | Interact with a focused checkbox or dropdown. |
| ↑ (Up Arrow) | Scroll up or move to the previous option. |
| ↓ (Down Arrow) | Scroll down or move to the next option. |
| ← (Left Arrow) | Scroll left or navigate to the previous item. |
| → (Right Arrow) | Scroll right or navigate to the next item. |
| Escape | Close or dismiss open dialogs. |
Provide text alternatives for multimedia
For users with hearing impairments, text alternatives to audio and video content are essential.
Closed Captions and Subtitles: Always provide captions for video content to make it accessible to users who cannot hear. Captions should not only display dialogue but also important sounds like background music or sound effects.
Transcripts: For podcasts and other audio content, include transcripts to allow users to read the information. This is crucial for people who are deaf or hard of hearing.
Implement responsive design
A responsive design ensures that your product works well across different devices and screen sizes. This is particularly important for low-vision users who may need to zoom in on content.
Flexible Layouts: Ensure that your design adjusts smoothly to different screen sizes, from desktops to smartphones. Users should be able to zoom in without losing functionality or breaking the layout.
Touchscreen Considerations: Optimise your design by using larger touch targets, ensuring adequate spacing to prevent accidental clicks, avoiding hover effects, incorporating intuitive gestures, and testing across various touchscreen devices.
Simplify designs for cognitive accessibility
Users with cognitive disabilities, such as dyslexia or ADHD, benefit from designs that reduce complexity and cognitive load.
Consistent Layouts: Keep navigation patterns consistent across pages. Clear and predictable layouts reduce confusion and make it easier for users to find what they need.
Readable Fonts: Use sans-serif fonts which are easier to read, especially for users with dyslexia. Here are some fonts that are considered to be the best readable fonts.
Helvetica
Arial
Verdana
Georgia
Tahoma
There are more ways to simplify your websites for cognitive accessibility. This article provides tips on minimising distractions to create a more user-friendly experience. You can also find information on choosing readable fonts and improving text accessibility here.
Use accessibility testing tools
Accessibility testing should be a key part of your design process. Both automated and manual testing tools can help you catch potential issues early on.
Automated Testing: Tools like Google Lighthouse, WAVE, and Axe DevTools can quickly scan your website or app for accessibility violations. These tools provide a report on potential issues and suggest fixes.
Manual Testing: Use screen readers like JAWS and NVDA to test how well your design works for users who rely on these assistive technologies. Additionally, test your product’s keyboard navigation to ensure users can interact with all features without needing a mouse.
By combining automated and manual testing methods, you’ll be able to catch accessibility issues that might otherwise go unnoticed, significantly enhancing user experience accessibility across your platform.
Continuously gather feedback
Accessibility is an ongoing process, and it’s important to gather continuous feedback from users with disabilities even after your product is launched.
Regular Audits: Conduct regular accessibility audits to ensure that your product remains compliant with accessibility standards as new features are added or existing ones are updated.
User Feedback: Encourage users to provide feedback on their experience, especially those with access needs. This feedback will help identify new issues and areas for improvement.
Accessibility isn’t only for people with access needs. Improved user experience accessibility makes it easier for everyone to navigate and use digital products—whether it's older adults, users with temporary impairments, those in challenging environments like bright sunlight, or those who just want to use those accessibility features.
At Digital Product People, we specialise in creating accessible, user-friendly digital solutions. Our user experience accessibility services ensure that your product is inclusive and easy to use for everyone. Contact us today to learn how we can help make your designs more accessible.
