 Hello and welcome to the CSS podcast where we break down what's happening on the web platform for CSS and UI. Today is an accessibility related episode, so to set the tone, follow me through a quick user experience scenario. Let's say you pushed a red button in an interface to delete something and some sort of pop-up confirmation appears above the rest of the page with the page itself blurred or darkened. As a sighted user, we can see the blurry background or semi-transparent overlay on the page and this indicates that the background page is currently off limits for interaction until we've completed the task in the pop-up or dismissed it. But as a keyboard or screen reader user, these visual affordances to keep us from interacting with the page in the background don't work because they don't have semantic meaning. The keyboard can still be moving around in the background page struggling to find the pop-up. In comes a nerd to the rescue, do-de-de-do, which is the topic of today's episode. But okay, so yeah, so what you do now is you put the inert HTML attribute on your elements that you don't want to be keyboard or screen reader accessible while this pop-up is showing and boom. Now you've matched the visual experience with the keyboard experience. Scott O'Hara calls this inclusively hidden. I like that, inclusively hidden. The JavaScript alert function is a good example of this type of focus management. It creates a pop-up that blocks all interaction around it until it's dismissed. It demands attention and it has special powers through the browser hidden from front-end developers until we got a nerd. So now we can do it too. And by now I mean in Chromium 102, Safari 15.5 and it's in Firefox nightly. So it's almost in all stable browsers. Nice and I like to think of a nerd as a way to create focus by making everything else unfocussable. Like for example, hey, I'll get you to interact with this potato by making it so that you can't interact with anything else. Right? I block the rest of the world so the potato remains. Why a potato? See episode 37 on pointers. But then this is traditionally simple. I forgot about that. Right? You're like, oh potatoes. This is traditionally simple to do visually but again, it's really tough to provide for non-sided users. Right. So before browsers implemented the internet attribute developers would create focus traps with JavaScript. And this would watch for focus to leave an area or component like a pop-up. And if it left JavaScript then grab focus and they would put it back inside the pop-up. But now that there's the inert attribute developers don't have to trap the focus. We can guard the focus. There's no finding and grabbing focus to put it somewhere else. There's only the interactive areas that we want to interact with remaining. Right. A nerd isn't interested in making you stay somewhere. It's interested in making other places unavailable. And this becomes really useful for scenarios like we've been talking about a dialogue, a pop-up, a modal, a slide-out, side-nav. Right. This is anything that's off-screen. You know, to you visually it's off-screen but to a keyboard user they can still reach it. So if it's off-screen make it a nerd. A carousel, like I just used this in GUI challenges so that the carousel is only showing one item at a time so I can use a nerd on all the elements not in view to take them out of the keyboard flow. Right. We talked about a pop-up and then you can, just like I was saying in GUI challenges you take it out of keyboard flow. This is really important to note that it's the element and all of its children. So like if you put a nerd on the body tag everything inside of the body is a nerd. Pretty much your page becomes unusable unless you have a dialogue that's in the top layer. Anyway there's a couple of exceptions but it's a superpower of a nerd versus tab index. So when we were doing focus trapping tab index was your strategy and you'd have to put it on every interactive item all the way down your dormitory. But with a nerd does the element and all of its children. So anytime a new element has appeared that's over top of existing content and deserves immediate attention, a nerd can help. But remember it's also good for off-screen content inclusively hidden. Nice. Yeah, inclusively hidden. I like that. When you put the inert attribute on an element it does a few things that you would otherwise have to hand manage. Point events are set to none. User select is set to none. And content editable is ignored. So this goes for the elements and all this descendants too as Adam just talked about. So while inert is an HTML attribute it's intersecting with CSS by enforcing some interaction style for you. Yeah, there we go. We validated the reason that we made this episode. It's CSS-y in a way. It is CSS. Well, it's the HTML attribute but there's so much overlap with HTML and CSS. Totally. Another intersection with inert is that it's an attribute. So you can use it in a CSS selector and style inerted elements. Inerted. That's totally not a worded it. A worded that inert. Elements with inert. But I hadn't thought about that before. That's a really good use case. Nice. So imagine you have the inert attribute in a selector and you set the opacity to 0.5. This can be nice because then sided users will see that something is inert. It's almost like we're in an opposite scenario as before where it's so easy to manage focus for keyboard and screen reader users that a sided user might be confused as to why something isn't clicking or scrolling. So that's the final tip. Inert by itself doesn't cause any visual change. You'll need to be in charge of matching the experience for sided and non-sided users. Tuck inert in your tool belt next to display none, visibility hidden, or your screen reader only class that has special elements for screen readers. There's also the complimentary Aria hidden equals true attribute which is available visually but not to screen readers. And lastly, tab index. Ask yourself, one, is this hidden for everyone? Two, hidden visually but is available for screen readers? Or three, hidden versus tech but not visually? And then follow that up with how should the keyboard and mouse be able to interact? Nailed it. That's all we have for today. It's a short episode of Short and Sweep where we wanted to bring your attention to this fantastic accessibility attribute that you can use now coming student browsers inert. It will be in Firefox 105 and it's currently in Chromium and Safari. If you have any CSS questions, we'd love to answer them on the show. Just tweet us with the hashtag, the CSS podcast. I'm at UNO, that's at UNA. I'm at Argyle link, ARGYLEINK and your question, it could help a lot of people. And as always, if you like the show, please give us a review on whatever podcast app you're using or share this podcast with a friend because those reviews help other people discover our show and help us have more time to deliver better content for you. Thanks y'all, looking forward to your questions. We'll see you next time.