Hello and welcome to another video by Online ADA covering the WCAG accessibility guidelines.
In this video, we’re gonna cover 2.4.3, focus order, which is A level a requirement.
I’ll jump into the description.
If a web page can be navigated sequentially and the navigation sequences effect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
What this means, is that, whenever you have interactive content on the page buttons, links or anything else that can be tabbed to, you need to make sure that the order that that tabbing sequence happens is logical, in the sense that it’s the same flow as if you were reading the content.
So for instance, the first thing on your web page, typically, is gonna be a header. And in that header, you typically have maybe a logo that takes you to a homepage so you can tab to that. Maybe you have a search bar. Maybe you have a couple of links, that’s gonna take you to other pages in your site and they’re gonna have sub pages and lots and lots of links there. After that, maybe you have a side bar. Maybe you have links inside paragraph tags later on.
What this article is saying is that we would expect logical flow of that tab order to go from the very first element, over, over and then just keep going through the flow.
If you tab to a element that expands a sub list of links, then you would expect it to go down into those links and go to the next one and keep going that way. And then maybe the side bar is the next present element. So focus order would probably jump over to the left side. And it’s just, it’s just like a logical reading order.
If, however, you instead have something like maybe at the bottom of the page, you have a back to top and its position absolutely, and if you go to the logo and then you go to the search bar and then maybe down to the bottom of the page to this thing that we wouldn’t expect to see until the very end of the page, that would be a problem.
It’s important to note that if you have something like a grid, or a table, or you have a lot of interactive elements and there’s more than one logical way that that flow could work, only one of them needs to be provided. So, if you have a list of links that go, you know, in several columns, it could understandably be going left to right or could be going top to bottom and then left to right, If that makes sense. You go either way, doesn’t have to provide both.
Another really good example of this is, if you have a button on your page it’s going to trigger a dialogue box to appear. The logical order, this article, would dictate that the buttons focus would jump into the model, or the dialogue box, as soon as it opens and it would go to the first element that’s focusable in there and as you tab through that content and through all of its interactive elements, it’s gonna wrap around and keep your focus inside that dialogue because that’s the most prominent thing on the screen. And that’s actually dictated also by ARIA rules, with the ARIA model. But, as soon as you close that dialog box, let’s say you have an X in the upper right hand corner of that dialogue box, you click that your, focus is then sent back to the button that triggered it, and now you can continue accessing the rest of the page. So it’s more or less just a common sense sort of logical order.
How you would read the page is how you would expect the tab focus order to flow to. It would be really frustrating for users who have disabilities with dexterity or if they have difficulty with short-term memory loss and things like that, where they’re unable to get to a link that they expected to get to if they had targeted the previous link. You would expect to hit tab to go down to the link, but instead were somewhere else. That would be a really frustrating experience. We wanna avoid that.
So. Anyway, that’s all there is for 2.4.3. Thanks for joining me and I’ll see you in the next video.