Accessibility

Navigation Through Interactive Elements

Keyboard navigation allows users who cannot use a mouse to interact with the interface. When a user presses the Tab key, the focus shifts to the next focusable element on the page. Typically, focusable elements include links, buttons, form inputs (such as text fields, checkboxes, and radio buttons), dropdown menus, and any focusable ARIA components.

To enhance keyboard navigation on a page, the roving tabindex technique is used. This method ensures that when a user presses the Tab key, the focus lands on a single "entry point" within complex components, such as menus or filters, rather than cycling through every individual item. Therefore, the next Tab action will move the focus out of the component to the next focusable element on the page. The navigation within these complex components is then managed using the Arrow keys.

Navigate Using Full Keyboard Access On MacOS

When Full Keyboard Access is turned on, do any of the following using the default commands:

Move to the next UI element: Press the Tab key.
Move to the previous UI element: Press Shift-Tab.
Select an item: Press the Space bar.

Turn Full Keyboard Access On or Off

On your Mac, choose Apple menu > System Settings, then click Accessibility in the sidebar. (You may need to scroll down.)
Under Motor, click Keyboard, then turn Full Keyboard Access on or off

Dropdowns Navigation

Key	Function
Arrow Down	Opens a dropdown and moves the focus to the first blank field. Enables cyclical navigation within the dropdown.
Arrow Up	Opens a dropdown and moves the focus to the last blank field. Enables cyclical navigation within the drop-down.
Space or Enter	Opens a dropdown.
Esc	Closes a filter dropdown.

Menu Navigation

Key	Function
Space	Opens the submenu and shifts the focus to the initial item within that submenu.
Right Arrow	Moves the focus to the next item in the menu bar. If the focus is on the last item, the arrow key moves the focus to the first item
Left Arrow	Moves the focus to the previous item in the menu bar. If the focus is on the first item, the arrow key moves the focus to the last item.
Down Arrow	Opens the submenu and moves the focus to the first item within that submenu.
Up Arrow	Opens the submenu and moves the focus to the last item within that submenu.
Home	Moves the focus to the first item in the menu bar.
End	Moves the focus to the last item in the menu bar.
Character [a-z]	Moves the focus to the next item in the menu bar whose name starts with the typed character. The focus will not move if no menu item's name starts with the typed character.

Notes: In a menu that has no submenus, the up and down arrow keys function identically to the left and right arrow keys.

Submenu

Key	Function
Escape	Closes the submenu. Moves the focus to the parent menu bar item
Right Arrow	If the focus is on an item with a submenu, the arrow key opens the submenu and places the focus on the first item within it. If the focus is on an item without a submenu: Closes the submenu Moves the focus to the next item in the menu bar Opens the submenu of the newly focused menubar item, while keeping focus on the parent menubar item
Left Arrow	Closes the submenu and moves the focus to the parent menu item. if the parent menu item is in the menubar, then also: Moves the focus to the previous item in the menu bar. Opens the submenu of the newly focused menubar item, while keeping focus on the parent menubar item.
Down Arrow	Moves the focus to the next item in the submenu. If the focus is on the last item, the arrow key moves the focus to the first item.
Up Arrow	Moves the focus to the previous item in the submenu. If the focus is on the first item, the arrow key moves the focus to the last item.
Home	Moves the focus to the first item in the submenu.
End	Moves the focus to the last item in the submenu.
Character [a-z]	Moves the focus to the next item in the menu bar whose name starts with the typed character. The focus will not move if no menu item's name starts with the typed character.

Filters Navigation

Key	Function
Arrow Right	Moves the focus to the next/first filter item. The focus will cycle through the filter items. If the current item is the last one, the focus moves to the first item. If it is the first, the focus moves to the following item.
Arrow Left	Moves the focus to the previous/last filter item. The focus will cycle through the filter items. If the current item is the first one, the focus moves to the last item. If it is the last, the focus moves to the previous item.
Arrow Down	Opens a dropdown and moves the focus to the first blank field. Enables cyclical navigation within the dropdown.
Arrow Up	Opens a dropdown and moves the focus to the last blank field. Enables cyclical navigation within the dropdown.
Space or Enter	Opens a filter dropdown.
Esc	Closes a filter dropdown.

Datagrids Navigation

Datagrids navigation is based on w3.org/WAI/ARIA/apg/patterns/data-grids

Key	Function
Right Arrow	Moves the focus to the next cell on the right within the current row. If the focus is already on the right-most cell, it remains in its current position.
Left Arrow	Moves the focus to the previous cell on the left within the current row. If the focus is already on the left-most cell, it remains in its current position.
Down Arrow	Moves the focus one cell lower. If the focus is already on the last cell in that column, the focus remains in its current position.
Up Arrow	Moves the focus one cell up. If the focus is already on the top cell in that column, the focus remains in its current position.
Home	Move the focus to the initial cell of the current row.
End	Move the focus to the last cell of the current row.
Control + Home	Moves the focus to the first cell in the first row.
Control + End	Move the focus to the last cell in the last row.

Notes:

Empty Cells: Cells that contain no content or no focusable elements are excluded from the keyboard navigation flow.
Cells with a Single Inner Focusable Element: When a cell contains only one focusable element (such as a checkbox, a dropdown button for actions, etc.), navigation keys will pass the focus directly to that inner element. These navigation keys include Arrow keys, Home, End, Page Up, and Page Down.
Cells with Several Inner Focusable Elements: When a cell contains multiple focusable elements (such as an image and product title within an item cell of a shopping list, quantity/unit selectors, or a list of actions), the cell itself is treated as a single navigation element. To enter the cell and access inner focusable elements, press Enter or Space when the cell is highlighted by standard navigation keys (Arrow keys, Home, End, PageUp, PageDown). The first focusable element inside the cell will receive focus. Tab navigation within the cell will loop through the focusable elements (similar to dropdowns). Press Escape to return the focus to the parent cell.

Navigation inside of Dialogs and Modals

Key	Function
Tab	Moves the focus to the next focusable element inside the dialog. When the focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
Shift + Tab	Moves the focus to the previous focusable element inside the dialog. When the focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
Escape	Closes the dialog.