States and Properties

So, you know, don't bother with it.

States and properties.

There are a lot of states and properties in ARIA.

If we talk through all of them, we would be here until like, you know, in seven weeks we wouldn't be done.

This is super complex.

And the good thing is once you come across one, you can easily, relatively easily check in the specification if it meets your use case.

So let's start with global states and properties.

So these can be generally put on anything.

And I want to highlight a few.

ARIA-label, for example, ARIA-label-by, we already talked about those.

ARIA-live makes everything, anything a live region.

So if you have a span and you want to make it a live region, you can use the role, but

You can also use ARIA live.

And there are a couple of others.

ARIA role description defines what is read as the role.

So you might have something that is, let's say, an article and you use an article element.

But in reality, you want it to be announced as product.

Then you can use ARIA role description equals product.

And it would not be announced as a new phone article.

It would be announced as new phone product, which can help in certain situations.

I think I've never really used it in a practical way.

And then there's ARIA current, which basically means that you can say on a link, this is the link you're currently on.

So if you're in navigation, you can use ARIA current and then you can even use CSS to query that ARIA current true or page status and then apply your CSS that way.

It's pretty neat.

And we have the widget attributes.

Those are like a lot of things as well, but they basically mirror a lot of things that we can do with the input element already.

Things like ARIA checked, it's HTML checked basically.

But also things like ARIA invalid or ARIA required.

These are, as I have said, only applicable for users with screen readers.

So ARIA required will not trigger the browser's required validation.

It will not do anything to prompt the user to fill out required.

The only thing that aria-required does is to announce to the screen reader that this is a required field.

And depending on your use case, that might be the better thing to do.

So there are a couple of those.

aria-level, for example, is if you have headings, heading level 3, you would have role heading, and then aria-level 3.

So that would be the equivalent.

Of course, you can type H3, so why would you do anything else in this case?

Yeah, and then you have ARIA sort for sorted tables and stuff like this.

So there's all a lot of information that you can convey.

Then we have the live region attributes.

Those are ARIA-atomic, ARIA-busy, ARIA-live, and ARIA-relevant.

really quickly as the overview ARIA live switches live regions on and off. So you can say ARIA live,

I think it's off as the there's no live region, then you have ARIA live polite, which is basically

what the status does. It waits until the last announcement and then announces whatever you

have put into the live region. Or you could do ARIA live assertive and that would

basically interrupt the current announcement and blurt out whatever you put in there.

ARIA-busy is used as a true-false for when you cannot interact with something.

You can say, oh, the website is busy, wait a second.

That can be useful.

If you set ARIA-atomic true, that means the whole live region is red.

And if you set aria-atomic false, which is the default, then only the changes or edit text will be read.

And what is read, that is defined by aria-relevant.

So if aria-relevant, you can say edit text, remove text, and stuff like that.

There are also drag and drop attributes in ARIA 1.2, but they're all, all two are deprecated since ARIA 1.1.

So I will not talk about them.

And then there are a couple of relationship attributes.

So this is basically to make sure that if you have something like a table and you want to announce the row, you can actually use ARIA row index for the current row you're in and then row count for the number of the rows.

But this is all built into HTML. If you use a proper table, you don't need to think about that.

theoretically aria-flow2 would be nice to say like hey go there after this but nothing supports that

so support is a big question mark

and those are all the attributes and the states and properties if you have questions on any of

those. If something jumps out at you, feel free to just ask and I can explain that further and

also explain if it is actually supported in practice or not, which is always the question

with these ARIA things.

Thank you.