Digital Accessibility Workshop
What is it?
This hands-on Accessibility workshop series is designed to help digital teams improve their knowledge and skill in digital accessibility.
How long does it take?
The course comprises of six topics. The most common practice is to run one component per week over 6 consecutive weeks. The course can be conducted entirely online.
Who is it for?
The series has individual components that are relevant to:
- Developers: All topics
- Technical testers: All topics
- QA Testers: Topics 1 - 3
- Designers: Topics 1 - 3
- Product Owners: Topic 1
- Iteration Managers: Topic 1
Preparation information
This is some information to be aware of before attending the workshop.
Aims before commencing training:
Topic 1: Assistive technologies
Duration: 60-90 mins
Audience: Developers, Designers, Testers, Iteration Managers, Product Owners
Aims for this session:
- An understanding of the different types of disabilities.
- An understanding of assistive technologies.
- An introduction to using keyboard-only.
- An introduction to using screen readers.
Outline:
Topic 2: Semantic markup
Duration: 60-90 mins
Audience: Developers, Designers, Testers
Aims for this session:
- An understanding of the importance of semantic and valid markup.
- An understanding of the correct use of landmarks, headings, links and buttons.
Outline:
- 2.0 Introduction
- 2.1 What is semantic markup?
- 2.2 HTML Content Model Categories?
- 2.2 What is valid markup?
- 2.3 Exercise: Validating some sites
- 2.4 Landmarks
- 2.5 Exercise: Identifying landmarks
- 2.6 Headings
- 2.7 Exercise: Identifying headings
- 2.8 Links and buttons
- 2.9 Exercise: Identifying links and buttons
Topic 3: Accessible forms
Duration: 60-90 mins
Audience: Developers, Designers, Testers
Aims for this session:
- An understanding of accessible forms, especially the
<label>,<fieldset>and<legend>elements. - An understanding of accessible required fields.
- An understanding of accessible form errors.
Outline:
- 3.0 Introduction
- 3.1 Exercise: An HTML element quiz
- 3.2 Which form elements need a label?
- 3.3 Which form elements don’t need a label?
- 3.4 Which elements should never have a label?
- 3.5 Explicitly associate labels
- 3.6 Exercise: Making an input accessible
- 3.7 Label order
- 3.8 Exercise: Fixing the label order
- 3.9 Fieldsets and legends
- 3.10 Exercise: Making a radio group accessible
- 3.11 Required fields
- 3.12 Exercise: Adding required features
- 3.13 Form Errors
- 3.14 Exercise: Accessible error messages
Topic 4: Intro to ARIA
Duration: 60-90 mins
Audience: Developers, Technical Testers
Aims for this session:
- The importance of the accessibility tree, accessible names and descriptions.
- An understanding of ARIA.
- The difference between
aria-describedby,aria-labelledbyandaria-label.
Outline:
- 4.0 Introduction
- 4.1 Accessibility APIs
- 4.2 Accessibility Tree
- 4.3 Exercise: Viewing the Accessibility Tree
- 4.4 Accessible names
- 4.5 Exercise: Viewing Accessible names
- 4.6 Accessible descriptions
- 4.7 Exercise: Viewing accessible descriptions
- 4.8 How names and descriptions are announced
- 4.9 What is WAI-ARIA?
- 4.10 How does ARIA work?
- 4.11 Roles, states and properties
- 4.12 Exercise: Creating a fake checkbox
- 4.13 aria-labelledby
- 4.14 Exercise: Using aria-labelledby
- 4.15 aria-label
- 4.16 Exercise: Using aria-label
- 4.17 aria-describedby
- 4.18 Exercise: Using aria-describedby
Topic 5: Working with ARIA
Duration: 60-90 mins
Audience: Developers, Technical Testers
Aims for this session:
- How to build accessible modals.
- An understanding of live regions.
- An understanding of key
aria-attributes. - Aria attributes that are no longer needed.
- How to build accessible in-page tabs.
Outline:
- 5.0 Introduction
- 5.1 What makes an accessible modal?
- 5.2 Exercise: Setting up a modal
- 5.3 Live region states and properties
- 5.4 Exercise: Using aria-live
- 5.5 Live region roles
- 5.6 Exercise: Using status and alert
- 5.7 aria-invalid
- 5.8 Exercise: Using aria-invalid
- 5.9 hidden vs aria-hidden
- 5.10 Exercise: Using aria-hidden
- 5.11 presentation and none
- 5.12 Exercise: Using the presentation role
- 5.13 Aria values that are no longer needed
Topic 6: Non-native widgets and testing
Duration: 60-90 mins
Audience: Developers, Technical Testers
Aims for this session:
- An understanding of native vs non-native widgets
- The criteria for making non-native widgets accessible
- Steps for unit testing and auditing
Outline:
- 6.0 Introduction
- 6.1 What are non-native widgets?
- 6.2 A native example
- 6.3 A non-native example
- 6.4 Criteria for accessible widgets
- 6.5 In-page tabs
- 6.6 Exercise: Making accessible in-page tabs
- 6.7 A basic accessibility testing process
- 6.8 Exercise: Conducting some testing
- 6.9 Exercise: Making an accessible autocomplete
All exercise files
All exercise files used throughout the course including start and finished versions so you can check after each exercise.