Focus management

Manage focus so that everyone can interact efficiently with your app, including those who use a keyboard or switch with your app.

Overview

What you need to do

Make sure focus moves in a logical, predictable order through your app’s interface. Make focus indicators clearly visible when users navigate with keyboards or other assistive technologies. Prevent focused elements from being hidden behind overlays, sticky headers, or other interface elements.

Meeting the Web Accessibility Standard

When focusable elements receive focus in a logical order that preserves meaning and functionality, it meets WCAG 2 Success Criterion 2.4.3 Focus Order (Level A).

When a user can navigate with a keyboard and see where the focus is, it meets WCAG 2 Success Criterion 2.4.7 Focus Visible .

When a user interface component receives keyboard focus and is not entirely hidden, it meets WCAG 2 Success Criterion 2.4.11 Focus Not Obscured (Minimum) (Level AA).

Why this matters

Poor focus management creates major barriers for people using screen readers, external keyboards, or switch controls. When focus jumps unpredictably or becomes invisible, users lose track of their location in the app. Hidden focused elements make it impossible to know what’s selected or activated, preventing successful task completion.

When this applies

When you need focus order

All interactive elements: Buttons, links, form fields, menu items
Grouped elements: Combine focus where it makes sense
Modal dialogs: Make sure focus stays within the modal until dismissed
Dynamic content: New content that appears after user actions
Multi-step processes: Forms, wizards, onboarding flows

When you need visible focus

Keyboard navigation: External keyboards (for example, Bluetooth keyboards)
Switch control: Alternative input devices
Voice control: When combined with visual navigation

When you need unobscured focus

Sticky headers/footers: Make sure they don’t cover focused content
Overlays and modals: Position to avoid hiding focused elements
Expanding content: Menus, accordions, dropdowns that might cover focus

Design

Note: Both Android and iOS devices have platform-level focus indicator settings for screen reading. iOS devices also have platform-level focus indicator settings for keyboard. The user can choose from a set of colours and make the focus indicator bolder or have higher contrast.

Review your design system to make sure elements work with these user options, without needing the user to switch settings midway. Users want to set up their focus options once and use them system-wide.

For example, a blue button with a blue focus indicator will not have sufficient contrast, but it may work with a different focus configuration.

Checklist for accessible focus management

Design clear focus indicators (not just colour changes).
Identify the logical focus order for interface elements.
Check focus indicators work in dark/light modes.
Check that your designs support accessible focus indicators when screen readers and keyboards are being used.
Position overlays to avoid covering focused content.
Consider when it is appropriate to use modal vs non-modal dialogs.
Trap focus in modal dialogs until they are dismissed.
Show focus indicators for touch users when needed.
Plan and test focus flow with layout changes.

Design resources

For design guidance on accessible focus management for each platform, see:

iOS — Focus and selection — Human Interface Guidelines — Apple Developer Documentation
Android — Focus order & key traversal — Accessibility designing — Material 3
Android — Focused — States — Material 3.

Development

iOS implementation

For technical guidance on accessible focus management from Apple Developer Documentation, read:

For technical guidance on focus management that meets WCAG, see:

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

For a complete guide, read Support keyboard navigation — Android Developers.

For technical guidance on focus management that meets WCAG, see:

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These quick steps will help you verify that users can navigate easily using a keyboard or other input devices and always identify which interactive element in your app has focus.

Connect an external keyboard to your device.
Navigate using Tab key — does focus move logically through elements?
Check focus visibility settings for keyboard and screen reading — can you use options to identify what is focused?
Test modal dialogs — does focus stay trapped within the modal?
Try overlays and menus — do they hide focused elements?
Use screen reader — does focus order match the logical reading order?
Test dynamic content — does focus move appropriately when content changes?

Testing resources

These tools and guides help you validate focus management across different platforms and assistive technologies.