Focus Ring! -- A11ycasts #16

Key Takeaways

[Music] hey everybody what's up it's Rob Dodson welcome back to the alast show today we're going to be talking about Focus rings so the focus ring is the indicator the browser uses on an element to indicate if it has focus and to indicate if that element is about to receive keyboard events and the focus ring is really really really important for keyboard users because you can think of it kind of like their Mouse pointer it's their way of knowing which element they're about to click on or interact with using something like the space bar now the problem with the focus ring and where I see some developers kind of running a foul here is the focus ring is kind of displayed inconsistently in the browser and follow me over here on my laptop and I'll show you what I mean by that so I've got a few elements on screen here I've got an input text field I've got a button and I've got another button that I've actually styled to look kind of fancy and I'll zoom in and you'll see that when I click on this input text field I see a focus outline I see a focus ring right there but when I click on this native button I see the active state but I I don't see a focus ring drawn on top of it and so already you're seeing that the browser is kind of trying to be smart here and it's trying to sort of differentiate based on sort of a heris between different elements so when a user clicks on a button or they tap on a button the browser is going to say well this user they kind of know what they just went over and clicked on and they know what they just interacted with so I don't need to draw a focus ring in that case but for something like a like a text field it can be really really helpful to have that Focus indicator especially if you're working on like a long form form and maybe you look away for a bit and you come back and you want to kind of see where your place is in the form right so there's an underlying heris that the browser used to differentiate between mouse and keyboard focus on different elements the problem though starts to happen again follow me over here to my laptop when we have custom controls and custom elements so this button that I've styled this is still a native button element when I click on it now I see a focus indicator and that's based entirely on the fact that I've sort of changed the uh the default browser styling and at this point now the browser says uh I guess I'm just going to draw a focus ring you'll also see this if you create a a custom control you know you create your own drop down or something like that and you give it a tab index so opting something into the tab order now when you click on it it's going to display a focus ring and this throws a lot of Developers for a loop they'll be building a UI widget suddenly this ring starts appearing they're not quite sure what to do because for the mouse users out there it's aesthetically unpleasing right it's it's not something they're used to seeing they might not like the way that it looks and so you might have your art director or somebody coming down and saying hey that thing looks weird just remove it okay and if you go over to stack Overflow or something like that you just Google stack Overflow remove blue ring and there's just an endless amount of answers here where people say oh yeah when you see that thing just use the CSS style outline none and that'll get rid of the focus ring the problem is it gets rid of the focus ring for everybody including your keyboard users and and this is the real issue really what we need is the ability to differentiate between mouse and keyboard Focus for different elements and so we can have kind of two different experiences enter Focus ring so Focus ring is a brand new CSS selector is part of the CSS level four selectors spec I can show that to you here on my laptop and what Focus ring does is it says the focus ring Pudo class applies while an element matches the focus pseudo class and the UA or the user agent basically the browser determines via heuristics that the focus should be specifically indicated on that element typically by a focus ring so basically what this means is focus ring gives you the ability to opt into these same heris STS that the browser uses when they differentiate between mouse and keyboard users for things like inputs and buttons now as of today there are no browsers that ship the focus ring pseudo class it just landed in the spec very recently but there is a polyfill which you can take advantage of in your application so github.com slwic cg/ Focus ring here's a PO F created by my teammate Alice boxhall and our friend Brian Cardell Focus ring polyfill is going to apply a focus ring class two elements that sort of match theistic and so that way you can say ah this element should definitely always draw a focus ring it has this class so you know I can I can put my own style on it or I can I can opt out of that I'm going to show you an example here i' I've already downloaded the poly fill I've got some HTML this is that same example page that I showed you so I've got an input I've got a button just says hello world and then I've got another button with a class on it so it looks like kind of a nice big material design button and uh what I'm going to do is I'm going to start by including the script for Focus ring JS and what that's going to do is it's going to here I'll actually walk you through Focus ring JS so you can kind of see how it works so inside the JavaScript for this class the first thing it does is it tries to set a flag to indicate if a keyboard action has just taken place then it sort of defines a white list of elements and these are Elements which should always display the focus ring so for instance something like input type equals text regardless of if that was clicked on with a mouse or a keyboard we're saying it should always draw a focus ring just like what the native browser does today but you'll notice that button is not in this white list so if uh someone clicks on a button it's not going to display the focus ring class and therefore we can turn off the outline for our Mouse users but still display it for our keyboard users if we go down to the bottom we can see that this element is actually or this uh class is just going through and adding some event listeners so it adds a key down listener and when someone presses a key it sets that keyboard flag and at this point it starts kind of a little uh keyboard throttle timer of about 100 milliseconds so at that point if anything else receives Focus within that window we're going to assume the user is a keyboard user and we're going to apply the focus ring class to that element so over here in my index file I've included Focus ring JS and what we should expect to see is this input should have the focus ring class this button should not because it's not in the white list and this other button should not because because it is also not in the white list over in my CSS file because I can't just outright use you know the colon Focus ring pseudo class just yet what the polyfill is going to make available to me is just a regular Focus ring CSS class and I can use a selector that looks like this so what I'm saying here is for any element that is focused that does not have a focus ring class on it go ahead and remove the outline so what that's saying is anything that a mouse user clicks on essentially we're going to not display the outline or anything that is not part of our white list we're going to not display the outline anything that is in the white list or anything that has been interacted with the keyboard and has a focus ring class we will display the outline okay so let's see how that works we will go back over to that application that we were working with before I will open up this div so you can kind of see our elements here and as I click on the input you'll note that it gets a focus ring class added to it and so it also gets the native Focus ring indicator when I click on these buttons though no Focus ring class and so now this this fancier button that I defined before is no longer displaying a focus ring however when I use my keyboard to navigate the page I hit tab I see a focus ring class on the input I hit tab I see it on the first button I hit Tab and I see it on that last Button as well so now we've been able to differentiate between our mouse and keyboard users we can have the right experience for each modality I also want to point out that there is another Library out there called what input this does a very similar thing to the uh the focus ring polyfill what input has been around for a little bit longer you can find that at 1017 SL what- input on GitHub again does a very similar thing to the uh to the focus ring polyfill it's been out there for a bit longer so maybe you know try both see which one you prefer they have slightly different apis uh but definitely try and give you know one or both of these a shot in your application figure out which one you prefer and and make sure you're not just you know removing Focus outlines throughout your app cuz that's going to create a really gnarly experience for your keyboard users that about covers it for today if you have any questions for me as always you can leave them in the comments below or you can 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]