AUTHOR

Alyssa Holland

Accessibility Terminology

Project Preview and axe DevTools

Adding error message handling to the existing TextInput component

Handling Error Messages

What is Accessibility?

HTML - Headings, Landmarks, and Semantics

ARIA Attributes - Roles, States, and Properties

ARIA Attributes

Step-by-step guide of how to implement an accessible text input component

Implementing the TextInput Component

Part 2 of Implementing the Tabs Component

Tabs Implementation - Keyboard Interactions

Using Radix to Implement the Tabs Component

Headless Components

Part 1 of Implementing the Tabs Component

Tabs Implementation - Roles, States, and Properties

Images and Alt Text

Preview of the TextInput Component to be built

TextInput Component Overview

Introduction to "Build Accessible Components for the Web"

Course Introduction

Wrap up resources for Build Accessible Components

Course Wrap-up and Resources

Overview of the main topics that will be taught throughout the course

Course Overview

Getting familiar with the screen reader assistive technology

Screen Readers

Preview of the Tabs Component to be built

Tabs Component Overview

Using CSS to ensure proper color contrast and visual affordances for interactive elements

Color Contrast and Styles

Using input and form controls to create accessible forms

Labels and Inputs

Using the axe DevTools to audit a sample site

Performing an Accessibility Audit

Enabling focus using tabindex, and understanding tab order

Focus Management and Keyboard Interactions

This module provides an overview of the course content, defines what accessibility is, and explains its importance.

Introduction

In this module, you will get definitions for common terms and acronyms, become acquainted with screen readers, and explore ARIA roles, states, and properties.

ARIA and Assistive Technology

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.

Accessibility Fundamentals

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.

Auditing for Accessibility

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.

Build a TextInput 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.

Build a 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.

Build a Headless Tabs Component

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.

Conclusion

**Build Accessible Components for the Web** is designed to provide a comprehensive understanding of web accessibility. The course covers foundational principles, practical techniques, and hands-on projects to solidify the concepts. From learning the basics of ARIA and assistive technologies to building and testing accessible components, you will gain the skills necessary to create inclusive web applications. Each module builds upon the previous one, ensuring a cohesive and thorough learning experience.

### Why Accessibility Feels Daunting
Accessibility is a broad and massive topic that includes a myriad of nuances and subtopics. 

For many developers, understanding and implementing accessibility is a challenge that often feels different from any other aspect of web development.  This challenge is compounded by the fact that accessibility guidelines can seem abstract and difficult to apply in practical scenarios, leading to frustration and uncertainty.

The thing is that accessibility isn't just about writing code. It's about having empathy and understanding the needs of diverse users to ensure that your applications are usable by everyone, regardless of their abilities. 

### How this Course Helps
"Build Accessible Components for the Web" provides an **approachable guide to accessibility**. The course demystifies the complex world of web accessibility with the following process: 
- **Building a Solid Foundation**: Establish a deep understanding of **core accessibility principles** that serve as the groundwork for your learning, ensuring that the concepts you grasp early on will **naturally integrate and reinforce** the more advanced techniques you'll apply later on in the course.
- **Practical Projects**: Through hands-on projects, you'll **apply what you learn** in real-world scenarios, making abstract concepts **concrete and understandable**.
- **Comprehensive Skill Set**: Learn a **diverse range of techniques**, from established principles to modern practices like headless components, expanding your toolkit for creating more accessible user interfaces.

This course is designed to familiarize you with accessibility standards and ensure you can apply these principles in real-world scenarios effectively. By blending foundational knowledge with practical application, you'll leave this course equipped and confident in your ability to create components that are both functional and inclusive.

Approachable Guide to Building Accessible Components

Explore fundamental accessibility concepts and apply your knowledge by building real-world UI components. 
This course provides a solid foundation that you can build upon with relevant examples that help make the concepts "stick". Learn the ethos behind ***why*** accessibility is important, ***what*** the techniques are to create accessible components, 
and ***how*** to apply those principles when building out sample components. By the end of this course, you will have built a “lens” for accessibility, created practical components that meet accessibility standards, and obtained the skills to identify and address accessibility issues.

What do you think about the module *Build a TextInput Component*?

What do you think about the module *Conclusion*?

What do you think about the module *Accessibility Fundamentals*?

What do you think about the module *Build a Tabs Component*?

What do you think about the module *Introduction*?

What do you think about the module *Build a Headless Tabs Component*?

What do you think about the module *Auditing for Accessibility*?

What do you think about the module *ARIA and Assistive Technology*?

Build Accessible Components for the Web

Build a tabs component (manual & headless) that meets accessibility standards.

Use axe DevTools to audit and fix accessibility issues.

Practical text input that can be used for various scenarios.

ARIA and its role in assistive technology.

Using proper labels and inputs to craft accessible forms.

Testing for accessibility using tools like screen readers and browser extensions.

Definitions of common accessibility terminology and acronyms.

Ensuring color contrast and visual affordances for interactive elements.

How to manage focus and keyboard interactions.

How to leverage modern UI patterns like headless components to build accessible components.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript