 Hey there, folks. Rob here. Welcome back to the show. So in the last episode, we were talking about a side nav and how to make sure that it had really good focus behavior. But I wanted to take a step back in this episode and really talk about the fundamental concepts of focus and what it is and who it's useful for. So if you're unfamiliar with the term focus, basically focus in a nutshell refers to selecting an element and then directing all of the keyboard events to that element. So let me give you an example of what I mean by that. Over in JS bin here, I've started to put together a very simple little form. So I've got a few input elements on the screen. And you can see that when I go over and click on this first text input, I get this sort of blue ring around that element, indicating that it is focused. And now as I type in my keyboard, all of my keyboard events are directed at that element, which in this case knows to display the characters as I've typed them. Now for some of our users, focus is sort of their primary means of reaching everything on screen. For someone who has a repetitive stress injury, like carpal tunnel syndrome, and can't use a mouse. Or for someone who is using a screen reader and predominantly uses a keyboard to move around the screen. For these users, focus is absolutely critical. It's how they reach all of the interactive controls in our application. And so we want to make sure that we have a very logical focus order in our page. Now the way that these users navigate focus in the document is using either the tab or the shift tab keys on their keyboard. So going back to my example here, if I want to move focus to the next element, I can just press tab, press tab again to move to that select element, shift tab to move focus backwards. And some of the native controls even have additional keyboard support built in. So for instance, I have the select element focus right now. I can hit the up and down arrow keys to select different children. Or maybe I could even just start typing, like hit the letter H, and that'll actually autocomplete to one of the available items. Now the order that elements are focused in the document is known as creatively enough. The tab order. And we want to make sure that our tab order makes sense to our users. Now some elements are implicitly inserted into the tab order. So native controls, things like input, select, button, these are all implicitly focusable. So we don't have to do any additional work to make sure that the user can reach them with their keyboard. But not all elements are focusable. So let me give you an example here. Going back to JS bin, you can see that I put together this example. I've got an H1 tag here. I've got a little picture of a kitten. I've got a paragraph of text. And at the bottom, I have a button element. So let's look at what happens when I press the tab key on my keyboard. So I'm gonna start up here at the top of the page, I hit tab, and you'll notice that the only item that gets focused is that button element at the bottom of the page. The reason is because for elements that are non-interactive, there really is no reason to put those into the focus order. A sighted user who is using a keyboard to navigate the page will be able to see those elements, so they don't need to be a tab stop or anything like that for those users. A non-sighted user who's using a screen reader to navigate the page, well, the screen reader is gonna handle the work of reading all of those non-interactive elements. So for those users, you still just wanna make sure that the only thing that's focusable are the interactive controls. Now I mentioned the order that elements are inserted in the page is known as the tab order. And tab order is actually inferred by the DOM ordering of your markup. So for instance, the way that I write my HTML dictates the order that things will be focusable in my page. And this presents kind of an interesting conundrum because it's possible to rearrange the visual appearance of items on the page using CSS while maintaining the same tab order. So let me give you an example of why this can be a problem. So over here in my editor, I've got three buttons on screen in sequential order. And if you look over in the markup, you can see that I've got three buttons, one right after the other in the HTML. Now, if I select my output here and I tab through it, you'll see I focus the first button, focus the second button, and then I focus the third button, so far so good. Now let's see what happens if we apply a little CSS to change the visual appearance of these buttons. So I'll take this first one here, I will style it to float to the right. And now visually, my buttons appear in a different order on screen, but notice that the DOM order remains the same. So as I tab through the page, I focus what visually seems like the last button that we know it's actually the first one in the DOM. I tab again, now I focus what seems like the first one visually, but it's the second one in the DOM, and then I tab again, and now I'm focusing this middle button. It's all very, very, very confusing. And if you look at a lot of really large websites that are heavily styled, you might notice the tab order seems kind of nonsensical. And oftentimes this is the reason. So let me give you another kind of more real world example. This is something that I built. It's a little site called the Funyan. It's like a fake news site. And again, as we're tabbing through this experience, you'll see that when we tab through the navigation, it starts kind of over to the right, and then kind of reverses and goes back through. We tab again, and it just jumps to the bottom of the page for some reason. And then we tab again, and it jumps back up to the top of the page. If you look at big websites, sometimes you'll even see the focus ring disappear entirely for a little while as you're tabbing through the page and then come back on screen, similar to what we saw with that side map in our last episode. So how do we fix this? Well, let's go over to our code editor and actually inspect some of the code for this page. Now, looking at the index HTML for this file, in that navigation, I can see that I have this anchor right here for my search element, and it's got a little class applied to it called pull right. Now, when I see something like that, I often think, oh, this is probably like a helper CSS class. If I go look in my CSS, sure enough, I've got this pull right helper that is floating that element over to the right, just like our button example. So how do we fix that? Well, the easy solution here is to just move the element later in the DOM. So I'll get rid of the anchor tag at the top. I'll just move it later in the page. It's still gonna get that float right style. It's still gonna be where we want it in the document. But now when I tab through this experience, the navigation makes much more sense. Now, the next issue that we ran into was after we're done tabbing through the navigation, it seems like focus just jumps to the bottom of the page and then it jumps back up into the main document. So let's try and sleuth out what's going on there. The reason our focus is jumping to the bottom of the page is because it's trying to target this newsletter down here, in particular, these implicitly focusable items inside of it, this input and this button. Now I can see that this newsletter appears very high up in my DOM order. If I go and I look at my CSS, it looks like the newsletter, sure enough, is absolutely positioned. So even though it's occurring early in the DOM, we're just making it appear like it's pinned to the bottom of the page. Now, just like we did with that search button, we can take our newsletter and we can move it later in the DOM to improve our focus order. So we'll go all the way down here to the bottom. After main, we can maybe create like a footer element, drop in that newsletter. Now we go back, we refresh the page. Things look the same, but now as I tab through the experience, it's much more logical. And we get all the way through the page before we focus that newsletter. So if you work on a really big site or an application, try tabbing through your experience. See if you have a sensible tab order. And if not, maybe you need to go in and sort of rearrange your DOM a little bit to make things a bit nicer for your users. That about covers it for today. If you have any questions on focus order or anything like that, please leave them for me down below in the comments. And as always, thank you so much for watching. I'll see you next time.