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.

Accessibility is a broad and massive topic covering a wide vocabulary range. This lesson will familiarize you with some standard terms and acronyms.

This is a shorthand for the word "accessibility" as there are 11 letters in between the first letter of the word "a" and the last letter of the word "y."

Refers to any device, equipment, software, or service used to enhance or maintain the functional capabilities of people with disabilities. Assistive technology encompasses various tools such as screen readers, speech recognition programs, alternate keyboards, closed captioning, and more.

pplications, or ARIA, is an acronym that you will see a lot in accessibility documentation (as well as throughout this course!). ARIA consists of 

 that allow you to apply additional semantics to HTML elements. ARIA accomplishes this by altering the 

 while keeping the page's presentation and behavior intact. 

By default, ARIA primarily affects how content is perceived by assistive technology without changing its appearance or functionality. For example, ARIA will not make an element focusable or apply the appropriate keyboard listeners.

 Although ARIA provides a mechanism for applying additional semantics, as developers, it is still your responsibility to ensure that the element with the assigned role functions as it should and delivers on its intended purpose.

---
title: Accessibility Terminology
isPublicLesson: true
useMdx: true
description: Common accessibility terms and acronyms
privateVideoUrl: https://stream.mux.com/m02e2vCtlM4j00eQxl01WWCS1bftozzTpzfgzznI9qsdVk.m3u8
---

Accessibility is a broad and massive topic covering a wide vocabulary range. This lesson will familiarize you with some standard terms and acronyms.

## a11y

This is a shorthand for the word "accessibility" as there are 11 letters in between the first letter of the word "a" and the last letter of the word "y."
![The term 'a11y' spelled out to 'accessibility' showing how the 11 characters help to form the numeronym.](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_02/lesson_02.01/public/assets/a11y-image.png)

## Assistive Technology

Refers to any device, equipment, software, or service used to enhance or maintain the functional capabilities of people with disabilities. Assistive technology encompasses various tools such as screen readers, speech recognition programs, alternate keyboards, closed captioning, and more.

## ARIA

**A**ccessible **R**ich **I**nternet **A**pplications, or ARIA, is an acronym that you will see a lot in accessibility documentation (as well as throughout this course!). ARIA consists of **roles** and **attributes** that allow you to apply additional semantics to HTML elements. ARIA accomplishes this by altering the [accessibility tree](https://www.newline.co/courses/build-accessible-components-for-the-web/accessibility-terminology#accessibility-tree) while keeping the page's presentation and behavior intact. 

By default, ARIA primarily affects how content is perceived by assistive technology without changing its appearance or functionality. For example, ARIA will not make an element focusable or apply the appropriate keyboard listeners.

:::important
 Although ARIA provides a mechanism for applying additional semantics, as developers, it is still your responsibility to ensure that the element with the assigned role functions as it should and delivers on its intended purpose.
:::

### Capabilities

1.  **Implement additional UI Patterns**

    -   One of the most beneficial features of ARIA is that it can express the semantic UI patterns for non-native HTML elements.
    -   For many situations, ARIA allows you to create custom components that would not be possible by only leveraging native HTML.
    -   **Example**: Tabs and Accordion components. These are common components found throughout the web but there are no HTML equivalents. ARIA allows you to implement these patterns in a way that is both accessible and functional.
2.  **Apply and Modify Semantics**