Live Session (2026)

Hello and welcome back to the probably most complicated week of this course, which is the ARIA week. Um If you have because usually we don't have this at the end of the like as the last week or last ish week, If you have any questions, you know, during your examination or whatever, and you stumble over ARIA code that you want to like don't understand or you need more explanation, feel always free to reach out on Slack and say like hey. explain this to me or you can also put it in the public 's channel for the for the course and then we can reply and learn from that because I know that it's complicated topic that it's a very technical topic. It's also a topic where you where it's good to know about it, but you don't need to know every single detail like the details can be looked up and so yeah don't don't feel like you need to like you know go into in in into this and like if it's if it's difficult to understand, like, you know, just give up and go home. It's like, no, it's totally, totally fine. Like this is So difficult that even people that I work with that do accessibility every day regularly ask questions and regularly I don't have the answer for them because you know things work together and it's like it's like there are things that you know are not that easy to understand. That's it Anyone have any questions about the videos, anything specifically that I should repeat or should explain better? Please feel free to speak up. And if not, I have a couple of demos and I think with the demos it's easier to understand. 'cause I know the videos that that I've recorded are very like theoretical. Um and and so there's like always this like push and pull with with that stuff. Alright. Looks like no questions, which is okay, so I will share my screen. There we go And I clean up my desktop a little bit. So here I have a long list of ARIA demos. This is basically mostly for you for you to understand how some things work together. Now, not every thing that is in there is best practice. quite the opposite. Like to demonstrate some things you have to show stuff that is that you shouldn't really do Um, so it's a lot of demos. We won't go through all of them, I guess. Maybe we we will. Um Some are best like inspected like here in PolyPane or in another browser. And some I will share the screen reader with you. switch on safari and voiceover in a bit because that can be can be quite useful. So the first thing is the the first demo I want to show is this one And I will open it in in its own window. So this what this looks like is that we have this Laurel Ipsum text and then we have a heading in the center And then we have another like paragraph of text. Pretty standard stuff, right? Um and people always ask me, like, okay, how do How do I use ARIA right? Or how do I not use ARIA? And this is the thing that with ARIA you can go in your code and make things different things. So in this case, you know, if I press Alt and hover over the heading, it should work. But it doesn't for some un inexplicable reason. Um if I inspect the element Oh, because it's still in the iframe. Why is this still in the iframe? So I think I need to do this so we can inspect it better. So this here, this heading, I'm gonna inspect it here. Still doesn't let me inspect it. This is weird. This used to work better, so I assume that they have fixed up for security, which is annoying because it makes it harder for me to show you stuff. But we can just look at the HTML here. Let's do it a little bit differently than I would usually do it. Come on. There we go. It wants me to hover over this. There we go. So we have the the sample here in the in the center. And when we look into the code we see some things. So we see the H2, it has a class of H3 And then there's some ARIA stuff behind it. So usually we would say that H2 means it's a heading that is level 2. So heading rank 2 and class H3 means it's styled like an H3. I mean this could be anything. We're just giving it that name. Then there's a role heading, and then there's ARIA level one. So instead of this being an H2. This is now a heading level 1. This is equivalent to using an H1 element. Just because we're using ARIA level 1. The role heading actually doesn't make any difference because this is already a heading, right? Um the the code already has a heading role because it's an H2 And then it it basically overrides that with an H1. So if we look at this. Here it says role heading because we explicitly put that into the code. And then here you see under computed properties it says role heading. If we remove the role heading And then we have to wait a little bit. Then we have to select it again. So did readout. It still says role heading because we didn't say it explicitly, but implicitly, because the H2 already has the role heading. it is still a heading and then we use ARIA level one to make it a level one heading instead of a level two heading. So a screen reader coming across this would say this is l heading level one some heading instead of heading level two, which it would usually do. Um the class, the H three that looks like a H three somewhere in the page That doesn't actually mean anything. That doesn't change the semantics or anything about that. But this is basically how you can make almost any other element out of out of any element using ARIA, right? So that's where these properties come from. Um and you should never do that. Like this is really bad stuff. Sometimes when you import like legacy content, old content, the easiest way to fix it is by using JavaScript to rewrite a bunch of stuff Um and then you could say like oh I know that I use this H2 that I get from the source, but it needs to be an H3 when I put it out on my website, because it's like one heading level down. And then you can basically go through and say like every H2 I put a ARIA level 3 on it And then for a screen reader user for any assistive technology user it would be the same as if there was an H3 in the code You could also go in there and replace the H2 with it with a real H3, that would also work. But that's basically what it is. It's a basically a way to build elements using certain attributes, if that makes sense. And you should never use it. Like that's Th that's the one fun thing about ARIA. Like it's a very powerful tool, , but it's also one that you realistically should never use like in in most of the the use cases it's like can be very very annoying now I can't go back to my collection which is fun Come on, what's going on? That's not good. I don't want to have access to code pen 2. 0. I want to have access to my collection. Thank you very much. So there's ARIA demos. There we go. Um let me quickly make that as a d d Can I add that as a looted bookmark so I never have to think about this again? There we go. At footblock. Okay. So this is this is how you use ARIA to change one element to another element. And The important stuff there is that like every element in HTML already has ARIA properties or has ARIA roles. You know, so for example if you have a nav element it already has the role navigation that's just implied. Like there's a lot of stuff that is just in HTML By standard if you use a button element it automatically has the roll button. You don't have to add that afterwards. A lot of developers these days just add ARIA on top of what's already in the code and that can be problematic in in some cases. So If you there is a native element, and this is one of the rules of ARIA, right? Is that if there's a native HTML element, you use that native HTML element And and then you you know you can restyle it and fix fix stuff later. Um I want to show to do these are all Aurya. I want to show the edit button example. So and and this is about accessible names. Accessible names are very important because they tell assistive technologies What something is. So if you have a button that needs an accessible name, so that it says in this case, edit button. So if you look, and this is very similar to what we talked about, like with text alternatives and stuff like that but this is for interactive elements mostly so we have a button and in this case we just have a pencil icon in there So a screen reader would read this just as a button and you wouldn't know what's going on because there's no information there that tells the browser what's going on. Only information there is that it's icon pencil, but this is a class, so it's CSS, so it's basically just styling, and there's no assistive technology that takes clues from those classes and puts that into the accessibility output because that would be like a nightmare and would be really bad. So that's just not going to happen. And that's a good thing. but there's nothing in this button, this first button that says this is an edit button. So if you go through with the screen reader and I will show this in a second It will just say button. That's not good. Like this is not never good enough. And then you know what we can do is just put text inside of the button Text inside of the button and in some elements, not in all, because that would be too easy, will always be the label of the button. So the ARIA label or the accessible name as we call it. So the accessible name is basically using a list of how to of where to pick the name from. and then picks the one that is the most important. So there are a couple of of of things that are happening. So first thing it would look is inside of the element. Like is this element, does this have content And a button can be named. That's one of the properties of a button that can have a name. And then it would look in here and would say like, oh, in this span it says nothing. And then there's edit as a text. So the the edit text is is what is used as the accessible name. Pretty straightforward. But there are a couple of fallback options, and this is very important. Like some of these things, although they are in ARIA and you can use them, are still fallbacks. So if we go here into the button, there's a title edit. So title what that does is that if you hover over the button, it will have a little thing that says edit on it. Does it work? No, it does not. But theoretically, there should be like a little edit like thing on there. Um as a harbor. That is used when there is no other accessible name found. So this basically goes through, says there's nothing inside of the button, there's no ARIA label, there's no ARIA labeled by. None of those I will look at the title and use this as the accessible name basically as a fallback, right? Um Then you go to the next one, which is here, which says ARIA label added. Now, same thing happens. The browser goes through, says like, oh, what's the accessible name here? Goes to the to the content, says there's nothing here. then goes to Aria labeled by because that's the second place where it looks. And I will explain aria labeled by in a second. And then it says like there's no aria labeled by so truck, I don't know And then it goes to ARIA label and then it says, oh, there's a value for that. I will take that as my ARIA label or as my accessible name Um same goes for this example, which is the second pencil here. where basically the pencil icon is broken, this is still labeled edit. So for people using screen readers, assist technology. Nothing changes. Um the pencil is just not there because the the icon is missing. Um and then you can also put the accessible name here in the in the title element of the SVG. So if you use inline SVGs, this will also be read. So the screen reader or the browser will go through and extract all text notes in the SVG. and basically use them as the accessible name, which is like also a nice thing to do, but it really depends on your use case on what to to do, right? And one thing that I did here was I put on role image. So this makes this SVG, which usually is like a group or generic element. makes this an image so you cannot browse inside of the SVG which you usually could and then you use ARIA labeled by which points at this ID so Aria labeled by pencil title. Let me make this a little bit smaller so we can make this a little bit wider because I think it's easier to read that way. So the ARIA labeled by pencil title points at this ID pencil title and then uses it to label this image And this would be like having an image with an alt of edit. It's basically the same thing, practically, , but in reality it's It's a little bit more complicated. And why would you do that? Well, you know, you might have different different SVGs, they might change. You might want to just make sure that like No matter where you put the SVG, it's always properly labeled, stuff like that, then you might want to encapsulate it like that. So there are just different use cases where to do different things. But in the end result, these buttons, at least the everything but the first one, they should all sound the same So let's see if that's true. so I will go into Safari. And put in the link And open it and another live preview and then I will share that screen because that would be useful and also the sound And there we go. Did I share the sound? I th I think I didn't share the sound. I said I would share the sound, but I didn't check the thing. Check the thing. This is when you have a checklist in your head and then you don't actually do what you want to do on the checklist. So voiceover should be switching on there, yes Oh and you can't see the voiceover window. Voice over on

Safari. Work. Edit button live preview. Win voice over off.

I will share this a different way so you can see the voiceover window because I think that's always useful oh no I hidden all of you And then share more portion of screen. There we go. All right Making that fit a little bit better. And now let's do voice over on. Hello, hello. There we go.

Voice over on Safa Code Pen Preview. Web content.

I pull it a little bit down so you have more space. Call and

preview web content.

No, I'm on web content, so I will tap through because they're all buttons, all interactive element. I can just use the tab key.

Edit butt button.

So here for the first it just says button. So I come from tab

overview button. Button.

Just as button, there's no ARIA label, there's no text inside of the button, so nothing is announced. The only thing that the screen reader knows is that this is a button And I press tap.

Edit button.

Just says edit button. As you can see, there's this little question mark in the square in the in voiceover reading mode. That's because we're using an icon font and that font representative like that glyph which is the pen that doesn't have an equivalent in In the real alphabet, in very old icon fonts, those those icons can be on A B C D or like other symbols and then they would be spoken. So this is this is an important thing to say. Like If you have because this uses CSS content, if you have an icon font that still uses like C for example or or E for the edit icon then it would say e edit you don't want that but this is not the case here because I did it the right way Um then we have th only the pen with the title edit, I think.

Edit button.

It just says Edit button and then it has a little pause and says edit for the title. So what's happening here is that we don't only or that we have not only an a label and an accessible name but also an accessible description because the title is an accessible description usually but here it doubles up as an accessible name because we don't have an accessible name. Little bit of a fringe thing. But it kind of makes sense. Like it does also doesn't want you to like lose the accessible description only because it's using it as the accessible name. When we press Tab for the ARIA label version.

Edit button just

says edit button, even if the icon is missing.

Edit button

And then we have the area labeled by version where we just use an image inside of the button and it reads the as the follows.

Edit button.

Magic, it just says edit button, which is exactly what we want, right? Like this is this makes it clear what it does. Um, and the role, which is in this case is button It's so important because that basically gives the users knowledge on how to interoperate with something. So if you have a button that is Something that is announced as a button, users think they can activate it using return, using space, and they can you know using tab keys to navigate between the buttons. and this is an important principle because if we look at the at the end of the code.

Code pen preview webcon voice over off.

Just switch voice over off for the meantime. and get the the collection over to safari because I think that makes the most sense , we can look at this play pause button. And how that works. So we have a button with the ID play pause. And then what we do is when it gets clicked Which could be space or return. If you use the button element, the browser will basically say translate your keyboard presses into clicks. If you do not use a button, if you use the diff roll button, which we see a lot of the times and it's always wrong, Then the browser will not do that. Like then you have to use your key down event, your key up events to do all that interaction yourself. So that's one of the biggest reasons to use a button because it just works and you don't have to think about it. If someone uses a mouse or a keyboard or whatever, all all everything works the same and you can just use the click event. And what we do is we change the inner text to say play or pause regarding on what the what the status is of this button And that looks like this.

Voice over on supply button.

A button and I press space and it goes to pause. Now you would say, oh, I don't get any feedback for this, right? But this is actually as designed. Let's imagine you're having video player once you press play the video would play in the background so you would get that feedback from the video the same goes for pause like if you're now going to the pause button and you press it the video would stop playing and that would be indication enough so you don't need an announcement In some use cases it's useful to have an announcement and I can show that too.

Aria demos, a collection code pen preview, web content.

But in general you don't know you don't need that.

Aria Demos, a collection by Eric Eggert on HTML Code Editor, Text Entry A Play, Code Pen Preview, Web Content Play Place the code play button. So

here's the same thing, it says play button

Visited link code link air link pro

on the top there

code pen web content web content play slash pop code pen preview web play button

It's okay, it's okay. Calm down, voiceover. Um so we have the play button and then we press press it.

Pause

And we get the announcement. And that's because we're using something called ARIA LINKE routines. So for this play pause button, we have basically only the button with the ID play pause And here we do have the ARIA Live Polite. And that will basically say whenever something inside of this element changes, announce that change. So this is why when we replace play with pause and the the other way around it will announce what's happening in there. And that's a very good way to like have little announcements for Um for things like this. Um the important thing is that the live region needs to be on the page when the page loads. because that's then it's the most reliable because then the screen reader can say like oh there's a live region I'm I'll be aware of that Um we see a lot of of issues with that actually. So so yeah, that's how life regions work for that. Very straightforward. Um And the same goes for things like the toggle button. So toggle buttons are fun because they are actually built into HTML and this is one of the things where you either want to change the text because it toggles between two states like right like here changes between mute and being muted in this case and you either want to change the text or you want to change the state. The state here is the Aria pressed true. So in this case this is pressed in, so Aria pressed should be true. And this is pressed out, so Aria pressed should be Um false. That's true and false. They're only two options Get it together. So what I didn't do here, and that's actually wrong, , is this has no ARIA pressed by default So technically this is not a toggle button and I will fix this in a minute, but I will show you why this is important. So now I've loaded it into here. Screen it on

Voiceover on Safari, Work, Toggle button, Tab Bar, Six Tab, Tab Bar, Six Tabs, List. Code Code Pen Preview, Frame, Mute Volume Zero button So

it says mute volume zero button. This is also not the right demo, I think, because it should not say volume zero, but okay. And then you press base And nothing happens. Which is the expected thing, right?

Mute volume zero toggle button.

Would mute. And now it says mute volume zero toggle button. And why does it say toggle button now? And when we loaded it, it said only button.

Reload pay toggle button live preview web content. Show sidebar button code pen mute volume zero button.

So here it says button, then I press it

Show sidebar button. Mute volume 0. Selected toggle button.

Select the toggle button. And then I unselect it.

Tab over mute volume zero button.

And it's the and it says button again. So this is actually something with this. There's actually something that's wrong with this demo. So it should Only it should say toggle button by default. Ah and the reason is that we are putting the attribute ARIA pressed on it and then we are removing it when it's pressed That's not how it how it's supposed to be, and I'm surprised that I didn't notice this before. So you should have, if you have a toggle button, you should have ARIA pressed as false by default So this way it's announced as a toggle button from the start because you can only have pressed and unpressed. So two states And then here instead of set removing the attribute ARIA pressed, you should set attribute Area pressed to false. Well, this is actually something that I see done wrong in a lot of things. and probably it is because my demo was wrong and people looked at it and said like Eric knows what he's doing. and then I I did it wrong. But now we have done it And we open it in a new window. And now the icon is gone. I don't know what's going on with this example. But let's see.

Voice over on Safari. Work. Toggle button live preview window. Scroll area. Are we tapping through it to it? Mute. Toggle button.

And it says toggle button, which is what we expect. And then we do press space. And now the now the volume zero is there. Yeah, that's actually what I want.

Tab overview button. Mute volume zero. Selected. Toggle button. Code pen preview. Web content.

And it says total button now.

Voice over

both states. Which is amazing. Like it's almost as if it was designed to do that from the beginning. But that's that's the idea. And theoretically like the Ooh, that break that broke weirdly. Um, and honestly, we don't need this ARIA label volume zero. svg for anything. Like it doesn't actually help us. So let's just do ARIA hidden true on this SVG And this will just remove it, you know, even if it's visible, it will be removed from the accessible name. And we'll just say mute. Selected and toggle button and that gives a screen reader user all the information they need. You don't need to like over-explain stuff. And this is one of the things like you know with the play pause button we also could use a toggle button for that but the issue is when you change both the the text on the button and the state, you get into weird like double negative territory, right? So it it it it is play, Aria pressed True, so it's play selected toggle button and then it's pause toggle button. So pause is not selected, but it's like it's actually pause, something like that, and that's weird. So if you change the accessible name of a button, you never want to toggle it. That's my my rule of thumb and it like worked out pretty well so far any questions about this? Should ask more about like if people have questions. Nope, doesn't seem like it. Um let's go back to the collection. what else do I want to show that is like Interesting but not too complicated. Um where are my buttons at? Oh yeah, here are my buttons at So basically this is a very similar demo example I'm gonna show Also gonna open it here. So what this looks like is four buttons, right? Like not the most beautiful buttons, but there are functional buttons, purple buttons and their first, second, third and fourth is their name. And if you're using the the mouse you just you know However , first you click it, you get the dialog, you click the dialogue box open, everything works. Second one, same thing, no problem. Third one, same thing. You know, what else is there? Fourth one. Nothing changes. Now, this is where we see the most issues with people who don't know how accessibility works because they would go here, they would click through it and would say, like, yeah, fixed, done. Um this this works But if I'm using a keyboard, I can see some differences. And there was actually a minor difference with the mouse as well. Which I will show at the end if I remember. Um but it's so subt subtle that people usually don't notice it. So if I go with the key with the tab key, I see first and it's you know looks like it's focused. I press the spacebar, it opens the dialogue, I can press the return key, it opens the dialogue. Works very well. Oh, now I press tap and I go to third. Why didn't I go to second? This is weird. Okay, so maybe the second one is not a button. Who knows? Um this is this is now the third that seems to be a button again. I press space to open it, press space to open it again, nothing happens Oh, weird. I press return. Also nothing happens. Well this is a button I can focus it, but nothing happens. bad example. And then I press tap to go to the fourth with, which again works. Press space, nothing happens. I press return, nothing happens. So same thing as before. So now we already know that three out of these four buttons that work perfectly with the mouse. Do not work for keyboard users. Let's see how good they work for screen reader users.

Code pen preview web content. Press tap first button.

First button? Perfect. That's what we expect. Again, space close

toggle button. You first button close toggle button. You first button.

Let's go to let's press tap to go to the next button.

Third group.

And there's a scroup? That's weird, right? Like it shouldn't say it should say button because we see it's a button, like it needs to be a button. So apparently Something is wrong with the role or with the element used so it is just known as a group. We're not even trying pressing it with return or or space because we already know that doesn't work, but I can try voice over key, so control option and space

Close toggle button, you clicked, the dialog box opened, close toggle button, has keyboard focus, third group.

So the fun thing is with the screen reader, you sometimes can click a button even if it's not, or you can like activate a button even if it's not keyboard accessible. So when you do Testing and I see that a lot, that people are using screen readers to test, and there's not nothing wrong with that. But you can get these false positives where you think like, oh, this button works Because I used the the screen reader combination to open it, but someone with like you know other assistive technology would not be able to open this button Um because they don't have the way to just say, hey, put your cursor there and click because if you if you look at my cursor, I don't know if it comes across very well in the video, but I tried again. The cursor actually jumps there and then jumps back. So it basically simulates a mouse click on the button I don't know if if it if it was visible in it it just jumps there and then jumps back. Um and now it didn't even like open the thing which I don't understand why. Sometimes

third fourth but third group.

And again?

Close toggle button. You clicked the third group.

So now we're in third group And now we

have fourth button.

Fourth button. Again, now the announcement is correct, right? We want to have a button announced because it looks like a button. But again, return and space doesn't work. But we can still click it with the voiceover space in this case. And every screen reader has a way to do this.

Close toggle button. You clicked the dialogue but forth button.

So okay, double we have. first and third and fourth and we know that third and fourth we cannot use using the keyboard to open but we can focus them and we can use you know with voiceover we can or with any screen reader we can tap to them and then use like click it command to click it. But what's with that second one that still has like is elusive to us

First button.

So the thing is with a screen rear you can also do other stuff. So you know, because you don't you not only do you want to read every button and every link on the page which you would go to with the tab key, But you also want to get to other content. And how you do you do that? You use the arrow keys. And especially on voiceover, it's voiceover keys and arrow keys. So that's control option and arrow keys but every screen reader has this. Um and in most like normal quote unquote normal screen readers, like for Windows and stuff like that, it's just the arrow keys. So here we can do voiceover and arrow keys and we go to the second one.

Second.

And it just says second because this has no role. It doesn't know what it it wants to be. And now we're focusing it. And you see that the keyboard focus is still on first, but we're focusing on the second with the screen reader. So that's also something that a lot of people don't know. Return and space don't work.

Close, first.

Oh, it actually does work because we were I was on the first still with the keyboard focus. Need to think about that. But if I want to click second, I have to use voiceovers command again. So key voiceover and space.

Toggle button and now

click the dialogue box op

button versus divliv preview web content group.

And we know that because now the focus should go back to second, but that's not a focusable element, so it goes to the whole page. So that's That's how it goes. I I want to show how the code looks for this. Because I think it's interesting. Voice over off. But then I'm a nerd and I think stuff is interesting, although it isn't. So let me know what you think So this is the code, this is the code that these buttons have. So there is a class bouton, which I created to make it look like a button. And so every one of these looks the same using that class. So we have one. The first one is just a real button with the class and doesn't do anything else. Now what we do here is do the on-click event, all of that fun stuff. Then for the second one we just have a div with the class second , with the class button and the second text in it. So this is not recognized as something that you can tap to, that you can activate, anything like that. So that's why we jump over it, because like it's non-interactive. Third one, we can focus with the keyboard on it because it has tab index zero, which is good, but because it doesn't have a role, it will be announced as a group Which is not not not the best. And this also depends on the browser or on the s browser and screen reader combination. Some screen readers announce this as group, some announce it without a role, so basically similar like using the arrow key to go to the second one. Um but yeah it's it's a little bit different but like there is no explicit role on this. So In this case Safari voiceover just says like, yeah, and it can be focused, so it's probably grouping something, right? So let's let's say it's a group, you know. which is like It's it's a very interesting thing when like you go into like these places where To make it accessible or to try to make it more accessible, assistive technology basically has to guess what the intention was. That's why we always say like use the real button, use a button element, because then your intentions are clear and everything you do will be clearly communicated to The user, right? But if you leave intentions open, then it's much more difficult for the assistive technology, so it will like trying to improvise And the same goes for the last one. You say it's a roll button and will be announced as a roll button, but it will not function as a roll button. So if you click it, if you press return space. that will not go and be a click event because here we only look at click events. Um and that's all of it. And that doesn't fire on non-button and non-link elements if you Yeah, if i if if you're using non-button or non non -link elements, they just don't fire the click event when you press return or space. Now there was an indicator visually when using the mouse as well, and I tried to go over it as quickly as possible because like it's basically giveaway so if I hover over the button the button always has the the arrow key If you don't have a a roll button, you will or the arrow as the mouse pointer. That's what I want to say. It doesn't have to do anything with keys. If you hover over this div, it will let you select the text. And that's always also means that you click, but that's always an indicator that something's amiss. And these goes for that goes for all those four. If you have if you make buttons out of links, you will have the little like mouse hand, like Mickey Mouse hand pointer. And that's a that giveaway that something is a link and not a button. So that's just intuitively we know that because we're just interacting with this stuff. But yeah, that's basically what's happening is that if you go over text inside of a button and becomes the little like marker for selecting text, then you know, oh this is not a real button and you can then look into it and you know do the face palm and all the different things that you have to do when you're looking for accessibility stuff. But that's that's what makes ARIA especially so complicated to look at and to to inspect because if you use assistive technology you can basically make all of that work. You know that pressing return or space didn't work on the last button is only the reason because I only look for click event handlers. If I say key up event handler and then I test for space and return I can make this work functionally like a button, but much more complicated, right? Which like why would you do that? And the reason is people like to do very complicated things. Um but you know I see this every day actually that people use diffs to make buttons and it's a it's a bad technique. Um and if you ask people why they are doing this, the number one answer you get is that they want to style the button And folks, this is twenty twenty six. we have had the ability to style buttons for fifteen years now. and to style them any way we like. Like there were restrictions like when Internet Explorer was around, but that's a long time ago, right? And this was only minor stuff Um and now we can just do it and if you if you need to like be really I don't even know what I did here to make it Make it like that. I didn't even use appearance none, but theoretically you just can put appearance none at the top these days and will just remove all the button stuff that is in there. So There's really no no reason anymore to to do anything like that. Um but that's the number one reason that people give All right, let's do another another example. no, I don't like those Don't like those. Yeah, oh this is this is also a nice one. Because a lot of of times we get like, oh, I want to do something, but what but I want to hide it from screen reader users or some or something like that. Because people feel like some information doesn't belong to screen reader users which you know it can happen like if you have a image of a map and you have the address next to it It might be easier for a screen reader user to just take the address, put that in there like Google Maps or Apple Maps and navigate, you know, get a feeling for where that is or how they get there is much easier than interacting with the map that you have on your page. And so yeah, there there are reasons where you would want to hide stuff from screen reader users or as I showed like the little volume zero volume button icon that was also where I used ARIA hidden true and it did you know hide the the the image from the button But this is how to hide a button from screen readers themselves. So buttons are special because you can focus on them And there is this rule that is relatively new to ARIA. It's like five years old or something like that, so people don't know about it. Um That if it's a focusable element, it will always be announced. You cannot hide it. So I will show that. So we have this normal button and then we have the ARIA Hidden True button And then we have a button with display none that doesn't show up because it this display value is none, and then we have a button that is inert. Um and I will talk about what that is. So the normal button is just button type button. Nothing else. Then we have button ARIA Hidden True button type button for the second button and then third button is inside a div with the style display none and the fourth button is in a div with the inert attribute. So let's see how that reads because that's the easiest way to know Do it.

VoiceOver on Safari, work, buttons and hiding live create tab bar, set button one, button, this is a normal button, group.

So it just says button one button and then this is a normal button group because like this is inside of a field set. So the field set is read afterwards and the role of the field set is group.

Button 2. Button. This button ice area hidden equals true. Group.

So here it says the button is aria hidden true, which is what we have in the text and also it it says it's button two although it's hidden from it it has RER hidden true on it And usually area hidden true is like hiding stuff, but if it's focusable, it's not. and it's very important because we see That people hide like whole areas of their web page and then they have links in them and buttons and stuff and those individual links are actually available Two screen readers and I have another demo that shows how disorienting that can be. Then we have the display none button, which we will I spoiler because it's difficult to show. we will just jump over it because if it's not visible, it's also not shown to the screen reader in general.

Show sidebar button. Actions available

And we also jumped over the button that is inert because inert means this button does nothing. This button?

Button one. Voice over off

This button I can just click. I mean nothing is going to happen because like it's not set up to that anything happens. And this button that is ARIA Hidden 2, I can also click. And that was always true, right? even before like Aria Hidden True like they got this exception that focusable elements could could not be not focused. Um but you could still click it and so you can click that. You cannot click a button that is not there. It makes a lot of sense. And inert also makes the button and the whole div actually where it's in makes that as non-existent. So this is when you have your models and stuff is behind the model, that stuff is inert. Um so I can, you know, I can try to click it, but nothing is happening. The other buttons they flash because like they get like activated. But the button for nothing happens because it doesn't e exist. I mean I can fork I can even like Select the button. So if I if you start a selection outside of a button that works. If you try to start a selection inside of a real button, it doesn't work But here the inert button I will just skip over it. Like you cannot select it because it's technically not there. Like inert means this stuff does not exist. Like don't look at this. It doesn't exist. It means it's not available for screen readers, but it's technically also not available for other users. So don't put it on like some text that is just on the page because then screen readers will not be able to read it, but visually will be able to read it because that's you know it doesn't hide it. It just makes it uninteractive uninteractive that's probably something that people say somewhere in the world. Yeah, but that's that's how that works. And I think it's pretty important to know about that. And here is another ARIA hidden demo. In this case, I will open it in a new window as well. I commented that very very in depth, so it's nice. So here we have a div that is completely set to ARIA hidden true. Um so on this diff there's ARIA hidden true on it, which basically means that you cannot focus on it. Here we have the diff set to area hidden true and the link has a tab index minus one. Tab index minus one means you cannot reach it using the tab key, which is quite important as we will see. But you can still click it, which is fun. Then we have a link where the only the link is set to Aria Hidden True. So anything that's yellow is basically set to Aria Hidden True. And here the link is set to ARIA hidden true and tab index minus one. And here is the inert example which where you can't click anything. So that's like yeah, it's the same thing as before Turn it on.

Voiceover on Safari. Work. Arya hidden demos link. A link.

So the link can be focused, but if I now use the arrow keys you will see that I'm just skipping over all of the text.

Heading level 2 complete less than div greater than set to area hidden equals true period. Link, a link. Heading level 2 complete less than div greater than set to our tab bar, 8 tabs, list. Code pen code pen preview web content.

So that means out of all of that like sentence, only the link is even available to screen reader users. That's problematic, right? But that's how that works. Now we have a div set to ARIA hidden true and the link has type index minus one, which means you cannot focus on it. So tab index zero makes something tap focusable, tab index minus one makes something not focusable. Anything over tab index zero you don't want to learn. Like Nothing happens there, it doesn't matter, never use positive tab index. that's that's the s the the thing that I'm gonna teach you today. So I'm pressing here a link and then I press tap again.

Link a link

and it just jumps over it. And even if I'm used using the arrow key

Link, a link. Heading le heading level 2 only the link is set to area hidden equals true period. Three items.

It will just jump over it because like nothing in there is focusable. So one stuff is not focusable Using ARIA Hidden True, then it will be removed from the accessibility tree completely. Then here only the link is set to ARIA Hidden True. That is also a fun use case where you go through Oh here everything will be red because the link is focusable.

In this sentence there is that you can or cannot activate.

But the fun interesting thing is that the link will be removed from the sentence when the sentence is read. But you can use the tag key to get to the link. So it's like this is really weird. Don't do that. I don't know why we would do that, but like Yeah, so just just you know and then if tab index minus one on the link

that you can heading level 2 in this sentence there is that you can or cannot activate

Then it basically reads the second thing. Like the the same thing as like the when ARIA hidden true is on the link. But there's also no way to use tabs. Show sidebar

button.

Actions available.

Code pen preview web content.

So that means that that link is completely out of out of critical.

Voice over off. So

fun fun thing, it's a thing. Um Alright. Let's see. I want to show you a little bit of what how to inspect that too. that will be the last thing that we're gonna talk about. No no worries. That's not what I wanted. oh, it's Is that a good thing to test it on? No, I think I'll just show it on my own. On my website, because sometimes that's the easiest for me. Um so let's say we have this preference button, right? and it opens a nice dialog where you can select stuff and the background is inert because it's a standard dialogue. You cannot click outside of it yet. I should should implement that for sure But let's say we want to figure out like what's the accessible name of this preferences button. So we go to inspect element And then we have here and all the other ARIA attributes of course. You have here a button type button, which is great, and then it has has ARIA has power-up dialogue, so you know that the dialogue is going to open. And then you have here under accessibility, you have all the accessibility properties. And you can find them in other Other screen readers too, other browsers too. So it says the accessible name is preferences. Role is button, focused, yes, focusable, stuff like that. It's all in there. So Very very neat to know. Now what would happen if this button, this preferences button, had an ARIA label and it would point, let's say, at this Web Accessibility Expert Text. Let's click on it. There we go. So first this needs an ID Let's add an ID here. How do I do that? What's the best thing to do here is here attributes ID is our accessible name And then you press return and now it has the ID our accessible name. And then on preferences here, you click on that And then you can use the same thing here. You'd say ARIA labeled by. And then point at our accessible name and press return. And now what that does is that if you go to the accessibility inspector, it will say the accessible name of this button is now web accessibility expert because we're pointing at this and this is overwriting the accessible name that is already there which is preferences So that's a very good way to figure that out. You can also see that, and this is unique to PolyPane, and actually this is like the latest update which I helped encourage to implement is that you can see that this is labeled by our accessible name here and then when you hover over it it shows you the element and you can click on it and shows it too. Now what happens if this comes into conflict? So let's say we have here ARIA labeled by to our accessible name, but we also have a label and we say this is like totally cool button So now we have an area label and an accessible name and an area labeled by that's pointing to. the the element so which one is going to win so there is an algorithm that is implemented and so this is also the same for any browser and screen reader. So if you go to accessibility the accessible name will still be our f coming from the ARIA labeled by element because that is just a higher higher rank of importance. So this this will be still be the accessible name. If we break this, like we say this is now our accessible NAM, which is not found. Then immediately this will switch to being the accessible name of the ARIA label. This is something that we find a lot in our testing that people have wrong ARIA labels and they have overwritten them and then like the Aria labeled by breaks and then they they have a Aria label that is like you know pointing at something completely different. Very difficult to keep that all in check. So what we recommend is to use text inside of the buttons and not use aria label aria labeled by if you can. Because it can easily break stuff like that. Um yeah. So that's that's how to inspect it. Um in general, like you also can go into the accessibility tree. that you find in in the Chrome DevTools. So this is if I go to the DevTools here. Oh cool, new stuff. So you go into the DevTools and then in these here in the accessibility settings you set show accessibility tray. And then you see that here the button is called totally cool button. And this is in all the Chrome browsers and very similar also in all the like in safari and and and all the other things so you don't need to have polypaint for this this is built in And you see that there's a static text preferences and then it's overwritten. And here you also see the ARIA attributes. So it's very easy to see, it's the same thing Um, I just think the presentation in polypaint is a little bit better. and that goes for the whole like accessibility tree here too like if if I look at this but I can also show really quickly the accessibility tree in PolyPane. So you go to Outline and then Accessibility Tree and then you press reload. And then here you have the tote totally cool button and it says redundant over it Um because the mentioning the role button in the accessible name is redundant, which is true, , but it was a good good demo. And it also shows that you know there the area labeled by is not valid. If we go back to the elements panel. And we fix the name here, which immediately shows that this is now referenced. We go back to the other Chromium tools. Here it says button Web Accessibility Expert and Preferences as the static text. And in Polypaints are Elements panel, which is why I like, you know, what it does. It says Web Accessibility Expert here and also says labeled by our accessible name and it again shows you where it comes from. So that can be very useful for figuring out like, oh this has a weird accessible name. Where does it come from? Why why does it happen? Why is this happening? Yeah, any questions about that? About like any of this If not, I think we can close out this session. It was a lot of me talking, but like yeah, it's a com it's complicated again. I say it again, like this is very complicated, very code heavy, very like algorithm, like how does everything fit together heavy. so yeah, don't Don't worry if you don't like fully understand it. Like this is really the idea is to give you a glimpse into how the browser and how the screen reader interprets stuff and where it gets information from. So that that's the goal. Um yeah, and you don't need to be an expert in ARIA because nobody is. That's a fun fact. Yeah. Thank you very much. This was our last live lesson. If you have any questions, put them into the chat. And yeah, I hope to see you around. Good luck with the examination and everything. Take care. Bye. Bye bye. Bye bye