Handling visual and keyboard focus
How to create the best experience for users when navigate a web page? Keyboard users rely on keyboard focus to interact with the interactive elements on a web page. Make that focus visible, predictable, and meaningful.
Pages in: Handling focus
Tabindex and tab order
Make the tab order of the keyboard focus predictable and sequential.
Visual focus
Make sure keyboard focus is clearly visible while navigating through a web page.
Trapping focus
Constrain focus within a responsive menu or dialog component.
Restore focus
Restore the keyboard focus after completing a task or action.
Autofocus
Automatically setting a focus location when a page loads can be confusing and unwanted.
On input, focus and hover
Do not surprise users with unexpected behavior on input, focus or hover.
Keyboard trap
Make sure keyboard users are always able to navigate away from components on a web page.
← Back to: Frontend code