Tab Navigation

[00:00:00]
>> Yeah, so we learned about keyboard shortcuts, we learned about skip links. In a little bit, we're gonna get to make a skip link together. But I just kinda wanna keep talking about some of these, I guess more advanced techniques that require a little bit more JavaScript or CSS.

[00:00:15]
But can be really helpful for folks. So before we get into that, I just wanted to cover sort of the basics of tab navigation, which we already used in a few examples. But the basic idea is for keyboard only users that they will tab through the website and use Shift Tab to go backwards through the website.

[00:00:36]
And so this is what means when it says all page functionality is available using the keyboard. It's that you should be able to Tab and Shift Tab through an entire website. Again, back to these compliance levels, I kinda mentioned this at the very beginning. So if you're going for the level A compliance, then with the WCAG and what WebAIM is saying is that everything should be keyboard accessible unless it's something that just can't be accomplished with a keyboard.

[00:01:05]
And their example, like mine earlier, was a freehand drawing tool. So that's enough just with a label to get you to the level A compliance. If you need to be triple A compliance, that means that literally 100% of the page functionality needs to be available to a keyboard only.

[00:01:20]
So, if you're going for triple A compliance and you have a freehand drawing tool, you've kind of got your work cut out for you hitting that compliance level, but again, it kinda shows the flexibility here, I think. Hitting level A is plenty enough just to say, hey, you've hit a component that is not accessible, and show people how to move on basically with the keyboard only.

[00:01:42]
So one thing that's important to know when you're making your HTML is what kind of things will be tabable and what kind of things won't be tabable. So we've seen links and form fields already, but there's quite a few things. So the list of tabbable elements in a shortlist are anchors, buttons, inputs, selects, textareas and iframes.

[00:02:05]
We'll get into those in a little bit, but I have a GitHub repo here which is a living list of literally every tabbable element. I can make this a little bit bigger but it basically just exports this giant list of every single thing in HTML that you might have that could be tabbable.

[00:02:24]
So, if you ever need to write some code where it's, grab all focusable elements in DOM or whatever, you can use Library. Alternatively, you could just pass in the main ones like you can say, grab all the inputs and buttons and anchors but this is a more comprehensive list.

[00:02:42]
And that's at github.com/jcoop/vocable. So yeah, so there's a lot of them for the most part it's just the interactive elements right anchors and buttons. Another thing that we've seen is that there will be times where you need to make a non tabbable element tabbable and so you can use the tab index attribute to do so.

[00:03:02]
So here's an example of taking a div, which would normally not be tabbable, adding tab index to it and then it is focusable. So tabindex takes three different types of values. It takes a negative value, any negative values. It means that it should still be able to be called focus on but it plucks it out of the keyboard tabindex.

[00:03:22]
So you can think about the browser loads up your site, it does a query similar to my focusable 1, and grabs everything that's tabbable and it puts them in an array. And so when you hit Tab, it just pops your focus to the next item in the array.

[00:03:36]
Sometimes, you'll wanna be able to call .focus on an item with JavaScript, but you don't want the user to tab to it. In which case you can take an anchor, an input or something that's already tabbable, you can give it a negative tabindex. 0 means that it will be focusable and it will be tabbable in the order that it sort of comes in.

[00:03:56]
So, wherever it is, like if this div is here, then after I Tab to this link, it'll Tab to this div, so wherever it would fall in the natural DOM order. And then a positive value very much those familiar with Z index in HTML or CSS, a positive value then can bump it to the top.

[00:04:16]
So the higher the positive number, the earlier it shows. So for an example earlier, we talked about making a div and it said something like, hey, we have cool keyboard shortcuts, hit question mark to see them. Earlier we talked about, well, then just stick that div at the very top of the DOM, right, on your opening body tag.

[00:04:36]
Another option is you can put it anywhere in the DOM that you want and give it a positive tabindex number as long as it's higher. Then on the other tabindex numbers, it'll be the first thing that gets tabbed too. It was just kind of funny, I was on MDN's page for it and there's a warning that says the maximum value for tabindex is 32767.

[00:04:56]
Which gave me nightmares to think about a code base where you would need to get that high. It's kind of funny I did a little bit looking in and it's like they use a 16 bit integer or whatever for it, and that's like the largest number that can be assigned to it.

[00:05:10]
So don't go too high, don't go over 32,000. As a little example here, I just have these buttons, get through this tweet. And so if you see, like the blue glow around the left, so I can, tab to go to the right and then I can shift tab to go back to the left.

[00:05:28]
So that's just kind of the behavior that folks will expect. Things get a little bit complicated, were for example, let's say you have a navigation. So a user would expect to be able to tab through each nav item but let's say one of those navigation items was like a dot, dot, dot.

[00:05:46]
And when you click on it, it brings up a drop down, right? Of account setting, sign out, stuff like that, we see that pretty often. So in that sense, because the drop down is a list of children belonging to the ...menu item, the expected behavior is going to be tab over to it, Enter to bring up the drop down, and then the arrow keys to move around.

[00:06:11]
This is a little bit subjective, but for the most part, it's like top level elements, should be tabbable. And then lists of children should be arrow keyable, because that's kind of the default of how it would work with just HTML if you did a list. It's just something to keep in mind.

[00:06:26]
So as a user, if you're trying to tab something, you can't tab to it, try the arrow keys if it's in a child element. And as a developer, there's often circumstances like a drop down from a button where the button should be tabbable, but the drop down items, the expectation is to be arrow keys.

[00:06:43]
Another thing to keep in mind is, for a lot of this stuff, if you use any sort of design system, like Google Material or React Spectrum or any of those open source design systems. They'll come with a ton of accessibility work out of the box, including if you had a button with a drop down in it, they would already take care of all that keyboard control for you.

[00:07:01]
Or Twitter Bootstrap is another example. So if you use one of those, they'll come with a lot of this stuff.