**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: Performing an Accessibility Audit
isPublicLesson: true
useMdx: true
description: Using the axe DevTools to audit a sample site
code: https://gitlab.com/fullstackio/books/newline-course-apps/alyssa-holland-build-accessible-components-for-the-web-app/-/tree/main/module_04
privateVideoUrl: https://stream.mux.com/Fx02021QHRc211LaC6WlzALOFcilBP4802IQFZ6016F01ukM.m3u8
---

With your project up and running and screen reader at your disposal, it's time to begin your first accessibility audit!

If you'd like to follow along with the lesson, make sure to [fork the project](https://codesandbox.io/s/doggy-directory-yp833y?file=/src/App.js) first and have a separate window open with the preview-only view. Having a separate window dedicated to the preview-only version of the forked project, ensures that the extension only runs against the project code and not the CodeSandbox environment.

## Running the Initial Scan

Let's kick things off by having the extension scan the website to find potential issues. To do this, head to the "**axe DevTools**" tab in your browser's developer tools. Once you're there, hit the "**Scan All of my page**" button.

![axe DevTools 'Let's get started' screen](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_04/lesson_04.02/public/assets/before-scan-screen.png)

Once you've clicked the button, axe DevTools will start analyzing the webpage and present you with a list of all the issues it found. For this initial scan, it identified two "critical" issues. Notice on the left-hand side of the window, axe categorizes the issues based on four different criteria:

1.  Critical
2.  Serious
3.  Moderate
4.  Minor

![axe DevTools list of identified issues](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_04/lesson_04.02/public/assets/axe-issue-count-2.png)

### Understanding the Issues Pane

Within the accordion panel, you will see that it is divided into four main sections:

1.  **Top Bar**: This section includes options for highlighting, sharing the issue, and paginating through issues of the same type.
2.  **Description**: Here, you'll find detailed information about the identified problem.
3.  **Location**: This section provides the precise location of the element that has the issue.
4.  **Problem Resolution**: The bullet points in this section outline steps to address the problem effectively.

![axe DevTools raising an issue that "Images must have alternate text"](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_04/lesson_04.02/public/assets/axe-issue-1.png)

### Issue 1 - Testing with the Screen Reader

Now that we have a lay of the land, let’s open the screen reader to see how it reacts when the issue is present. 

-   As a heads-up, I'll be using the **Chrome browser with VoiceOver**, the default screen reader available on Mac. VoiceOver may have variances in the text it announces depending on the browser you are testing with.

Although you have audited the landing page, select a dog breed to display more images. This will help you better understand the specific issue you are addressing. For this demo, select "**Cattledog**" from the list of options and click the <kbd>Search</kbd> button to display a list of results.

To activate the screen reader, press <kbd>CMD</kbd> + <kbd>F5</kbd>, and click anywhere on the window to get VoiceOver to focus in on the preview window.

With VoiceOver open, now use one of the shortcuts from the [“Screen Reader” lesson](https://www.newline.co/courses/build-accessible-components-for-the-web/screen-readers#basic-commands) and press <kbd>CTRL</kbd> + <kbd>Option</kbd> + <kbd>CMD</kbd>+ <kbd>G</kbd> to navigate by image. Notice how Voiceover reads out “**/IMG_1042.jpg, Unlabeled image**”. Since there is no alt text associated with the image, the screen reader defaults to reading the filename and the extension.

Using the axe DevTools to audit a sample site