Rule: Focus must be discernible

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