diff --git a/_doc/accessibility/presentation-of-information/visible-focus.md b/_doc/accessibility/presentation-of-information/visible-focus.md index d52874f..d5dd8c1 100644 --- a/_doc/accessibility/presentation-of-information/visible-focus.md +++ b/_doc/accessibility/presentation-of-information/visible-focus.md @@ -36,9 +36,32 @@ Even if you use a `border` to indicate focus taking, this alternative is not con 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. - -
Note 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, to ensure it's conform and visible. + +`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.