What is Accessibility?
Define accessibility and its importance
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
Lesson Transcript
[00:00 - 00:14] Before we learn how to make accessible components and experiences for the web, it's imperative to understand what accessibility is in the first place. In this lesson, you will obtain a definition of accessibility and why it is important.
[00:15 - 00:19] Let's start off by asking ourselves a question. What makes a website accessible?
[00:20 - 00:31] For a website to be accessible, the site's contents and its functionality should be operable by anyone. This means that a site should offer an inclusive experience to all individuals, regardless of their abilities.
[00:32 - 00:52] To aid us in achieving a universal experience for all users, there is the web content accessibility guidelines, or WCAG. These guidelines are developed by the World Wide Web Consortium, or W3C, and provide a set of technical requirements for making web content accessible for users of every ability, including people with disabilities who rely on assistive technology.
[00:53 - 00:58] WCAG's accessibility standards are based on four core principles. The first principle is perceivable.
[00:59 - 01:14] Web content is presented to users in ways they can perceive. Some examples of this include providing text alternatives for any non-text content, so this could involve including alt text on images, or adding text, transcripts, and/or captions on any audio-only content.
[01:15 - 01:19] The next principle is operable. UI components and navigation of content are operable.
[01:20 - 01:29] This means making all functionality available from a keyboard. All functionality that is available by mouse should also be available via keyboard.
[01:30 - 01:35] The next principle is understandable. Information and the operation of the user interface must be understandable.
[01:36 - 01:41] Basically, make web pages appear in operable ways. Button to perform in action.
[01:42 - 01:48] Link should navigate you to a different location. The inputs and form controls that users are used to interacting with operate the way that they are intended to.
[01:49 - 01:57] And lastly, is robust. Content must be robust enough that it can be interpreted and consumed by a wide variety of users and assistive technology.
[01:58 - 02:18] If you take the first letter of each word, P for perceivable, O for operable, U for understandable, and R for robust, it forms the acronym POR, and this can be used as a mnemonic to help in memorizing these principles. Each guideline has a set of success criteria as organized into three different levels of conformance.
[02:19 - 02:25] The first is A, which is the basic level of conformance. The second is AA, which is the minimum level of conformance.
[02:26 - 02:30] And the third is AAA, which is advanced level of conformance. Kind of the cherry on top.
[02:31 - 02:48] Each level builds upon the requirements of the previous one, and websites are encouraged to strive for at least AA conformance to provide a higher level of accessibility to a broader range of users. Admittedly, the official documentation for the WCAG specifications can be a bit , shall we say, overwhelming.
[02:49 - 03:07] Thankfully, the web-end group, which is another significant accessibility resource, has distilled down the WCAG specs into an easier to manage checklist. And as you can see through this checklist, you can filter things through by the level of conformance, AA, AAA, and AA, and then the WCAG version.
[03:08 - 03:16] So it's just a little bit easier to parse and grok through. So let's say you've heard all this information, and you're still not convinced that you need to make your site accessible.
[03:17 - 03:25] Well, let's take a look at some statistics and see if that helps convince you a little bit more. According to the CDC, one in four adults in the US has some form of disability.
[03:26 - 03:50] Although not all disabilities impact internet use, it's important that businesses think seriously about accessibility, as not doing so could exclude a significant portion of their current and potential customer base. There are also different categories of disabilities, like visual, which includes things like color blindness and low vision, auditory, which include things like heart of hearing and deafness, motor disability, and cognitive disabilities.
[03:51 - 04:05] In addition to permanent disabilities like deaf or blindness, there are other disability personas to consider. For example, temporary disabilities like a person with an arm injury that prevents them from using a keyboard and mouse the way they normally would, or another situational impediment.
[04:06 - 04:14] Suffice it to say that building accessible experiences impacts more users than you might typically think. Lastly, we'll take a look at some legal implications.
[04:15 - 04:28] Increased awareness of accessibility has led to the introduction of legislation around this topic. The first thing we'll take a look at is the Domino's Pizza Lawsuit, which involved a blind man who sued the pizza company because he was unable to order food due to the lack of access to the visually impaired.
[04:29 - 04:48] The suit was one of more than 2,000 law students filed over web accessibility in that year alone. On September 28, 2022, the websites and software applications accessibility act was introduced to the U.S. Senate and its legislation that is intended to break down the barriers that people face when accessing websites and applications.
[04:49 - 04:56] As you can see, accessibility is a very relevant and important topic, and creating websites and applications that are operable by people of all abilities is something that we should all strive for.
[00:00 - 00:14] Before we learn how to make accessible components and experiences for the web, it's imperative to understand what accessibility is in the first place. In this lesson, you will obtain a definition of accessibility and why it is important.
[00:15 - 00:19] Let's start off by asking ourselves a question. What makes a website accessible?
[00:20 - 00:31] For a website to be accessible, the site's contents and its functionality should be operable by anyone. This means that a site should offer an inclusive experience to all individuals, regardless of their abilities.
[00:32 - 00:52] To aid us in achieving a universal experience for all users, there is the web content accessibility guidelines, or WCAG. These guidelines are developed by the World Wide Web Consortium, or W3C, and provide a set of technical requirements for making web content accessible for users of every ability, including people with disabilities who rely on assistive technology.
[00:53 - 00:58] WCAG's accessibility standards are based on four core principles. The first principle is perceivable.
[00:59 - 01:14] Web content is presented to users in ways they can perceive. Some examples of this include providing text alternatives for any non-text content, so this could involve including alt text on images, or adding text, transcripts, and/or captions on any audio-only content.
[01:15 - 01:19] The next principle is operable. UI components and navigation of content are operable.
[01:20 - 01:29] This means making all functionality available from a keyboard. All functionality that is available by mouse should also be available via keyboard.
[01:30 - 01:35] The next principle is understandable. Information and the operation of the user interface must be understandable.
[01:36 - 01:41] Basically, make web pages appear in operable ways. Button to perform in action.
[01:42 - 01:48] Link should navigate you to a different location. The inputs and form controls that users are used to interacting with operate the way that they are intended to.
[01:49 - 01:57] And lastly, is robust. Content must be robust enough that it can be interpreted and consumed by a wide variety of users and assistive technology.
[01:58 - 02:18] If you take the first letter of each word, P for perceivable, O for operable, U for understandable, and R for robust, it forms the acronym POR, and this can be used as a mnemonic to help in memorizing these principles. Each guideline has a set of success criteria as organized into three different levels of conformance.
[02:19 - 02:25] The first is A, which is the basic level of conformance. The second is AA, which is the minimum level of conformance.
[02:26 - 02:30] And the third is AAA, which is advanced level of conformance. Kind of the cherry on top.
[02:31 - 02:48] Each level builds upon the requirements of the previous one, and websites are encouraged to strive for at least AA conformance to provide a higher level of accessibility to a broader range of users. Admittedly, the official documentation for the WCAG specifications can be a bit , shall we say, overwhelming.
[02:49 - 03:07] Thankfully, the web-end group, which is another significant accessibility resource, has distilled down the WCAG specs into an easier to manage checklist. And as you can see through this checklist, you can filter things through by the level of conformance, AA, AAA, and AA, and then the WCAG version.
[03:08 - 03:16] So it's just a little bit easier to parse and grok through. So let's say you've heard all this information, and you're still not convinced that you need to make your site accessible.
[03:17 - 03:25] Well, let's take a look at some statistics and see if that helps convince you a little bit more. According to the CDC, one in four adults in the US has some form of disability.
[03:26 - 03:50] Although not all disabilities impact internet use, it's important that businesses think seriously about accessibility, as not doing so could exclude a significant portion of their current and potential customer base. There are also different categories of disabilities, like visual, which includes things like color blindness and low vision, auditory, which include things like heart of hearing and deafness, motor disability, and cognitive disabilities.
[03:51 - 04:05] In addition to permanent disabilities like deaf or blindness, there are other disability personas to consider. For example, temporary disabilities like a person with an arm injury that prevents them from using a keyboard and mouse the way they normally would, or another situational impediment.
[04:06 - 04:14] Suffice it to say that building accessible experiences impacts more users than you might typically think. Lastly, we'll take a look at some legal implications.
[04:15 - 04:28] Increased awareness of accessibility has led to the introduction of legislation around this topic. The first thing we'll take a look at is the Domino's Pizza Lawsuit, which involved a blind man who sued the pizza company because he was unable to order food due to the lack of access to the visually impaired.
[04:29 - 04:48] The suit was one of more than 2,000 law students filed over web accessibility in that year alone. On September 28, 2022, the websites and software applications accessibility act was introduced to the U.S. Senate and its legislation that is intended to break down the barriers that people face when accessing websites and applications.
[04:49 - 04:56] As you can see, accessibility is a very relevant and important topic, and creating websites and applications that are operable by people of all abilities is something that we should all strive for.