Accessibility Standards

[00:00:00]
>> The last thing for this section that I wanted to cover is the standard. So for folks that have done any digging into CSS spec, JavaScript spec, HTML spec, these things always have groups. They're all part of the W3. They have these working groups where things have to go through the process of committee, get decided on.

[00:00:19]
All the major browsers weigh in, all these very process heavy thing. Accessibility is no different. So they have the Web Content Accessibility Guidelines or WCAG. And so WCAG, that's the entire spec, right? That's gonna be like, here are the requirements or here's what makes a good accessible app.

[00:00:37]
Here are different rule sets, all these different things. They also provide, which is maybe more helpful, three conformance levels. And this is something that we're gonna see kind of as a theme throughout the workshop. So there's A, AA, and AAA. And so AAA is the absolute highest compliance level.

[00:00:53]
That would be, if you think of an example, say you have an app where you let users kinda draw with their mouse or something like that. Then maybe A would be just some description around it saying, hey, this is an area for mouse only users to be able to draw.

[00:01:08]
And maybe AA would be a description and then the ability to do a little bit, like maybe tab through some of the options and add things with your keyboard. And then AAA would be figuring out maybe using the arrow keys for a fully robust way of doing the same thing, but with the keyboard only.

[00:01:22]
And so we'll see this a lot with very specific examples where we'll do an example on forms and we'll see well what makes you A compliant, AA, and AAA. And so when doing accessibility work like contract work, often clients will have their requirement to be AA compliant. And you'll have to kinda know how to look those things up.

[00:01:40]
So we'll go over that. The problem with these specs is they're really tough to parse, right? They're big, they're wordy. They're very much designed by committee. They're a little bit hard to understand. And so there's this really cool group called WebAIM. And WebAIM is an org that provides again, not the official spec, but they provide a really nice user-friendly checklist with their recommendation.

[00:02:05]
So let me open this checklist just so we can kind of get a feel for it. This is webaim.org/standards/wcag/checklist. And so we'll kind of see, if we scroll down a little bit, that they have these little sections like text alternatives for non text content. And then they'll say, images, form image buttons and image map hot spots have appropriate alternative text.

[00:02:30]
And then next to it over here, they'll say what level of compliance that is. So this is just level A compliance and there is no AA or AAA, whereas we'll see for some of these down here, we'll see for an example here transcripts for non-live audio. There's a level A compliance, so a transcript has to be there.

[00:02:47]
And then there's level AA, synchronized captions are provided. And then there's AAA, a sign language video is provided, so you can kind of understand. I hope that illustrates a good example of, okay, so WCAG specifies what you need for audio and for video. And then WCAG also specifies the three conformance levels.

[00:03:09]
And WebAIM tries to do a really nice job of just kinda distilling that into easy to use, easy to read things. And so a note on this course says as we go through the things, I'll be using the WebAIM checklist for each thing that we learn. So we'll learn about alternative text and then we'll use the checklist to see, okay, what are the levels of conformance for that?

[00:03:29]
>> What is UC?
>> It's a university. I grabbed this quote because I really liked it from University of California. Sorry about that. And then I think that was just a little bit of an error on my part. Yes, I grabbed this quote because I really liked the explanation of ranges, A, AA, and AAA.

[00:03:51]
I think they're referencing themselves in here as University of California. Sorry about that.
>> What is Aria?
>> Aria, we have a full section on it. But that's a great question. What is Aria? So HTML provides a fair amount of things to make things accessible but there are limitations, which we'll hit later.

[00:04:11]
ARIA is a W3 spec as well. It's in the same kinda group that do HTML, CSS and JavaScript. And they are accessible ability focused helpers. So for example, an image would have a source and an alt attribute. But if you needed to do something like label it, you could use aria-label.

[00:04:31]
And we'll cover examples of that. But basically they're additive to the HTML spec, and they work in all browsers. And they're things that help specifically with accessibility. So labeling, telling what the role of something is, like if we're using a div as a button is a common accessibility example.

[00:04:50]
There's a role attribute, which is part of Aria to say, hey, screen readers, this is actually a button. So it's a big suite of helpers that are all in HTML to help with accessibility. And it's Accessible Rich Internet Applications, but yeah, it's a spec for accessibility helping.