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.

At the core of every webpage is the Document Object Model (DOM), which consists of HTML representing a document's structure. Semantic HTML include elements that assign a role or meaning to the content that is encapsulates. Using these elements makes their purpose or intention clear. 

Some examples of semantic elements include: 

 tag. This is in contrast to generic, non-semantic elements like the 

Simply put, use the right element for the job, and you get accessibility gains baked in for free.

Use native elements whenever possible. Trying to "build your own" is always more work because you have to ensure that the accessibility meets the WAI-ARIA standards.

Technical affordances are the perceptions of interactions one can take with a piece of technology or software. This term can be applied to both the physical and digital realms. It’s a term coined by psychologist 

 when interacting with an item. Obtaining identifiable affordances improves usability by making interacting with common pieces of software more intuitive.

---
title: HTML - Headings, Landmarks, and Semantics
isPublicLesson: true
useMdx: true
description: 'Accessibility wins using Native HTML'
privateVideoUrl: https://stream.mux.com/i1VdeFodyeVudDW1Vsy00F5lzkbtKuyG9hG5IlmbOaI00.m3u8
---

## Semantic HTML

At the core of every webpage is the Document Object Model (DOM), which consists of HTML representing a document's structure. Semantic HTML include elements that assign a role or meaning to the content that is encapsulates. Using these elements makes their purpose or intention clear. 

Some examples of semantic elements include: `<header`, `<figure>`, and even the `<button>` tag. This is in contrast to generic, non-semantic elements like the `<div>` and `<span>` tags. 

**Simply put, use the right element for the job, and you get accessibility gains baked in for free.** 

:::tip
Use native elements whenever possible. Trying to "build your own" is always more work because you have to ensure that the accessibility meets the WAI-ARIA standards.
:::

### Affordances

Technical affordances are the perceptions of interactions one can take with a piece of technology or software. This term can be applied to both the physical and digital realms. It’s a term coined by psychologist [James Gibson](https://en.wikipedia.org/wiki/James_J._Gibson) when interacting with an item. Obtaining identifiable affordances improves usability by making interacting with common pieces of software more intuitive.

#### Examples of Tech Affordances

-   The hamburger menu indicates that there are hidden navigational contents to view.
-   A link that indicates it will direct you to a different webpage.
-   A button indicates that it will perform an action.

## Headings

In HTML, there are different levels of heading elements ranging from `<h1>` to `<h6>`. HTML headings provide a clear structure and hierarchy to the information presented, making it easier for all users to navigate and identify the structure of the content.