Develop accessible digital content - introduction and index

Simple advice for the technically minded. In a nutshell, use simple, straightforward standards-based coding where possible and use style sheets to separate style from content.

Always use native HTML elements and attributes where possible and only use ARIA when native HTML alone cannot provide the best accessible solution.

Avoid introducing complexities unless absolutely necessary and, if you do, then make sure they are accessible.

If you are developing a CMS, you must produce an accessible product that for users, that, in turn, allows them to create accessible content.

In this section

The following pages include techniques that are designed to help you develop 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 an accessible page structure and layout
    • Use headings to convey the structure of your content
    • Code text correctly
    • Code lists of items semantically, using native HTML list elements
    • Provide meaningful links
    • Do not misuse semantic markup
    • Maintain a logical tab and reading order and provide a clear focus indicator
    • Provide adaptive or responsive layouts
    • Provide an accurate and informative page title
    • Specify the default language of the page and any language changes
    • Provide native HTML 5 for elements and ARIA for landmarks
    • Use clear and simple language
  • Design accessible navigation
    • Provide effective navigation based on recognised conventions
    • Provide additional navigational aids
    • Allow users to skip blocks of information easily
    • Use simple mobile gestures for interaction
  • Ensure images, video and audio are accessible to everyone
    • Provide alternatives for images, video and audio content
    • Ensure all images have a text equivalent (Alt text)
    • Provide text equivalents for audio content
    • Provide audio or text equivalents for visual content
    • Take extreme care when designing for video, audio and animation
  • Keep tables and data representation simple
  • Provide accessible forms
    • Design simple forms with sensible grouping and clearly labelled elements
    • Provide instructions and help users recover from errors
  • Ensure custom widgets are accessible
    • Make carousels accessible
    • Create accessible accordions
    • Create accessible modal dialogues
    • Make sure login and authentication processes are accessible
    • Ensure embedded social media code is accessible
  • Code according to best practices
    • Use structural and semantic markup properly and validate code
    • Aim for maximum consistency
    • Convey information so everyone can understand it
    • Use JavaScript wisely
    • Prioritise information, maximise readability and scanning
  • Use ARIA appropriately
    • Assign roles using ARIA
    • Use ARIA to announce updates and messaging
  • Always test your site with users who have access needs

References for this section

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 Identify Input Purpose
  • 9.1.4.1 Use of Colour
  • 9.1.4.2 Audio Control
  • 9.1.4.4 Resize Text
  • 9.1.4.5 Images of Text
  • 9.1.4.10 Reflow
  • 9.1.4.12 Text Spacing
  • 9.2.1.1 Keyboard
  • 9.2.1.2 No Keyboard Trap
  • 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.2 Page Titled
  • 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.2.5.3 Label in Name
  • 9.2.5.4 Motion Actuation
  • 9.3.1.1 Language of Page
  • 9.3.1.2 Language of Parts
  • 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.1 Parsing
  • 9.4.1.2 Name, Role, Value
  • 9.4.1.3 Status Messages

Further reading