Master the IT-English vocabulary for keyboard accessibility: tab order, focus traps, skip links and roving tabindex.
0 / 25 completed
1 / 25
A reviewer writes: 'Please fix the tab order — it jumps around the page.' What does 'tab order' refer to?
Tab order is the sequence focus moves through interactive elements as the user presses Tab.
2 / 25
What is a 'focus trap' in a modal dialog?
A focus trap confines Tab navigation to the dialog so users can't tab into the hidden page behind it.
3 / 25
A 'skip link' is added to the top of the page. What is its purpose?
A skip link lets keyboard and screen reader users bypass repetitive nav and jump to main content.
4 / 25
Which sentence correctly uses 'roving tabindex'?
Roving tabindex keeps one item tabbable while arrow keys move active focus — a common composite-widget pattern.
5 / 25
A bug says: 'The custom dropdown isn't operable by keyboard.' What does 'operable' mean here?
'Operable' (a WCAG principle) means users can interact with the control using the keyboard, not just a mouse.
6 / 25
During a code review of the new admin panel, Sarah points out: 'I noticed that when I press Tab, it jumps unexpectedly between the 'Save' and 'Cancel' buttons. This makes it difficult to navigate the form consistently.' What is Sarah referring to when she mentions the 'Tab' key causing an unexpected jump in focus?
Sarah is describing a situation where the tabindex attribute isn't being used correctly to control the order in which elements receive focus when the Tab key is pressed. It's not about scrolling or mouse input; it's specifically about the predictable sequence of keyboard interaction. The correct answer highlights that a CSS styling issue can cause unexpected behavior and hinder consistent navigation, even if tabindex is present.
7 / 25
John in Slack: 'Just reviewed PR #123. The autocomplete field is *really* difficult to use with just the keyboard – it keeps jumping back to the input box instead of cycling through the suggestions.' What specific keyboard navigation pattern is John most likely describing?
John is referring to a 'roving tabindex' problem. This happens when an element (like an autocomplete field) doesn't correctly update its `tabindex` value as you navigate through keyboard controls. It means the element isn't properly participating in the tab order, leading to unexpected focus jumps. Option A describes a different UI state; option C suggests a broader widget problem, while D is too general and doesn't directly address the observed behavior.
8 / 25
During a sprint retrospective, David explains to the team that he's struggling with the new user onboarding flow. He says, 'I keep accidentally clicking the 'Submit' button because when I tab through the form fields, it briefly focuses on the button before I can move on. It's really frustrating!' What keyboard navigation pattern is David experiencing?
David is describing a focus trap, which occurs when the Tab key briefly focuses an element (in this case, the 'Submit' button) before returning focus to the previous field. This creates a jarring and disorienting experience for the user, as they are momentarily misplaced within the form. The core issue isn't a misconfiguration of `tabindex` or missing shortcuts; it's the uncontrolled shifting of focus that produces this trap-like behavior. Options C and D are not relevant to what he's describing.
9 / 25
Reviewer: 'I'm seeing a problem with the form. When I press Tab, it seems to 'bounce' back to the top of the field set before continuing. It's making it hard for users to clearly see what they are typing.' What is this behavior most likely related to regarding keyboard navigation?
This scenario describes a situation where the browser's default tab order isn't being properly maintained, causing the focus to jump back to the beginning of the form. The 'bounce' effect indicates that the Tab key is not reliably moving to the next interactive element in the intended sequence. Insufficient focus scope accurately captures this issue - the browser isn't correctly managing where keyboard focus is directed within the component.
10 / 25
Alex in a Slack channel is discussing a UI component. He says: 'The keyboard navigation on this modal window is awful! When I press Tab, it just snaps back to the top of the dialog box every time – completely ignoring the rest of the controls.' What keyboard navigation issue is Alex describing?
Alex is describing a 'focus trap,' which happens when a keyboard user loses control over a UI element. This typically occurs due to an incorrect implementation of tabindex or focus management within the modal window itself; the Tab key isn't correctly cycling through all interactive elements. A roving tabindex issue would involve *intended* jumping, not accidental snapping back.
11 / 25
During a code review of the new admin panel, Sarah points out: 'I noticed that when I press Tab, it jumps unexpectedly between the 'Save' and 'Cancel' buttons. This makes it difficult to navigate the form consistently.' What is Sarah referring to when she mentions the 'Tab' key causing an unexpected jump in focus?
Sarah is describing a situation where the tabindex attribute isn't being used correctly to control the order in which elements receive focus when the Tab key is pressed. It's not about scrolling or mouse input; it's specifically about the predictable sequence of keyboard interaction. The correct answer highlights that a CSS styling issue can cause unexpected behavior and hinder consistent navigation, even if tabindex is present.
12 / 25
John in Slack: 'Just reviewed PR #123. The autocomplete field is *really* difficult to use with just the keyboard – it keeps jumping back to the input box instead of cycling through the suggestions.' What specific keyboard navigation pattern is John most likely describing?
John is referring to a 'roving tabindex' problem. This happens when an element (like an autocomplete field) doesn't correctly update its `tabindex` value as you navigate through keyboard controls. It means the element isn't properly participating in the tab order, leading to unexpected focus jumps. Option A describes a different UI state; option C suggests a broader widget problem, while D is too general and doesn't directly address the observed behavior.
13 / 25
During a sprint retrospective, David explains to the team that he's struggling with the new user onboarding flow. He says, 'I keep accidentally clicking the 'Submit' button because when I tab through the form fields, it briefly focuses on the button before I can move on. It's really frustrating!' What keyboard navigation pattern is David experiencing?
David is describing a focus trap, which occurs when the Tab key briefly focuses an element (in this case, the 'Submit' button) before returning focus to the previous field. This creates a jarring and disorienting experience for the user, as they are momentarily misplaced within the form. The core issue isn't a misconfiguration of `tabindex` or missing shortcuts; it's the uncontrolled shifting of focus that produces this trap-like behavior. Options C and D are not relevant to what he's describing.
14 / 25
Reviewer: 'I'm seeing a problem with the form. When I press Tab, it seems to 'bounce' back to the top of the field set before continuing. It's making it hard for users to clearly see what they are typing.' What is this behavior most likely related to regarding keyboard navigation?
This scenario describes a situation where the browser's default tab order isn't being properly maintained, causing the focus to jump back to the beginning of the form. The 'bounce' effect indicates that the Tab key is not reliably moving to the next interactive element in the intended sequence. Insufficient focus scope accurately captures this issue - the browser isn't correctly managing where keyboard focus is directed within the component.
15 / 25
Alex in a Slack channel is discussing a UI component. He says: 'The keyboard navigation on this modal window is awful! When I press Tab, it just snaps back to the top of the dialog box every time – completely ignoring the rest of the controls.' What keyboard navigation issue is Alex describing?
Alex is describing a 'focus trap,' which happens when a keyboard user loses control over a UI element. This typically occurs due to an incorrect implementation of tabindex or focus management within the modal window itself; the Tab key isn't correctly cycling through all interactive elements. A roving tabindex issue would involve *intended* jumping, not accidental snapping back.
16 / 25
During a code review of the new admin panel, Sarah points out: 'I noticed that when I press Tab, it jumps unexpectedly between the 'Save' and 'Cancel' buttons. This makes it difficult to navigate the form consistently.' What is Sarah referring to when she mentions the 'Tab' key causing an unexpected jump in focus?
Sarah is describing a situation where the tabindex attribute isn't being used correctly to control the order in which elements receive focus when the Tab key is pressed. It's not about scrolling or mouse input; it's specifically about the predictable sequence of keyboard interaction. The correct answer highlights that a CSS styling issue can cause unexpected behavior and hinder consistent navigation, even if tabindex is present.
17 / 25
John in Slack: 'Just reviewed PR #123. The autocomplete field is *really* difficult to use with just the keyboard – it keeps jumping back to the input box instead of cycling through the suggestions.' What specific keyboard navigation pattern is John most likely describing?
John is referring to a 'roving tabindex' problem. This happens when an element (like an autocomplete field) doesn't correctly update its `tabindex` value as you navigate through keyboard controls. It means the element isn't properly participating in the tab order, leading to unexpected focus jumps. Option A describes a different UI state; option C suggests a broader widget problem, while D is too general and doesn't directly address the observed behavior.
18 / 25
During a sprint retrospective, David explains to the team that he's struggling with the new user onboarding flow. He says, 'I keep accidentally clicking the 'Submit' button because when I tab through the form fields, it briefly focuses on the button before I can move on. It's really frustrating!' What keyboard navigation pattern is David experiencing?
David is describing a focus trap, which occurs when the Tab key briefly focuses an element (in this case, the 'Submit' button) before returning focus to the previous field. This creates a jarring and disorienting experience for the user, as they are momentarily misplaced within the form. The core issue isn't a misconfiguration of `tabindex` or missing shortcuts; it's the uncontrolled shifting of focus that produces this trap-like behavior. Options C and D are not relevant to what he's describing.
19 / 25
Reviewer: 'I'm seeing a problem with the form. When I press Tab, it seems to 'bounce' back to the top of the field set before continuing. It's making it hard for users to clearly see what they are typing.' What is this behavior most likely related to regarding keyboard navigation?
This scenario describes a situation where the browser's default tab order isn't being properly maintained, causing the focus to jump back to the beginning of the form. The 'bounce' effect indicates that the Tab key is not reliably moving to the next interactive element in the intended sequence. Insufficient focus scope accurately captures this issue - the browser isn't correctly managing where keyboard focus is directed within the component.
20 / 25
Alex in a Slack channel is discussing a UI component. He says: 'The keyboard navigation on this modal window is awful! When I press Tab, it just snaps back to the top of the dialog box every time – completely ignoring the rest of the controls.' What keyboard navigation issue is Alex describing?
Alex is describing a 'focus trap,' which happens when a keyboard user loses control over a UI element. This typically occurs due to an incorrect implementation of tabindex or focus management within the modal window itself; the Tab key isn't correctly cycling through all interactive elements. A roving tabindex issue would involve *intended* jumping, not accidental snapping back.
21 / 25
During a code review of the new admin panel, Sarah points out: 'I noticed that when I press Tab, it jumps unexpectedly between the 'Save' and 'Cancel' buttons. This makes it difficult to navigate the form consistently.' What is Sarah referring to when she mentions the 'Tab' key causing an unexpected jump in focus?
Sarah is describing a situation where the tabindex attribute isn't being used correctly to control the order in which elements receive focus when the Tab key is pressed. It's not about scrolling or mouse input; it's specifically about the predictable sequence of keyboard interaction. The correct answer highlights that a CSS styling issue can cause unexpected behavior and hinder consistent navigation, even if tabindex is present.
22 / 25
John in Slack: 'Just reviewed PR #123. The autocomplete field is *really* difficult to use with just the keyboard – it keeps jumping back to the input box instead of cycling through the suggestions.' What specific keyboard navigation pattern is John most likely describing?
John is referring to a 'roving tabindex' problem. This happens when an element (like an autocomplete field) doesn't correctly update its `tabindex` value as you navigate through keyboard controls. It means the element isn't properly participating in the tab order, leading to unexpected focus jumps. Option A describes a different UI state; option C suggests a broader widget problem, while D is too general and doesn't directly address the observed behavior.
23 / 25
During a sprint retrospective, David explains to the team that he's struggling with the new user onboarding flow. He says, 'I keep accidentally clicking the 'Submit' button because when I tab through the form fields, it briefly focuses on the button before I can move on. It's really frustrating!' What keyboard navigation pattern is David experiencing?
David is describing a focus trap, which occurs when the Tab key briefly focuses an element (in this case, the 'Submit' button) before returning focus to the previous field. This creates a jarring and disorienting experience for the user, as they are momentarily misplaced within the form. The core issue isn't a misconfiguration of `tabindex` or missing shortcuts; it's the uncontrolled shifting of focus that produces this trap-like behavior. Options C and D are not relevant to what he's describing.
24 / 25
Reviewer: 'I'm seeing a problem with the form. When I press Tab, it seems to 'bounce' back to the top of the field set before continuing. It's making it hard for users to clearly see what they are typing.' What is this behavior most likely related to regarding keyboard navigation?
This scenario describes a situation where the browser's default tab order isn't being properly maintained, causing the focus to jump back to the beginning of the form. The 'bounce' effect indicates that the Tab key is not reliably moving to the next interactive element in the intended sequence. Insufficient focus scope accurately captures this issue - the browser isn't correctly managing where keyboard focus is directed within the component.
25 / 25
Alex in a Slack channel is discussing a UI component. He says: 'The keyboard navigation on this modal window is awful! When I press Tab, it just snaps back to the top of the dialog box every time – completely ignoring the rest of the controls.' What keyboard navigation issue is Alex describing?
Alex is describing a 'focus trap,' which happens when a keyboard user loses control over a UI element. This typically occurs due to an incorrect implementation of tabindex or focus management within the modal window itself; the Tab key isn't correctly cycling through all interactive elements. A roving tabindex issue would involve *intended* jumping, not accidental snapping back.
What will I practice in "Keyboard Navigation Patterns"?
This is an Accessibility Language exercise set. It walks through 25 scenario-based multiple-choice questions built around real usage of Accessibility Language terminology that IT professionals encounter on the job.
Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is free to complete with no account, sign-up, or paywall.
How many questions are in this exercise?
This set contains 25 questions. Each one shows immediate feedback and a detailed explanation after you answer, so you learn the correct usage right away rather than waiting for a final score.
Do I need prior experience to complete this exercise?
No prior experience is required. Each question includes a full explanation covering the reasoning behind the correct answer, so the exercise itself teaches the Accessibility Language vocabulary as you go.
Can I retry the exercise if I get questions wrong?
Yes — use the "Try again" button on the results screen to reset your answers and go through all the questions again. There is no limit on attempts.
Is my progress saved?
Your answers and score for the current session are tracked in the browser as you go. No account or login is needed, and there is nothing to install.
What if I don't understand a term used in a question?
Read the explanation shown after you answer each question — it breaks down the correct term in plain English with a real-world example. You can also check the site Glossary for quick definitions.
How is this different from reading a blog article on the topic?
Exercises like this one are interactive drills that test and reinforce specific vocabulary through multiple-choice questions, while blog articles explain concepts in prose. Practising here after reading builds active recall, not just passive recognition.
Where can I find more Accessibility Language exercises?
See the Accessibility Language exercises hub for the full set of related pages, or browse all exercise categories from the main Exercises index.
Can I use this exercise to prepare for a technical interview?
Yes — Accessibility Language vocabulary comes up often in technical discussions and interviews. Pair this exercise with our dedicated Interview Preparation section for role-specific practice.