Visible focus

Impact: Strong to major

Users mainly impacted: Motor disabilities.

Explanation

People with motor disabilities who navigate on the keyboard can encounter considerable difficulties in using the content if they are not able to locate where the visual indication of focus and its movements lie.

It is necessary that the outline property be retained. In style sheets, it is forbidden to find properties to remove this outline at focus (:focus), such as :

outline: 0
outline: none
outline: transparent

Similarly, the following properties must not be degraded, i.e. the defined values must not lead to a loss of visibility:

outline-color: for example outline-color: transparent is considered as non-compliant;
outline-width: outline-width: 0 is considered non-compliant;
outline-style: outline-style: hidden is considered non-compliant.

Even if you use a border to indicate focus taking, this alternative is not considered relevant.

Indeed, outline is a property managed by the browser. Some browsers offer mechanisms to increase the visibility of this outline. Thus, if you specify outline: 0 in your style sheets, the browser settings to increase the outline will be invisible.

Disabling the outline property for :hover and :active states is not considered non-conforming. Only the properties attached to the :focus state of an element are taken into account here.

Focus contrast

The contrast of this outline must be at least 3:1 with the interactive element and the background.

Browsers’ default outline

Here is the default outline to be defined on project where outline is hidden or not visible enough.

*:focus {
    outline: 2px auto Highlight; /* for all browsers */
    outline: auto 2px -webkit-focus-ring-color; /* for webkit-based browsers */
    outline-offset: 1px; /* to be adapted according to the element visibility */
}

The property Highlight can be replaced by currentColor (like in the Starter) if the contrast is sufficient.

Focus never hidden

Floating element (fixed main menu, cookie banner…) must not hide the focus, in any resolution or zoom percentage. To prevent it, use the scroll-padding property on body and html tags.

html,body {
    scroll-padding: 33% 0px;
}

In the previous example, the scroolbar will automatically move if the focus is at least at 33% from the top and the bottom of the page.