All language subtitles for 14 - ARIA roles.en

- ARIA Roles are another kind of attribute

that can be added to any HTML element

to give it more meaning and to make sure

the browser understands what something is.

Ideally, we won't need an ARIA Role.

If we use a proper HTML element

we'll communicate the right message

about the semantics of the content.

But sometimes things are not ideal.

And we must make compromises in our Markup.

It's especially bad if these compromises make a site hard

or impossible for a person with a disability to use it.

In fact, in many places it's illegal

to make a website inaccessible to people with disabilities.

Yeah, HTML can be a human rights issue.

This is where ARIA Roles come in.

The layer of information conveyed by ARIA

tells screen readers, braille displays, magnifiers

and other assistive technology things they need to know

to make a site fully accessible.

ARIA was invented right around the time more and more

of the web started to replace native applications.

And it's especially useful in making sure the functionality

of a complex interface in an app

is fully usable by everyone.

Let's look at a design example

that needs help from ARIA Roles.

I've been using CSS Grid lately,

to push the boundaries of graphic design on the web.

I've taken this h1 headline, hello world,

and used CSS layout on each letter in a different cell

on a different part of the grid.

Cool, right?

But to do this, I need an HTML element around each letter.

So I can target each one with CSS.

But this is going to be a terrible experience

for a screen reader.

Instead of saying, hello world,

it will say, H-E-L-L-O-W-O-R-L-D.

We can see this happening

in the Firefox Accessibility Inspector.

Open up the dev tools and go to this tab

that says Accessibility.

Turn it on.

Here we get a view into the accessibility tree.

I talked about the DOM tree earlier.

The accessibility tree is another tree

that the browser builds from the content.

It takes the original HTML.

It uses that to build the DOM tree.

And then it takes the DOM tree

to build the accessibility tree.

The accessibility tree is what assistive devices use

to provide an experience of the website

through a screen reader.

We can open this up and see that it understands

this content as a bunch of separate text containers.

Each one with a text leaf

which will get read out as H-E-L-L-O,

which is a terrible experience.

That's not what we want.

Let's fix it by using ARIA.

First, we'll add the words that the screen reader will read

by adding an ARIA label on the HTML.

ARIA label equals hello world.

And then we'll hide the big massive spans

in separate letters

so the accessibility tree ignores them.

ARIA hidden equals true removes that element

and all of its children from the accessibility tree.

It's still in the DOM tree.

But for the purposes of assistive devices it's gone.

Which is why we're not going to put it on the h1.

We want the h1 to be seen by the accessibility tree.

We just don't want all these spans to show up.

So I wrap the spans and a div

so we can put ARIA hidden equals true on that div.

Let's see what this does.

I reload the page, and boom,

all those letters in separate containers are gone.

And instead, we have a nice heading of hello world.

ARIA is a powerful addition to the web stack,

and it deserves a deep dive on its own.

I do encourage you to dig in

especially if you're on a team that's struggling

to be able to use proper semantic HTML,

or is building a complex application interface.

ARIA Roles provide you the tools you need

to make your site accessible for everyone.