Navigation & focus
Problem
Users of screen readers or keyboard navigation can get stuck in certain parts of an application because the assistive technology’s navigation gestures conflict with the app’s own navigation. Common problems include:
- Horizontal lists (carousels, page overviews) whose swipe gesture conflicts with the screen reader’s own swipe-to-navigate gesture.
- An unpredictable or illogical focus order that causes unexpected jumps between elements.
- Missing or invisible focus indicators that leave keyboard users unable to tell where they are in the app.
- Navigation bar items built from non-interactive widgets that are completely skipped by assistive technologies.
- Dialogs and overlays that cannot be dismissed without losing focus context.
- Content that appears on hover or focus (tooltips, popovers) that cannot be dismissed or interacted with.
- Help mechanisms placed in inconsistent locations across screens, making them hard to find.
- Keyboard shortcuts that fire accidentally during speech input or normal typing.
Goal
- Users of assistive technologies can always navigate through all elements, including horizontally scrollable content.
- Focus moves in a logical, predictable order that matches the visual hierarchy of the screen.
- Every interactive element shows a visible focus indicator when it receives keyboard focus.
- Navigation bar items are reachable by keyboard and screen reader, and are announced with meaningful labels.
- New content that appears after a navigation action is automatically announced.
- Overlays and dialogs can always be dismissed without losing context.
- Content revealed on hover or focus is dismissable, hoverable, and persistent.
- Help mechanisms appear in a consistent location across all screens where they are present.
- All functionality is operable via keyboard, without traps, and shortcuts require modifier keys or are scoped to focused components.