Introduction to "The Approachable Guide to Accessible Components"

Course Introduction

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

Course Overview

What is Accessibility?

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

Introduction

Accessibility Terminology

Getting familiar with the screen reader assistive technology

Screen Readers

ARIA Attributes - Roles, States, and Properties

ARIA Attributes

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

HTML - Headings, Landmarks, and Semantics

Images and Alt Text

Using input and form controls to create accessible forms

Labels and Inputs

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

Color Contrast and Styles

Enabling focus using tabindex, and understanding tab order

Focus Management and Keyboard Interactions

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

Project Preview and axe DevTools

Using the axe DevTools to audit a sample site

Performing an Accessibility Audit

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

Preview of the TextInput Component to be built

TextInput Component Overview

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

Implementing the TextInput Component

Adding error message handling to the existing TextInput component

Handling Error Messages

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

Preview of the Tabs Component to be built

Tabs Component Overview

Part 1 of Implementing the Tabs Component

Tabs Implementation - Roles, States, and Properties

Part 2 of Implementing the Tabs Component

Tabs Implementation - Keyboard Interactions

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

Headless Components

Using Radix to Implement the 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

Wrap up resources for Build Accessible Components

Course Wrap-up and Resources

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

**The Approachable Guide to Accessible Components** 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.

### Course Content Overview
Course Overview:
Total Modules: **8**
Total Lessons: **22**
Total Video Runtime: **2 hours, 20 minutes**

### 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
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.

Learn WAI-ARIA Standards and Craft Accessible Components for a More Inclusive UX

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.

The Approachable Guide to Accessible Components

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.

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.

The starter code for the project can be found in this 

. Feel free to fork the sandbox to follow along with the next lesson.

You'll be working with a sample site called 

 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.

---
title: Project Preview and axe DevTools
isPublicLesson: true
useMdx: true
description: Doggy Directory sample project
code: https://gitlab.com/fullstackio/books/newline-course-apps/alyssa-holland-build-accessible-components-for-the-web-app/-/tree/main/module_04
---

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

:::info
The starter code for the project can be found in this [CodeSandbox environment](https://codesandbox.io/s/doggy-directory-yp833y?file=/src/App.js). Feel free to fork the sandbox to follow along with the next lesson.
:::

You'll be working with a sample site called [Doggy Directory](https://github.com/Cool-Runningz/doggy-directory/tree/a11y-issues). It uses the [Dog API](https://dog.ceo/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"](https://www.digitalocean.com/community/tutorials/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.