- Home
- Practical guides
- Design accessible journeys from navigation to completion
UX & accessibility
Design accessible journeys from navigation to completion
Accessibility concerns using a site with keyboards, screen readers, enlarged text and different visual or motor conditions. Plan it in the design and verify real tasks, using WCAG as a reference framework.
In this guide
- Give content meaningful structure
- Support navigation without a mouse
- Check readability under different conditions
- Explain actions, errors and outcomes
- Maintain testing through product changes
Give content meaningful structure
Use descriptive headings, coherent hierarchy and links with understandable destinations. Match lists and tables to the information they contain.
Preserve logical reading order across layouts and larger text. Provide useful alternatives for informative images without unnecessary descriptions of decoration.
Support navigation without a mouse
Make menus, links, buttons and viewers keyboard usable with visible focus. Follow a complete task to check understandable order and avoid trapping users.
Plan opening, closing and focus return for dialogs. Hover-only actions also need consideration for keyboard and touch use.
Check readability under different conditions
Check contrast and communicate meaning through more than colour alone. Use clear status labels, readable type and comfortable spacing.
Test light and dark themes, enlarged text and small screens. One successful layout does not establish that every condition remains usable.
Explain actions, errors and outcomes
Give fields identifiable labels and actionable errors while preserving useful entered data. A red border alone may not communicate the issue.
Plan asynchronous waiting, success and failure messages. Choose appropriate captions, transcripts or structured documents for the information conveyed by media.
Maintain testing through product changes
Combine automated tools, manual journeys and relevant assistive-technology feedback. Prioritise findings and verify corrections; a score is not a complete conformity determination.
New content and components can reintroduce barriers. Establish applicable requirements with responsible contacts and include checks in ongoing design and acceptance.
Your checklist
- Check headings and reading order.
- Complete tasks with the keyboard.
- Test contrast, zoom and themes.
- Prepare labels, errors and media alternatives.
- Retest changes and corrections.
Frequently asked questions
Is an automated checker sufficient?
No. It detects some issues, while reading order, comprehension and task completion also need suitable testing.
Must improvements wait for a redesign?
No. Targeted fixes to headings, contrast, keyboard use and forms can improve existing journeys.
A project to explore
Jibril.me
Jibril.me’s reading journeys across devices illustrate why legibility, navigation and content interactions deserve careful design.
Explore the project