Buttons

[00:00:00]
>> Alright, so let's kind of combine some of this stuff because I really wanted to highlight elements that maybe we know have some functionality, but maybe we haven't thought about all the functionality that they have. So, I made this little button here, and it literally this is the code here and this is the button itself.

[00:00:16]
So, it's button unclick, alert, hello, as is click me. So if I click here and I tab over, let me tab down to the button. Button, click me and I go ahead and I hit Enter on it, it says hello. And if I click it, it says hello so no surprise there.

[00:00:36]
So, sometimes, we'll do things like we'll need or we'll want our design system will use like a non button for some type of button context like a div with a click event and when you click that div, it does something cool. So we could do something like this like div, unclick, alert, hello, click me.

[00:00:54]
And then we would need to do a few other things, right? Like we would need to go into CSS and add a cursor pointer so we get the little mouse clickable hand, but for the most part, this would work fine. It's an element, it says Click me, you click it does something.

[00:01:08]
So, the problem here is that, when a screen reader hits it, a screen reader will have absolutely no idea what its purpose is, or what it does. Screen readers can't listen to unclick events and know that they do something. So, we have this really nice thing part of ARIA, which we'll learn about next, there's role.

[00:01:24]
So, you can give it a role equals button and now when a screen reader hits, it'll be like, hey, there's a div here. But it won't read it as a div, it'll read it as a button, so, tell the user, hey, there's a button here that says, click me, and so then the user can click it and they'll get the hell up, which is great.

[00:01:39]
An issue though, which we've seen with like form fields and buttons is, you can tab to them on their tablet will their focus double, and so if you're not using a mouse, you can get to them and interact with them. So, if we have this div with role equals button that will work great for a mouse click but it will not be able to be focused with using the keyboard only.

[00:02:00]
So again, we have a nice thing, we have this thing called tabindex. So we can add tabindex 0, and I'll go over what the value means but adding tabindex means it's focusable with the keyboard you can tab to it essentially. So we've got tabindex, we've got role = button, we've got our onclick event, so great.

[00:02:17]
So now, we're here, we can tab to it, we click on and it does the thing, and the screen reader knows that it's a button. But if you're a keyboard only user, you're not gonna be able to click on the thing, right? That's not everything a button does, buttons also work if you hit enter on them.

[00:02:32]
So ,we're still trying to make this div into a button so we can do a little bit more here we have the tab index, we have the roll equals button, we should also add like an onkeyup. And if you wanted to get precise with it in your onkeyup function, you would listen for the event and see which key was hit and a space or enter was hit, you trigger it, and if not, you won't trigger it.

[00:02:52]
So now we're getting a little bit more into like this is starting to behave like an actual button. So the last thing is that buttons that just say click me, are not very helpful to screenreader users because they don't know why they're supposed to be clicked. Often the clues for like why you want to do something are visual.

[00:03:09]
So in this case, we would want to add a label to it and since it's a div, we can't use a label tag, we'd have to use aria-label. So aria-label alert the word hello, Tab index zero roll button, unclick alert onkey-up alert, click me. And now finally, we have everything that we just had included by just using a button tag.

[00:03:29]
And so I kind of wanted to highlight this because it's cool for a few reasons. One, I think it highlights how much some of these semantic HTML elements do. They do a lot for us, right? They have an onclick event and onkeyup event that's actually complicated listens for certain keys only, they have a role for screen readers, they're tappable, and they have a label to them.

[00:03:48]
The other thing, though, that I wanted to point out is that with ARIA we can do all this stuff, if we're in a pinch, we can just add the functionality if we need to, right? So we have a big code base and we don't wanna move all the elements around, we have tools at our disposal to get like this full fledged functionality out of any element that we need to.

[00:04:06]
There's kind of a weird example where Twitter uses this library that allows it to compile both for web and for native apps, which means that the markup kind of gets all jumbled, so folks like accessibility developers will often see twitter.com source code that it's just dibs thousands of dibs.

[00:04:24]
They'll be like, That's terrible, this is totally inaccessible, then I'll try using it, it actually works really well. And so the reason is that, even though it has to generate dibs because it compiles to react, native and web, it provides all the ARIA functionality that you'll need. So, it's got all the tab indexes all the labels, all of the unclick on the key up events, everything that you need, so It's kind of a weird one where on first glance, it would be like, this is the worst, it's like the most div filled app I've ever seen.

[00:04:51]
Then you start really getting into it and it's like okay, actually they do all the things that you would need to do to make a fully fledged accessible app.