Live Session (2025-26)

There we are, welcome back and I know that the ARIA stuff is the most complicated. things that we're going to talk about. Like if this is like if you feel like oh you're like a designer or content person or like you know not like in the code I know it's very hard, so you know, and like you don't need to know this for like the exam or for anything that like is based on that course it's good to know of it. I don't think you need to know the details. Um all the time, right? So that's just something that I wanted to say because I know it's like it's very technical and it's very complicated and I know that like a lot of actual like people who do front-end development, you know, as a profession struggle with this. So don't Don't be like, oh, I did not understand that and and we did like force you to to understand it. But you know the the important thing is like knowing of it, being like aware that that this is a good thing to like know about and then you know just be just be clear about like what the different things are in case you hear of it, right? So it would be would be really bad to just tell you not about it and then you you know you come across it and you don't you don't know what at all what's going on. so speaking of this, do you have any questions about like the videos or what I said or how I presented stuff? because I'm happy to like give you a little bit more context or like re-explain stuff. It's always difficult to do to do it like, you know, from the start

Yes.

Yes. That that felt like yeah, explain everything.

Yeah, yeah, it was kind of that, but Um so from my understanding, the ARIA thing is about so so it's kind of what you name things in the code, and that's why it's so hard for, for example, designers to understand it. That's why my my takeaway. Could that be correct? Okay.

Yes.

Okay. So my question is about because I I was with you. through the video. But when we came to the part about documents and roles, and you said you're probably never going to use this, I didn't understand why I would not Or w what that was about, to be honest.

Good question. So there are some of the roles that you will use or that programmers will use. There are some roles that you won't use because they are like more foundam foundational roles. Like they are not You know, using them only gives you like the most bare bones thing and there's always a better thing to use. Like there's always a more concrete role. to use. For example, if we look at like the document role or the application role, there are better roles to use. usually. So so you wouldn't use those by default. There might be like really, really extreme exceptions to that. Of course, as they are always, because otherwise we wouldn't have them. That's that's the other thing, right? But but I have never seen them used. So I I don't think you will you will f find to use them as well.

Okay. So it it was that simple.

Yes, yes, yes. It's like it's like you will use some of those toc some of them those roles but not these particular roles, , you know, like document and yeah there are a couple of like they basically like everything else is built on top of them And it's like very complicated and I don't know why it's so complicated, but like, you know, I didn't invent it.

Okay, thank you.

Yeah, or things like the window rolls, I don't think like there's a lot of like usage in them Just scanning the the things like what you will use is the landmarks, like document structure, and the widgets. Those are the main things that you that that you will care about In terms of roles. Alright. Any other questions? Otherwise, I have a couple of demos that I want to show Because I think it's easier to understand with demos. Oh, go ahead.

Yeah, you mentioned Sorry, you mention that if the Html is good enough then some of these properties should work fine or mostly in area label But my question is if you are building from scratch and you are not let's say that you're building a component from scratch and not not using a library, because sometimes these libraries bring the HTML And now Deb is building this from scratch or from a headless library and they, you know, adapt this. How is the difference? How do we know what is not good enough and what is good enough?

Yeah, good question. Um so generally whenever you build something you should base it on existing HTML because that brings a level of accessibility that you know is very hard to replicate. Like let's talk about a button. You don't want to build a button out of a div because not only do you need to put in like the correct roles and make sure that it's properly labeled and all of that stuff but also like the keyboard interaction needs to be correct needs to be activated using the return key and the space key and so like building complex components and a button is not complex but like You know, it's w it's like if you build it from scratch, it is actually quite complex. Um, building complex components from scratch. will always lead to like more work. And so if you need to use a button and that needs to do something special, like being a play pause button like you know it it's toggled it's called pause and it can be on and off then you can use an HTML button button and then you can use the ARIA pressed attribute. And so you're basically building on what is ex actually there already instead of like starting from you know, all the way from scratch. So that's what is what I would recommend. And yeah, the other thing like to figure out if it's good is only testing. Like if you really build from like the ground up. you have to test with the keyboard, with assistive technologies, all of those things because otherwise the browser Takes does some of that, but if you start from scratch, you basically have to test it. And that doesn't matter if that's from a library or if you do it yourself, unfortunately.

Okay, so when you mention about the roles, like you can use the role button, but you say that it's better to use HTML. So we can use the role button though

if you ask me, you would never use the roll button. But there there are some instances where it can be useful. For example, if you have a link. that does not act as a link. So for example it opens a dialogue or it it saves the the information and the prior work has implemented it as a link instead of a button then you could use the role button to reassign that role Right. Um so when it's already in HTML, you should always use the HTML element if you can, like if that's enough for you. then you have the built-in accessibility. The roles then become only used for stuff that is not in HTML or when you have HTML that you can't otherwise edit. So for example you have you you know you have like a open this in a new window link or in dialog link and that is all styled and JavaScripted and you know everything works perfectly accessibly. Which just assume. Um and then you could use roll button on it to like make it you know, to have it announced as a button but Usually you don't really want to do that. Like if you start from from the beginning, you want to avoid that.

Alright. Thank you so much.

Yeah, good stuff. Any other questions? Going, going Okay, if you if you have other questions, you know feel free to put them into chat or like just speak up. Um so I have a couple of demos that I created. Um and they are in this ARIA demos. Um folder and gonna show us some of them and i'm gonna also I also use the screen reader with some of them, so I shall share sound. Um Install the Zoom audio device. Okay, let's see how that works. Um Reinstall my computer so I don't know if anything works. Um as I wanted. Alright, so you should be able to see my screen And now I have made it messy again, so let's make it non-messy again Alright. So let's take a look at this play pause button. So this is a button which is Super simple, you can click it to pause and play the button. Now, if you use the screen reader to pause something or play something, And you change the accessible name, which in this case we do by changing what is inside of the button, right? We change here the inner text. then that doesn't get announced to screen readers by default. So what I did here is I put in ARIALIVEPOLILIT. Which basically is a live region, makes this whole button a live region. And so when the content changes, it should be announced to screen readers. Of course, that is all dependent on like if the screen reader like how the screen reader is configured and how that works. I will try to switch on the screen reader and show that Let's see. Yeah, yeah. I know what voiceover is. Thank you very much. Can you hear the screen reader? No, okay. That's bad. Okay, I will try to reshare. da da da da let's stop sharing. Share again. If it doesn't work, , I think we can Can do it without. Cause we kinda have to. Okay. Switching it on again.

Welcome to Voiceover. VoiceOver speaks descriptions of items on the screen and can be used to control the computer using only your keyboard. If you already know how to use voiceover, press the V key now. Oh.

If you want to learn how to use Voiceover on Safari, Axel slash Chaz slash W11 Aria. Play

So now we are in the browser. So the screen reader is always like for the whole operating system. So you don't have you so you know sometimes you get into like It will announce windows and stuff like that. So in this case, it will say voiceover on Safari. So I know that like I'm on a Safari window. Then it will read like the The information where you can do that. I don't want you to read what I'm hovering with my mouse. Okay, I should have switched that off. Basically new computer, so like it is what it is. Um and basically it goes then into the web content and then you can use this play button. Um and I focused it, so that's why it has the black outline And now I press the space key. I have not focused it. Now I have focused it. Press the space key. And it doesn't announce anything. So technically it should announce the live region. Let's reload.

Stop loading code pen preview. Webcont play slash pause button live preview. Web content. 56% loaded, play slash pause button play button. You are currently on a button inside of a frame to click. Don't speak so much.

Yeah, it doesn't want to announce it to me now because potentially because I have not said it's a good idea.

Cold pen preview web content But technically if you press it and then you navigate away Show sidebar button play button you are currently on a button inside of a frame to click this button press control voiceover off

No idea what's going on there. We just move on and say and you have to believe me that this usually works Technology it's great.

Sure. So it was supposed to tell us that if you want to pause it, click again or something like that.

And play. Okay. Depending on what has changed. So I don't know why it didn't didn't do that in this case. Yeah, but basically when you put an ARIA life polite on something, it will read the text that inside of this element that gets changed. Alright, I have this other one. Is this better? Oh no, this is just the same without the life region. Why would I do that? Alright, let's go to this toggle button, which is the mute toggle button. So here, and and this was now a case where like the play and pause language changes on the button so it's important to announce it. Now this button here is a toggle button. And toggle buttons they have the same the same wording on it, but then they can be switched on or can be switched off. and the Switch on, switch off status, that's basically what you do using the ARIA pressed state. So And basically what what I do here for changing the icon also where's my second svg Oh no. Did this break at some point? This is embarrassing. I had used this before let me see. I should have this somewhere. Let's try this one. Okay, yeah, this okay this is better. So this is by default the mute button is pressed, Aria press true And then if you press it again, it gets unpressed and then it is ARIA pressed false. So that's what we do in JavaScript. Um and this is how we how we toggle between the two states. You could If you wanted to toggle between three states, you can cannot use ARIAPREST because ARIAPress can only be true or false. That makes a lot of sense Um let's see if I can show you that with the screen reader. Something needs to work

Welcome to Voiceover. VoiceOver speech.

Code Pen Preview. Web content. You are currently on a toggle button, inside of a frame.

So I'm on the toggle button inside of a frame. Like this is very verbose. Usually I make this like much much simpler but it says it's a toggle button and should announce the toggle button as well like the label when I move around. But it when you first start voiceover it tries to be like very specific so you know what's going on, right? If you if you were blind, couldn't see the screen, more information on where you are right now helps. Um, so let's try that.

Tab overview button. Mute selected toggle button. You are currently on a toggle button in Yes, don't don't say that

So mute selected toggle button. So mute is the accessible name, selected is the state, and toggle button is the role. So this is a toggle button because it has the ARIA. What is it? Pressed. ARIA pressed attribute set to true or false in this case. So if I now press on it with space We hear nothing because it's not set up to to give you any feedback. and this is actually the expected behavior. So You don't need to tell a screen reader user that, you know, in this case it's unmuted because they will hear the actual like movie or something like that. You know, so it's not needed. But when you can come back to the button, it should now say that the toggle button is not selected. Let's see if that works

Tab overview button mute toggle button. You are currently on a toggle button.

It just says mute toggle button. So it's not selected, so it's not ARIA pressed is not true. different screen readers will announce this in different ways.

So you know Axel slash chess slash WL

If you're using NVDA or JAWS or one of the other screen readers, they will all have like slightly different ways to handle this, and that's okay But if the ARIA is correct, it will be conveyed to to the user what the accessible name is and the state and the role.

Voice over off.

So again like we're using the ARIA press true and then we have here an svg where I basically put in a data icon unpressed and a data icon pre-pressed. attribute and then I can use CSS based on the there we go based on the ARIA press state So if it's true, I pick the pressed SVG and if it's false, I pick the unpressed SVG and show that. That makes sure that like the ARIA, the accessible information always controls the visual information. And by doing that, it's much easier to figure out when something breaks for accessibility because the visuals will match, right? If you s if you forget to set ARIA press to true when mute is on, then it will not show that it's muted. in the label but it will like it might mute the video because you programmed that but you didn't didn't put the ARIA pressed in so that's why I like to do that All right. Let's see if we have another good question. Oh yeah, we had actually the button versus div. thing. I don't know if I showed that in the videos, but this is like one of my favorite demos. So If you do a button from a div, you have to do certain things. And these are four buttons. And with the mouse, they all work the same. You clicked a dialog box open. So for someone who is not using assistive technology, these buttons all work the same. But for someone who is using assistive technology, they are not. So for example if I press the tap key I can focus the first one then I press the tap key again and I skip the second one because it's not keyboard focusable and then I press tap again and I can select the fourth one. But the first one, if I press return, I open the dialogue box. If I press space, I also open the dialogue box. For the third, if I press return, nothing happens. If I press space, also nothing happens. So this is not keyboard accessible. And for the fourth, it's the same thing. Neither space nor return will open the dialog box. So from this even cursory observation only the first of these buttons is actually button-y enough to be accessible. Um But let's hear how a screen reader would interact with that. That's really interesting.

Voice over on Safari. Axel slash chess. First button. You are currently on a button

We tap to the first, it says first button, so this sounds good. And we tap again.

Third group. You are currently on a selectable text.

So this is third group because like we did not specify the role button. So now it like it has something that gets focus, but it's not a button. And I will show the HTML in a second. And then we tap again.

Fourth button.

You are currently on a it says button again, and we will see what the HTML is. So one of the things that you can do with the screen reader that you cannot do with with the keyboard without a screen reader is you can actually use keyboard keyboard navigation, arrow key navigation to go through the page. So someone who uses the keyboard only is reliant on like the tab key and stuff like that to go to navigate through the page. But screen reader users have a little bit more control. So if I use voiceover keys and arrow keys. Then it looks like this.

Third. You are currently on a selectable text. Second, you are currently on a selectable text.

So it's a second because I was able to move the cursor there using the arrow key and in voiceover. Couldn't use the tab key, but I can use this. Now still if I press space or return nothing happens but screen readers have this additional capacity that they can basically make a click so if I press the voiceover keys which is a control option And then press space.

Close toggle button. You clicked. The dialog box opened. Close toggle button.

It will actually open. the dialog as if you had clicked with the mouse. So screen reader users can use some inaccessible stuff, although it's like a terrible user experience because like it just said like this is selectable text. It didn't indicate that this was something to interact with, right?

Third group. You are currently on a groove inside second You are currently on a select.

It just says second and that it's selectable text. It doesn't say, hey, by the way, you can click this, which a button does. Um and that's why we always want those roles. So let's look at the HTML request.

Voice over off.

Although I know it's boring, but like I I like it. Um So we have this class bouton, which is basically used just for the visual styling. And then the first one is a real button. Let me hide this. do real quick. Because I think the HTML, the JavaScript and the CSS is not that important. So the first thing is just a button that is that has a class button and it's the first thing and it just worked perfectly from the start. Then we have a diff class button, which is the second one. Which we couldn't focus and which didn't announce as a button. Then the third example is a button that can be reached with the keyboard and in this case voiceover said it's group. Other screen readers might not announce any role or might not like Might not give you any hint. And even if you know that it's a group, you wouldn't think like, oh, this must be a button, right? I mean, because you went there with like tab key You would probably assume that, but like you don't know if it even works with return in space. And then we have the fourth one, and this is basically like building the button from scratch. So With the div we add the tab index zero so we can focus it and then we add a roll button and then in JavaScript because we have to write that all for ourselves We basically say, okay, if there is a click event handler, then we say you clicked and the dialog is open. Like it's really straightforward. And why does I think when we when we did it on the third, return and space didn't open the the dialog box and the reason for that is that if you use oh and the fourth as well if you use a button a real HTML button Then it takes on the translation to say, like, oh, if someone does press space or press return keys, I interpret that as a click event. instead of just a key down event or key up event or anything else. If you're using divs to create that you have to not only listen for click you have to listen for key key up and or key down or one of the other keyboard specific events as well. So that makes it all more complicated. That's why I say Use HTML buttons, go from there, and then you can do other stuff with it Any questions about that so far? Putting the participants on the screen. All right. I have this other like fun demo which uses a little bit of ARIA label. for this three-tone text effect. Now I I don't think it's super readable, but this was basically a blog post and I adapted it to make it more accessible. So the idea is that you have like a word in here, like in this case Franz Norvège. Sorry for my terrible French. And without like doing anything like very difficult, you know, you get this like three-tone thing. So if I put like Hello behind it and do it here as well. Then you have France Novèche. Hello. Um and that works actually very well. Now the problem is when you create this like here and you use CSS before and after which which we did here and we take it from this data attribute because we cannot access in CSS the content here. But we can do it with an attribute. So we have here the attribute before and after data area label, which is like not not very well named for this demo. And so it will take this text and put it before and after our real text that is like in here So let me see if I can change this position really quick So you can see that. So now it is in line. So you basically have like this is our real text, and then and we can't select like the blue text or the terrible light green text with our cursor because they're not real text they are CSS content. Um And so we have basically this three times and then we absolute position it over the other. Um and sure Now in 2025 you could use anchor positioning or any of those fancy things. I'm not going to use that. But basically, this is the approach that they did. Now, despite not being selectable with the with like the mouse and the arrow keys as well, Generated content is actually read by screen reader. So in this case, this would have read France Norvège, France Norvège, France Norvège, which is like too much, like it's only only needed once. Um so that's where I had the idea to use the ARIA label to basically do the same thing but instead of like using a third like variable I use the ARIA label and then change the text in here. Um To match. And that means that everything that is in there is going to be overwritten by the ARIA label for the accessible name. So if we go into the web inspector really quick. , this is very big. Can go into note here And then click on the first one, and it will say the accessible label is three times the wording. And then for the second one, it only has one of those. And let's see how this sounds with the screen reader.

Voiceover on Safari, Axel Sl scroll area. You are currently on a scroll area, show sidebar, button, code PET, France.

You are current France-Norvège. France-Norvège. France-Norvège. France-Norvège. You are currently on a selectable test. France-Norv France Norvège France Norvège You are currently France-Norvège.

Doesn't want to let me go to the second one. I don't know why.

France France Norvège

Heading level 1 France Norvège. You are currently on a selectable text, inside Heading Level 1 France Norvge. You are beginning of text. You are current heading level 1 France Norvge. You are current France Norveg.

Interesting. So when when I create this, it would read it three times.

Heading level one. France-Norvège-France-Norvège-France-Norvège. Three items.

Okay, apparently in some circumstances it doesn't and some not. But yeah, that's that's basically the whole thing. Like, okay, we want to overwrite what's inside of this with the ARIA label. And you have heard that despite the language being specified as as French, it did actually not read The ARIA label as French. And that is because my screen reader is set to English as the first language. So ARIA labels and a lot of the roles will very often be read just in in English instead of like the language of the document, which is a little bit of a weird thing, but that's that's what's happening. let's look at the this navigation So here we have a navigation with four things are home product services about. And we have one of the options have highlighted because we are currently on that page. And this is really simple. because of the ARIA current page. Now if you ask me or if you think like oh HTML should just have a current attribute that I put on this link. Yes, totally correct Also, the page should be knowing on which like URL I am and then just know that, but like that's unfortunately not how how any of these things work. Um and so so we are stuck with having ARIA current page set. Um and so if we're using the screen reader There's at least a demo, I'm very con confident that it works. Um you can hear the following.

Voice over on Safari at link home list four items. You are currently on a link.

So because we're in a list with like four list elements, it will say home link and then say list four items. So You basically get first the element you just selected and then you get the context around it. So that means also if you know how this website is built and you know that after holding the Frederick has left the meeting.

You can go to home and then current page link products. You are currently on a link to click this link.

And in this case it says current page because that's what we defined in the CSS.

Link services.

Link services.

You are currently on link about. You are currently on a link show sidebar button. Actions available. You are currently voiceover off.

So very simple stuff to to use for with ARIA current. I think it's one of the most simple and like useful things to do. I also like to show this edit button here so we have a couple of of of different ways to use auto To like have a button. So in this case we have the icon, , and then we have the icon with the text edit next to it. Then we only have an icon again and again and you can see that we are using title and aria label for those two. Then we have another one where we have like broken on purpose the icon. And then we have one where we basically put an image in With the pencil title added. So this is ARIA enabled by. I will talk about this in a second after we have seen the screen reader using this.

Voiceover on Safari button. You are currently on a button.

It says button, it doesn't have any like accessible name, anything that gives away what this button does

Edit button. You are currently on a button.

So this is the optimal thing. Um and what I would always recommend is to put the label, the accessible name of the button inside of the button. Because then it will always like be similar to what you what the screen reader reads will be always similar to what you put on the button and like there's no arrow potential like you can't break this By putting a different alternative text in it or by forgetting to do something. So this is my preferred way to do it. Just put the darn text onto the done button.

Let's see the next one. Edit button. Edit. You are currently on a button.

This is using the title for edit. And the title attribute is usually only an accessible description. So it will be read after the accessible name is red. So but in this case, because the button does not have an accessible name, it will fall back to the title. So it will read the title as the name and then also read the title as the description. So that's why it says twice edit and it will say edit button and then edit because that's the description.

Edit, edit button, edit button. Edit.

You are currently on a then we used ARIA label?

Edit button.

You are currently on a which works very straightforwardly, then we have the button but without the icon.

Edit button.

Same thing.

Edit button. You are currently on a button.

And then then same thing for the image. Because if you're using If you have an image inside of a button, it will not announce the role of that image. Because doesn't matter to like Edit button.

Edit button.

Oh no.

Voice over off.

Because the description of the image should be what the button does. So putting it into like Saying that this is button, you know, edit graphic makes no sense at all. Um Yeah, and just going back to this, because this is a little bit more complicated of a thing. Like ignore this. Text which is the path, this is just the svg that paints the pencil here. So you can basically ignore that. for for what we're talking about. Then inside of this SVG, which is a scalable vector graphic, there is a title element that says pencil title as the ID and the title is edit and then the SVG itself, the image itself, is labeled by that title, so edit and it has the role image. And we have to do both so that it's properly announced. And then when we focus on the button, it will say like, oh there's no ARIA labeled buy on the button. There's no ARIA label on the button. Um there is there text inside of the button and then it will find this image that has a is labeled by this title element and then it will say like oh yeah there is text here. and that text is added. It's a bit complicated, but I think you know working with it makes it like much more straightforward. And let me know if you have any questions about that or other things. Um these are all live regions. I don't want to do live regions just yet. da da da Let's do this. Here we have the case where I basically wanted to put in a heading and make that look like an h three like in our in our content and then also have it announced by an h1 So here we have this thing that I created. And you should never do this, right? This is this is for like presentation purposes only. Don't do this at home. Um, so this is an H2 element, and then we use the class H3, so we make it look like an H3. And then we put in ARIA level 1 in it. I also put a role heading on it. I think we don't technically need that because the H2 already has a heading But you know, belts and super suspenders, why not? Um and this would be a thing that you would do if you take like text from another website and you embed it in your site and you cannot like change the HTML structure, then you could go in and put, you know, using JavaScript, you could change the ARIA level of the headings Would I recommend doing this? Probably not. I think replacing the h2s with h3s, or in this case h1s, makes is not that much more a work than like changing the ARIA level, but like yeah, it's certainly a thing you can do. So this heading, despite being an H2 and looking like an H3, , will be announced as a heading level one.

Voice over on Safari, Axel Slot Lorum Ipsum Dollar Sit, Ammet Scroll Area. You are currently on a scroll area, inside of WebCon Show Sidebar, button, Code Pen Preview, Frame. You are current heading level 1, some heading. You are currently on a heading level 1. Inside Lorum Ipsum dollars heading level 1. Lorum Ipsum dollars heading level 1. Some heading.

You are currently on So it does announce this as Voice overall. Which is exactly what we assumed that would happen. Because it can't do anything else from the HTML. oh yeah, some some things that I often see is that people are using Aria Hidden. Um and Aria Hidden is something That you should try to avoid when you can. So I I put this demo together because I've I've seen people struggling with it. And so we have a couple of options here. And the yellow background with orange dashed line, that's always your like what is currently ARIA hidden So in this case, the whole div is ARIA hidden true, and that div has a sentence and there is a link inside of that sentence. Then we all again do a div that has that where ARIA hidden it is set to true, but the link has a tab index minus one, so you can't focus it using the keyboard. Then here only the link is set to Aria Hidden Tru. And here the link is set to Aria Hidden True and Tab Index minus one. So it cannot be focusable. And then here inert is added to the surrounding diff, which basically makes everything inside of it inert, so you can't interact with it And this is actually a very fun demo because I think it's a little bit counterintuitive. But once you understand it, it's also like Very simple to understand. So especially what I'm showing right now is that sometimes even if you said something to ARIA hidden true, it will be announced. And that applies specifically for links and buttons inside of these areas. And the reason is that this was not the case. So screen reader users went through the page and if someone put an ARIA hidden somewhere, but there were like visually available and focusable links. These would not have been announced at all. Like screen reader users would press the tap key or the use the arrow keys. And it would just like say nothing at all. No role, no no accessible name, nothing, because technically it's hidden. and Basically, what happened is that that was deemed like not super accessible because like the information is gone, but like as a visual user you can see it. So for a few years now, you can actually tap to stuff that is visually available and focusable using the screen reader and it gets read even though it has a hidden true so let's let's take a look

Voice over on Safari, Axel slash chass slash W11 Aria, Aria Hidden Demos Live Preview Window. So I press tap. Link, a link. You are currently on a link.

So I get into this link just fine, although it is Aria Hidden True. Let's see if I can go to any of the other texts inside of this Aria Hidden. thing using the arrow keys.

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 ARIA hidden equals true.

So I cannot actually go to the rest of the code. For a screen reader user, the rest of the sentence is completely out of the like the realm of being being read. But if there's a link inside of it and it can be focused, then you can actually get to it. Let's see how it is when there is a tab index minus one on the link, which means that it's not focusable using the tab key. press the tap key first.

Link, a link. You are currently on a link.

So it's skipped, obviously, if it's Um if you're using the tap key, let's try the arrow keys again.

Link, a link. You are current heading level 2 complete heading level 2 only the link is set to are you a

And here also it gets skipped. So if the link that you have is not focusable by the keyboard, then it is considered to be not. important enough to to be conveyed to screen reader users. Why would you do want to do something like that? I don't know. Um Usually setting preview webcon Usually setting ARIA hidden true on something that is sh visually shown is an error and you don't want that. There can be instances where you have, let's say, a map area that, you know, you have a list of all the places and then you have a map area on the next to it and you don't want keyboard users and screen reader users interact with the map. That could be a thing where you might want to do something like that. But in general Um yeah, as you can see, if it's not focusable, then it will not be like included in the accessibility tree. Let's look at the two other instances. So this is where only the link is set to aria hidden true, and then the link is set to aria hidden true and tap index minus one.

In this sentence there is that you can or cannot activate. You are currently on a text element.

So I don't know if you cat if you caught that, , but it it said in this sentence there is That you can or cannot activate. And it left out a link because that link is set to ARIA Hidden True. So When it looks at the sentence, the whole sentence and something in there is ARIA hidden true, it will not put that into the accessible name. But when I go to like use the right arrow key again

Heading level 2 only in this sent heading in this sentence there is that you can or cannot activate.

Oh. You are currently on a t- It it also doesn't let me to go to that link Even if I use the tab key, I think it doesn't let me go to the link too because it the ARIA hidden true is specifically on that link.

Tab overview button. Link, link, a link.

How no currently with the tap I can actually get to there. So this gets very confusing, right? Um and even I like the different permutations are sometimes difficult to keep in your head But like when something is ARIA Hidden 2, you can usually, and it's an interactive thing, you can usually get to it with the tap key, but not with arrow keys. And then we have the area hidden true and tab index minus one. So we cannot focus it using the tab key and not using the arrow keys. So this gives us just a blank space in the middle of the sentence.

That you can or heading level 2 only the link in this sentence there is that you can or cannot activate. Heading level 2 setting inert to the surrounding less than div grade link. A link. Link show sidebar button. So actions available. You and if you set the code notificate less safari axles

Calm down.

Voice over off.

If you're if you're using inert, that makes the whole text, everything you have. not interactive so I cannot even use the the the mouse to click at the link. I cannot select the text. It's just as if that text doesn't doesn't exist and that's an HTML. feature is inert. Um let's see how I can show that. So you just put diff inert on something and then it's gone for everyone apart from like you can see it, , but you cannot interact with it Um and how why would you want to use the inert attribute at all? Back before we had native HTML dialogues the rest of the page like outside of the dialogue we would put in art so you can see it dialogue goes on top but you cannot interact with it like using the keyboard and stuff that's the reason usually why when we used inert for those for those instances. Any questions about this? Apart from why is this so complicated? No, just that one, okay. Yeah, I mean I I explained in the videos I think that like the history of ARIA is very complicated and like it's basically like parallel to HTML creating stuff and like that specifically for a Technology, all based on this Windows 98, Windows 95 type of user interface. Alright, maybe we want to do a brief break? I think that would be a good idea. Let's do a 10-minute break and meet back at 1410. how do I pause the recording? There we go. And welcome back to this session, the last session with me. How sad is that? Probably you are very happy about it. Um but yeah, it's all it's always fun doing these types of of courses with with students because you're all so like invested and interested and I I really appreciate that. So just wanted to say that Um probably weird to say it like in the middle of the last thing, but you know, that that's how I am. Um just wanted to like check that like if you have any questions or any thoughts after the break. Um, you know, this is a good time to ask for them, otherwise I will just go on and show another like two or three demos Um because I think I think it's useful to like see the ARIA stuff in action and also see how how you use it. Um although and even if you don't like write code or know your code like it it's at least instructive on how it should work I think So one example that I like, let's do it like this, , is this little donation slider. So you can use your your mouse and then it changes the donation accordingly in this case from five euros to fifty euros. and this is all pretty straightforward stuff actually. Like there is actually something called a range input in HTML. Like a lot of people don't know that this exists, but it does. which basically gives you this track and like the the little like selector of what you want to select and also you can say the minimum and the maximum and the value Um and even the steps. So now I have you know five euro steps, so I go 35, 40, 45, but I could go in ten steps and then I go t oh yeah of course I did the value to 20, which is not between like does not start with five. Five fifteen 25, 35, 45, and then you actually cannot go to 50 because it it's not in the range. It's not in the step range so if you go to five but you could also go into like 2. 5 as the step range just waiting for the reload So there you go. 27. 5 euros, 22. 5 euros. And of course you wouldn't you wouldn't format it like that. But it you know it gives you all the the ways to interact with this type of slider without like doing any programming like hard programming at all like nothing that I did just now had to do anything with like programming like nothing here is programmed it's all just declared in this one input slider, range slider input. And then I put in ARIA value text. And this is the interesting thing because ARIA value text gives you the value that should be announced. So in this case 20 euro instead of like just 20. And this is when you focus on it. Oh no, this is the this is generally for for for screen readers and it I I think for for Slider and we will see that in practice, it will announce like what you have selected at the end as well. Um If we hadn't set ARIA value text, it would just read the value. So it would just say 20. We can take a look at that as well. And then like for people who need to see the screen, I also put the text into . the content. Now you can cannot say like, you know, what which is like something that I would love to have to say like Aria value text, I don't append, like let's say it's append. This is now dreaming And just say space euro and it would use the value here and would append like space zero to the text Um that does not exist. This is this is something that we can't do at the moment, and probably never. Um So what you have to do is basically read what's in the what's selected, what the value is, and then you have to put that as text. Um Where do I do that? Here. As text inside of the ARIA value text attribute. And you have to do it in JavaScript by hand, which is. Little little bit weird and a little bit like feels a little bit dirty and unnecessary. but that's how just how this works. Um Oh, the other thing is like we do have for this input we have a label that does the 4 ID connection. So our accessible name is your donation. Um and didn't want to like skip over that. So let's hear it.

Voiceover on Safari, Axels 20 Euro your donation, slider You are currently on a slide.

So it says 20 euro your donation slider. Now, if in a perfect world it would say your donation. 20 euro slider, but in this case it will always announce the value first before the accessible name. and this is for like if you know the interface. You might know that like, oh, after this input the donation slider comes. So announcing that your donation is the label. Does not have the highest priority, the value is much more important. And then we can just use the arrow keys to like navigate from But to to the next value.

25 euro. 30 euro. 35 euro.

And this is announced because we changed the ARIA value tax. So there's no life region in this, there's no like figuring out anything. Um it's really really fun that this works so well.

40 euro 45 50 euro 455 euro.

Can't do more. Um so yeah, it's a really effective way to like program a slider. And you know, and you you will say voice over off. Oh, but you put in like the orange disc here and like change the colors. let's take a really quick look on how this looks natively so first I put a wrapper around the whole thing so here you have that and it says like here background color oh. Kind of don't want to save it but I will. And then the background color should be gun. Oh, because I did also put a background image there Make a little bit more nice. So now the text is of course white, which we also should not do White on white is not the most accessible color combination. I can I can reveal that. And then Like here in the in the track now this is this is done with a mix-in like SCSS. which is this is not my code. I stole this from someone. Um but you basically can go and you can apply these thumb and track CSS stuff to the slider. So you have here in this case WebKit slider runnable track and you have mods range track and ms track so these are the individual things that give you the track and I put in the color why you would want to do this instead of using native CSS is because you cannot have multiple of these vendor specific selectors in one selector. If one does not apply, all the selectors don't apply. So if you have WebKit and MOS, so for for Firefox If you have both of them in one selector, they will neither work in WebKit nor in Firefox. So that's why they're using like this include thing as a workaround. But yeah, so you get these these things and then you get the slider thumb. And basically they're just getting like, you know, doing some adjustments for in this case webkit browser. browsers and then also removing the MS tooltip. I think this is like very old Edge stuff. So Um I should update this. But it's basically like the whole design, everything is doable in CSS only if you know what like you know what what what you're doing and and using some of the vendor specific things. And that's pretty pretty cool that this is like possible and you don't need to go and like create your slider from scratch, which is something we used to, you know, used to do quite often. Sliders and then you had pixel values and your absolute position stuff, it was like All health breaking loose out there. So this this is much nicer.

I have a question. When you refer to an accessible name, it it's not always like the label, it's not always always the role or or like it refers Depending on the component.

Yes, so what the accessible name is is dependent on the type of role. So for example, when you have let's say a main element or like let's say a navigation element, nav element, then the accessible name you give that through ARIA label or aria labeled by. That's the only way to put an accessible name on it. If you have something like a button, the accessible name can come from the title, can come from the text inside the button. or can come from the area label or an area labeled by. So you have more or different options. But in in general the accessible name is either what's inside of the the element if it's like a user interface element or it's the ARIA label if it's like something that groups some other content. I think that's the easiest way to to remember that.

Okay, thanks.

Yeah. And the it's really difficult. And I mean then there there are other people like, you know, s sometimes it's also confused with the label. And the label like if you are and this is like where I'm really a little bit like cross about the naming in in the ARIA specification Because in WCAC the label is the visual label, like what you see. So in the slider here, your donation is the label. When we focused the slider, it was also the accessible name. But the label does not always need to be the accessible name as well. Like they can be different, they shouldn't Usually, but but there could be a difference there. So so for example or for example if you use that and you hide this from view in an accessible way so it can still be referenced. let's do display oh this this is not good like here display absolute oh it's position absolute I'm washed position absolute and then Top minus one hundred pixels. So this track here now still has an accessible name. We can see that if we go here into our note and then go on to button it at the bottom it still says label your donation. This should be accessible name. Um so accessible name your donation, but we don't have a visual label anymore. So that's a WCAG. violation but not for accessible name but for for the label label success criteria So yeah, it's it's always a little bit more complicated than like what it looks like. This is basically the same thing as with the links before, like with Aria Hidden. Yeah, I don't want to show this again. I've seen this. I've I've described this long enough. Um yeah, and and that leaves us effectively just for a couple of live region things. So Go like this. Button one two three. Um we want to to make sure that it announces one, two, or three. I think that's what we do. Oh no, it's in a it's a test. It's a test for all of them. Probably. Because we're doing it a little bit different each time. Yes, so we we want want them to announce test all three buttons and let's see how that works. So Putting it up here and then switching the screen reader on and that's the screen reader. Voice over on screen. Live regions are screen reader-specific technology, so they will not work without a screen reader. So can press tap, go to one.

One button. You are currently on a button inside of a frame.

Then we press space to activate it. And it shows the text test, but it doesn't announce it. So that's not what we want. Like this would be You save a document in like, you know, your Google Docs type of application and it shows like, oh, the document has saved. Um, you want to announce that to the screen reader user so they know this actually happened. Um let's try the second one.

Two button. You are currently on a button in

Also no no output. and the third three button.

You are currently Test.

That worked. Um and so there are a couple of of reasons for that.

Voice over off

Live regions are relatively complicated. You want to set them up basically immediately when you are creating the page. So in this case we don't have an element where we could write the text in. If you can, you want to To create that and here my notes say voice over macOS announces this like the first the first one. Um apparently it doesn't anymore, so I probably should update this twenty twenty six. No announcement In voice over Mac OS. So this is good information. Um Because, you know, these implementations sometimes they align with themselves or align with the other screen readers and then like the behavior changes. It's very rare, so you know, don't don't be too afraid. But in this case, we just put in a P element into the page and then we set the ARIALIVEP polite and then we set the inner HTML to test of this demo element. And then we add it to the to the document. Um and basically this means all of that Content a div or P in this case. maybe I'll just show it here. Inspect element. So the P Aria Life Polite test is put into the page on at runtime, like when I click the button. And usually Generally, screen readers do not pick that up if it's not already on the page. So in this case, because the P ARIA Live Polite has not been inside of the page, it didn't announce it. Let's see the second one. Here we do basically the same thing. We do P ARIALIFPOLIDE and then ID1 and then test and put that into the code. And I also put in here macOS announces this, so I can like new New stuff. This is why you have to test with screen readers occasionally just to validate your things. So here we did it a little bit differently So we put in the ARIA Live Polite with the ID. And then after the and then add the P, the MTP element We add that to the document and then we fill the inner HTML with test. Now, usually what you would expect is that when you have the live region and then you change the text, that text will be announced. In this case it doesn't because it's like directly the thing that is the next thing after putting the the paragraph into the document. And that means that for the screen reader. And for the for the browser, this all happens like in an instant, like the the browser does not update the accessible document so quickly that this like doing it in two steps matters. But we can force it to matter and that's what we did with like this third button and I hope we can see that Ah and if not I probably can go and make it like a little bit more more clear. Let's do this one. So here we have one and two, and then we have for three this would be announced. and it looks very similar to like the second one, right? But this got announced and why is that? Well, if you look very closely here, and I know that it's small, I'll make it a little bit bigger Look at when I click on three again. It will add the same thing with an ID3. Look at the little triangle at the start. Let's do it for two first. And now three And you've seen that this little triangle, which basically says there's something inside of this element, was added like a mini split second after adding the the actual p element here. And that's actually what triggers this to work. So what we're doing here. is that we create the P element, we put the Aria Live Polite on it, we add an ID. And this is just so we can then add the text Later, then we add the document the the P element to the document and then we wait for 300 milliseconds. and what the right waiting time is f for your application or for like different screen readers, it varies, but 300 is very consistent. I think 200 is probably also okay. Um but I use 300 also because you can actually see it like a third of a second like makes this seeable and then that means that the inner HTML in this piece changes from nothing to test and that is then announced. So that's why this third button gets announced. And as we can see, it's like this now means that voiceover macOS now works like NVDA, Firefox. In all of the instances. So that's actually good. That's consistency and we love consistency. Um This video is sponsored by consistency. Um yeah, but you can make it easier, as I said before by actually putting the live region directly inside of the content. Well, this looks broken, , but that's okay. Um so in this case we have this output element. The output element is an automated HTML native life region and then we just change the the inner text of this output element and this could be a div With ARIALIFE equals polite. It's basically the same thing, just if you use output, it's for free and you can just use it in HTML. So, and that means we can just go in here. Voice over and because the output element is already there, it will automatically announce once it's changed. So this is like putting the div ARIALIVEPOLIT directly into the code. And I know that there is a voiceover bug that announces the output element twice, so it will say one one. In a second, but I know about that. This is like a bug invoice over. Um, it should not happen, but yeah.

Count up button. You are currently on a button One one two two three three four four five five So voice over off.

Ignore that it says the number twice, but this is exactly how it's supposed to to work with the output element here. And that's a useful thing to just have the the output element there and then you change it and then it's automatically announced and you don't have to think about it. at all. Um very, very useful. And yeah, it's announced double. But if it's short, the announcement is short, or if like even if it repeats, like screen reader users can skip that. Like press the left control key. and you're good with that. So I don't think it's like a big issue just frustrating that it's like there for yeah a year now and they don't haven't it fixed. But that's I will Yeah, they have to do to do that. This is basically a similar demo, just with a div ARIA Live Polite. So now it has the ID output And basically when we press a message, it takes one of those names and gives them a message and puts that inside of the ARIALIVEP polyte thing and because it's it's a normal ARIA life polite it will only announce text that is added to the to this type of chat field how I like to to call it so let's try that

Voice over on Safari Send Message button. You are currently on a button, inside of a frame, to click this button, press Ctrl Option, space. To exit this web area, press Ctrl Option, Shift Up Arrow, Donna, you want weapons? We're in a library, the best weapons in the world. Rose, you want weapons? We're in a libra, Colin, lives change worlds, people can save planets or wreck them, that's the choice, be the best of humanity. Yaz, tag, you're it. Colin, fantastic. Jody, you want weapons? We're in a Donna, we're all stories, in the end, just make it send message button voice over off.

So very simple, like you don't need to like delay putting putting the text in or anything if you have the the div in this case, like in there. And ARIA life is one of these like general attributes you can basically put everywhere where the text changes. But yeah, it's a Like if it's if it's already in the code, then that's that's the best for your use case. Let's see, I think this was the last demo. If you have any questions, this would be a good time to think of them. And if not, we're gonna end this. Yeah, I think I showed almost all of them. Not not the ARIA life test, , because that's not my demo. This is Daniel, our colleague Daniel Swan and it's great, but I already showed it in a different context.

So yeah Will you add those links for code pen?

Yes, they are in the canvas. It's the link to this page and feel free to play around with it. And if you have any questions, as always, put them in Slack or ping me or whatever, and I'll try to like to get back to you as soon as possible

Cool.

Yeah. Thank you.

All right.

Thank you.

Thank you.

If there are no questions, then we're gonna call it. Three, two, one. Okay. Thank you very much.

Take care. See you around. Thank you. Have the best. take care and see you around. Bye. You too. Bye