$\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

Headless Components

Overview of headless components

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Section 7.1Benefits

Previous LessonTabs Implementation - Keyboard Interactions Next LessonUsing Radix to Implement the Tabs Component

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