Rule Proposal: Always use :focus when using :hover

[nzakas]

For accessibility purposes, it's usually advisable to include a rule for :focus whenever there's something for :hover. So

a:hover,
a:focus {
    color:red;
}

[mgifford]

I really like this rule. Would be a big plus. So often focus is forgotten!

http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/

[stubbornella]

I like it too. Any interest in coding it up @mgifford?

On Mon, Apr 28, 2014 at 4:39 AM, Mike Gifford [email protected] wrote:

I really like this rule. Would be a big plus. So often focus is forgotten!

http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/

Reply to this email directly or view it on GitHub: https://github.com/CSSLint/csslint/issues/264#issuecomment-41548570

[mgifford]

@stubbornella Sadly, can't step forward on this one. I'm busy enough looking at accessibility for Drupal to take on much else.

[mgifford]

Wow, been over 4 years now and nobody else has stepped forward on this yet. I'm still interested.

@stubbornella do you have any suggestions on getting started? I'm more of a PHP guy.

So for a simple test, I went here http://csslint.net/

I would like to get an error when I do this:

a:hover {
    color:red;
}

but not when you provide the example that @nzakas did for this back in 2012.

I know I talked to @nschonni about this in the past.

This all goes back to WCAG 2.0 AA Success Criterion 2.4.7

So how much more detail is needed in the Rule? https://github.com/CSSLint/csslint/wiki/Rules

[mgifford]

Andrew Macpherson https://github.com/fuzzbomb in a Drupal slack chat suggested maybe focus-within is more appropriate in some instances:

tr:hover,
tr:focus-within {}

Maybe a linter can say "whenever there's an a:hover, there should also be a a:focus but they don't have to use the same styles." Like this:

a:hover { ... subtle style ...}
a:focus { ... strong style ... }

[mgifford]

Here's the WCAG 2.1 guideline https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus

[stubbornella]

I think your approach makes sense. I’d find a similar rule (one that tests properties and values, not just selectors). Copy that rule. Modify the tests. And then iterate toward it testing the right thing. Lemme know how it goes! On Thu, May 17, 2018 at 10:53 AM Mike Gifford [email protected] wrote:

Here's the WCAG 2.1 guideline https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CSSLint/csslint/issues/264#issuecomment-389953572, or mute the thread https://github.com/notifications/unsubscribe-auth/AACZ5qMUjght-F8aSiLqjQNQtVm5f4X0ks5tzbkMgaJpZM4B2A00 .