| Rule ID |
Keyboard 5 |
| Conformance |
Required |
| Definition |
The element with keyboard focus must have a visible focus style that is different from the non-focus state. |
| Purpose |
- Many browsers don't provide a prominent or consistent visible keyboard focus styling for interactive elements, making it difficult for users to identify and track the element with keyboard focus.
- Author defined visible keyboard focus style makes it easier for users to know which interactive element has keyboard focus and provides more consistent user experience between browsers and operating systems.
|
| Conformance |
Required |
| WCAG Success Criteria |
Success Criterion 2.4.7 Focus Visible
Other Related Success Criterion:
|
| Rule Category |
Keyboard Support |
| Rule Scope |
Page |
| Techniques |
- Use CSS psuedo element selector
:focus to change the styling of elements with keyboard focus to include a 2 pixel border.
- Use
focus and blur event handlers on checkboxes and radio buttons to change the styling of not only the form control, but also its label text to make it easier to see.
- Styling changes should include creating at least a 2 pixel border around the interactive element and its label, typically using the CSS
border or outline properties.
- For consistent look and feel to the website it is often useful for the focus and hover styles to be the same or similar.
|
| Information Links |
|