Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

3.5 Focus Visible and Tabindex

Hey, John Hartley here with Tuts+ and in this lesson for Beginners Guide to Web Accessibility, we'll be taking a look at Focus Visible and Tab Order. Now to start off, let's take a look at what Focus Visible is. Falls under guideline 2.4.7 and focus is, well, any keyboard operable user interface has a mode of operation where keyboard focus indicator is visible. This is something that we see all over the internet and, recently, we're finally starting to do a better job of showing outlines on pages. So, what do I mean by an outline? Here, on this example page that I've created, this is an example of an outline. So we have this blue border, It kind of fades a little bit, and this is in Chrome. This is something that will change between browsers. I think Chrome has the nicest one, but they're all similar to this. I think Firefox is a little more dull, just has kinda dotted outlines. But, the outline is important, to be able to see where you are on the page, once something gets focus. So that's what 2.4.7 is covering. And now we can go a little more in-depth. So up here, you can see a little bit of CSS. We have our a { outline: none; }, a { outline: 0; }, and *:focus { outline: 0; }. This is something that you definitely want to avoid at all costs. And it's something that we used to do as web developers, and we never should do it again. So let's take a look at a site that actually has outline none set in the CSS. So BuzzFeed is a very popular site, a lot of people go to it. See images, all sorts of those things. So I'll start tabbing through here and I'm tabbing and tabbing and tabbing and tabbing and I have no idea where I am on the page because there's no outline. So I saw the page move a little bit. So I'm must be going through these links on the left side. And I'm still going. Still nothing going on here. So if I'm only able to use the tab key to navigate a website, and interact with it with the enter key, I'm not going to have a very good time on this site, cuz I don't know where I am. I don't know whether I'm on the right side over here. I don't know if I'm on the left side over here. And, sure, you can figure out how to get through this if you're sighted, and if voice over is on, it'll actually start reading through these things. But the focus is not there. And so that would not be a pass according to the WCAG. You may be asking at this point, well how do I fix this? How is this something that I make sure that I don't do with my own sites? And it's really easy, you just don't ever set any of this. You don't need to, there are browser defaults that allow you to set no focus, and it'll still show up. So on this page, I, in the CSS, have only given one item focus and you'll be able to see it as I'm going through here. And it was link three, if you didn't see that, I'll go back. But that's really the only time that I've given something focus styling and been specific about on focus, use this styling. To be double a compliant, you need to make sure that you have an outline. And generally the browser default will work. There are some cases where, if you're using this default border and have a blue background that's the same color, there's not gonna be enough contrast to figure out what color that is. Goto.com has a really good example of an outline style that's a little different than the default, but will work in most cases. So as I start tabbing through, you'll see the skipped content, and that gets a white outline. And this is to help distinguish it from that red. Now, as I tab through here, you'll see that the outline is red, and that's to have a bigger contrast on that white. So these are things that you can do as you're building your site. Have those design effects but also make sure that you're not preventing someone from seeing where they are on the page. I'll go back to my example here and I'll show you the CSS that I used for this specific link. Here in my CSS file, you can see that, for a few things, I've given a specific outline. So for link, I have that solid green and that's the one that you saw on the page. For button, I have a different one as well. And for this one, I really want you to notice here and this is in so it's unnested CSS style but I have hover as well as focus. So this is the one that I really want to drive home. Whenever you use hover in your CSS, you should also add focus, and here's why. So we hop back in here. We tab through. I get to this Input, and then I get to the Submit button. Now, that's fine, it's good enough because I have it outlined there. But a user that's able to use the mouse can hover over and it changes color. So why not give that same interaction on focus? So down below I have the same example but this time using both hover and focus. There you go, outline as well as a color change. These are interactions that you can still use via CSS and as just a default sudo class. Just like active and hover, you can use focus on any of these items that you can interact with. And speaking of interacting, that brings me to tab order. So tab order relates to being able to hit the Tab key, which is where the word tab in tab order comes from, and then tab through a site. As you tab through the site, the tab order should make sense as it's visually laid out on the page. So when you saw me load this page up to begin with, the tab order is not quite there. I've reloaded the page, so the first tab should go to this first link for Buzzfeed. Let's see what happens. Okay, it hopped down into this using tabindex 1 and greater section. And why did it do that? Well, let's hop back over to our code. In here is a section that we have actually given tabindex to a couple of these divs. We'll hop back over and you can see here that these are now able to receive focus. So tabindex allows you to give an element that wouldn't normally be in the tab order,. So things that are not inputs, links, or buttons. Anything else will need some sort of tabindex to receive focus. I wanna make a distinction here. Tabindex values can be given anywhere between negative 32,767 all the way up to positive 32,767. There's a lot of wiggle room there, but you really never need to use anything other than negative one and zero. Now, you may be thinking well, hey let's use something positive so that that's where it goes to first once someone tabs. The only time I would even say that this is a good idea is if tabindex is given to the bypass blocks. So you always want to put bypass block first and we'll get to what a bypass block is here in the next lesson. But other than that everything else should get zero. Now I said zero or negative one. Tabindex of negative one removes something from the tab order, but allows it to be programatically tabbed to. I'll touch on that briefly during the bypass blocks, but just remember that if you're going with scripting, focus on an item, then you would want to give it negative 1. That means that in the tab order someone will not be able to tab to it but, if you have set it up through scripting to have them focus on it, then that is possible. So if we revisit the code here we can see tabindex 1, tabindex 32500 and tabindex 5. This is very bad practice, so forget that these examples are here. So I'll make a little note here that never use tabindex greater than zero. And you can the little snippet that I was talking about down here. So folks, same with JavaScript, that's something that you can do if you've given an item tabindex of negative 1. So giving a div tabindex of negative one doesn't put it in the tab order but it prepares it to be able to be focused. Now I'll tab through back to the top here. And we've gone through these. And we've gone through the examples here and input and the button with hover and focus. So now the order itself. Tab order falls under the guideline of meaningful sequence. So that's 1.3.2. It's a single lay, and when the sequence in which content is presented effects its meaning, a correct reading sequence can be programmatically determined. Breaking that down a little bit. It just means when it looks like it should be in a certain order, it should just be in that certain order. So right here you'd assume logo, go through the menu item right there, and then for the sake of just knowing that this is there, instead of having the screen writer read it to you right now, I've given this a tabindex of zero. And as we just learned, to have an X of zero, just means that this is now able to be in that default tab order. I'll tab through and, okay, so I'll hop from the logo over to the weather here in Columbus. And now I'm going through the menu, that's backwards, and finally we get to sign in. And you'll see this from time to time because the mark-up of a certain page will have it set up this way. We'll take a look at the code again, and in my bad header section you can see, yeah, sure, we have the logo and then we have the weather, then we have that menu and then we also have the sign in button. But we don't really need to do that. Through styling, we've managed to make it look this way, even though in the mark-up, it's kind of out of order. For the second navigation menu, we have the same look, same feel. But everything is now in the proper order. Take a look at the code again, and we have that logo, the menu, sign in, and then the weather. As you're working through the tab order of your site, make sure that you're putting the information into your page in a way that you would actually like it to be read. So programatically determining what's first, what's second, what's third. That should make sense to someone using a keyboard just as much as it would make sense to a sighted user able to use a mouse and navigate through your site. One last thing about tabindex, I had mentioned the range from 32,767 all the way up. I think I misspoke, the positive number is 32,768, there's one extra that you can use in the positives, but there was a proposal to the W3, in October of 2014 that would deprecate tabindex values that were not negative one or zero. This would obliterate any chance of someone using a tabindex of one, of five, of anything positive, or anything other than negative one or zero, because it would be deprecated. There would now be no reason at all to use it. You personally may not use it while you're building a site, but this is a common issue when using third party scripts like captchas or maybe you're bringing a form in through an iframe. In any generated code which has inputs can sometimes have that positive tabindex. So, if that becomes deprecated, then those third party systems will no longer be able to force the first tab into their elements. And overall, that helps everyone. All right, we now know how to fix the tab order. We now know about focusing, and I mentioned something called a bypass block. And we're gonna get to that in the next lesson. But for now, just remember, as you tab through a site, you should be able to see where you are. There are ways, with scripting, to determine if someone's using a keyboard or a mouse, so that if you click on a link, they won't see that outline, but overall, an outline helps visually understand where they are and what they're clicking on. So let's head to the next lesson and check out what bypass blocks are.

Back to the top