Developing for web accessibility

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

Enrol now ($297 / one year) Free preview

Course curriculum

1. Introduction to the course
  FREE PREVIEW
1. What is an accessibility tree?
  FREE PREVIEW
2. About the accessibility tree
  FREE PREVIEW
3. Viewing the accessibility tree
  FREE PREVIEW
4. What is ARIA?
  FREE PREVIEW
5. How does ARIA work?
  FREE PREVIEW
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

$297 AUD (GST inclusive)
10 hours of learning
One year of access (renew on demand)

Other courses you may like

Designing for web accessibility
Course
Make sure anyone can enjoy the beauty of your designs. Explore UI and interaction design principles that contribute to creating barrier-free experiences on the web.

$297

Purchase

View more courses

Start your adventure in accessible code today.

Enrol now

Developing for web accessibility

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

Other courses you may like

Designing for web accessibility

Start your adventure in accessible code today.