Web App Accessibility (feat. React)

Accessibility Standards & Definitions

Marcy Sutton Todd

Marcy Sutton Todd

Principle Studios
Web App Accessibility (feat. React)

Check out a free preview of the full Web App Accessibility (feat. React) course

The "Accessibility Standards & Definitions" Lesson is part of the full, Web App Accessibility (feat. React) course featured in this preview video. Here's what you'd learn in this lesson:

Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.


Transcript from the "Accessibility Standards & Definitions" Lesson

>> So some standards and definitions before we dive into screen readers. Accessibility isn't just a feeling, there are standards and guidelines that we can benefit from. And they're really a starting point, but they are very important in the world of accessibility. Starting with WCAG, or the Web Content Accessibility Guidelines.

They are a standard set of criteria for measuring accessibility. Some of these rules can be automated, which we'll see today, but a lot of them require human review. So, the current version of WCAG is 2.2, there is a looming version 3.0 out there that aims to kind of revolutionize how WCAG is structured, how it works.

It is very like far out on the horizon I would say. There isn't a lot of consensus among people that it's like anywhere near ready. So focus on 2.2. [LAUGH] And I think the most important aspect of Devas is the color contrast part. I think people are very excited about a new algorithm for color contrast testing, but we're still on 2.2, so that's the standard you should aim for.

And it's backwards compatible, for the most part. One really cool thing about WCAG is that it's developed in the open on GitHub. So you can go and read how people are making decisions about it. What research has gone into it, you could go and ask a question if you didn't understand something or I mean it just to have it developed in the open is really incredible.

And so that's a resource that I reference quite often when I'm trying to understand a certain criteria. So another acronym, this one we will cover much more fully today, is ARIA. It stands for Accessible Rich Internet Applications. And this is a specification that includes a standard set of roles, states, and properties that PLUM accessibility information through your web pages.

So these are actual attributes that you would put into your markup. It's a bit more of an advanced tool, I would say. So it's not the first thing you should reach for, but there are some concepts that do apply to base HTML that we will definitely get into.

[LAUGH] The current version of ARIA is 1.2 and it is also developed in the open on GitHub. So this one I would definitely say I have opened in a tab quite often to go and read up on what's going on with this one attribute? You might even be able to learn about browser support or assistive technology support for a certain thing.

Yeah, it's really, really cool to be on GitHub. There are other similar documents from the W3C who puts out ARIA and WCAG. There's one called ARIA and HTML and another one called using ARIA that are pretty great. These are more informational documents where the Web Content Accessibility Guidelines is what we call normative.

That means that it's clear requirements. Whereas some things that are non-normative mean that they're informational like tutorials, that's not something that you would point to in a court setting. Whereas WCAG which is codified into a lot of laws, is normative. It is something that is legally required when you're in that type of environment.

So these terms and these standards, when I got into accessibility, they were all Greek to me. I just didn't understand what the point was, what these were so and I just want to expose you to them if they're new, and just let them kind of soak in, but it's not stuff you necessarily need to understand right now.

Just know that these things exist. You can always reference this information later as well. We do have one more bullet point here. It's a bit of a just a fun tip is that A11Y is a numeronym. It is a word where you take the letters in the middle and replace them with numbers.

So A11Y, there are 11 letters between A and Y. There's another numeronym, internationalization, or IATN there's a number of those ironically, people in accessibility and outside of it don't think that it's a very accessible term. But it's something that we use nonetheless, especially in Twitter historically. I mean, if you have to type it a lot and you're short on characters, it's pretty easy to reach for.

I mostly mention it just so that you know what it is, you know what it stands for. You don't have to use it. Yeah, kind of some fun accessibility trivia.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now