Developing for web accessibility

Crack the accessibility code as you expand your knowledge of ARIA, the accessibility tree, custom components and more.

How to buy

This course is available in the following passes:

All Access Pass
Bundle
AUD $385 // USD $250
Access all courses on Intopia learn, including automatic access to any new courses.
Accessible Developer Pass
Bundle
AUD $297 // USD $193
This course pack unlocks your accessible coding skills. Discover how to develop accessible products and services for web, iOS, and Android.

Course curriculum

1. Introduction to the course
1. What is an accessibility tree?
2. About the accessibility tree
3. Viewing the accessibility tree
4. What is ARIA?
5. How does ARIA work?
6. When to use ARIA
7. Reviewing the rules
8. Browser support for ARIA
9. Activity: Creating a fake checkbox
10. 1.1 Knowledge Check
1. Accessible names
2. Introduction to accessible names
3. Matching names and text labels
4. Using aria-labelledby
5. Using aria-label
6. Names vs descriptions - which one wins?
7. Accessible names - which one wins?
8. Reviewing accessible names
9. Concatenated accessible names
10. 1.2 Knowledge Check
1. Introduction to accessible descriptions
2. Adding accessible descriptions
3. The difference between aria-labelledby and aria-describedby
4. Accessible descriptions - which one wins?
5. Announcing names and descriptions
6. The placeholder and title attributes
7. 1.3 Knowledge Check
1. Introduction to semantic markup
2. HTML Content Categories
3. Valid HTML markup
4. 2.1 Knowledge Check
1. Why headings are needed
2. Introduction to headings
3. Using headings
4. 2.2 Knowledge Check
1. Introduction to landmarks
2. Two landmark methods
3. The header landmark
4. The footer landmark
5. The nav landmark
6. The main landmark
7. The aside landmark
8. The section landmark
9. The article landmark
10. The search landmark
11. 2.3 Knowledge Check
1. Introduction to links and buttons
2. Link or button?
3. Using links and buttons
4. Providing additional context for links
5. Providing accessible names for buttons
6. 2.4 Knowledge Check
1. Introduction to accessible images
2. Image types
3. Reviewing decorative images
4. Reviewing informative images
5. Reviewing functional images
6. Reviewing complex images
7. 2.5 Knowledge Check
1. Using tables correctly
2. Introduction to accessible tables
3. Accessible table markup
4. Identifying complex tables
5. Complex tables
6. Layout tables
7. Marking up tables
8. 2.6 Knowledge Check
1. Creating accessible forms
2. Forms and screen readers
1. Why are labels important?
2. What are label elements?
3. What label?
4. Which form elements don’t need a label?
5. Explicit vs implicit labelling
6. Label order
7. Programmatically associating label elements
8. Which elements are allowed as descendants of the label element?
9. 3.2 Knowledge Check
1. What are the fieldset and legend elements?
2. Why are these elements important for accessibility?
3. The radiogroup role
4. Making a radio group accessible
5. 3.3 Knowledge Check
1. What are form field instructions?
2. Adding form field instructions
3. Form instructions and fieldsets
4. Adding instructions to fieldsets
5. Required form fields for everyone
6. Programmatically identifiable required fields
7. Visually identifiable required fields
8. Adding required features
9. 3.4 Knowledge Check
1. Introduction to form validation
2. Form field errors
3. onSubmit errors
4. 3.5 Knowledge Check
1. The inputmode attribute
2. Adding the inputmode attribute
3. The autocomplete attribute
4. Adding the autocomplete attribute
5. 3.6 Knowledge Check
1. Introduction to live regions
2. The aria-live attribute
3. Announcing region changes
4. The aria-atomic attribute
5. The aria-relevant attribute
6. aria-busy
7. The aria-busy attribute
8. Using aria-live
9. Live region roles
10. Live regions and implicit values
11. 4.1 Knowledge Check
1. What are notifications?
2. Considering notifications
3. Designing and building accessible notifications
4. A toast notification
5. A character counter
6. 4.2 Knowledge Check
1. Introduction to widgets
2. Native vs non-native
3. A widget decision tree
4. Designing and building accessible widgets
5. 5.1 Knowledge Check
1. What makes an accessible modal?
2. Creating an accessible modal
3. 5.2 Knowledge Check
1. What makes an accessible in-page tab widget?
2. Creating accessible in-page tabs
3. 5.3 Knowledge Check
1. What makes an accessible editable combobox?
2. Creating an accessible editable combobox
3. 5.4 Knowledge Check
1. What makes an accessible chat window?
2. Creating an accessible chat window
3. 5.5 Knowledge Check

About this course

Read, watch, and do
10 hours of learning
One year of access

Developing for web accessibility

How to buy

All Access Pass

Accessible Developer Pass

Course curriculum

Introduction

1.1 Getting started with accessibility

1.2 Accessible names

1.3 Accessible descriptions

2.1 Understanding semantic markup

2.2 Headings

2.3 Landmarks

2.4 Links and buttons

2.5 Images

2.6 Tables

3.1 Introduction to accessible forms

3.2 Accessible forms and labels

3.3 The fieldset and legend elements

3.4 Instructions and required fields

3.5 Client side form validation

3.6 Important form attributes

4.1 Live regions

4.2 Notifications

5.1 Widgets

5.2 Modals

5.3 In-page tabs

5.4 Comboboxes

5.5 Chat windows

About this course