The role of accessibility in UI/UX design
Accessibility in UI/UX design means making products usable by people with visual, hearing, motor and cognitive disabilities, as well as anyone in difficult conditions. Follow WCAG 2.2 level AA: perceivable, operable, understandable and robust content. Building it in from the start is far cheaper than retrofitting it later.
Why accessibility matters
Around one in six people worldwide lives with a significant disability, according to the World Health Organization, and many more face temporary or situational limits such as a broken arm or bright sunlight. Accessible product design serves all of them, and in many markets it is also a legal requirement.
Who benefits from accessible design
Accessibility is often thought of as something for a small group of users, but its reach is much wider. People who are blind or have low vision rely on screen readers and magnification. People who are deaf or hard of hearing need captions and transcripts. People with motor impairments may navigate with a keyboard, switch device or voice control. People with cognitive or learning differences benefit from clear language and predictable layouts. Many more people have temporary or situational limitations, such as an injured hand, a noisy environment or bright sunlight on a screen.
| Situation | Permanent | Temporary | Situational |
|---|---|---|---|
| Vision | Blindness | Eye surgery recovery | Glare on a phone screen |
| Hearing | Deafness | Ear infection | Noisy café |
| Motor | Limited hand movement | Broken arm | Holding a child |
| Cognitive | Learning disability | Fatigue or stress | Distraction |
Designing for the permanent cases usually helps everyone in the temporary and situational ones too. Captions help people watching video in a quiet office; large tap targets help someone using a phone on a bumpy bus.
The four WCAG principles
| Principle | Meaning | Examples |
|---|---|---|
| Perceivable | Users can see or hear content | Alt text, captions, contrast |
| Operable | Users can navigate and interact | Keyboard access, enough time, no flashing |
| Understandable | Content and controls make sense | Plain language, clear errors |
| Robust | Works with assistive technology | Valid code, proper roles and labels |
What changed in WCAG 2.2
WCAG 2.2, published by the W3C in 2023, added several new success criteria that particularly affect modern interfaces. They include requirements that keyboard focus is not hidden behind sticky headers or other content, that touch targets meet a minimum size of 24 by 24 CSS pixels unless there is enough spacing, that drag-and-drop actions have a simple alternative, that help is located consistently across pages and that users are not asked to re-enter information they have already provided in the same process. Authentication should also avoid relying on memory tests, such as remembering complex passwords without allowing paste or password managers.
- Focus not obscured by sticky elements
- Minimum target size for pointer inputs
- Alternatives to dragging movements
- Consistent location of help
- No redundant entry of the same information
- Accessible authentication without memory tests
The most common failures
- Low text contrast
- Images without alternative text
- Form fields without labels
- Links that just say "click here"
- Controls that cannot be used with a keyboard
- Small touch targets on mobile
Quick wins for any product
- Check contrast: Make body text at least 4.5:1 against its background.
- Label every field: Use visible labels, not placeholder text alone.
- Describe images: Add meaningful alt text, or empty alt for decoration.
- Use real headings: Structure pages with proper heading levels.
- Show focus: Make the keyboard focus clearly visible.
- Caption video: Provide captions and transcripts for media.
These fixes are usually inexpensive and can be made in a few days, yet they resolve a large share of the barriers people encounter.
Building it into your process
- Set the standard: Agree WCAG 2.2 AA as the target.
- Bake it into components: Accessible colours, focus states and labels in the design system.
- Check during design: Contrast and structure checks before handoff.
- Test before launch: Automated scans plus screen-reader and keyboard testing.
A design system is the most reliable way to keep accessibility consistent. For different age groups, see our guide to designing UX for every age.
Testing with assistive technology
Automated tools catch many issues, such as missing labels and low contrast, but they cannot judge whether alternative text is meaningful or whether a journey makes sense to a screen reader user. Manual testing fills the gap. Try navigating key journeys using only a keyboard, test with VoiceOver on Apple devices and TalkBack or NVDA on others, zoom pages to 200% and check that nothing breaks. Wherever possible, include people with disabilities in usability testing, because they will find issues no checklist covers.
Legal and regional context
Accessibility is increasingly a legal requirement. In the UK, public sector websites must meet accessibility regulations, and the European Accessibility Act extends requirements to many private services in the EU. In the UAE, the government promotes inclusion of people of determination in digital services. Even where there is no specific law, accessible design reduces risk and widens the audience. Our product design team builds WCAG 2.2 AA into every project.
For the legal side and a practical audit process, see accessibility audits with AI: WCAG and the European Accessibility Act.
Frequently asked questions
What is WCAG 2.2?
The current version of the W3C Web Content Accessibility Guidelines, published in 2023. Level AA is the usual target for websites and apps.
Does accessibility hurt design quality?
No. Clear contrast, readable type and simple structure usually make products look and work better for everyone.
How do we test accessibility?
Combine automated tools with manual checks: keyboard-only navigation, screen readers and testing with users who have disabilities.
What is the difference between WCAG levels A, AA and AAA?
A is the minimum, AA is the widely adopted target that covers most significant barriers, and AAA is the highest level, usually applied to specific content rather than whole sites.
Are automated accessibility checkers enough?
No. They catch many technical issues but miss problems with meaning and flow, so combine them with keyboard, screen reader and user testing.
How long does it take to make an existing site accessible?
Quick wins can be fixed in days. Deeper issues in components or content may take weeks, so prioritise the most used journeys first.