Focus state
Keyboard focus around interactive elements should always be visible as you tab through the elements.
What is focus?
Focus determines where keyboard events go in the page at any given moment. For instance, if you focus a text input field and begin typing, the input field receives the keyboard events and displays the characters you type. While it has focus, it will also receive pasted input from the clipboard. The currently focused elements are indicated by a focus ring, the style of which depends on both the browser and on any styling we/Spark has applied. Chrome, for instance, typically highlights focused elements with a blue border, whereas Firefox uses a dashed border.
Example of visible focus border
Why it matters
We should never actively hide keyboard focus as it helps users navigate page elements and understand where they are, telling users which element is “clickable” and what keyboard events are associated with that element.
WCAG 2.0 reference: 2.4.7 Focus Visible
Example:
Example of form element focus states
How to check for this
Follow these steps Manual
Collaborators
- Spark has the focus styles defined (passes color contrast) and documented.