Course Overview

Overview of the main topics that will be taught throughout the course

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:10] This course is comprised of two main sections. The first half of the course is what I'm dubbing as accessibility foundation section, where we cover fundamental topics and terminologies.

  • [00:11 - 00:24] The second half of the course is the accessibility application portion, where we take the concepts taught in the foundational section and apply them to sample projects. The first module in the foundational section is called ARIA and Assistive Technology, and is made up of three lessons.

  • [00:25 - 00:41] The first lesson is accessibility terminology, which describes the importance of ARIA and providing definitions of terms and acronyms commonly found in accessibility documentation. The second lesson focuses on screen readers, describing what they are, what options are available based on your operating system, and some common navigation commands.

  • [00:42 - 00:53] The third lesson will cover ARIA attributes and how they can be used to apply semantics and implement certain UI patterns. We will also examine why they are essential for accessibility and explore a few specific attributes in their use cases.

  • [00:54 - 01:07] The second module in the foundational section is called Accessibility Fundament als, and will start off by looking at HTML headings, landmarks, and semantics. In this lesson, we'll cover the topic of semantic HTML and how using the right element for the job can give us accessibility gains by default.

  • [01:08 - 01:21] We will also take a look at landmark elements and how to use proper heading text to improve page structure for screen readers. Next, we'll take a look at images which are ubiquitous throughout the web, and this lesson will explore how alt text impacts everyone, not just those who use assistive technology.

  • [01:22 - 01:36] We'll also cover why writing descriptive and meaningful alt text is so important and share practical tips and techniques to level up your alt text game. From there, we'll move on to labels and inputs, which are cornerstones of the web, and imperative to being able to retrieve information from the end user.

  • [01:37 - 01:48] In this lesson, we'll describe how to pair inputs and labels and how the two work in tandem. After that, we'll take a look at color contrast and styles and see how CSS plays a significant role in creating an inclusive user experience.

  • [01:49 - 02:04] We'll also explore how CSS can be utilized to style various states of interactive elements and ensure appropriate color contrast. Then, we'll take a look at focus management and keyboard interactions, covering topics like implicitly focusable elements, how to add focus with tab index, and understanding tab order.

  • [02:05 - 02:19] Last but not least is the auditing for accessibility module, which is a more hands-on demo where we perform an audit on a site that is intentionally riddled with accessibility problems. We'll see how we can leverage the X browser extension while going through the process of locating and fixing the identified accessibility issues.

  • [02:20 - 02:29] The latter half of the course takes us to the accessibility application section where we will go into a lot of project-based work. I want to ensure that the concepts taught in the first half of the course are solidified and really stick.

  • [02:30 - 02:37] One of the best ways to do that is to practice. The first component we will build is the classic text input, an element we see used everywhere throughout the web.

  • [02:38 - 02:48] Although seemingly basic, this component will reinforce some of the important concepts that were covered in earlier lessons. We'll take a look at label and input association and how to properly link error messages.

  • [02:49 - 03:00] After implementing our text input, we will transition to building a tabs component, another very common component used throughout the web. While building out this component, we will reference the official tabs pattern documentation within the ARIA authoring practices guide.

  • [03:01 - 03:13] We'll take a step-by-step learning how to parse through the specs and implement the component while adhering to the guidelines. Last but not least, we will show the process of implementing the same tabs component, this time using a headless component from a third-party library.

  • [03:14 - 03:27] This lesson will draw a parallel between the manual approach, as learning how to implement the component in a more manual way can invoke appreciation for the emerging headless component pattern. Alrighty, that wraps up our overview and hopefully gives you a good lay of the land of what to expect throughout the course.

  • [03:28 - 03:29] We've got a lot to learn, so let's dive in.

This course is comprised of two main sections. The first half of the course is what I'm dubbing as accessibility foundation section, where we cover fundamental topics and terminologies. The second half of the course is the accessibility application portion, where we take the concepts taught in the foundational section and apply them to sample projects. The first module in the foundational section is called ARIA and Assistive Technology, and is made up of three lessons. The first lesson is accessibility terminology, which describes the importance of ARIA and providing definitions of terms and acronyms commonly found in accessibility documentation. The second lesson focuses on screen readers, describing what they are, what options are available based on your operating system, and some common navigation commands. The third lesson will cover ARIA attributes and how they can be used to apply semantics and implement certain UI patterns. We will also examine why they are essential for accessibility and explore a few specific attributes in their use cases. The second module in the foundational section is called Accessibility Fundament als, and will start off by looking at HTML headings, landmarks, and semantics. In this lesson, we'll cover the topic of semantic HTML and how using the right element for the job can give us accessibility gains by default. We will also take a look at landmark elements and how to use proper heading text to improve page structure for screen readers. Next, we'll take a look at images which are ubiquitous throughout the web, and this lesson will explore how alt text impacts everyone, not just those who use assistive technology. We'll also cover why writing descriptive and meaningful alt text is so important and share practical tips and techniques to level up your alt text game. From there, we'll move on to labels and inputs, which are cornerstones of the web, and imperative to being able to retrieve information from the end user. In this lesson, we'll describe how to pair inputs and labels and how the two work in tandem. After that, we'll take a look at color contrast and styles and see how CSS plays a significant role in creating an inclusive user experience. We'll also explore how CSS can be utilized to style various states of interactive elements and ensure appropriate color contrast. Then, we'll take a look at focus management and keyboard interactions, covering topics like implicitly focusable elements, how to add focus with tab index, and understanding tab order. Last but not least is the auditing for accessibility module, which is a more hands-on demo where we perform an audit on a site that is intentionally riddled with accessibility problems. We'll see how we can leverage the X browser extension while going through the process of locating and fixing the identified accessibility issues. The latter half of the course takes us to the accessibility application section where we will go into a lot of project-based work. I want to ensure that the concepts taught in the first half of the course are solidified and really stick. One of the best ways to do that is to practice. The first component we will build is the classic text input, an element we see used everywhere throughout the web. Although seemingly basic, this component will reinforce some of the important concepts that were covered in earlier lessons. We'll take a look at label and input association and how to properly link error messages. After implementing our text input, we will transition to building a tabs component, another very common component used throughout the web. While building out this component, we will reference the official tabs pattern documentation within the ARIA authoring practices guide. We'll take a step-by-step learning how to parse through the specs and implement the component while adhering to the guidelines. Last but not least, we will show the process of implementing the same tabs component, this time using a headless component from a third-party library. This lesson will draw a parallel between the manual approach, as learning how to implement the component in a more manual way can invoke appreciation for the emerging headless component pattern. Alrighty, that wraps up our overview and hopefully gives you a good lay of the land of what to expect throughout the course. We've got a lot to learn, so let's dive in.