WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: focus indicators and usability studies

for

From: Jukka K. Korpela
Date: Jun 16, 2014 11:50PM

2014-06-17 0:35, Sean Curtis wrote:

> Eric wrote about the resetting of outline (and it's subsequent
> removal) in his reset.css file:
> http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

This is a confusing story, and Reset CSS is generally more of a source
of confusion and problems than a solution.

The 2011 article refers first to Eric's original "Reset Styles" from
April 2007, which had nothing about :focus or outline, then to his
"Reset Reloaded" from May 2007, which had :focus { outline: 0 }, then to
"CSS Tools: Reset CSS" from January 26, 2011, which is probably the
best-known and most linked-to version and that again has no :focus or
outline. But the "Reset Revisited" is from January 3, 2011, and it has
outline: 0 for many elements, including <a>, and later the commented-out
pseudo-code :focus { outline: ?????; }, and only for that a comment says
"remember to define visible focus styles!".

> There is also http://www.outlinenone.com which was created expressly
> to explain this also.

That page has a simple and useful message, though the page is not
particularly accessible (I have to hit Ctrl+plus twice to read it
comfortably). It refers to the above-mentioned "CSS Reset", which does
not do anything to :focus or outline, yet presents code, apparently
meant to be a quotation, that sets :focus { outline: 0 } (in real code)
after a comment "remember to define focus styles!"

> If you remove it, you need to be responsible enough to add something
> to replace it.

I'm afraid the damage has been done. People who use Reset CSS use some
version of it without even thinking of its effect on focus indicators
(which depends on the version of Reset CSS they happen to be using).
Luckily many people and many frameworks use less aggressive "reset"
instead, such as Normalize.css, which removes outline from hovered and
active links only.

Besides, if designers are upset by an innocuous and often barely
noticeable one-pixel wide dotted outline, I would expect them to be even
more upset by any other visual focus indicator that we might set up.
It's probably not the specific style of focus indicators but the very
idea of having a visible focus indicator that matters here.

A better formulation is: Do not remove the focus indicators. If you
create your own focus indicators, for some good reason, consider
removing the default focus indicator, a dotted outline, if it would then
be disturbing or unnecessary.

> I'm not sure of any studies, I'd just remove it from a
> large site like Wikipedia using the dev tools in a browser, and then
> get the person who wants the outlines removed to try and navigate the
> site using only the keyboard.

Good idea, though it might be difficult to implement. People usually
want to remove "ugly dotted borders" for esthetic reasons and can't be
bothered to test usability in a mode of use that sounds odd to them. But
it might work for an intelligent person who willing to consider the
implications and pros and cons of what he wants.

Yucca