Intro and Overview

Back to Overview
00:00 --> 00:04
Hello and welcome to the Way Aria week.

00:04 --> 00:16
This is like super technical and this will be a little bit more like upfront talking about what the different concepts are.

00:16 --> 00:32
And then in the live tutoring session, we are going to go and basically go into the details to look at different stuff and talk about it.

00:32 --> 00:39
Because that makes much more sense than doing it in this, like, you know, with basically a wall between us.

00:39 --> 00:40
So that's the plan.

00:43 --> 00:56
Let's kick it off with talking about what is WAI-ARIA. It's one of the longer specifications from W3C, and it stands for Web Accessibility Initiative Accessible Rich Internet Application.

00:57 --> 01:05
Now, you might be wondering, why does it have the WAI in front of it? Why isn't it just ARIA?

01:05 --> 01:11
And the reason is that there were like trademark issues or something like that, so they couldn't use just ARIA.

01:12 --> 01:18
So they added the way dash before it just to make sure that that works.

01:18 --> 01:25
So in general, we will just call it ARIA and I will probably call it ARIA from now on.

01:26 --> 01:28
And what is ARIA?

01:28 --> 01:31
That's always the question, of course.

01:31 --> 01:39
Accessible Rich Internet Application doesn't mean they make you rich as much as I would love that this was the case.

01:39 --> 01:48
It basically means that there are rich interactions with internet applications, with web applications that you can specify.

01:48 --> 02:01
So when you have more in-depth interactions with the user interface, then you can translate those states and properties and roles and names.

02:01 --> 02:06
I will talk about all of that to assistive technology more efficiently.

02:06 --> 02:16
Yeah, so it makes the various elements of the user interface compatible with assistive

02:16 --> 02:22
technology so you can basically be more precise than just using HTML. HTML works great and

02:22 --> 02:31
should always be your default, I will talk about that too, but it allows more nuance

02:31 --> 02:40
assistive technology. Now there is a caveat though, and that is that WAI-ARIA is designed

02:40 --> 02:48
to align with the web interaction with Windows 98 accessibility APIs. Now I don't know if you

02:48 --> 02:55
noticed, but few people are using Windows 98 these days, mostly because it's 24 years old.

02:57 --> 03:01
And so that's a little bit of a problem.

03:01 --> 03:12
And the other problem is that this is not only accessibility APIs, but it's specifically screen reader accessibility APIs.

03:13 --> 03:23
So everything we're talking about is mainly or was initially mainly aimed at screen reader users.

03:23 --> 03:32
And that is, of course, a little bit of a problem because the accessibility is so much broader than just screen reader users.

03:33 --> 03:36
So we have to keep that in mind.

03:36 --> 03:41
And that means that a lot of things are happening in there.

03:42 --> 03:43
I made a little diagram.

03:44 --> 03:55
So that shows basically how ARIA helps to make sure that there is a good input and output for assistive technology.

03:55 --> 03:59
So in the browser, we have HTML and CSS and JavaScript.

04:00 --> 04:04
HTML and CSS basically build the accessible object model.

04:04 --> 04:08
That's basically a representation of what's on the screen.

04:08 --> 04:12
So if something is hidden, gets removed from the accessible object model.

04:12 --> 04:19
If something is put in, put back in, it's added to the accessible object model and so on.

04:20 --> 04:26
And JavaScript interacts with the accessible object model, sometimes by changing CSS, sometimes by changing HTML.

04:28 --> 04:31
And the browser interprets all of that.

04:32 --> 04:36
And that is basically where ARIA comes in.

04:37 --> 04:44
Because you can in your HTML, or let's keep it just there.

04:44 --> 04:49
So the browser interprets that all, then hands it over to an accessibility API.

04:49 --> 04:55
And that accessibility API hands it over to assistive technology for interpretation, output, and input.

04:55 --> 04:59
And then it goes back to the accessibility API and back to the browser.

05:00 --> 05:14
Now, where ARIA comes in is that you are basically inside of the accessible object models, you are defining things for the accessibility API specifically.

05:14 --> 05:21
Like you say, this is a button, and then the HTML will interpret that as a button.

05:21 --> 05:28
It will be in the accessible object model, and that will be transferred to the accessibility API.

05:28 --> 05:32
And so you have this like more control over what happens.

05:35 --> 05:41
So ARIA informs the assistive technology how to interpret content and UI.

05:41 --> 05:43
You can be like normative.

05:43 --> 05:46
You can say like, yeah, you have to read this as this.

05:47 --> 05:52
And that means that there is no meaningful error correction or anything like that.

05:53 --> 05:57
You basically tell ARIA that this is what you do and this is what you want.

05:58 --> 05:59
And then it does that.

06:01 --> 06:04
And ARIA can be used in many different technologies.

06:04 --> 06:13
So ARIA is not just for HTML and CSS, which will be what we're talking about today mostly.

06:14 --> 06:21
But it is also applicable to like EPUBs or mobile applications.

06:23 --> 06:30
whole like whatever wherever you have user interfaces you can use aria technology and

06:30 --> 06:40
sometimes aria directly to reveal what is going on there and basically specify more directly what's

06:40 --> 06:41
going on

06:41 --> 06:43
Thank you.