Many people navigate the web without a mouse. Try completing each scenario below using only your keyboard. The key display updates as you press keys.
Keyboard shortcuts reference
- Tab — Move focus to the next interactive element
- Shift + Tab — Move focus to the previous interactive element
- Enter / Space — Activate buttons and links
- Escape — Close modals, menus, popups
- ← → — Navigate within tab lists, radio groups, menus
- ↓ ↑ — Navigate within select dropdowns and menus
Scenario: Complete a form
Tab through the form fields, type values, use ↓ to open and navigate the select dropdown, then submit.
Tasks
- Tab to the Name field and type a name
- Tab to Email and type an address
- Choose a department from the select
- Tab to Submit and press Enter
0 / 4 tasks completed
Scenario: Open, use, and close a modal
Press Enter on the button to open the modal. Tab through the fields inside. Press Escape to close it. Focus should return to the trigger button.
Tasks
- Press Enter on “Edit Profile” to open the modal
- Tab through the fields inside the modal
- Press Escape (or click Cancel) to close the modal
- Verify focus returned to the trigger button
0 / 4 tasks completed
Scenario: Navigate a tab panel
Tab to the tab list, then use ← and → arrow keys to switch between tabs. The panel content changes as you navigate.
Overview: This panel contains a high-level summary. You navigated here using Tab, then arrow keys.
Details: More detailed information lives here. Press ← to go back to Overview.
Contact: Reach out to accessibility@arizona.edu for help.
Tasks
- Tab to the tab list
- Use → to move to “Details”
- Use → to move to “Contact”
0 / 3 tasks completed