Visual Example
Default State
...
Keyboard Focus State
...
Acceptance Criteria
A sighted keyboard only user typically uses the “TAB” key on the keyboard to navigate through form elements.
...
be provided with a visual indicator of the form element that currently has keyboard focus
be provided with a keyboard focus indicator that is highly visible/emphasized and that has sufficient color contrast between foreground and background
...
Markup and Code
In addition to the default keyboard focus indicator provided by the browser (different treatment depending on the browser), you can use CSS to make the focus indicator more visually apparent and keyboard-friendly.
Ensure that the focus indicator is highly visible with sufficient contrast.
Markup
| Code Block |
|---|
<label for="name">Your name:</label>
<input class="form-visual-indicator" id="name" type="text"> |
CSS
| Code Block |
|---|
.form-visual-indicator:focus {
outline-style: solid;
outline-width: 5px;
outline-color: #495ED4;
} |