This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Tabtrapping" Lesson
[00:00:00]
>> Jon Kuperman: So there's this really cool concept, it's like tab trapping or focus trapping, anything like that. So again now that we're all experts at tabbing around on our websites. Going back to my Twitter modal example, so when you're on Twitter.com and you start tabbing, you would start at the navigation.
[00:00:19] But then from a tweet, when you modal you still wanna be able tab around, but we really should restrict you to only being able to tab around in that modal, right? What we don't want is like you tabbing all the way through the back or something like that.
[00:00:33] And so there is this concept, so basically what you do, and we gonna all do it together, so don't worry, is that you, when the modal opens, you grab it JavaScript, and you find all the focusable elements inside of it. And then you convert them to an Array, and then what you want to do is you wanna find like the first and the last item.
[00:00:53] So say you have a modal that has two input fields and a Submit button. You'd grab the first input field and the Submit button, as your first and your last. And then what you wanna do is you just have keyboard listeners where if they're on the last item and they hit tab, instead of taking them wherever, put it back on the first item, and then vice versa.
[00:01:11] If they're on the first item and they hit Shift-Tab, send them back around. And so basically you're like kinda trapping the user for their own good into this modal so they can tab through and see where they're at. And so, yeah, basically the three steps are grabbing all the focusable children, listening for both tab and shift tab, and then only doing something if they're gonna go off the edge of the modal.
[00:01:35] So if they're gonna go off that edge, send them back around. Cool, so this one, basically, after you have all of the elements, you would do something like this, if o n a key app listener if the current element is the first tab stop and they're going backwards, prevent default and then focus on the last one, is the basic logic of that thing.
[00:01:59] It is really helpful again it's just one of those things, if you're gonna have modals, you really should have, you know some way of allowing keep only users to go through here.