Operating Common Controls and Interactive Elements
Interactive user interface elements are the parts of an application or website that allow users to take actions, make selections, or input information. These include controls like buttons, combo boxes, checkboxes, menus, and sliders. For screen reader users, understanding how these elements behave and how to operate them using the keyboard is essential for effective navigation and interaction. Each element has a specific role and responds to certain key commands, so learning these patterns helps in using software more efficiently and independently.
The following notes explain how to open, navigate, and interact with these common interface elements using a keyboard with screen readers such as NVDA or JAWS.
Basic Navigation Between Controls
- Move to next control: Tab
- Move to previous control: Shift + Tab
Combo Box / Drop-down List
- Open dropdown: Alt + Down Arrow
- Close dropdown: Alt + Up Arrow or Escape
- Move through options: Up Arrow or Down Arrow
- Jump to option: Type first letter
- Select option: Enter
- Move out: Tab
Check Box
- Check or uncheck: Spacebar
- Move forward: Tab
- Move backward: Shift + Tab
Radio Button
- Move between options: Arrow keys
- Select option: Spacebar
- Move out: Tab
Toggle Button
- Toggle on or off: Spacebar or Enter
- Move forward: Tab
- Move backward: Shift + Tab
Split Button
- Activate default action: Enter or Spacebar
- Open menu part: Alt + Down Arrow
- Move through menu: Up Arrow or Down Arrow
- Select option: Enter
- Close menu: Escape
Edit Box (Text Field)
- Type text: Start typing
- Select all text: Ctrl + A
- Move cursor: Arrow keys
- Delete text: Backspace or Delete
Buttons
- Activate button: Enter or Spacebar
- Move between buttons: Tab
List Box
- Move through list: Up Arrow or Down Arrow
- Select item: Enter or Spacebar
- Multi-select (if supported): Shift + Arrow keys or Ctrl + Spacebar
Tabs (Tab Control)
- Move between tabs: Ctrl + Tab or Arrow keys
- Select tab: Enter (sometimes automatic)
Slider (Trackbar)
- Increase value: Right Arrow or Up Arrow
- Decrease value: Left Arrow or Down Arrow
- Larger step: Page Up or Page Down
- Minimum or maximum: Home or End
Spin Button (Number Picker)
- Increase value: Up Arrow
- Decrease value: Down Arrow
- Direct typing may work in some cases
Links (Hyperlinks)
- Activate link: Enter
- Move between links (browser): Tab or K
Search Box with Suggestions
- Type text: Start typing
- Open suggestions: Down Arrow
- Move in suggestions: Up Arrow or Down Arrow
- Select suggestion: Enter
Menus (Application Menus like File, Edit)
- Open menu bar: Alt
- Move between menus: Left Arrow or Right Arrow
- Open menu: Enter or Down Arrow
- Open submenu: Right Arrow
- Move inside menu: Up Arrow or Down Arrow
- Close menu: Escape
Context Menu (Right-click Menu)
- Open context menu: Shift + F10 or Applications key
- Move through options: Up Arrow or Down Arrow
- Open submenu: Right Arrow
- Select option: Enter
- Close menu: Escape
Menu Button (Common on Websites)
- Open menu: Enter or Spacebar
- Sometimes: Alt + Down Arrow
- Navigate: Arrow keys
- Close: Escape
Tree View (Folder Structures)
- Expand item: Right Arrow
- Collapse item: Left Arrow
- Move between items: Up Arrow or Down Arrow
Collapsed Sections (Expandable Content)
- Expand or collapse: Enter or Spacebar
- Sometimes Arrow keys also work
Dialog Box
- Move between controls: Tab or Shift + Tab
- Activate default button: Enter
- Close dialog: Escape
Toolbar
- Move between items: Tab or Arrow keys
- Activate item: Enter or Spacebar
Ribbon (like in Microsoft Word)
- Activate ribbon: Alt
- Move between tabs: Left Arrow or Right Arrow
- Open tab: Enter
- Move inside ribbon: Tab
- Open options: Enter or Down Arrow
- Exit ribbon: Escape
Group / Grouped Controls
- Enter group: Tab
- Navigate inside: Arrow keys
- Exit group: Tab
Table (Interactive Tables)
- Move cell by cell: Arrow keys
- Move row-wise: Up Arrow or Down Arrow
- Move column-wise: Left Arrow or Right Arrow
- Read current cell (NVDA): Insert + Tab
Status Bar
- Read status (NVDA): Insert + End
- Some items can be accessed using Tab
Progress Bar
- Usually announced automatically
- Read manually (NVDA): Insert + Tab
Web Navigation (NVDA / JAWS)
- Next form field: F
- Next button: B
- Next combo box: C
- Next check box: X
- Next heading: H
- Enter forms mode: Enter
- Exit forms mode: Escape
- Open dropdown: Alt + Down Arrow
- Expand items: Enter or Spacebar
Important Tips
- Use Tab and Shift + Tab for moving between controls
- Use Arrow keys for navigating within elements
- Use Enter or Spacebar to activate most controls
- Use Escape to close menus, dialogs, or exit modes
Listen for screen reader announcements like “collapsed”, “expanded”, “pressed”