Rule Suggestion: Don't allow outline: none

[nzakas]

A lot of times, outline: none is used to hide the focus rectangle on certain elements. This is bad for accessibility, as sighted keyboard users aren't able to tell which elements have focus on the page. Perhaps a rule should be to disallow outline: none under a new category of "accessibility"?

[mahonnaise]

1. There is outline:0, too.
2. Some people use outline for layout purposes (a really awful thing to do). -> Disabling outline might be unrelated to visual feedback.
3. People may disable outlines, because they provide other visual clues.

Even if we ignore the silly group (2), the last case makes it kinda hard to check.

Well, I'd go with the simplest thing that could possibly work. If we are in a :focus rule block and if there is only outline: 0 | none (i.e. the usual way to disable it) and nothing else, nag. Fairly straightforward, few false positives, and virtually all true positives.

[nzakas]

Hmm, maybe just not generic enough. In the cases I've seen it, I've never seen outline: none inside of :focus.

[nzakas]

In speaking with some other folks, it seems like a good rule regarding accessibility would be to only assign outline:none or outline:0 in a rule with the :focus pseudo class applied. That way, you know that the intent is to remove the outline for the focus and I can check to see if there are other properties applied in this case that provide an alternate visual.

Thoughts?

[dmcass]

Agreed. If outline: 0 or outline: none are applied within a :focus pseudo selector, it should throw a warning. In a snippet from normalize.css, you can see that they use outline: 0 in a way so that clickers don't see the outlines, but keyboard users do.

The one place where I used to see a lot of people using outline: 0 in a :focus pseudo selector was when they were using Eric Meyer's CSS Reset, but he has since updated it and removed that rule.

[kloots]

Nicholas -

Could you write the rule such that an error or warning is thrown only if the CSS contains a rule that sets outline to "0" or "none" AND the CSS also lacks use of the :focus pseudo class. That way you're (hopefully) reducing the number of spurious errors you'd get by just only checking if outline is killed.

Know what I mean?

• Todd

[nzakas]

@kloots - Yup, that's my exact intention. I'm also thinking that the rule must contain more than just outline:0 or outline:none. That, to me, would indicate that you're actually providing an alternate visual representation and not just turning it off.

[nzakas]

Note to myself: http://outlinenone.com/