Page Title: Crop-Faktor - Formatfaktor - Bildwinkel - Brennweite
May 20, 2018 05:25

Focus must be visible

Actions

Severity Action
Manual Check Use the "tab" key to move focus between links, form controls, embedded apps and widgets and check the visibility of focus styling for each element as it receives focus.
Hidden The 33 links, form controls, embedded apps and/or widgets that are hidden do not need to be tested for focus order.

Details

Rule ID Focus 2
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.
WCAG Success Criteria

2.4.7 Focus Visible (Level AA, Primary Success Criterion)

Rule Category Keyboard Support
Scope Page
Target Resources a, area, input, textarea and select elements and elements with widget roles with tabindex values
  • a
  • applet
  • area
  • button
  • input
  • object
  • select
Techniques
  • Use CSS psuedo element selector :focus to change the styling of elements with keyboard focus.
  • 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 a 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.
Manual Checks
  • Use the the keyboard (i.e. typically he "tab" key, but in the case of widgets other keys) to move focus through the links, form controls, embedded applications and widgets on the page.
  • Check if the element with keyboard focus is clearly visible for all focusable elements on the page as you move focus between elements, and that it changes more than just color (i.e. border/outline around element with focus).
  • Test keyboard focus styling using more than one browser and operating system, since there is a wide varability of between operating systems and browsers for styling keyboard focus.
Informational Links

Element Results

Element Identifier Result Element Position Message

Column Definitions

Element Identifier
Information about the element associated with the result.
The information typically includes the tag name, accessible name or other information related to the rule requirements.
"Page" means that the result applied to the page. For example, the rule "One main landmark on the page" is a page level rule.
Element Position
The element position is based on the DOM order of elements in the page.
The element position maybe useful in helping to locate a specific element on the page evaluated (e.g smaller numbers are typically toward the beginning of a page and larger numbers typically toward the end of a page).
Element position 1 is the first element.
The highest element position is the last element.
Element position values for most rule/page results will not be consecutive since a rule only applies to a sub set of elements found on a page.