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.

Now that you have an overview of what you're building, let's kick-off by putting into action the instructions laid out in the "

" section of the documentation and proceed methodically, adding code step-by-step, demonstrating the gradual process involved in implementing a particular component pattern.

The entirety of the code implementation steps detailed in the following two lessons will occur within the 

Start things off by building the base for our Tabs component. To do this, add two 

 export default function Tabs(props) {
  return (
    <div className="tabsContainer">
      <div role="tablist">
     </div>
   </div>
  );
}

With your container in place, you can now start integrating the tab elements. To achieve this, utilize the 

 prop, which holds an array of object details for each tab. Then, iterate through this list to populate the container with the tab elements.

Considering the interactive nature of tabs, use the 

export default function Tabs(props) {
	return (
	<div className="tabsContainer">
		<div role="tablist">
        {props.tabsList.map((tab, index) => (
          <button
            role="tab"
            id={tab.id}
            key={tab.id}
          >
            {tab.label}
          </button>
        ))}
     </div>
	</div>
	);
}

When you interact with a tab, the expected behavior is that it will reveal some content. We will once more iterate through the 

 elements, each designated to hold distinct content for display. Each of these 

 role, which is used to indicate that it is an element that contains the content associated with a particular tab.

 role but within the parent container, add the following code:

<div className="tabsContainer">
{/*tablist element <div> with inner tabs would be here*/} 
  {props.tabsList.map((tab, index) => (
   <div role="tabpanel"
        key={tab.id}
   >
     {tab.content}
   </div>
 ))}
</div>

In this example, there intentionally isn't a visible label since this is a simple demo, and you've previously clarified that the tabs component presents quotes from renowned jazz musicians. Therefore, assign an 

<div role="tablist" 
     aria-label={props.label}
>
{/* Mapping through props.tabsList would be here*/}
</div>

 allows you to define a value that labels an interactive element which in this case is the tabbed interface.

---
title: Tabs Implementation - Roles, States, and Properties
isPublicLesson: true
useMdx: true
description: Part 1 of Implementing the Tabs Component
code: https://gitlab.com/fullstackio/books/newline-course-apps/alyssa-holland-build-accessible-components-for-the-web-app/-/tree/main/module_06
privateVideoUrl: https://stream.mux.com/tI4hjjf6100FUYwruoLMOtJAwYLMcfn4p01BorYbn0001M4.m3u8
---

import Blockquote from '~/components/Blockquote.jsx'
import Code from '~/components/Code.jsx'

Now that you have an overview of what you're building, let's kick-off by putting into action the instructions laid out in the "[WAI-ARIA Roles, States, and Properties](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties)" section of the documentation and proceed methodically, adding code step-by-step, demonstrating the gradual process involved in implementing a particular component pattern.

**_The entirety of the code implementation steps detailed in the following two lessons will occur within the [Tabs.jsx file](https://codesandbox.io/s/starter-tabs-component-qlgscs?file=/src/components/Tabs.jsx)._**

## Tabs Container

<Blockquote> The element that serves as the container for the set of tabs has role <Code>tablist</Code>. </Blockquote>

Start things off by building the base for our Tabs component. To do this, add two `<div>` elements:

1.  The first `<div>` will act as the root element for all the inner tab component parts.
2.  The second `<div>` aligns with the specifications, functioning as the encompassing container for the tab elements. This specific element will be designated with the `tablist` role.

```jsx title="/src/components/Tabs.jsx"
 export default function Tabs(props) {
  return (
    <div className="tabsContainer">
      <div role="tablist">
     </div>
   </div>
  );
}
```

## Tab Element

<Blockquote> Each element that serves as a tab has role <Code>tab</Code> and is contained within the element with a role <Code>tablist</Code>. </Blockquote>

With your container in place, you can now start integrating the tab elements. To achieve this, utilize the `tabsList` prop, which holds an array of object details for each tab. Then, iterate through this list to populate the container with the tab elements.

Considering the interactive nature of tabs, use the `<button>` element. Each `<button>` will be assigned the `tab` role.

```jsx {5-13} title="/src/components/Tabs.jsx"
export default function Tabs(props) {
	return (
	<div className="tabsContainer">
		<div role="tablist">
        {props.tabsList.map((tab, index) => (
          <button
            role="tab"
            id={tab.id}
            key={tab.id}
          >
            {tab.label}
          </button>
        ))}
     </div>
	</div>
	);
}
```

## Tabs Content

<Blockquote> Each element that contains the content panel for a <Code>tab</Code> has role <Code>tabpanel</Code>.</Blockquote>

When you interact with a tab, the expected behavior is that it will reveal some content. We will once more iterate through the `tabsList` prop, generating separate `<div>` elements, each designated to hold distinct content for display. Each of these `<div>` elements will be attributed with the `tabpanel` role, which is used to indicate that it is an element that contains the content associated with a particular tab.

Outside the `<div>` with the `tablist` role but within the parent container, add the following code:

```jsx {3-9} title="/src/components/Tabs.jsx"
<div className="tabsContainer">
{/*tablist element <div> with inner tabs would be here*/} 
  {props.tabsList.map((tab, index) => (
   <div role="tabpanel"
        key={tab.id}
   >
     {tab.content}
   </div>
 ))}
</div>
```

## Labelling

<Blockquote> If the tab list has a visible label, the element with role <Code>tablist</Code> has <Code>aria-labelledby</Code> set to a value that refers to the labelling element. Otherwise, the <Code>tablist</Code> element has a label provided by <Code>aria-label</Code>.</Blockquote>

In this example, there intentionally isn't a visible label since this is a simple demo, and you've previously clarified that the tabs component presents quotes from renowned jazz musicians. Therefore, assign an `aria-label` to the `<div>` holding the `tablist` role.

```jsx {2} title="/src/components/Tabs.jsx"
<div role="tablist" 
     aria-label={props.label}
>
{/* Mapping through props.tabsList would be here*/}
</div>
```

Alyssa Holland

All righty, now that we have an overview of what we're building,

we'll kick things off by putting into actions of

the instructions laid out in the "Wall ARIO Role States"

and "Properties" section of the documentation.

We'll proceed methodically adding code step by step,

demonstrating the gradual process involved in

Let's take a look at the first bullet point in

a container for the set of tabs has role tab list."

If we go back to our tabs.jsx file within code sandbox,

we're going to start things off by building

The first div will act as the root element for

the encompassing container for the tab elements.

This one reads, "Each element that serves as

contained within the element with role tab list."

Let's go back to code sandbox and with our container in place,

we can now start integrating the tab elements.

To achieve this, we'll utilize the tab list prop,

which holds an array of object details for each tab.

We're going to iterate through this list to present

Considering the interactive nature of tabs,

we'll implement the use of the button element,

and each button element will be assigned the tab role.

All right, so let's go back to the specs and take a look at

"Each element that contains the content panel for a tab has role tab panel."

the expected behavior is that it will reveal some kind of content.

We'll once more iterate through the tab list prop,

each designated to hold distinct content for display.

Each of these div elements will be attributed with the tab panel role,

which is used to indicate that it is an element that contains

the content associated with a particular tab.

All right, so going back to our specs one more time,

which says, "If the tab has a visible label,

aria labeled by set to a value that refers to the labeling element.

Otherwise, the tab list element has a label provided by aria label."

there intentionally is an visible label since this is a simple demo,

and we've previously clarified that the tab's component is presenting

Therefore, we'll assign an aria label to the div holding the tab list role.

The aria label attribute will allow you to define a value that labels

an interactive element, which in this case is the tab interface.

We define that label in the app.jsx file,

All right, so going back to the tab specs,

"Each element with role tab has a property aria controls,

referring to its associated tab panel element."

When utilizing an interactive component like a tab to modify other elements,

you can use the aria controls attribute to link

the controlling element to its corresponding elements that it affects.

we must assign an id to the div elements with the tab panel role.

In sync with this, we must introduce an aria controls attribute to our tab

and the value assigned to this attribute should match the value of

the id applied to the corresponding tab panel elements.

As you notice, there's a pattern, we're going back and forth as we implement.

The next bullet point that we see there is the active tab element has a state a

and all other tab elements have it set to false.

Up until this point, you've probably observed that all tab contents are visible

and to display only the currently selected tab's content,

implementing this specification will involve multiple steps,

And the first step is finding the active tab index.

Since we're creating a controlled react component,

meaning the logic is driven by props rather than its own local state,

since the parent component specifies its behavior,

we will have to rely on the value prop to determine which tab is active.

In order to determine this, we will define a variable at the top of the