Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does the Understanding Doc for 1.4.11: Non-text Contrast (try to) exempt authors from conforming to 2.4.7 Focus Visible when relying on default UA focus styles? #1385

Closed
yatil opened this issue Sep 4, 2020 · 14 comments · Fixed by #2146

Comments

@yatil
Copy link
Contributor

yatil commented Sep 4, 2020

In the Understanding for 1.4.11: Non-text Contrast, one of the examples says:

Default focus style
Links are required to have a focus indicator by 2.4.7 Focus Visible. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons), the default focus style is sufficient.

1.4.11 has an exemption of contrast for unmodified user agent, but 2.4.7 has not.

While that (to my understanding) means that that there is no 1.4.11 3:1 contrast requirement, it seems still insufficient to have an invisible/imperceivable focus style even when relying on the UA style. So if the color of the focus outline of the UA is black it would not conform on a black background as it is not visible.

It feels that the non-normative claim “Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons), the default focus style is sufficient.” is not substantiated by the actual normative text of 2.4.7.

This section in the understanding should be reflected to address this, alternatively an exception should be added to 2.4.7.

(See also this discussion on Twitter: https://twitter.com/stommepoes/status/1301813234585014274)

@JAWS-test
Copy link

2.4.7 requires a visible focus indicator, even if only the standard focus of the browser is used (see https://www.w3.org/WAI/WCAG21/Techniques/failures/F78).
2.4.7 does not require a minimum contrast, however.

1.4.11 requires a minimum contrast, but only for focus indicators that are not from the browser.

This is indeed somewhat confusing, but in itself not a contradiction, because it means that a browser focus must be visible, but not necessarily meet the 3:1 contrast.

I'm not sure if anything needs to be adjusted here. Soon WCAG 2.2 will be released and with that there will be 2 new SCs for focus which will clarify the problem.

@yatil
Copy link
Contributor Author

yatil commented Sep 4, 2020

The main issue, again, here is that it says

Links are required to have a focus indicator by 2.4.7 Focus Visible. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons), the default focus style is sufficient.

The sentences in conjunction indicate that they need to have a focus indicator but, if I is the UA default, that UA default is sufficient.

One way to clarify that is:

Links are required to have a visible focus indicator by 2.4.7 Focus Visible. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons) by the website (author), the default focus style is exempt from contrast requirements (but must still be visible).

(And I agree with your interpretation, but the Understanding documents need to be clearer.)

@StommePoes
Copy link

StommePoes commented Sep 4, 2020

Yeah, this:

even if only the standard focus of the browser is used

causes trouble when the browser's focus is invisible or nearly so.

Basically, Firefox renders invisible focus rings quite regularly due to its focus ring colour being derived, in their own stylesheet, from the text colour of the focusable element. This often results in a white-on-white (as most web pages have a white background).

Eric's edit suggestions above clear this up (with exception to Pat's "visible isn't defined" bit, where he often argues this allows a single visible pixel to be sufficient. 2.2 will deal with this though).

@JAWS-test
Copy link

@yatil I agree that your proposal formulates this much better and am in favor of making an appropriate adjustment until WCAG 2.2 is released. After that the passage should be adapted anyway and refer to the two new SCs

@patrickhlauke
Copy link
Member

this also hinges on the interpretation, normatively, "where the appearance of the component is determined by the user agent and not modified by the author". it's not quite correct to say that this just means "the author hasn't changed the focus indicator", but rather - as the subject is the component itself, not the indicator, "the author hasn't changed the look/feel of the component" in any way that would impact how the focus indicator is shown.

as i've argued before, this can even mean any changes (like the parent container's background, or even body/html background, or the component's foreground text color, or border, or...pretty much any styling) can invalidate that exception. in my view anyway.

@scottaohara
Copy link
Member

Would agree with you @patrickhlauke

Just came across an instance of ... interesting CSS/HTML choices... where a link that was white retained its default dark focus outline in Firefox. This focus indicator, set against a dark background, was indistinguishable. And falling back on the "but it is the default focus indicator" serves no one but the author not wanting to update their style sheet.

@alastc
Copy link
Contributor

alastc commented Nov 30, 2021

While that (to my understanding) means that that there is no 1.4.11 3:1 contrast requirement, it seems still insufficient to have an invisible/imperceivable focus style even when relying on the UA style. So if the color of the focus outline of the UA is black it would not conform on a black background as it is not visible.

Given that there is no definition of visibility for focus-visible, any slight pixel difference would pass. The default focus indicator in FF is based on the currentColor, so you'd have to arrange that to go over the same background colour (so background/foreground matches?). Or the exact blue in Safari, or the dual white/black indicator in Edge (and Chrome now I think?).

In any case it should be solved by focus-appearance. In the meantime I've created a PR based on @yatil's suggestion.

@mraccess77
Copy link

Regarding the statement" While that (to my understanding) means that that there is no 1.4.11 3:1 contrast requirement, it seems still insufficient to have an invisible/imperceivable focus style even when relying on the UA style. So if the color of the focus outline of the UA is black it would not conform on a black background as it is not visible."

SC 1.4.11 does have contrast requirement - they only apply when you have not modified the component at all - as soon as you modify the component's style even unrelated to focus SC 1.4.11 then applies and the contrast requirements for 3:1 to adjacent would apply.

@patrickhlauke
Copy link
Member

SC 1.4.11 does have contrast requirement - they only apply when you have not modified the component at all - as soon as you modify the component's style even unrelated to focus SC 1.4.11 then applies and the contrast requirements for 3:1 to adjacent would apply.

arguably even if you modify the background behind the component (?)

@mraccess77
Copy link

Modifying the background behind the component came up in discussions years ago and I don't think the group was willing to count that. It's really about the component itself and style modifications to it - including it's focus styles, foreground and component background, margin, padding, etc.

@patrickhlauke
Copy link
Member

unfortunate, because particularly for default focus outline, that outline is usually outside of the component, and directly over whatever background is there...so the exemption can indeed lead to default outlines which are exhonerated by 1.4.11 but have too low a contrast against whatever background the component is on.

@mraccess77
Copy link

If the appearance of the component is modified in any way then the adjacent color clause applies - even applies to focus indicator which may be outside the component because the indicator is part of the component - just offset.

So if the appearance is not modified at all and the default focus is used and the page background is changed then YES you can have focus indicator that don't meet this - but I think that's a small loophole - today almost all components are modified somehow by the author even if changes in padding/margin, etc.

@yatil
Copy link
Contributor Author

yatil commented Nov 30, 2021

but I think that's a small loophole - today almost all components are modified somehow by the author even if changes in padding/margin, etc.

I agree. And hence I agree that it does not really serve a purpose and the SC would be clearer without the exception. (This is probably an unpopular opinion, which at this stage could be my middle name.)

mitchellevan added a commit that referenced this issue Feb 16, 2023
Address this aspect of #1385:

> 1.4.11 has an exemption of contrast for unmodified user agent, but 2.4.7 has not.
> 
> While that (to my understanding) means that that there is no 1.4.11 3:1 contrast requirement, it seems still insufficient to have an invisible/imperceivable focus style even when relying on the UA style. So if the color of the focus outline of the UA is black it would not conform on a black background as it is not visible.
@mitchellevan
Copy link
Contributor

Do these two changes fix the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants