Re: Possible new CSS to allow two color focus rings.

Hi David,

That’s interesting, I’ll dig in soon. Is that aimed at improving the authoring styles, or the browser default? I’m guessing the former.

Worth noting that there are other options as well, I’ve been experimenting with user-side styles that use box-shadow, which is quite flexible.

https://gist.github.com/alastc/dd2104fd8786c47a550dd9875bd4dc10


*:-moz-focusring {
    outline: 0 !important;
    box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1 !important;
    transition: all 0.2s ease-in;
    z-index: 1000;
    overflow: visible;
}

The selector (-moz-focusring, or:focus-visible for chrome / standardised version) means it doesn’t appear onclick.
Remove outline (the authored style) so doesn’t interfer.
Have two box-shadows, and dark inner and light outer.
Very mild transition to help it standout.
z-index and overflow to get around some odd authoring styles/layouts, these would also help with outline.

Cheers,

-Alastair


From: David MacDonald <david@can-adapt.com>
Date: Thursday, 12 July 2018 at 03:37
To: WCAG group <w3c-wai-gl@w3.org>
Subject: Possible new CSS to allow two color focus rings.
Resent-From: WCAG group <w3c-wai-gl@w3.org>
Resent-Date: Thursday, 12 July 2018 at 03:35

See this CSS issue which I filed about a year ago which is getting some uptick.

https://github.com/w3c/csswg-drafts/issues/1172



Cheers,
David MacDonald



CanAdapt Solutions Inc.
Mobile:  613.806.9005

LinkedIn
<http://www.linkedin.com/in/davidmacdonald100>

twitter.com/davidmacd<http://twitter.com/davidmacd>

GitHub<https://github.com/DavidMacDonald>

www.Can-Adapt.com<http://www.can-adapt.com/>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>