In this section
The following pages include techniques that are designed to help you design accessible user experiences. They are grouped according to related practices and can be referred to as necessary. While these techniques are tried and tested, keep in mind that they may not be the only way to address a particular user need.
- Provide a flexible layout and design
- Design accessible navigation
- Use accessible design to communicate information
- Ensure images, video and audio are accessible to everyone
- Design accessible interactions and feedback
- Always test your designs with users who have access needs
References
WCAG 2.1
- 1.1.1 Non-text Content (A)
- 1.2.1 Audio-only and Video-only (Pre-recorded) (A)
- 1.2.2 Captions (Pre-recorded) (A)
- 1.2.3 Audio Descriptions or Media Alternative (Pre-recorded) (A)
- 1.2.4 Captions (Live) (A)
- 1.2.5 Audio Description (Pre-recorded) (AA)
- 1.2.6 Sign Language (Pre-recorded) (AAA)
- 1.3.1 Info and Relationships (A)
- 1.3.2 Meaningful Sequence (A)
- 1.3.3 Sensory Characteristics (A)
- 1.3.4 Orientation (AA)
- 1.3.5 Identify Input Purpose (AA)
- 1.4.1 Use of Colour (A)
- 1.4.2 Audio Control (A)
- 1.4.3 Contrast (Minimum) (AA)
- 1.4.4 Resize text (AA)
- 1.4.5 Images of Text (AA)
- 1.4.12 Text Spacing (AA)
- 2.1.4 Character Key Shortcuts (A)
- 2.2.1 Timing Adjustable (A)
- 2.2.2 Pause, Stop, Hide (A)
- 2.3.1 Three Flashes or Below Threshold (A)
- 2.4.1 Bypass Blocks (A)
- 2.4.3 Focus Order (A)
- 2.4.4 Link Purpose (In Context) (A)
- 2.4.5 Multiple Ways (AA)
- 2.4.6 Headings and Labels (AA)
- 2.4.7 Focus Visible (AA)
- 2.4.8 Location (AAA)
- 2.4.9 Link Purpose (Link Only) (AAA)
- 2.5.5 Target Size (AAA)
- 3.1.4 Abbreviations (AAA)
- 3.1.5 Reading Level (AAA)
- 3.2.2 On Input (A)
- 3.2.3 Consistent Navigation (AA)
- 3.2.4 Consistent Identification (AA)
- 3.3.1 Error Identification (A)
- 3.3.2 Labels or Instructions (A)
- 3.3.3 Error Suggestion (AA)
- 3.3.4 Error Prevention (Legal, Financial, Data) (AA)
- 4.1.2 Name, Role, Value (A)
EN 301 549 v 2.1.2
- 9.1.1.1 Non-text Content
- 9.1.2.1 Audio-only and Video-only (Pre-recorded)
- 9.1.2.2 Captions (Pre-recorded)
- 9.1.2.3 Audio Descriptions or Media Alternative (Pre-recorded)
- 9.1.2.4 Captions (Live)
- 9.1.2.5 Audio Description (Pre-recorded)
- 9.1.3.1 Info and Relationships
- 9.1.3.2 Meaningful Sequence
- 9.1.3.3 Sensory Characteristics
- 9.1.3.4 Orientation
- 9.1.3.5 Identify Input Purpose
- 9.1.4.1 Use of Colour
- 9.1.4.2 Audio Control
- 9.1.4.3 Contrast (Minimum)
- 9.1.4.4 Resize text
- 9.1.4.5 Images of Text
- 9.1.4.12 Text Spacing
- 9.2.1.4 Character Key Shortcuts
- 9.2.2.1 Timing Adjustable
- 9.2.2.2 Pause, Stop, Hide
- 9.2.3.1 There Flashes or Below Threshold
- 9.2.4.1 Bypass Blocks
- 9.2.4.3 Focus Order
- 9.2.4.4 Link Purpose (In Context)
- 9.2.4.5 Multiple Ways
- 9.2.4.6 Headings and Labels
- 9.2.4.7 Focus Visible
- 9.3.2.2 On Input
- 9.3.2.3 Consistent Navigation
- 9.3.2.4 Consistent Identification
- 9.3.3.1 Error Identification
- 9.3.3.2 Labels or Instructions
- 9.3.3.3 Error Suggestion
- 9.3.3.4 Error Prevention (Legal, Financial, Data)
- 9.4.1.2 Name, Role, Value
Further reading
- Why Consistency is Important to Accessible Design
- General Touch Interaction Guidelines - 4ourth.com
- Designing for Touch – 4ourth.com
- WebAIM’s alternative text page
- WebAIM’s complex image tutorial
- 3 questions to Help Decide If an Image Doesn't Need Alt Text
- WAI Decorative Images
- 5 most annoying website features I face as a blind person every single day
- Deafness and the User Experience
- Accessibility according to actual people with disabilities
- Alternate text for background images
- WAI guidance on images
- WAI Alt text Decision Tree
- Text descriptions and emotion rich images
- Writing great alt text: Emotion matters
- Register of Irish Sign Language Interpreters
- Guidelines for Working with Interpreters, June 2021 (PDF)
- A guide to using subtitles, captions and transcripts for accessibility
- WAI guidance on Captions/Subtitles
- Google – Add subtitles and captions
- How Current Design Trends Affect Web Accessibility
- Your Interactive Makes Me Sick
- Vestibular Issues in Parallax Design
- About Vestibular Disorders
- National Health and Nutrition Examination Survey, 2001-2004
- Meaningful links (Princeton University)
- Links (Yale University)
- Making Accessible Links: 15 Golden Rules For Developers
- Pixels vs. Relative Units in CSS: why it’s still a big deal
- CSS units for font-size: px, em, rem
- The Trouble with Tables: A Brief Introduction
- Readability (Yale University)
- 7 Rules of Using Radio Buttons vs Drop-Down Menus by Saadia Minhas