Accessibility Terminology

[00:00 - 00:08] A11Y, Assistive Technology, ARIA, WARIA, Accessibility Tree. Huh?

[00:09 - 00:18] Yeah, accessibility is a broad and massive topic that covers a wide vocabulary range. So in this lesson, we're going to get familiar with some common terms and acron yms.

[00:19 - 00:33] The first term we'll look at is A11Y or A11Y, depending on how you want to pronounce it. And we'll take a look at the A11Y projects homepage as I feel like their landing page is a really good job of kind of depicting what this term means.

[00:34 - 00:47] But all A11Y is is a shorthand for the actual word accessibility, as there are 11 letters in between the first letter of the word A and the last letter of the word Y. So A11Y.

[00:48 - 00:52] Pretty straightforward, right? The next term we'll look at is Assistive Technology.

[00:53 - 01:09] This refers to any device, equipment, software, or service that's used to enhance or maintain the functional capabilities of people with disabilities. And Assistive Technology can encompass things like screen readers, which we'll take a look at in more depth in the next lesson.

[01:10 - 01:19] There's things like Braille displays, and then there's also things like closed captioning, just to name a few, and closed captioning. For example, let's say you're watching a YouTube video.

[01:20 - 01:31] Most videos you watch online allow you to view captions on a video. And so it's just a nice, you know, visual thing for maybe people who are hard of hearing to kind of be able to intake content in a different format.

[01:32 - 01:42] And in fact, I actually use closed captioning sometimes as just an alternative way to kind of receive information in addition to just hearing it audibly. So, you know, most for people with and without disabilities.

[01:43 - 01:54] But yeah, so that kind of encompasses Assistive Technology. The next term we'll look at is a big one, and it's ARIA, and it stands for Accessible Rich Internet Applications.

[01:55 - 02:05] This is an acronym that you're going to see used a lot throughout accessibility documentation, as well as throughout this course. And we're going to go through a high level definition right now, but don't fret .

[02:06 - 02:15] Later on in the course, we have a lesson dedicated solely to ARIA, so we'll take a deeper dive there. And ARIA consists of roles and attributes that allow you to apply additional semantics to elements.

[02:16 - 02:31] ARIA accomplishes by allowing you to alter the accessibility tree while keeping the pages presentation and behavior intact. And by default, ARIA primarily affects how content is perceived by Assistive Technology without changing its appearance or functionality.

[02:32 - 02:53] So, for example, ARIA will not make an element focusable or apply the appropriate keyboard listeners. So, this is an important note here that although ARIA provides a mechanism for applying additional semantics, as developers, it is still our responsibility to ensure that the element with the assigned role functions and operates as it should and delivers on its intended purpose.

[02:54 - 03:02] And ARIA has a couple of capabilities that we'll go through. One of those capabilities is that it allows you to implement additional UI patterns.

[03:03 - 03:17] And this is one of ARIA's most beneficial features as it allows you to implement UI patterns that are not available through non-native HTML elements. So, take, for example, the common tabs and according components that you see throughout the web.

[03:18 - 03:27] These are commonly found, but there is no HTML equivalent. So, ARIA gives us the capability to implement those patterns in a way that is both accessible and functional.

[03:28 - 03:39] Another capability is that it allows you to apply and modify semantics. So, ARIA can apply semantics to an element that has no preexisting native semantics or modify the semantics of elements that already have predefined semantics.

[03:40 - 03:49] And doing so provides additional context and descriptive information to an element. So, let's take a generic element like a div and apply a role of tab list to it.

[03:50 - 04:02] This would then make that div identify as an element that serves as a container for a set of tabs. And this exact example we'll actually see later on in the interactive section of the course when we implement our own custom tabs component.

[04:03 - 04:11] Another capability is that it allows you to add additional descriptions and labels. So, ARIA can add extra descriptions and label text that will only be exposed to assistive devices.

[04:12 - 04:25] So, take, for example, using the ARIA described by attribute to establish a semantic relationship and provide more context about the widget it describes. And last but not least, ARIA allows you to do real-time content notifications.

[04:26 - 04:32] So, using the ARIA live attribute, ARIA can make parts of the page live. So, and live updates involve informing assistive technology about changes in real-time.

[04:33 - 04:52] So, think, email notification, slack notification, things like that where it's kind of important to let these as a technology device know in the moment that something is occurring. So, a common term that you'll see along with ARIA is that no ARIA is better than bad ARIA.

[04:53 - 05:04] And that just emphasizes the important that using ARIA correctly is imperative. Because incorrect use of ARIA can actually create more accessibility barriers on a website than not using ARIA at all.

[05:05 - 05:25] So, and to help ensure proper implementation of this, the ARIA authoring practices guide or APG offers valuable principles for developers looking to improve the accessibility of their websites. And it includes common patterns for things like the tabs and accordions components I mentioned earlier, menus, things like that in nature.

[05:26 - 05:34] The next term we'll look at is Waa ARIA, which stands for Web Accessibility Initiative, accessible, rich internet applications. That is a mouthful.

[05:35 - 05:48] But Waa ARIA offers a framework for incorporating attributes that identify user interactions, their present status, and their interrelationships. And without Waa ARIA, certain websites functionality would not be made available to users with disabilities.

[05:49 - 06:02] And Waa ARIA aids in addressing these gaps by providing a way for functionality to be supplied to assistive technology. So, the terms Waa ARIA and ARIA are often used interchangeably, but their definitions are a bit nuanced.

[06:03 - 06:16] And to help reduce confusion, think of Waa ARIA as the framework for the guidelines. While ARIA is the actual attributes and roles that one can use to implement the outline framework.

[06:17 - 06:21] So we'll put another way. Waa ARIA is like a superset of ARIA.

[06:22 - 06:36] It includes all the features of ARIA while incorporating additional guidelines for making web content more accessible. So to emphasize kind of the nuance between Waa ARIA and ARIA, I'm going to open up the Waa ARIA overview page here, the kind of documentation site.

[06:37 - 06:51] And if you look, there's a lot of technical specs and different resources and things that it points you to because it's outlining this framework of how to implement Waa ARIA. And so, and it references ARIA within it.

[06:52 - 07:05] So this is kind of showcasing kind of how Waa ARIA is the general framework and ARIA are the kind of tools that you can use to implement the framework. The last term to look at is accessibility tree.

[07:06 - 07:16] And this is the modified DOM tree that the browser presents to the assistive device minus the extra visual fluff. You could think of this as a read-only API that describes the page's structure.

[07:17 - 07:30] It's similar to the HTML DOM tree, but typically has less information and fewer nodes since it doesn't need all the visual presentation. ARIA enables you to define attributes on elements that alter how that element is conveyed within the accessibility tree.

[07:31 - 07:42] And this screenshot right here is actually taken from the APG homepage and shows kind of what a accessibility tree might look like. And we'll actually like dive in here.

[07:43 - 08:05] And if we go to the APG homepage itself and inspect it live, we see that it's very similar to the HTML DOM tree, but has fewer nodes like I mentioned in the definition. And so you can see things like there's the banner at the top, which includes things like links, there's navigation, which has different list items.

[08:06 - 08:18] There's the main page, has things like the heading, paragraph, links, images. And just kind of shows like the main roles that compose each section.

[08:19 - 08:28] And so this is kind of how the assistive technology devices will take the information and then convey it to the user. So yeah, this is just kind of a view of what the accessibility tree looks like.

[08:29 - 08:37] There are a myriad of other accessibility related terms. However, the ones we've covered in this lesson will equip you with the terminology used throughout this course.

[08:38 - 08:48] By defining these terms and concepts, you will have a better understanding of familiar words and acronyms used throughout accessibility documentation, allowing you to gain a deeper perspective as you continue on your accessibility knowledge journey.