outline on links makes content very hard to read in high contrast mode

[jnurthen]

Seems to be this line outline: 2px solid transparent; I suggest removing a from the selector that this is applied to. The link colour and the underline should be enough for links in high contrast mode

See https://github.com/w3c/wai-aria-practices/issues/144 for how this impacts readability.

[shawna-slh]

Thanks @jnurthen And apologies that I missed this earlier.

@yatil @SteveALee - any reason not to:

I suggest removing a from the selector that this is applied to. outline: 2px solid transparent;

?

[yatil]

Focus outline then cannot be animated outside HC mode. Probably better to remove it in a media query.

[shawna-slh]

Thanks much for quick reply, @yatil !

I've toyed with whether to leave the animations, or remove them, since getting e-mail including:

I am struggling with "supermarket syndrome,"... I'm still encountering problems ... on your site... If I mouse over the "Search" menu here, it animates, and if I click on it, it animates more. ...
Again the search form here animates too: https://www.w3.org/WAI/search/?q=column+scroll

[SteveALee]

We could support "prefers-reduced-motion" [1] , also via a media query as Eric suggested for prefers-contrast [2]. However both of these a pretty new options and not everyone may know about them or be using browsers with support.

1: @./prefers-reduced-motion 2: @./prefers-contrast

Steve Lee OpenDirective http://opendirective.com

On Mon, 8 Aug 2022 at 15:22, Shawn Lawton Henry @.***> wrote:

Thanks much for quick reply, @yatil https://github.com/yatil !

I've toyed with whether to leave the animations, or remove them, since getting e-mail including:

I am struggling with "supermarket syndrome,"... I'm still encountering problems ... on your site... If I mouse over the "Search" menu here, it animates, and if I click on it, it animates more. ... Again the search form here animates too: https://www.w3.org/WAI/search/?q=column+scroll

— Reply to this email directly, view it on GitHub https://github.com/w3c/wai-website/issues/309#issuecomment-1208197361, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEXDKTUWTRIY3C4RGLQ77LVYEJ3VANCNFSM52DJJGSQ . You are receiving this because you were mentioned.Message ID: @.***>

[shawna-slh]

related from Patrick Lauke

One probably very subjective comment: really not a fan of the animated/transitioning focus styles. I find them unnecessarily distracting. At a stretch, could they at least be wrapped in a prefers-reduced-motion media query (as otherwise they may potentially/probably fail 2.3.3 Animation from Interactions ?)

(when addressed, reply to https://github.com/w3c/wai-website/issues/271)

[shawna-slh]

Proposal:

• [ ] link outline
  • [x] [asap]: delete (or comment out) outline: 2px solid transparent;
  • [ ] [list for later]: consider adding it back with prefers-contrast option to make it less obnoxious
• [ ] motion
  • [x] [now] remove all animation on focus etc. (Shawn thinks removing the outline will do it, but nice to delete or at least comment out the other CSS doing it)
  • [ ] [medium priority] quickref yellow fade, add prefers-reduced-motion media query
  • [ ] ? any other to consider?
  • [ ] for sticky things*, add prefers-reduced-motion media query
    • [ ] [asap] back to top — can just have it not show at all with prefers-reduced-motion
    • [ ] [lower priority] side box in WCAG-EM Report Tool & ATAG Report Tool — will want it there, just not sticky
    • [ ] [list for later] page contents when we make them sticky in WCAG Redesign, ARIA APG, ACT Rules, Supplemental Guidance — will want it there, just not sticky

(*We've gotten complaints that causes migraines)

[SteveALee]

@shawna-slh try https://master--wai-website.netlify.app/ for hi contrast And motion.

I commented out the code in the theme so it will impact all builds from now on.

https://github.com/w3c/wai-website-theme/blob/master/_css/base.css#L198-L200