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

Ø  I can hear the dev community asking themselves "why do I have to do implement this across my site for all users if an end user can just install a plugin to get what they need, and when a browser can easily make this a setting?"

Installing extensions is not always possible – security, public access computers, kiosked based sites, etc.  Mobile browsers don’t support extensions but do support keyboard access.  Also this doesn’t seem like universal design to me.  It seems like there should be a base requirement and in addition if users want to go beyond that they shouldn’t be blocked.

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access
jon.avila@levelaccess.com<mailto:jon.avila@levelaccess.com>
703.637.8957 office

Visit us online:
Website<http://www.levelaccess.com/> | Twitter<https://twitter.com/LevelAccessA11y> | Facebook<https://www.facebook.com/LevelAccessA11y/> | LinkedIn<https://www.linkedin.com/company/level-access> | Blog<http://www.levelaccess.com/blog/>

Looking to boost your accessibility knowledge? Check out our free webinars!<https://www.levelaccess.com/compliance-resources/webinars/>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: David MacDonald [mailto:david@can-adapt.com]
Sent: Thursday, July 12, 2018 6:59 AM
To: Alastair Campbell
Cc: WCAG
Subject: Re: Possible new CSS to allow two color focus rings.

I think that technique is discussed in the CSS thread.

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


The idea of adding it to something like stylish, starts to blur the lines between author responsibility and user responsibility and browser responsibility.

I can hear the dev community asking themselves "why do I have to do implement this across my site for all users if an end user can just install a plugin to get what they need, and when a browser can easily make this a setting?"

Should we be rolling this into the category of "don't interfere with user overriding the focus indicator?" Instead of "make the focus indicator have sufficient contrast?" in Silver?

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>

On Thu, Jul 12, 2018 at 3:32 AM, Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>> wrote:
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<mailto:david@can-adapt.com>>
Date: Thursday, 12 July 2018 at 03:37
To: WCAG group <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: Possible new CSS to allow two color focus rings.
Resent-From: WCAG group <w3c-wai-gl@w3.org<mailto: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>