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