 Hey, buddy, what's up? It's Rob Dodson. Welcome back to The Alicast Show. So in the last two episodes, we were looking at screen readers, VoiceOver and NVDA, and getting you up and running with those. And recently, there was sort of an internal thread that I was a part of where someone was asking, if I have users who are using a screen reader, but I want to dynamically add some new content to the page. Maybe I want to display an alert banner or some sort of info banner at the top of the screen. How do I do that in a way that gets properly announced by a screen reader? So I thought today would be kind of a cool time to dive into how to build alerts and how to build these things called ARIA live regions. So in a nutshell, an alert in ARIA, there's a specific role that you can use. And what it does is it transforms an element into what's called a live region. A live region is sort of like part of the page where we've told the screen reader ahead of time, hey, we're going to update this thing. We're going to add some new text content to it. And when we do, you should go ahead and announce that to the user either spoken through a screen reader or through a braille display of some kind. So follow me over here to the ARIA authoring practices guide. What I'm going to do is I'm going to try and build a really quick and dirty alert just to show how live regions work. So over here on the sidebar, I'm going to find my alert pattern. And the description for an alert is pretty simple. It's something that displays a brief message. It's used to provide important and potentially time sensitive information to a user. So for instance, if they were looking at a weather website and suddenly terrible weather was happening, you might drop that into an alert to make sure they know about it. The main thing we want to do, though, is we want to make sure that if you're making an alert that you don't make something that has to, like, that disappears off the screen really quickly because the user might not have time to see it or interact with it. So when we make alerts on screen, it's really nice to have them sort of stick around so a user can go over and click on them to close them if they need to. Or so the screen reader has time to announce it via the ARIA live region. What we're going to do here today, instead of actually even needing to mess with any ARIA attributes, like ARIA live or anything like that, all we have to do is use one role attribute. And that's going to give us a lot of the cool magic of creating our own live region. So if you look at the pattern here, it says an alert needs to have a role of alert. And what that's going to do is implicitly basically set up the thing as an ARIA live region and give it sort of an assertiveness of assertive. There's two assertiveness that you're going to have with ARIA live, assertive and polite. Assertive means it's going to just interrupt whatever the screen reader was talking about and go ahead and just say what's in the alert. And assertiveness of polite means that if the screen reader was already reading something, the live region would wait to finish and then go and say, you know, whatever the alert content was. In this case, using the role of alert is going to make this thing assertive, so it'll interrupt the screen reader and just, like, say whatever we give it. Now, they do provide an example here, which we can check out. And this example has a little bit of CSS and a little bit of JavaScript associated with it. But I noticed when I was trying to use this example that it doesn't seem to work in voiceover on Chrome and in Safari on a Mac, though it did work in NVDA. So for instance, I'll just show you what happens. When we try and use this using voiceover, it should announce the alert box, but let's see what actually happens. Voiceover on Chrome. ARIA alert. ARIA alert. Role example, visited trigger and alert button. Voiceover off. So it opened the alert, but we didn't actually hear it announce anything. Now, my rough understanding of the way that live regions work is that the browser, or it might actually be the assistive technology, I'm not quite sure who, but one of them is sort of polling the document at certain intervals and sort of checking to see, like, hey, is there new content inside of a live region? In the example that they've provided here, what they're doing is they're just sort of inserting the alert with the role of alert just at runtime, right? And so if the screen reader or if Chrome, if one of those two was needing to sort of pull the document ahead of time to look for live regions, it might not see it if it just gets inserted dynamically like that. So one workaround that I've seen people use is to go ahead and have the alert element just sort of, like, in the document already, and then just sort of pipe new text into it. So it's in the document, it's maybe not visible, but it's there. And then when we need to alert the user of something, we just add some content to that. So let me show you how you can do that. Let's go over to JS bin. And let's say I'm just going to go ahead and create, like, a section from my site. And I'll give this section a role of alert. OK, so now I've kind of implicitly created a live region. If the screen reader is polling for the existence of live regions, it should see this thing because it's in the document already. But it's not displaying anything, right? It's just sort of this empty thing up the top of my page. And then I'm going to drop in a button, and we'll just say, show alert or something like that. And let's give this button an ID so we can grab it with some JavaScript later. Also going to give a section here an ID. So we'll say its ID is alert. And then what I want to do is I'm going to create a template. And template element, it's something that is not going to display its contents on the page where we can grab it with JavaScript later and insert that into that section. So I'll create a div inside of here called notification. And maybe we can give it some text content so we can say your account is active or something like that. Let's give this template an ID as well. So we'll call this notification template. All right. And then we'll just write a little bit of JavaScript. And what we're going to do is we're going to say when the user clicks on the button, grab the content of that template and drop it into that alert section. So we'll say button is document query selector button. We will do the same for our little alert area. So we have a reference to that. And we'll grab a reference to our template. So we'll say we want notification template. All right. And then anytime someone clicks on that button, I'm just going to use on click here. So I'm working kind of quick and dirty. So we'll say anytime someone clicks on that button, let's go ahead and clone the content of our template. So we'll say template.content.clone node is true. So clone node, if you haven't worked with it before, if you haven't worked with templates really, when you call template.content, it's going to give you sort of like a document fragment representing the content of that template. You want to clone that because you don't want to modify the template in place or anything. Make a clone of the template content. And you pass out the true flag. And what that does is that says make a deep copy of everything inside of the template. So if there's a ton of nested DOM inside of there, you'll grab all of that. All right. So I've got a clone of everything inside of my template. And now I'm just going to take my alert. And I'm going to append child that clone. So if we test this over here and we say show alert, we should see your account is active. So let's save that. Let's go over to our output. And now let's try this version using voiceover and see what we get. Voiceover on Chrome. HTTP show alert button. Your account is active. Voiceover off. OK, great. So now we have our alert showing up, which is awesome. But we can do a little bit more. We can make this look a little bit nicer. And maybe we can make this function reusable too. So that way, anytime we want to alert the user of some new content, we can just pass in a string and have that display. So let's start by making it look a little bit nicer. So I'll drop in style tag. And I've got some styles that I've just gone ahead and saved. So for our notification, we'll drop in these styles right here. So we're just going to make the text look a little bit nicer. We'll change our body font family to Helvetica because we're like total hipsters. So Helvetica, Ariel, Sans, Serif. And let's also make sure that that alert section has like a bottom margin of like 20 pixels or something. So it's not like pushed right up against the button. So now if we look at this, when we click show alert, let's see save it, refresh here, click show alert. There we go. So now we've got this big green active banner at the top of our screen. So let's see what we could do then also instead of this hard coded message right here. So let's get rid of that. And instead, when someone says, oh, hey, I've clicked the button, we'll just say we'll take that clone. And we will query selector inside of it. And here, let me add some spaces to the bottom so you can see this. We'll query selector inside of that clone and look for this notification class right here. So let's say give me notification. And then we'll set its text content equal to some other message like, you win, awesome. So we try that, boop, and now we got that working. Go, we try that over here, turn on a screen reader. Voice over on Chrome, HTTPS, show alert button, you win. Voice over off. Nice, so that is a quick and easy way to get alerts and notification banners and toasts and things like that working in your application. It is a little bit of a workaround, but so far what I've seen is that this works consistently on Macs in Chrome and Safari voiceover and in Firefox on NVDA on Windows. So this could be a really useful solution if you want to sort of a cross platform, cross browser way to notify the user of new content. So that about covers it for today. If you have any questions, you can always leave them for me down below in the comments or hit me up on a social network of your choosing. As always, thank you so much for watching and I'll see you next time. Hey, if you enjoyed this episode of AliCast, you can always catch more over in our playlist or click the little subscribe button and you'll get an email notification whenever we launch new stuff on the channel. As always, thanks for watching.