$\newline Logo$

MODULE 1
Introduction
This module provides an overview of the course content, defines what accessibility is, and explains its importance.
MODULE 2
ARIA and Assistive Technology
In this module, you will get definitions for common terms and acronyms, become acquainted with screen readers, and explore ARIA roles, states, and properties.
MODULE 3
Accessibility Fundamentals
In this module, you'll delve into the fundamentals of accessibility, starting with the benefits of using native HTML for headings, landmarks, and semantics. You'll learn about the importance of alt text, how to create accessible forms with proper labels and inputs, and the significance of CSS for maintaining color contrast and visual affordances. Additionally, you'll explore focus management and keyboard interactions, including the use of tabindex and understanding tab order.
MODULE 4
Auditing for Accessibility
This module will provide a demo of performing an audit on a website with known accessibility issues using the axe browser extension. It will also show how to test a site using a screen reader and inspect accessibility properties within the browser.
- LESSON 4.1Project Preview and axe DevTools
- LESSON 4.2Performing an Accessibility Audit
MODULE 5
Build a TextInput Component
This module will show the process of implementing and testing an accessible text input component. It will show the foundational concept of associating labels with inputs. In addition, the student will learn how to handle error messages and properly link them with ARIA attributes.
MODULE 6
Build a Tabs Component
This module will show the complete process of implementing a tabs component that is based on the ARIA Authoring Practices Guide (APG) Tabs Pattern.
MODULE 7
Build a Headless Tabs Component
This module will teach how to implement a headless version of the same tabs component and emphasizes the use of modern UI patterns to build accessible user interfaces.
- LESSON 7.1Headless Components
- LESSON 7.2Using Radix to Implement the Tabs Component
MODULE 8
Conclusion
The final module wraps up the course, providing links and references to further reading and additional resources, ensuring you have the proper tools to continue in your accessibility journey.
- LESSON 8.1Course Wrap-up and Resources

Project Preview and axe DevTools

Doggy Directory sample project

In this lesson, you will prepare for the auditing process by getting a preview of the sample project and installing the axe DevTools browser extension.

Project Preview#

The starter code for the project can be found in this CodeSandbox environment. Feel free to fork the sandbox to follow along with the next lesson.

You'll be working with a sample site called Doggy Directory. It uses the Dog API to create a system for searching and displaying a collection of dog images by breed.

The project was adapted from a DigitalOcean article I wrote called "How To Test a React App with Jest and React Testing Library" and has been intentionally riddled with accessibility issues. This will allow you to perform an audit on the website and practice incrementally fixing issues.

Doggy Directory Landing Page

This lesson preview is part of the The Approachable Guide to Accessible Components course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to The Approachable Guide to Accessible Components, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

$Thumbnail for the \newline course The Approachable Guide to Accessible Components$

LessonEditor