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.
...
A sighted keyboard only user must be provided with a visual indicator of the form element that currently has keyboard focus. For example an emphasized border or outline.
As a screen reader and sighted keyboard only user I should:
be provided with a form label
be able to navigate to the form input field by using the “TAB” key on the keyboard
As a screen reader user I should:
be able to explicitly associate the form label with the form control
When the form field has keyboard focus:
the screen reader should announce the form label.
...
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;
} |