Hi everybody. Josh here with Online ADA, and in this video we’re covering article 2.1.2, no keyboard trap. This is a level A requirement. I’ll jump into the description.
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface. And if it requires more than unmodified arrow or tab keys, or other standard exit methods, then the user is advised of the method for moving the focus away.
There’s also a note here I’ll read that as well. Since any content that does not meet the success criterion can interfere with the user’s ability to use the whole page, all content on the web page, whether it is used to meet other success criteria or not, must meet this success criteria. See conformance requirement five, non interference.
This article is fairly straightforward. There’s not a lot of depth here. We’re basically saying that if you’re able to focus to an element using the keyboard, that you should be able to remove focus from the element using the keyboard. If there is some keyboard combination, something other than the standard means of removing focus away from the element, than those instructions are provided for the users so that they understand and know how to get out of that element.
You shouldn’t trap people focus on the keyboard. They have to be able to navigate your whole site and you know the typical standard form is that it starts at the top, goes down to the bottom and then goes back to the top when you’ve gotten to the end and you just keep going through stuff.
There is one exception to this role that I can think of and that is in a model or dialogue pop up that appears. Typically, you will have informed the user ahead of time by using Aria model equals true. You’ll have a role of dialogue on that element that appears so they know that they have, and the screen reader will read it out to them, that they have entered a dialogue. They’ll know that an inherently understand that they are trapped inside that model while that model was up. That is a specific requirement for using the role of Aria mode model, or role of dialogue.
Whenever you have a pop up, let’s say you have a form on the page and if navigating away from it would remove all of your progress and they have a pop up that appears, it would put focus inside of that using Java Script on that first element and then the screen reader would read to the user that they have entered a dialogue. And from that point whenever you tab you would tab to various controls inside the module and then it would wrap around inside the model again. And that’s one circumstance I can think of that would be an exception to this rule. There may be others but there’s gonna be few and far between. It’s just a good idea to let everybody be able to get through all your content without being stuck inside of something.
Another thing I just thought of that is worth mentioning is that I see on a lot of websites, when I’m doing my audits, iframes that are for user reviews being a feed pulled from Twitter, or you know Yelp or something, and also Google Maps. Now Google Maps has gotten a lot better, even within this last year, with being more accessible and they don’t have just a ton of layered content that can be interacted with. But it used to be, and maybe on some older sites might still be, that they just had a ton of layers on top of layers with elements and controls that can be focused inside of them just all over the place. And when a user encountered one of those, the tab would just go into this deep nest of anchor tags and buttons and things and they could get lost. And what none of them had accessible names and it was just kind of a mess.
So in those circumstances, because I frame responsibility is little hazy at this point in the WCAG draft, there is no specific mention of who is responsible for the content provided within an I frame. It’s a good idea to provide a button that would allow you to skip past that so that the user understands they’re about to hit something that maybe needs to be skipped. So that would be another ‘gotcha’ or something that you should look out for.
That’s it for this article and thanks for joining me and I’ll see you in the next article.