So, you’ve just finished the “Developing for web accessibility” course and want to know what you could focus on next to continue expanding your knowledge?
Assistive technology videos
A series of short videos demonstrating varions assistive technologies in action.
- Screen Reader Demo
- Refreshable Braille Display
- ZoomText Demo
- Head Wand
- Sip and puff device
- Dragon NaturallySpeaking Demo
- Sady – Apple accessibility
- Steve’s AAC Story
WCAG resources
The Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. The key documents are:
ARIA Resources
WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. The key documents are:
- ARIA Authoring Practices Guide (APG)
- ARIA 1.1 – W3C Recommendation
- ARIA 1.2 – W3C Candidate Recommendation Draft
- ARIA 1.3 – W3C Editor’s Draft
- Using ARIA
General resources
Accessibility Not-Checklist
The Not-Checklist acts as a guide to make sure you haven’t missed anything. If you’re new to accessibility, the resource provides a foundation – it’s an overview of what you’ll need to consider, but it won’t teach you WCAG from front to back.
Accessibility Support
Detailed documentation that defines whether your code work with assistive technologies.
HTML and screen reader test cases
A series of HTML test cases to determine how they are announced in different screen reader / browser combinations.
Chatbot Accessibility Playbook
This detailed playbook presents actionable recommendations for improving chatbot accessibility.
Understanding disabilities and impairments: user profiles
A set of profiles highlighting common barriers users face when accessing digital services and tips for designing services everyone can use.
A Complete Guide To Accessible Front-End Components
An alphabetical list of all accessible components
Inclusive Components
All about designing inclusive web interfaces, piece by piece.
React Aria
A library of React Hooks that provides accessible UI primitives for your design system.
Accessibility articles
- The anatomy of visually-hidden
- Methods of applying accessible names to elements
- Methods of applying accessible descriptions to elements
- Concatenated accessible names
- The difference between aria-label and aria-labelledby
- How screen readers navigate data tables
- The shape-shifting “a” element
- The “label” element
- The difference between keyboard and screen reader navigation
CodePens from session 1
- DEVELOPER EXERCISE: Creating a fake checkbox – start
- DEVELOPER EXERCISE: Creating a fake checkbox – finished
- DEVELOPER EXERCISE: Using aria-labelledby – start
- DEVELOPER EXERCISE: Using aria-labelledby – finished
- DEVELOPER EXERCISE: Using aria-label – start
- DEVELOPER EXERCISE: Using aria-label – finished
- DEVELOPER EXERCISE: Reviewing accessible names
- DEVELOPER EXERCISE: Concatenated accessible names
- DEVELOPER EXERCISE: Adding accessible descriptions – start
- DEVELOPER EXERCISE: Adding accessible descriptions – finished
CodePens from session 2
- DEVELOPER EXERCISE: Landmark demo
- DEVELOPER EXERCISE: Clickable card
- DEVELOPER EXERCISE: Marking up tables – start
- DEVELOPER EXERCISE: Marking up tables – finished
CodePens from session 3
- DEVELOPER EXERCISE: Programmatically associating labels and form controls – start
- DEVELOPER EXERCISE: Programmatically associating labels and form controls – finished
- DEVELOPER EXERCISE: Making a radio group accessible – start
- DEVELOPER EXERCISE: Making a radio group accessible – finished
- DEVELOPER EXERCISE: Adding form field instructions – start
- DEVELOPER EXERCISE: Adding form field instructions – finished
- DEVELOPER EXERCISE: Adding required features – start
- DEVELOPER EXERCISE: Adding required features – finished
- DEVELOPER EXERCISE: Adding
inputmode
to inputs – finished
- DEVELOPER EXERCISE: Adding
inputmode
to inputs – start
- DEVELOPER EXERCISE: Adding the autocomplete value – start
- DEVELOPER EXERCISE: Adding the autocomplete value – finished
- All 14 form elements
- All 22 input types
- Which form controls do not require a label?
CodePens from session 4
- DEVELOPER EXERCISE:
aria-live="assertive"
- DEVELOPER EXERCISE:
aria-live="polite"
- DEVELOPER EXERCISE:
aria-live="off"
- DEVELOPER EXERCISE: Creating an accessible character counter – start
- DEVELOPER EXERCISE: Creating an accessible character counter – finished
- DEVELOPER EXERCISE: Setting up a form field error – start
- DEVELOPER EXERCISE: Setting up a form field error – finished
CodePens from session 5
- DEVELOPER EXERCISE: Creating an accessible modal – start
- DEVELOPER EXERCISE: Creating an accessible modal – finished
- DEVELOPER EXERCISE: Create an accessible chat – start
- DEVELOPER EXERCISE: Create an accessible chat – finished
- DEVELOPER EXERCISE: Making accessible in-page tabs – start
- DEVELOPER EXERCISE: Making accessible in-page tabs – finished
- DEVELOPER EXERCISE: Making an accessible editable combobox – start
- DEVELOPER EXERCISE: Making an accessible editable combobox – finished
- DEVELOPER EXERCISE: Landmark demo
- DEVELOPER EXERCISE: Clickable card
- DEVELOPER EXERCISE: Marking up tables – start
- DEVELOPER EXERCISE: Marking up tables – finished
CodePens from session 3
- DEVELOPER EXERCISE: Programmatically associating labels and form controls – start
- DEVELOPER EXERCISE: Programmatically associating labels and form controls – finished
- DEVELOPER EXERCISE: Making a radio group accessible – start
- DEVELOPER EXERCISE: Making a radio group accessible – finished
- DEVELOPER EXERCISE: Adding form field instructions – start
- DEVELOPER EXERCISE: Adding form field instructions – finished
- DEVELOPER EXERCISE: Adding required features – start
- DEVELOPER EXERCISE: Adding required features – finished
- DEVELOPER EXERCISE: Adding
inputmode
to inputs – finished
- DEVELOPER EXERCISE: Adding
inputmode
to inputs – start
- DEVELOPER EXERCISE: Adding the autocomplete value – start
- DEVELOPER EXERCISE: Adding the autocomplete value – finished
- All 14 form elements
- All 22 input types
- Which form controls do not require a label?
CodePens from session 4
- DEVELOPER EXERCISE:
aria-live="assertive"
- DEVELOPER EXERCISE:
aria-live="polite"
- DEVELOPER EXERCISE:
aria-live="off"
- DEVELOPER EXERCISE: Creating an accessible character counter – start
- DEVELOPER EXERCISE: Creating an accessible character counter – finished
- DEVELOPER EXERCISE: Setting up a form field error – start
- DEVELOPER EXERCISE: Setting up a form field error – finished
CodePens from session 5
- DEVELOPER EXERCISE: Creating an accessible modal – start
- DEVELOPER EXERCISE: Creating an accessible modal – finished
- DEVELOPER EXERCISE: Create an accessible chat – start
- DEVELOPER EXERCISE: Create an accessible chat – finished
- DEVELOPER EXERCISE: Making accessible in-page tabs – start
- DEVELOPER EXERCISE: Making accessible in-page tabs – finished
- DEVELOPER EXERCISE: Making an accessible editable combobox – start
- DEVELOPER EXERCISE: Making an accessible editable combobox – finished
inputmode
to inputs – finishedinputmode
to inputs – start- DEVELOPER EXERCISE:
aria-live="assertive"
- DEVELOPER EXERCISE:
aria-live="polite"
- DEVELOPER EXERCISE:
aria-live="off"
- DEVELOPER EXERCISE: Creating an accessible character counter – start
- DEVELOPER EXERCISE: Creating an accessible character counter – finished
- DEVELOPER EXERCISE: Setting up a form field error – start
- DEVELOPER EXERCISE: Setting up a form field error – finished