Just use button -- A11ycasts #05

Key Takeaways

[Music] hey there folks Rob here welcome back to the show so in the last episode we were talking a little bit about tab index and how you can add focusability to some of the custom controls that you're working on I promised in this episode that we would be you know talking more about tabex and I'd show you how to build some custom components but before I get into that I realized I was getting a little ahead of myself and I should actually spend a bit more time singing the Praises of native HTML in particular The Humble button element it's one of those things that I see a lot of developers actually not using in their projects using Alternatives like like divs or or maybe even abusing the anchor tag and so today what I wanted to do was just show off why instead of building your own custom button you should always just use a button now follow me over here to my code editor and I'm going to walk you through kind of the process of building like a fake button and then demonstrate why we should stick with the native button so here I've got a just a div tag and I'm going to turn this into a signup button one of the things I think a lot of developers feel is that maybe the button element is not super styleable right so they'll go they'll drop in their own styles for uh for this div button we'll give it a class button or something like that actually I'm going to call this fancy because this a really fancy looking button so we'll give this class fancy okay so now I've got this very fancy looking sign up button that I've created here um if you remember from the previous episodes though one of the most important things for our us users to make sure that our controls our interactive controls at least are focusable and as you know this div uh if we go and we try it with our keyboard and we press the Tab Key we're not going to see any sort of focus indicator actually on this element and again that's because to the browser a div semantically is just sort of like a a grouping element there's nothing implicitly interactive about it and so there's no reason why it should be in the tab order so if you're creating a fancy div button you might realize that and say ah okay well I I saw that last episode that Rob so I know that I should maybe add a tab index to this thing ah okay I'll give it a tab index of zero now I can go and I can tab to this button and sure enough it is in the focus order but remember keyboard focus is not the total story we've also got our screen reader users out there so let's see what happens when we try and interact with this control using something like voice over sign up group so you saw there that instead of saying sign up button it said sign up group again because semantically to the browser a div it's just sort of like a generic containing grouping element type thing now we haven't really talked about Arya much but to fix this we need to add our own Ro and now we're starting to kind of get to a point where creating our own custom button has diminishing returns let's instead look at what we get when we just use a native button tag so I'll drop another button in here just a regular old button element I'll also write sign up next to this one I'll say sign up for real okay and uh right away you can see that we don't have that really cool beautiful styling that we had on our custom button but you know a native button element is is totally stylable so I'm just going to give it that same class of fancy and then boom now we have two buttons that look pretty much identical uh we can see that they are both in the tab order which is cool I didn't have to add anything to my button element it just sort of like gets that for free and now let's uh try this out with the screen reader and see what we get voice over on Chrome JS bin sign up group sign up for real button so you can see there with that second button it actually announced the proper role to our user uh so had they previously just been working with that first thing they wouldn't really know that it was an interactive control they might think it's maybe just some text on the page that tells them to sign up whereas now we've we've kind of explicitly told them hey this is an action that you can take to sign up for our application but there are some more reasons why the humble button is pretty awesome another one is that we can add our own click handlers to this element and I want to show you kind of an important distinction that happens here so I'm going to just uh drop in a little bit of JavaScript in my page and what this JavaScript is doing I'll I'll hide the CSS there what this JavaScript is doing is it's selecting everything that has the class of fancy right so we have this array of buttons now that have that fancy class for each of those we're adding a click event listener and when we click on the element it should alert this little message that says I was clicked okay so I'll go click on the the first button you can see it says I was clicked right let's go click on the second one okay we can see it also says I was clicked all right well that makes sense uh now let's try this with our keyboard though so typically on a keyboard pressing the space bar or maybe the inner key in some situations we'll interact with a control so let's see what we get here we will focus the first button and hit space bar nothing's happening hit enter nothing's happening let's go over to that actual the native button element we hit space bar ah now we get our alert message we hit enter we get our alert message as well so this little trick that I'm showing off here in the HTML spec I believe it's referred to as synthetic click activation and basically it's a little bit of black magic that the browser does that says hey if you have a button element and you add a click Handler I'm just going to assume that you would also like that to run when someone presses the space bar or the inner key so again you're not going to get that with a div button to add that kind of keyboard support now you're going to have to add key down handlers you're going to have to look at the key codes differentiate was that a space bar or an inner key if so run my click Handler right okay so now we're really really getting diminishing returns with that div button uh the last thing that I want to show off is the disabled attribute so it can be really really handy to just turn a control off sometimes based on the state of your application so I'll write a little bit of CSS here just so we can see what's going on so I'll say hey anytime anything that is fancy uh is disabled then we're just going to set this background to gray okay and and I'll add that disabled attribute to both of these controls right so we'll say one two all right now they both look disabled uh but let's see here now when I go and I click on the sign up button it's not actually disabled right I'm still seeing that click message running if I go and I click on sign up for real ah nothing's happening right and again as we saw here we can see the focus ring is on this control because we added tab index to it but we really don't want it to be focused right now because it should be disabled and so you can see I can not tab to that sign up for real button the native button has been kind of removed from the focus order because of that attribute so again I just wanted to highlight there's a lot of reasons why you want to use the native controls whenever possible you're getting a ton of built-in behavior and you might not realize it until you actually go to use one of these attributes one of these features and then notice oh shoot this is not implemented in my button I'm going to have to add a bunch of JavaScript to make that work so you see this with button you see this with other controls like like select and input there's a lot of reasons why whenever possible you want to stick to the native elements so that's it for today uh if you have any questions please leave them for me down below in the comments or you can always hit me up on a social network of your choosing as always thank you so much for watching and I'll see you next time [Music]