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

[WCAG 2.2 Draft Feedback] Success Criterion 2.4.11 Focus Appearance (Level AA) #2706

Closed
dshoukry opened this issue Oct 5, 2022 · 35 comments
Closed

Comments

@dshoukry
Copy link

dshoukry commented Oct 5, 2022

“Success Criterion 2.4.11 Focus Appearance (Level AA): When the keyboard focus indicator is visible, one or both of the following are true:

The entire focus indicator meets all the following:

  • encloses the user interface component or sub-component that is focused, and
  • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
  • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.

An area of the focus indicator meets all the following:

  • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
  • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
  • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Exceptions:

  • The focus indicator is determined by the user agent and cannot be adjusted by the author, or
  • The focus indicator and the indicator's background color are not modified by the author.
  • What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.”

Recommendation:
Similar to our previous rounds of feedback, we kindly request that the group remove this SC until research is completed for the specifics around contrast, shape, and thickness of the indicator as specified in the SC. We are also concerned about the overall understandability and testability.

From the last responses in our Github issue:

"Surface area of the indicator, bigger is better. The contrast of that surface area is compared the un-focused state, more is better. The contrast of the surface area compared to it's adjacent colours, more is better."

This is all likely so, but there should be research to quantify the pixel and contrast minimums.

"We could, but then typical (and reasonable) indicators that people use now would not pass. It would make a lot of websites have to do extra work in order to pass, when their current indicators are reasonably clear to users and pass the current SC text."

If the current indicators are reasonably clear and pass the current SC text, why is this SC needed and what is the issue we are trying to solve/improve?

Additionally, the first exception (“The focus indicator is determined by the user agent and cannot be adjusted by the author”) implies that if the browser fails this, then the content authors must fix it. This conflicts with other guidance like "1.4.13 Content on Hover or Focus". We are concerned about the approach of making content authors responsible for fixing user agent issues, and would propose changing it to "…by the user agent and is not modified by the author".

Ultimately, this seems like an especially important area to have research, a diverse set of use cases, and a specific set of content structures to keep the SC beneficial, appropriately scoped, and attainable.

Please find detailed specifics covered in our Sep22 2.4.11 Focus Appearance (AA) Google Doc

@yatil
Copy link
Contributor

yatil commented Oct 5, 2022

Similar to our previous rounds of feedback, we kindly request that the group remove this SC until research is completed for the specifics around contrast, shape, and thickness of the indicator as specified in the SC. We are also concerned about the overall understandability and testability.

While I agree with the latter part (“We are also concerned about the overall understandability and testability.”), I am unsure what more research into “contrast, shape, and thickness” would improve the success criterion. The values currently set seem to be an improvement to the existing WCAG 2.1 SCs (“Change one visible pixel”) and feel good as a minimum baseline to me. Of course, focus indicators could be even better than specified, but WCAG just defines the minimum needed.

@alastc
Copy link
Contributor

alastc commented Nov 18, 2022

Proposed response:


Requirements

This is all likely so, but there should be research to quantify the pixel and contrast minimums.
and
Similar to our previous feedback, we are still seeking evidence (research, etc.) offered for the specifics of the SC (contrast ratio, shape of the focus (why "encloses"?), thickness, etc.)

The requirements it is trying to create are based on:

  • contrast levels that we can use as part of WCAG 2.2 (i.e. the 3:1 for large text);
  • observations of what people complain about (e.g. the old 1px dashed line in Firefox);
  • a session with people from the low-contrast TF.

The group itself relies on W3C members to support with research. I believe Google has done some on this topic, could that be shared? I saw a Google presentation a while back on some research into focus indicators that aligned with the SC requirements. The result also lines up with whatever research Microsoft did to settle on a default 1px solid, contrasting outline for Edge (then taken on by Chrome).

The specifics also derive from what is available to authors. As mentioned, bigger and more contrasting are better, but where do you draw the line? Research will show it is a continuum (like target size) so we have to draw a line somewhere. If you take the starting point of a contrasting 1px outline (which appears to match Google & Microsoft's research), the rest flows from that.

why "encloses"? etc.

The first part of the SC is the "easy to understand but inflexible" part. The second allows some flexibility for indicator designs which do appear reasonably visible, but do not match the outline approach.

If the current indicators are reasonably clear and pass the current SC text, why is this SC needed and what is the issue we are trying to solve/improve?

Because not all indicators are typical or reasonable (from the previous comment). It is trying to improve the current situation where a 1px change (not a 1px outline, a 1 by 1 pixel square) passes 2.4.7.

From the document:

  1. So long as the focus indicator is 2px or more in width, it can completely ignore the contrast requirements.

That is not the case, it still needs to meet the change of contrast bullet. See examples 4 (1px) and 5 (2px) in test page 3.

I'm not saying that's an ideal indicator, but within the contrast principles it allows this to pass:
Two blue buttons, one with a bright red outline around it.

The blue and red don't contrast with each other (noting the red does contrast with the white pixels it is replacing). With at least 2px thickness, it is reasonably visible whether it is black:black (the test page) or blue to red.

Replace: “An” with “The”
Reason: “An area” means any area of the focus indicator meets the criteria. But that means for example, 1 pixel of the focus indicator should meet these criteria.

That is not the case, the first bullet underneath "An area" specifies how large an area that needs to be. If it were "the area" it would mean the whole indicator, and that would mean all fading/halo style indicators fail, even though they have "an area" that passes.

User-agent exceptions

Several of us were confused as to why this is in there and what this means.

  • The first (cannot be adjusted) is for things like select boxes where the UA determines the focus indicator and the author cannot adjust it. It also covers PDFs where the author has no control.
  • The second (indicator & background not adjusted) is to cover the scenario where changing the background can hide the indicator. However, if you don't change either, then you haven't hidden the indicator.

These standards are too low or effectively have loopholes...
An exception is in cases where the author has not modified the focus indicator at all. This effectively allows sites to completely ignore focus indicators - if they take no action at all, then it is somehow presumed "accessible" by default at the AA level, which seems very risky.

and

This seems to imply that if the browser fails this, then the content authors must fix it. This conflicts with other guidance like in "1.4.13 Content on Hover or Focus". 
Can this be changed to "…by the user agent and is not modified by the author" to work?

and

If the focus indicator and indicator background color are not modified by the author, the above rules do not need to be met. If the author didn't modify the indicator, how would they have modified an attribute of the indicator?

If the author hasn't changed the foreground or background colors (of the indicator, component or page), then the default indicators should be reasonable. We've only found issues when the author has changed something.

Authors can change the indicator, or they can leave the default and change other attributes of the link/button/control.
The SC is saying that if you have not changed the indicator, but you have changed the background of the indicator, then you do not meet the exception.

When the author has changed the background (to the component or of the component) there are several scenarios (see test page 6) where changing the background will hide the focus indicator. That is why the exception talks about the background.

Misc

Regarding the blinking cursor:

Nearly every input (mobile and desktop) fails this today.

Default text inputs also have an outline, but some sites remove it.

A task which we are undertaking shortly is a survey for testers to check the inter-rater reliability.

@dshoukry
Copy link
Author

dshoukry commented Dec 3, 2022

Thanks for the responses. I will respond more detailed next week, but wanted to share an update that we've been working on obtaining approvals to present our research. Would we be able to repeat the approach used for Shadows & Outlines/NTC (attend an upcoming meeting, present the research, and discuss?)

@patrickhlauke
Copy link
Member

If the author hasn't changed the foreground or background colors (of the indicator, component or page), then the default indicators should be reasonable

while on its face the response here makes sense, I'd caution that pretty much all major sites/pages out in the wild will have explicitly set their foreground/background colors (at least for the whole page/document/body). In essence, this would mean that you can never rely on the default UA focus appearance unless you left your HTML completely unstyled?

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

@patrickhlauke
Do you have any suggestions for how to resolve this conundrum? Many sites now offer 'themes' where the background is altered. For that very reason, there is understandable concern about giving a 'get out of jail' card to someone who leaves browser defaults in place with, say a gray theme that effectively renders standard focus indicators poor on many common browsers.
I slapped a <BODY style="background-color: gray;"> on a page made up of pure html, and while it did fine on chrome with its dual-colour indicator, it failed miserably on my locally installed versions of firefox and safari. I don't know how we could say it's not the author's responsibility for changing to an inaccessible background colour.

@patrickhlauke
Copy link
Member

the only logical conclusion would be to remove the exception? which then means authors are always on the hook to provide custom focus styles? don't see any way around this, unless we lean heavily into "it's the browser's responsibility to sort out a sufficiently visible default outline" in terms of contrast, and somehow pivot this to "unless authors apply styles that interfere with the outline (e.g. some weird overflow:hidden or similar where the actual outline is chopped off all around the element, etc)

@alastc
Copy link
Contributor

alastc commented Feb 7, 2023

How about if the authors style (e.g. white background) aligns with the default, that is considered a pass via the exception?

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 7, 2023

can you guarantee that white is the default though? is that explicitly defined anywhere (i.e. that all user agents must use this as the default in their default browser styles)? i remember back in the early days of the web, the default was that awful gray...

and of course, it may also be quite arbitrary... if my background is exactly #FFF i can rely on default styles, but if I happen to use #FFFFFE then i'm back to needing to provide explicit focus styles?

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

'guarantee' might take some research. I can say that I have a stock html page I use for testing a lot of things, and it has a white background in every browser I've ever opened (in the past 5 years).

@patrickhlauke
Copy link
Member

i'd honestly prefer "guarantee" to empirical evidence, otherwise we're building on potentially shifting sands...

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

I'm not sure we have to quantify what the default is. "If the author's background-color style matches the browser default..."

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

Perhaps a simple normative language change may allow this to be specified and explained in the Understanding document.
ALter:

The focus indicator and the indicator's background color are not modified by the author.

To:

The focus indicator and the indicator's background color are not altered by the author.

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 7, 2023

this feels like you're leaving this an exercise to the reader to work out whether they're compliant or not...

also, what happens if there is a browser out there (or gets released in future) that makes the decision that to avoid super-harsh contrast on unstyled pages, they'd rather go for a different default than white? maybe they decide to just start off with a dark theme when no styles have been set?

and if we do lean on "what browsers do by default", then what about the trend for many browsers to now adopt a default two-tone white/black focus outline by default that will always work regardless? if there's sufficient critical mass of common browsers ("in widely-distributed user agents") that do this, does that then obsolete the contrast aspect altogether?

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

this feels like you're leaving this an exercise to the reader to work out whether they're compliant or not...

As it is for every SC :)

also, what happens if there is a browser out there (or gets released in future) that makes the decision that to avoid super-harsh contrast on unstyled pages, they'd rather go for a different default than white?

Speaking practically, if that occurred, I would need to put in my ACR as a comment for this SC "Meets by not altering the browser's indicator and its background colour. Browser X, version ## will not meet this requirement in the following situations due..."

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

and if we do lean on "what browsers do by default", then what about the trend for many browsers to now adopt a default two-tone white/black focus outline by default that will always work regardless? if there's sufficient critical mass of common browsers ("in widely-distributed user agents") that do this, does that then obsolete the contrast aspect altogether?

Yes, just like Resize text. The ideal here is that browsers will continue that trend and folks will achieve this 'for free'.

That is stated in the understanding document now:

Some browser makers are improving their default focus indicators to make them more visible. As more browsers adopt defaults that meet the primary bullets of this SC, authors will be able to achieve improved focus indicators without customization.

In an enterprise environment where the browser can be subscribed, a good browser indicator would allow a team to achieve with that now.

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 7, 2023

This all sounds very brittle, with shades of "Until user agents..." - without a clear indication of what the tipping is when authors can rely on the UA to do things correctly (i.e. when are there sufficient "widely-distributed user agents" that would take care of having a default focus indicator that always has good contrast). and would an author (and later on, an auditor) have to effectively test every possible browser on the market at that specific point in time to determine if a site passes or fails if it relies on just the default focus outline...

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

This all sounds very brittle, with shades of "Until user agents..."

To be clear, IF you both do not alter the background-color style and do not use CSS focus alterations, you can pass with user agent right now. You don't need to test, etc.

If you start fiddling with those values, you risk making the browser defaults worse, and you need to test. Generally speaking, if you do decide you're overriding the default focus indicator, it seems reasonable that you do due dilligence -- to the degree anyone checks anything they do on a page across a host of browsers in different markets. That doesn't seem to be anything new.

My experience is that most teams are altering the focus indicator and are testing against common browsers. I assume the variety of browsers tested varies markedly -- as it always has, depending on the thoroughness of the teams.

@patrickhlauke
Copy link
Member

To be clear, IF you both do not alter the background-color style

realistically, show me a modern website these days that doesn't at least set a baseline background colour (even if they set it explicitly to white or off-white). so this seems like an edge case scenario at best (as mentioned earlier in the thread, it's then basically an empty exemption that practically never applies).

i vaguely even seem to remember some advice (back from WCAG 1.0 days?) that said do not set foreground colour unless you also explicitly set background colour, exactly for the reason that you may not be in control of how the user agent (or user styles on top of that) will render things.

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 7, 2023

so perhaps, the way out is to avoid the whole argument about "if you don't change styles, you get away with default focus indicator" altogether. then in understanding, still keep the explanation about modern browsers and how their default styles improve constantly etc, but that authors that rely on just defaults must test in all common browsers/environments if they want to rely on this to pass.

which, the more i think about it, the more comfortable i'd be with. rather than setting some form of arbitrary "only if you don't tweak styles", "only if you define the same colours as the 'default' even though this is not specified explicitly anywhere so just use empirical evidence", and similar, you're just focusing on the actual ask (sufficient contrast). if an author wants to claim just relying on default styles passes, then they're on the hook to test this and demonstrate it's actually the case (for all target browsers/environments that they need to consider)

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

realistically, show me a modern website these days that doesn't at least set a baseline background colour (even if they set it explicitly to white or off-white).

I've provided language which I think addresses this (to a degree). I'd add that many teams these days are offering themes. Do you not agree they should take some responsibility to make sure their themes result in good focus indicators?

The user agent exceptions were added to allow folks to claim compliance using defaults. I think we're both happy those exist? I'm not sure I'm understanding how you want to alter this. Can you provide wording you're suggesting?

PS I think these last comments crossed in the ether. I'm not sure I understand what you are proposing when you say "avoid the whole argument"

@JAWS-test
Copy link

i vaguely even seem to remember some advice (back from WCAG 1.0 days?) that said do not set foreground colour unless you also explicitly set background colour, exactly for the reason that you may not be in control of how the user agent (or user styles on top of that) will render things.

@patrickhlauke

It is no advice but a failure in WCAG 2.0, 2.1, 2.2, SC 1.4.3 and 1.4.11:

Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user's default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified.

@mbgower
Copy link
Contributor

mbgower commented Feb 7, 2023

Hold on, that's the opposite of what @patrickhlauke was talking about.

@JAWS-test you are citing a situation where it is a failure of text contrast if someone specifies a background colour without specifying a text colour. In other words, that guidance does not contradict the notion in Focus Appearance. In fact, not specifying the background color allows you to better pass all those SCs. I just want to make sure we're specifically talking about the same thing here.

Also note that in that same section, it states:

If no background color is specified, then white is assumed.

So we also have something of a precedent going back to 2.0 implying that white is assumed to be the default background-color.

I'm not saying this isn't a tough situation to make consistent. Just that we need to be very careful to compare apples to apples.

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 8, 2023

@mbgower

Yes, just like Resize text. The ideal here is that browsers will continue that trend and folks will achieve this 'for free'.

Getting back to this though, the difference here is that the normative wording for resize text doesn't include any specific wording about the mechanism that a page must have.

Compare this to the current second bullet exception

The focus indicator and the indicator's background color are not modified by the author.

When browsers do adopt more universal focus styles (like the double white/black outline), this normative wording will still mean that authors can't rely on them "for free" as it's only exempt if the indicator and the background haven't been modified? unless you mean that when browsers do adopt better focus indicators, you as an author/auditor would just evaluate them against the actual requirements, and not have to rely on the exemption in the first place? in which case, the exemption might actually be confusing, as an author/auditor may not realise that they can evaluate the browser's focus indicator against the actual requirements and skip that bit of the exemption entirely...

does that make sense?

so perhaps the point that if an author relies on the default focus indicator (even if they have styled their backgrounds/etc), they need to make sure to evaluate against all requirements and test this is all current "widely available user agents", unless they have not changed the styling/background

@mbgower
Copy link
Contributor

mbgower commented Feb 8, 2023

Many of the existing 2.0 SCs would not pass the level of scrutiny and exactitude imposed on the 2.2 work (if reviewing them in order, you won't make it past 1.1.1 without realizing problems).

So Resize text contains the following info in the Understanding document:

The scaling of content is primarily a user agent responsibility. User agents that satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale. The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout.

We were asked to add an explicit statement in the normative text in Focus Appearance for user agents. So you can see how we've moved from very generic normative text on Resize Text with a bunch of non-normative context on user agents given in the Understanding doc. Folks don't want to do that anymore. So we end up in these contortions. I don't have an answer for that.

@patrickhlauke @alastc Maybe it's important to highlight that the wording in the normative text is not changing the page's background-color value. It is:

The focus indicator and the indicator's background color are not modified by the author.

Can we leverage that nuance? Maybe add in a clarification in the Understanding document along the following lines: "If the indicator's background is modified by the author to the point that a default indicator that passed 3:1 contrast no longer achieves 3:1 with its background, the author cannot meet this requirement via this exception."

@mbgower
Copy link
Contributor

mbgower commented Feb 8, 2023

We could even make it explicit in the Understanding document that changing the body background-color value does not necessarily nullify the user agent exception?

@patrickhlauke
Copy link
Member

Many of the existing 2.0 SCs would not pass the level of scrutiny and exactitude imposed on the 2.2 work

we're probably overcompensating, with the hindsight of knowing how vague SCs created 14+ years ago have been causing pain due to their wooly ambiguity...

@patrickhlauke
Copy link
Member

patrickhlauke commented Feb 8, 2023

to be pedantic...

the indicator's background color

is perhaps not correct. it's the background color that the indicator is placed over (which yes, is not necessarily the page background), not the background of the indicator...

@alastc
Copy link
Contributor

alastc commented Feb 8, 2023

As you say, it isn't necessarily the page background, or even the background of the component, sometimes it is the component itself. I couldn't think of anther way of saying that, without getting into "the pixels that the indicator is replacing"

@GreggVan
Copy link

GreggVan commented Feb 8, 2023 via email

@alastc
Copy link
Contributor

alastc commented Feb 8, 2023

Yesterday the group approved the response above:
https://www.w3.org/2023/02/07-ag-minutes#item06

If anyone wishes to progress the discussion on the exception and background colours, please open a new issue/PR.

@mbgower
Copy link
Contributor

mbgower commented Feb 13, 2023

@patrickhlauke, have a look at the first (and currently only) commit in my draft PR #3017
I've put my effort so far into just reinforcing the intent in the Understanding document, rather than into tweaking the normative language.

@mbgower
Copy link
Contributor

mbgower commented Feb 15, 2023

I have made some minor changes to the understanding document to re-enforce some of the comments in the response to this issue. They are are in #3017

I am adding a Ready for Survey label to ensure that gets looked at, and reopened the issue so that that PR is noticed. @alastc, as soon as it is brought into a survey, this can be reclosed.

I am going to undertake a separate PR in which I will propose a minor normative change to address both @dshoukry's questions about the user agent exceptions and those of #3016

@dshoukry
Copy link
Author

Thank you for continuing to refine the SC.

We obtained the approvals to share our research findings, should we coordinate offline to discuss logistics to attend and present those at an upcoming meeting?

@alastc
Copy link
Contributor

alastc commented Feb 20, 2023

HI @dshoukry, I don't have an email address for you, but mine is at the top of WCAG - just select my name under 'editors'.

@alastc
Copy link
Contributor

alastc commented Feb 20, 2023

The PR @mbgower mentioned is in the survey, so I'll close this again.
(Still interested in the research though, let's arrange that on email.)

@alastc alastc closed this as completed Feb 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants