Archive index

A11y Slackers Gitter Channel Archive 24th of September 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 24 17:13

    [mariusz.dabrowski] Hey all, I noticed that in Chrome when you click a button the :focus state remains active. This doesn't happen in Firefox and Safari - Anybody know what the reasoning behind this was? And does anybody have a potential workaround to prevent it from sticking?

    https://codepen.io/MarioD/pen/59509af35187d703353f5b26918619c4

  2. zakim-robot
    @zakim-robot
    Sep 24 17:23
    [mariusz.dabrowski] Looks like .blur(); on click might be a workaround.
  3. zakim-robot
    @zakim-robot
    Sep 24 19:24

    [svinkle] Hey @mariusz.dabrowski! It’s a good question. Although using .blur(); in this context does remove focus, the result is losing the current focus position for any keyboard-only or screen reader users. On the lick(0 event, focus would essentially be moved to the top of the document, forcing the user to navigate all the way back through to where they were. Not really ideal.

    Good news is there are a few workarounds. Check out this video on “Focus Ring!” by @robdodson (https://www.youtube.com/watch?v=ilj2P5-5CjI) and the accompanying polyfill source on Github (https://github.com/wicg/focus-ring).

    Additionally, I also have a solution of my own which I quite like. :$ (https://codepen.io/svinkle/pen/zzrORW)

  4. [droidpinkman] great video
  5. [droidpinkman] I like the part where rob states "browsers aren't always identical"
  6. zakim-robot
    @zakim-robot
    Sep 24 19:31
    [svinkle] In the same light, “AT aren’t always identical.” Something that also throws new a11y devs for a loop.
  7. [droidpinkman] he also makes a good point about leaving your work and coming back and in this case the focus ring is still there showing u where u left off
  8. [droidpinkman] that makes sense to me from a navigation standpoint
  9. [svinkle] Absolutely. Very handy browser feature for sighted and low-vision users.
  10. [droidpinkman] but what if your art director is a jerk?
  11. [droidpinkman] ;)
  12. [svinkle] Well then, time to have a good conversation about basic usability. :)
  13. [droidpinkman] they love those convos
  14. [droidpinkman] cur dragons
  15. [svinkle] “Yeah, this thing looks pretty, but can anyone use it…?” :fire:
  16. zakim-robot
    @zakim-robot
    Sep 24 19:37
    [svinkle] Love that Rob also recos another lib to check out. Options:heavy_plus_sign::heavy_plus_sign: thumbsup emoji
  17. [droidpinkman] Ive been at an agency where hell ensues when u bring this stuff up to the "pretty colors people"
  18. [droidpinkman] personally i would just leave the ring
  19. [droidpinkman] not the mountain i wanna have a tanturm on
  20. [droidpinkman] or animate it with a slight pulse to be "cool"
  21. [svinkle] Some animation can be helpful, if executed well.
  22. [svinkle] But yeah, the coolness factor is usually the primary driver.
  23. zakim-robot
    @zakim-robot
    Sep 24 23:14
    [caesar] @jv regarding your question about W3C and CSS, try one of the links mentioned here maybe? https://www.w3.org/Style/CSS/learning#fora