**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

---
title: Headless Components
isPublicLesson: true
useMdx: true
description: Overview of headless components
code: https://gitlab.com/fullstackio/books/newline-course-apps/alyssa-holland-build-accessible-components-for-the-web-app/-/tree/main/module_07
---

In this module, you’ll be leveraging headless components to learn an alternative way to approach building the tabs component you built in the previous module. However, before you start writing code, let's cover some background information on **_what_** headless components are, **_why_** they are beneficial, and **_how_** they can be incorporated.

## What are Headless Components?

Headless components are unopinionated, unstyled components that handle most of the tricky implementation details so that you can build out components faster. Headless components do not have preset styles but provide full, interactive functionality for a particular component pattern.

## Benefits

### 1) Built-in Accessibility

Creating accessible components that meet the WAI-ARIA standards and properly handle aspects like keyboard navigation can be a large undertaking. Headless component libraries aim to simplify this often difficult process by providing a set of flexible and extensible components that are prebuilt with accessibility and developer experience in mind.

### 2) Reusable & Flexible

Headless components are typically flexible enough to handle most business requirements and implementation details. Because these components don't apply any preset CSS, they can make great candidates for component libraries, as you can tailor and style them to meet most design systems. In addition, headless components tend to handle keyboard interactions and focus management, providing one less thing for developers to worry about.