This page contains all guidelines tagged with:

States

Under the umbrella tag of code, this refers to the different states of interactive elements such as hover, focus, pressed, etc. It's important to define these states for keyboard interactivity.

Only change the context by user request

Example of an annoying pop-up
Code
Design
States
Interaction
Cognitive

Ensure that focus indicator is visible

Comparison of an invisible focus indicator (inaccessible) vs. a visible one (accessible)
Code
States
Interaction
Keyboard
Visual

Use hover and focus best practices

A website with 2 levels of menus open
Code
States
Interaction
Keyboard
Visual

Make an intuitive order focusable and defined in markup

Comparison of a focus order that goes up to down, left to right (accessible) vs. a random order (inaccessible)
Code
Defined in Markup
States
Interaction
Keyboard