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

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