Design accessible digital content - introduction and index
Simple advice – use principles of good design to create clear, consistent, readable pages. Remember accessibility does not have to stunt your creativity – considering accessibility needs might actually enhance the aesthetic. Ideally you should not be able to spot an accessible site from how it looks - gone are the days where accessible equates to boring!
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
- Aim for maximum consistency
- Design adaptive or responsive layouts
- Design accessible navigation
- Provide effective navigation based on recognised conventions
- Provide additional navigational aids
- Allow users to skip blocks of information
- Maintain a logical tab and reading order and provide a clear focus indicator
- Use simple mobile gestures for interaction
- Use accessible design to communicate information
- Design to help users scan for key information
- Enhance clarity with good design
- Design that conveys information
- Design and implement accessible tables and graphs
- Ensure images, video and audio are accessible to everyone
- Provide alternatives for images, video and audio content
- Take extreme care when designing for video, audio and animation
- Design accessible interactions and feedback
- Provide meaningful links
- Design simple forms with sensible grouping and clearly labelled elements
- Provide instructions and help users recover from errors
- 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