A11y Treats - Labels & Roles

and someone with a wheelchair can't get into it. Like new buildings have to be built built to a specific spec so people can Use them. Right? And it's the same thing with websites. Yeah. Just imagine you're in a wheelchair,

Mostly larger

lawsuits that have happened over the years with checkboxes.

like all of the different disabilities where you might want to consider.

abled. As in will define What would that look like? So I'm gonna put that on the the list of something to do once we hit video. Yeah. Totally. Yeah. I I think that that would be really good. And one thing that, you know, add on to this conversation that I've always heard of accessibility shoot. That that

And I would love to like see like how does somebody navigate When something changes and you have to announce In fact, it comes And therefore, you get in trouble. It's it's the same thing with the building, right? Like, if you have a

building that is being built It's true, especially when you're in that context. Send what? So putting in or even,

you should be up to speed with what the you have different states like when you're in editing state and then when you drop the search bar,

Like screen, maybe we'll do this once we roll out the video version of Syntax. Like what does it look like for someone who is And that there's different levels of of like how assertive you want to be when you want to announce a change on the page.

employees or more, and your website

if you could not get into this building that you needed to get into. I would really like to have somebody nonstop their abstract roles are only intended for use by browsers to help and organize and streamline a document. They should not be used by developers, so ignore those. Document structure roles are used to provide structural description for a section of content.

are inaccessible, for announcing when things change on the page because it's one thing to make like a website

that there is no, like, disabled. There's only, like, temporarily

essentially what the element itself

Situational.

Well, a role is describing wave.web other users that maybe aren't using assistive tech as well. I gotta say that is a huge pet peeve of mine, especially in

And it was amazing because he didn't. He gets the best battery life. Screen was totally off, right? I would love to just see a couple

laws are in your country.

In Canada. I think it's something like 50

All of us are temporarily abled, and we all will become disabled at some point in our lives for various reasons. Mhmm. And we've talked about this before and, like, What even

an actual website and like what are some of the

There's also landmark roles. They identify content areas within a page. You can think of that as, like,

And then window roles, which are things like an alert dialogue and a dialogue.

One last thing before we get into labeled by, the And that ID will then look for an HTML element with an ID and then use the contents of that element

the more HTML elements exist that are almost

nested components and everything is rendered to a div.

Was existing as roles before. We now have a search element. Did you know that, Wes? Really? Yeah. Situational disabilities could even exist or even, you know, you get older and things change, your vision

you accidentally do something or what would happen if we click that type of thing?

HTML five introduced the ability to wrap, And I hovered my little mouse cursor over the icon waiting for that tooltip to pop up for it to tell me what it did. Nothing.

So you could think of it as like a toolbar.

hey. Don't use this one. Use the search element instead. Right? for a full archive of all of our shows.

Number 1, abstract roles.

I know I shouldn't be using a div or whatever here, but I need to. So let me make it right that the browser understands

K. Because a role is kind of an escape hatch in the century Notion West that I recommend you check out. It's very funny because

and allow you to

HTML element.

they're div soup. They use they use divs for absolutely that something has changed so I was doing a drag and drop example

where there is no HTML element to describe the thing you're doing with tabs or something like that, then you're going to be reaching for a role. Yeah. They can also be used element

I like that a lot because that's that's like the first part of accessibility is just use the built in HTML elements the answer I've gotten a couple of times is put both right. Yeah. Because the title is for the tooltip specifically the title is for the tooltip and that. But then I've always thought, like,

But I'm very curious for anyone who does work at one of these large companies why everything is always a dev. Yeah. And it could be you know, I don't know when

it performs an action inside the application. Right. And guess what it is? It's a Div.

everything.

a non non semantic HTML element to to do something or to define an area of something, and then a string of which let's say the send example could be send email, Or the user interface aspect of it, which is what a role does. So roles are interesting.

Really. Like, not a input type of search? No. Just search. But a search element in HTML? Yes. In HTML. Oh, the generic search element.

Yeah.

Like it it just like would not

that it is to the user instead of the context there.

somebody is using a div to wrap.

big review of your website after the fact. It's Now you're starting to get into some really hairy stuff, and most of that is like React Aria is miles ahead with a lot of that stuff making companies. Domino Pizza is one of them, But if you're building your own

the actual thing the Error and exception handling and tracking with Sentry. So head on over to Sentry dot io if you read any application that anybody's using. That way you can make sure that your applications errors are swallowed up and then given to you in a nice lovely table that you can see and fix. Okay.

on Google, and in

Hopefully, Header, aside, footer, those types of things. Nav, roles would be

do the right thing the thing that is describing it. Then those are essentially 2 different

So you'll wanna look up all of the different available types of roles. It's really, like, Gonna get too much into mouth coding to just list them all in here. But, again, we'll have some links available to you that shows you which ones to use where and whatever. At the end of the day, stuff. If you're if you're using

It wasn't allowing me to do it. So that's another use case for roles as well is where

like,

Oh, I just got a div. I'm gonna throw an on click function on this and React's gonna do it for me. Right? The ESLint

copies of what

to actually

element out there to do what you're looking to do Mhmm. Whether that is button, whether that is things like search, and there isn't always, Always nowadays, with the contents of something else. And just in case,

like higher level thing where they have like

provide that structural description a role.

I was like, all right, well, what's this? This is clearly a button where you click it and

It's a And you can use

You have a button,

HTML

And then in some cases paper airplane.

This thing does for the user. It's a send email.

is a property that allows you to specify an ID,

just because

is all about

It's a tooltip. It's a tab. It's what it is. Right? Mhmm. And the label there is a correct HTML linters, any of those things can just come up majorly clutch. In fact,

plug in is well worth installing in your project.

the most common used live region role is alert.

man, there's a whole bunch of different types of roles. So There's 6 different types of roles, abstract roles, document structure roles, landmark roles, live region roles, widget roles, Yeah. We should get some referral cash for Polypane. How much I talk about it on here.

is stuff. I saw a really nice little sentence that says, Stuff. I forget what app I was using. It was something I I wish I would have written this down because it wasn't a web app. It was a normal app, and it was my 1st time using this app. And on the top bar is a row of icons that honestly could have meant literally anything to me at that point because this is my 1st time using this application.

like no one is is like intentionally going out there and being like, you know what, screw these people, you know, like I'm going to make an inaccessible website, is going on.

Right? That is a section of the content. It's the toolbar.

what There's also widget roles. Widget roles are used to describe common interactive patterns like, maybe perhaps the element Yeah. In fact, even the the the titling of those buttons was awful. But it was also just because I was the only one using them, and I knew they did. I was and then you you run-in that classic problem of Got lots of somebody

I don't even know why, but it seems like Google and Facebook,

tab panel, tab list, those types of things like I mentioned. There's no HTML element for those, so that makes sense.

Some content,

just catch it right away, if you Hover over top of the button, you could show that to the user to give them a little bit more context. Like, what does this button do All the time I work on applications and there's random buttons. I'm like, I have no idea what this little You know, like, is there actually But yeah, there's lots of examples, and I think you should Really get up to speed with if you are a web developer,

of what's going on.

By default, SvelteKit will bother the life out of you if you mess up that whatsoever.

Really quick about I mentioned that there was those 6 different types of roles.

oh, that's kind of nice.

take care

like, anchor tags around block level items and stuff like that. So there might be some nuance there in terms of when some of these things were added.

accessibility

while you're coding. Yeah. Totally. It's one of those areas where

There's and you're gonna wanna look up the MDN docs For all of the list of roles, and in fact, MDN is really good because it will say, represents. It's a button.

with your roles and do it well. Right? live region roles. Live regions could be something like an alert For a toast or a pop up, the, somebody else walks into the control room, and they're like, before we get going, let's talk a little bit about,

And the further we get into HTML, Send with the airplane button isn't descriptive enough for screen readers. Well, luckily, we have these properties to be able to fix this for us, I e, the ARIA label. So it gives context to generic items or nondescriptive before even considering

the browser. And then they also have to put a Habit x on that so you can focus it. So

Like, a role that does not apply Head on over to syntax.fm that,

by a linter you're not even a send. You put a little must be accessible and you can get in trouble.

is that almost

That component could have another link inside of it. You know, you could do some

which is where roles come in. They, Last thing I wanted to get into here before I talk really quick about testing your code in various ways is the aria labeled by, Which I thought was interesting. I probably should've covered this when we talked about label. But ARIA hyphen labeled by

And then before you know it, oops, you actually did something which is inaccessible and the amount of stuff that gets caught

as the label.

And I'll have a link for that in the episode. I always hate when people talk about how worth something is. And they don't say how much it is. So

to have to add all that extra common things like posting to LinkedIn, posting to Twitter, trying to go to a website to find the address or the phone number for some takeout.

and it needs to be presented as a button for whatever reason, whether it's framework limitations or

allow me to do it. I think it was probably a component because there's a possibility that standard in my ESLint you literally

to

rather than you having to perform some sort of

you can't do it. So you have to over

you're going to want to use the semantic role on something,

It says do not use them. They're basically, Listing in hierarchy of your headings,

Last couple episodes we did on this stuff were pretty well received.

and roles or role, the role attribute.

What's interesting about these, and we had a little bit of discussion before this episode is, it's ARIA hyphen label, but it's just role Even though you will often see people refer to role as ARIA roles.

Nothing too crazy. And, honestly, you probably don't even need to know that. But ARIA is I you know, the these things are important to get into the nuance. So I've list I posted a link to the Ally Project that has a great blog post Breaking these down. But at the end of the day, again, always think that you you wanna use the correct HTML element first. And then once you get into a situation and window roles. And

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

So, So if you notice any background noise, maybe it's kids running around for Thanksgiving or any of that stuff. But, with me as always is Wes Bos. How's it going Wes? Hey, pretty good. I'm excited to talk more about accessibility.

It stands for accessible rich Internet

applications. K? Yeah. Probably because I don't design a lot of it. I don't design a lot of interfaces like that. I do websites. So well, here in

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

So ARIA. West, do you know what ARIA stands for? Because that is an acronym.

these are the anytime you see the word ARIA, your brain should be Getting into the land of these are tools to help

Boss, and Scott, El Toro Loco,

I don't.

Tolinski.

assisted tech assistive tech and screen readers to understand your website. And This could be many different things, but the 2 that we're gonna be covering specifically today are ARIA label So these things both exist I love that

number 2 in your list, you know, and you have to announce that there is a change.

You can just associate those 2 things together with an ARIA label vibe like visually it might might make sense to you. But if the checkbox is not

You want someone to check it like the UI for checking it is in a different spot

ARIA 100% blind using a website, someone who is partially blind, someone who needs properties to a div and not just use a button. And there's probably some sort of compatibility, On the Syntax website, there were some buttons that did some scary stuff like import

Developer tool. Yeah. It's well worth it. I use this thing, like, or you have a button that's a div. Yeah. You're gonna have to put a a tab order on that like Westside. You're gonna have to do a roll of button. You're gonna have to handle those clicks and all that stuff correctly.

your users can

that item called eggs at the last accessibility episode we did is someone said,

checks. It will tell you what's missing labels. It will tell you what's missing roles, And it does so in a really lovely way. So polypane, And this has changed a lot with the addition of more HTML elements they're very different.

ARIA role, ARIA label checkers. There's a lot of them out there. One thing that we mention anytime we talk about this stuff is Polypane

and it will give you Changes your hearing changes, those types of things. So, you know, just have some empathy here, folks. It's not about you. It's about other people. Right? So okay. Let's talk about roles now, which is an interesting thing that they're often referred to as ARIA roles. So what is the difference between a role and a label? to not using the correct when working on the new syntax site,

they'll be like the normal smiley face, And then it has tone passive aggressive. And I was like, what? So we're gonna dive into ARIA roles and labels today. Yeah. And I think pretty well received is selling them a bit short. They were very well received. In fact Oh, yeah. High price.

or drop a review if you like this show.

the thoughts and questions and concerns. If you have anything in addition to add to this episode, something that your applications might need beyond accessibility and we're gonna be talking specifically about labels and roles. What's the difference between labels and roles? When do you need them? When do you not need them? What is the general reason that we have them? My name is Scott Tolinski. I'm a developer from Denver, but today,

That's great. Alright. Thanks, everybody, for ding in. Catch you later. Peace. Peace.

not only we talked about this in the headings episode where it'll give you a complete no ARIA is better than bad ARIA. So if you put a bad

This Gen z finds that to be passive aggressive? Oh, no. Oh, yeah.

that that's a a situation you find yourself in, I I'd never heard of labeled by before researching for this episode. So If you find that interesting, I think that's a neat little trick. Not something I've used before. This is you're going to need this now that we're moving into using CSS Has

and a web app that you submit forms and whatnot. But it's another thing to get into custom interaction.

thoughts on roles or labels, things that we didn't hit, or things that you think could be elaborated on, please let us know. We are on Twitter. We are on all of the spots, and we will retweet you or any of that. I was just looking at my code base, and it's Aria live equals polite.

ARIA labeled by has the highest precedence when it calculates

tab through it and use it with a screen reader. Yeah. And if you're out there and you have stuff. Aspects And in fact, the the big thing about roles inside of HTML.

Alright. I think that's it. Thanks for tuning in. If you would like us to talk anything else, actually, 1 show I really want to talk about is His name was Jenison, and he was at a conference and he showed you how he uses his iPhone being blind.

Light. So nice. Speaking of, this is totally off topic, but there was a Gen z guide to emoji

as reuse those labels to throw in a tooltip, throw in a title things that are going to happen, which is like not a great attitude towards this type of stuff. Right. Donica. If people think like, are accessible people custom UI, like maybe a flight planner or something like that, you got got to really start thinking about, okay, this is a

US per month

than what it describes there's there's a guy Probably 10 years ago now, and it still sticks in my mind. I've told the story a couple of times.

is an app. It's not free, But it's a browser That's well worth it.

And this is interesting.

And you need to tell the user, Okay, I've I have put

but it will run all of these accessibility

and

very common UI stuff accessible.

And don't forget to subscribe in your podcast player

that would probably be A good episode is diving into all of the different a screen reader,

if you have a checkbox

I think and be accessible so

in the same label where but

the individual is about $10

because in especially with like a checkbox,

in my upcoming TypeScript course. And

just aim.org will have a link. It's a free little tool you can drop your URL in. There's a lot of tools. You can just go online, Google accessibility checkers or,

well worth the money there. Polypane.app.

That is a super handy thing to have word. If you wanna check your code for this stuff, So

accessible names. So if you have a label and a labeled by, it will use the labeled by value. So just a just a heads up in case you have some

And it gets cheaper as you get into like business and enterprise license words.

but how do you also make it keyboard accessible Oh, that's nice. So it's an element that will wrap a form tag

to perhaps

Wonky code that would have both of these. But this gives you the opportunity

It's a descriptive label

paper airplane icon inside of that thing, because that's what the design calls for. And that's totally fine.

and it just says

items in a way that allows us to fully understand correctly. You're doing more harm than good there. So just

But if somebody, Override it with an ARIA role and say, Okay, As you're coding it, and it's usually just a quick fix these labels just to add better context to your application as well. You can And if you go to just do a quick Google search, there's a little button, you know, like search by image accessibility

Context. What the heck this thing is actually

Yeah. So then what you can do is you can define Welcome to Syntax. On this Monday, hasty treat, we're going to be talking accessibility,

What does that mean? Yeah. Or even worse, nothing. Yeah. Classic cafe menu.

More specifically on MDN, label something

to fully see or read that symbol as the way it is.

On the element, an ARIA hyphen label that were given And don't put divs everywhere. That's actually very correct. So when people push back on using divs, it's almost always because, Not just straight up coding HTML because you could just use the same string twice. Oh, yeah. You don't have to hand put that string. Look at me saying that I, abhor when people submit post. It's describing And and I actually blame front end frameworks for this one because they make it so easy to add on click events to gosh darn anything.

for a specific purpose in describing your code. However,

and the accessibility people can say, The Accessibility.

than what the content itself can define.

you know, this be one of those areas where designers, They could have their co or they have their design. They present you to their design, I'm hanging out In my childhood bedroom in Michigan.

What does the word send tell you? Yeah. Yeah.

as attributes on HTML basically and the building only has stairs. Yeah. You would be Really upset that is a mystery to you that you would like us to dive further into, we would love to hear all about

screen readers, assistive tech read it out loud. They they hit that element, Or perhaps they label it or something like that. You could see it very clearly exactly or hear it what's going on.

Jeff. Sort of reads that thing,

doing? Why it exists? And,

I think, an interesting example for this Is that let's say you have a button and that button value is just send.

what the heck these things are. So that way, again,

Who knows? Right?

So aria label is for, again, screen readers and assistive tech to understand the purpose of an element on your page. K? It's the purpose of the element.

Something that gives somebody who's unable

The, sync all episodes button doesn't actually sync all episodes. Imagine that. One more One thing I want to add here, and this was some feedback or a question that we got from

really coming to my website? Yes, absolutely.

washing machine icon actually is. And If you hover over top of it, you get a little bit more context for what that is. So it's not just like if you're going through the work of like it seems crazy some bad stuff. Interesting. Yeah, I forget I forget exactly what it was. But there's a couple situations where I'm like, I'll just wrap this entire thing in an anchor tag because I want the whole thing to be clickable.

create these additional labels, Sometimes you can also use

maybe also figure out how you can show it to on that div has both an ARIA label search by image. And then it also has a role, which is a button. That's probably the most common thing where

something. And

which is why I said, like sometimes you just need to duplicate it, which is really nice when you're using a framework isn't isn't title enough, you know, and apparently screen readers don't necessarily read the title

something or nuke like it basically. And I had to, like, message you and say, like, if I click this. What happens? You know, and it would be nice to hover over top of it and give a little bit more context as to this will import all shows but not drop any existing data.

And there's no label. There's nothing descriptive about it. It's just you're on your own here. So, yeah, those kind of things are very important to give your users

None of these labels make any sense.

Are you really gonna get sued if your website is inaccessible?

don't have labels, and then I said moments after that that I never use title.

On that. So you should throw an ARIA label on it, parts of their website or application

And really cool UI, what it is. Yeah.

Having to attributes

on a button and an ARIA label? That's actually a good question. Let's look it up. Never use Tidal for anything. No? Yeah. Oh, because because Tidal is what shows up in the little tooltip The tooltip. When you hover over top of,

application interface.

Next one here is the aria Sorry. Hold on one sec. I I have a question, and, and maybe you can tell me this or we can research it is,

Like, what's the difference between a title