The Rules of ARIA Use in HTML

with these ARIA things. There are a couple of rules of how to use ARIA in HTML and I tried to, like, hit them all during what we talked about, but they are actually in this really nice document called Using ARIA that Steve Faulkner and others are working on.

And it's a really nice summary of what you should and shouldn't do with ARIA when you're using it in HTML.

And so let's go to the first rule of ARIA.

If you can use a native HTML element or attribute with the same semantics and behavior you require,

already built in, instead of repurposing an element and adding ARIA role, state or property to make it accessible, then do so.

So, if you need a button, don't use a div with a role button, just use the button element.

That's basically what this says.

Make sure that whenever there is something in HTML that meets your use case, that you use that.

Second rule of ARIA is do not change native semantics unless you really, really have to.

and I would add, and you know what you're doing because this can go wrong really quickly.

So here's a bad example. It's an H2 roll button detailed information.

Now I've talked about, so the use case would be the programmer wants a heading and when you click

the heading, it expands and collapse some detailed information. And the thing is twofold. So first,

just putting roll button on the h2 does not make the h2 interactive it just gets announced

differently to screen readers but actually tabbing to the h2 or doing anything with that

that doesn't work because it's not defined it's just a different role and the other thing is that

this h2 now ceases to be a heading level two though roles are only like replacing you can't

add them to each other. That would be neat, but that's not how they work. So if you put H2RollButton,

this heading is not a heading anymore. It's now a button only. So if you're using heading

navigation, for example, you would skip right over it. And even in this case, if you use tab

navigation and want to activate it, it won't work because you can't actually move your focus.

on the button. A much better way is to just use the H2 as you did before and then use the button

element inside it and boom your expand collapse is more accessible. It's really simple and so you

should always you know always thinking about like oh can I do this through nesting or can I do that

in a better way. A third rule of ARIA use is all interactive ARIA controls must be usable with the keyboard. So we just talked about that like this pseudo button was not a keyboard usable. And if you use a roll button, then you need to make sure that the button can receive focus and that a user must be able to activate it both with the enter or return key.

or with the space key, because that's how a user assumes that those buttons will work.

And that's super important also for the different like widget roles and other things.

There is, we see that in a couple, I will point you at the documentation for that.

Basically, all these like more complicated user interface components,

they have their own requirements on how they must be used with the keyboard.

Because basically you're making a promise with the role on how this would work.

And if you don't keep that promise, then it will be much, much harder for a user to interact with the widget.

Fourth rule of ARIA, do not use role presentation or ARIA hidden true on a focusable element.

And as I said, role none is the same as role presentation.

When you use either of those, it might result that users are focusing on nothing.

So basically you tap to a button and has a role presentation on it.

It will just read the text inside of the button like it would be a text field.

But there's no announcement that it is a button because you removed the role.

That happens when you use rolePresentation or roleNone.

If you use aria-hidden true, that hides the element completely from the accessibility tree.

So in that case, you could tap to it, but there will be just no announcement.

It will be just silence.

And obviously, that's not a good interaction.

So this is not allowed. Don't do it.

And this, by the way, also applies to stuff that is inside of elements that have those, that have aria-hidden set, for example.

So I do have examples.

So if I have an aria-hidden true and a button inside of that, then that button is also hidden.

And you can tap to it or you can move to it using the screen reader and you would have no announcement at all.

And the final rule, rule number five, is all interactive elements must have an accessible name. We talked about accessible names and yeah, that's just the rule. Don't do, yeah, use accessible names. Make sure that they have them.