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
- Keep tables and data representation simple
- Provide accessible forms
- Ensure custom widgets are accessible
- Code according to best practices
- Use ARIA appropriately
- Always test your site with users who have access needs
References for this section
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.5 Identify Input Purpose (AA)
- 1.3.6 Identify Purpose (AAA)
- 1.4.1 Use of Colour (A)
- 1.4.2 Audio Control (A)
- 1.4.4 Resize Text (AA)
- 1.4.5 Images of Text (AA)
- 1.4.10 Reflow (AA)
- 1.4.12 Text Spacing (AA)
- 2.1.1 Keyboard (A)
- 2.1.2 No Keyboard Trap (A)
- 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.2 Page Titled (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.3 Label in Name (A)
- 2.5.4 Motion Actuation (A)
- 2.5.5 Target Size (AAA)
- 2.5.6 Concurrent Input Mechanisms (AAA)
- 3.1.1 Language of Page (A)
- 3.1.2 Language of Parts (AA)
- 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.2.5 Change on Request (AAA)
- 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.1 Parsing (A)
- 4.1.2 Name, Role, Value (A)
- 4.1.3 Status Messages (AA)
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
- WAI Page Structure Tutorial (Headings)
- Accessibility according to actual people with disabilities
- Pixels vs. Relative Units in CSS: why it’s still a big deal
- CSS units for font-size: px, em, rem
- Meaningful links (Princeton University)
- Links (Yale University)
- Making Accessible Links: 15 Golden Rules For Developers
- Accessible Rich Internet Applications (WAI-ARIA) 1.1
- Nomensa - What are Accesskeys?
- Scott O’Hara – Tabindex, It Rarely Pays to be Positive
- a {outline: none} DON’T DO IT!
- Adaptive vs. Responsive Design
- MDN Web Docs - lang Attribute
- MDN Web Docs – WAI-ARIA basics
- Google Developers Web Fundamentals – Introduction to ARIA
- WAI-ARIA 1.1 Authoring Practises
- MDN Web Docs – HTML elements reference
- WAI-ARIA Authoring Practises 1.1 - Alert
- WAI-ARIA Authoring Practises 1.1 - Status
- ARIA Live Regions - MDN Web Docs
- Accessible Rich Internet Applications (WAI-ARIA) 1.1 Documentation
- WAI-ARIA - General Principles
- MDN Web Docs - WAI-ARIA Roles
- HTML 5 and ARIA Landmarks
- Understanding ARIA Landmarks – General Principle and Roles
- 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
- 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
- The Trouble with Tables: A Brief Introduction
- 7 Rules of Using Radio Buttons vs Drop-Down Menus by Saadia Minhas
- Readability (Yale University)
- Simple form validation using ARIA
- Alison Walden - If you must use a carousel, make it accessible
- Bureau of Internet Accessibility - Effective and Accessible Alternatives to Website Carousels
- Deque University - Custom Widgets Accessibility Checklist
- Hassel Inclusion - My Favourite Accessible Accordion Pattern
- Aditus - Accessible Accordion
- Deque University - Custom Widgets Accessibility Checklist
- The Incredible Accessible Modal Window, Version 3
- W3Docs - List of Deprecated HTML Attributes
- W3Docs - List of Deprecated HTML Tags
- Accessibility testing as a screen reader user - TPGi
- Accessibility according to actual people with disabilities - Axess Lab
- W3C - Pointer Events Example
- Is Infinite Scrolling Accessible? - Bureau of Internet Accessibility