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
...
Markup and Code
| Code Block |
|---|
<label for="name">Your name:</label> <input id="name" type="text"> |
...