RE: 2.4.7 Focus Visible

By "tangibly worse", I mean that developers are not using :focus-visible as it's supposed to be used. Numerous websites we have tested in the last few months have had problems with focus indicators due to incorrect use of :focus-visible. Sometimes it causes a lack of focus indication, but often it causes the text and/or background to have colours the author did not intend. No one would have coded this intentionally, which is why I suspect the frameworks are doing it, perhaps without the developer's knowledge.

Steve


-----Original Message-----
From: Patrick H. Lauke <redux@splintered.co.uk> 
Sent: Monday, July 10, 2023 7:11 PM
To: w3c-wai-ig@w3.org
Subject: Re: 2.4.7 Focus Visible



On 10/07/2023 18:48, Steve Green wrote:
> Maybe I'm a bit thick, but I just don't see what problem :focus-visible is supposed to solve. And I suspect that there isn't a single developer out there who knows what it's for, either. Not that that stops them using it (incorrectly). It's a problem on just about every website we test nowadays. This has happened so rapidly I suspect it's baked (incorrectly) into some of the frameworks.

Take a vanilla web page with a <button>. Now, click it with your mouse. 
All modern browsers do NOT show a default focus outline as a result. 
Only if you use the keyboard will you see the default focus outline.

Now, add explicit :focus styles. As soon as there are explicit :focus styles, the focus indicator is applied to the button indiscriminately, both after mouse click and when receiving keyboard focus.

For aeons, authors have tried to square this circle, with increasingly hacky solutions.

Now, with :focus-visible, you as an author can define custom styles (like you could with :focus), but the browser only applies these styles in the same situation where it would normally show its default outline. 
I.e. in our <button> example, the custom focus styles will show when interacting with the keyboard, but not when just clicking with the mouse.

This has actually been long fought for - a nuanced approach to guarantee that authors can provide nice clear focus styles for keyboard users, while not forcing these styles indiscriminately even for mouse interactions. Because, believe it or not, not all mouse users want to have focus styles on. This provides a best-of-both-worlds approach, with the possibility of browser then offering much more granular options/settings for users to specify whether or not they do want these.

Note that things like <input type="text"> are exempt here - browsers already show a default focus indication for these even as a result of clicking with the mouse, and as a result :focus-visible styles also apply here.

> If there is a problem to be solved, I don't understand how any reliable solution can be based on leaving a behaviour to a browser's undocumented heuristics that may change at any time. By the nature of heuristics, they are likely to be different in different browsers. In what way is that better than having authors specify the behaviours?

Because the heuristic is the behaviour that users of that browser will already know and expect. And currently, the browsers all behave the same way at the top level: setting focus as a result of a mouse action does not show the default focus outline (thus :focus-visible does not apply either), whereas focus as a result of a keyboard interaction does show the default focus outline (thus :focus-visible applies).

> Whatever the intent was, :focus-visible is making things tangibly worse and has made nothing better.

"Tangibly worse" requires some evidence here. Particularly since, again, :focus-visible does the exact same thing (applies in the exact same
scenarios) as default vanilla browser behaviour. So...making it worse than what browsers have now been doing for the last 10+ years?

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

Received on Monday, 10 July 2023 18:21:57 UTC