ARIA Solution

[00:00:00]
>> Okay, cool so yeah, let's go through this exercise together. So we've got this number that just kind of keeps counting up higher and higher and higher, I'm gonna go ahead and open 3.html. And so I just kind of made some, for those that are JavaScript developers. I just did like a kind of random number here and then made a set timeout.

[00:00:20]
So that random number of intervals, we just like grab the counter value and increase it by one, so it just has a little bit of dynamicism. So I think at its simplest case we If we could find the container of the number itself, and then we could just add an aria live region to it.

[00:00:36]
And so again, we can do assertive or polite, so for an example, if we go ahead and do assertive and then I come back over to this page and reload it. And then I go ahead and I turn the screen reader on, we'll kind of be able to see that as the numbers are coming in in real time.

[00:00:54]
We can see the screen reader like kind of keeps interrupting and updating those numbers basically. So that if we go ahead and we change this to polite and refresh the page again. We can see that even when I'm on the page here, it's gonna wait until that whole thing reads out in the bottom left.

[00:01:13]
And only when that's done, we'll update from old numbers, so you can actually see that for a while while had other stuff to do. Then the count was kinda behind like right now it's time you're currently on a link. So the constant be behind and then eventually as the screen reader idles for a long time, it'll catch back up.

[00:01:29]
And so again, you can kinda like play with those, I often just am like if it's the most important thing that the application is gonna do, I go with assertive. Otherwise I just go with polite and let users kind of get an update as they go. But, it can be really nice because I think often we use visual only clues that things have changed like a red notification or something like that.

[00:01:49]
So it's really nice to have an easy ability to just let user know that something dynamic is updated. Any questions on the exercise?
>> Like I was trying to apply this label and I found that it's updating like every single number.
>> Aha,
>> Even using polite, so if you wanted some code that said only read out an update.

[00:02:11]
After every 10 likes or every 10 seconds, whatever comes first that's just JavaScript.
>> Exactly, yeah so with aria live there's no more fine-grain control. I think that actually be really nice APIs like some way of being like no more than X, but yeah for sure if you wanted to do something.

[00:02:30]
So again for the audience the question is, it's reading out every single number even on polite cuz it's idling. Is there any way to get it to like read out only when you get like 10 or only when it's been like 10 seconds since the last one or whatever.

[00:02:42]
Yes, but it would just be like pure JavaScript, so maybe in that timeout it would just be like, yeah exactly. I'm trying to think of a way to do it like one way you could have like a hidden div with aria live on it. And you can only update that content on a certain time or something like that.

[00:02:58]
Or when a number was hit, but yeah for sure you just have to code that yourself. Great question, so what element gets the aria live region, like would you put it at the top bottom, wherever? So the thing is, is that the aria live will announce whenever any content in the element changes.

[00:03:14]
So you kind of wanna scope it down to just the element that you want read aloud so like notification count or something like that. Otherwise, like if you were trying to update notifications on Facebook dot com and you had it on the body tag or a top level tag.

[00:03:28]
Anytime you like open a modal or typed anything, anytime the DOM changes it wouldn't announce that stuff. So, you kind of wanna scope it as small as possible. Even sometimes just wrapping a certain value in a span, just so you can aria live just that span, that kind of thing.