Archive index

A11y Slackers Gitter Channel Archive 20th of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. James Nurthen
    @jnurthen
    Mar 20 00:07
    @alice Glad to hear it was a deliberate decision. The spec needs clarifying. Honestly I don't care which way it goes i just want everyone to do the same thing.
  2. I'll log a bug against the accessible name calculation tomorrow.
  3. Sean Elliott
    @seanus1138
    Mar 20 01:10
    Hey guys, what problems can come from not having enough color difference i cant seem to find anything on it, anything related to color is really around contrast http://imgur.com/a/LCvrE
  4. zakim-robot
    @zakim-robot
    Mar 20 01:13
    [alice] @jnurthen I'm with you. Let's figure out which one makes the most sense and make things consistent.
  5. zakim-robot
    @zakim-robot
    Mar 20 01:24
    [caesar] @seanus1138 you mean 1.4.3 Contrast, or 1.3.3 Sensory Characteristics?
  6. zakim-robot
    @zakim-robot
    Mar 20 09:35
    [felix.berger] hey there, i am currently looking for a soldid way of high contrast detection (in particular on osx (inverted color)), maybe someone can help. afaik, an approach like http://jsfiddle.net/karlgroves/XR8Su/6/ is not detecting my osx contrast settings.
  7. zakim-robot
    @zakim-robot
    Mar 20 09:45
    [felix.berger] oh, or - any hint on bestpractice is appreciated :)
  8. zakim-robot
    @zakim-robot
    Mar 20 11:22
    [karlgroves] Felix: Any specific reason why you want to detect high contrast on OSX?
  9. [alastc] I think the OSX invert colours setting is an OS or even graphics-card level change, the browser wouldn’t know that the colours are inverted.
  10. [karlgroves] Agreed. And the only useful point of detecting HCM in windows is to provide alternate approaches to things like sprites and background images
  11. zakim-robot
    @zakim-robot
    Mar 20 11:27
    [karlgroves] Due to the way OSX handles high contrast, that isn’t necessary
  12. zakim-robot
    @zakim-robot
    Mar 20 13:23
    [felix.berger] Karl: thank you for helping out - i just realised that the way osx handles high contrast is very different to what i am trying to fix with my high contrast stylesheet - background images remain and everything is really very much the same except of the inverted color. Sry for the spam, i thought of it as a bug, there is actually nothing to fix on osx hcm
  13. zakim-robot
    @zakim-robot
    Mar 20 14:07
    [michiel] waves at everyone
  14. Elliott Regan
    @elliottregan
    Mar 20 14:44
    @marcysutton So you're saying...we're all bots? :scream:
  15. How do I get into the Slack channel? I typically use that more than Gitter.
  16. zakim-robot
    @zakim-robot
    Mar 20 14:48
    [michiel] elliottcable: you can visit: http://web-a11y.herokuapp.com/
  17. Elliott Regan
    @elliottregan
    Mar 20 14:49
    Thanks!
  18. zakim-robot
    @zakim-robot
    Mar 20 14:49
    [michiel] thumbsup emoji
  19. zakim-robot
    @zakim-robot
    Mar 20 17:59
    [marcysutton] The 2-year anniversary of this Slack channel is this week! 1252 members and funded by Slack. I think I even got my current job through here. Thanks for being a part of it y'all :)
  20. zakim-robot
    @zakim-robot
    Mar 20 18:10
    [conley] thumbsup emoji
  21. [michiel] :raised_hands:
  22. [michiel] Not too shabby for a bunch of a11y slackers ;)
  23. Jonathan Neal
    @jonathantneal
    Mar 20 18:16
    Where do I find a guide to keyboard traps for modals? Related: does this modal keyboard trap follow best practices? http://gdkraus.github.io/accessible-modal-dialog/
  24. Jonathan Neal
    @jonathantneal
    Mar 20 18:40
    It seems like a pretty good pattern to me, minus the fact that it has to completely control the tab key presses, but I’d never seen it before so I wanted to be sure.
  25. zakim-robot
    @zakim-robot
    Mar 20 19:02
    [elliottregan] That seems pretty well thought out. I’ve used this article in the past as a start: https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/
  26. zakim-robot
    @zakim-robot
    Mar 20 19:09
    [michiel] Jonathantneal: WAI has a tutorial, as well as a11yjs.
  27. [michiel] In transit so can't look it up right now.
  28. zakim-robot
    @zakim-robot
    Mar 20 19:16
    [car] Here's the APG modal dialog example: http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html
  29. Jonathan Neal
    @jonathantneal
    Mar 20 19:19
    I’m just blown away and I can’t contain myself. I just met people I work with who are a11y experts. I’ve gone my career from working with people who either didn’t know, didn’t care, or could only scratch the surface, and now I have multiple people I can learn from. I am just so estatic. I sent them links to this channel, in case they aren’t already here.
  30. zakim-robot
    @zakim-robot
    Mar 20 19:20
    [conley] Lucky lucky ;)
  31. [conley] Uphill battle alot of the time
  32. Jonathan Neal
    @jonathantneal
    Mar 20 19:23
    That’s how it always is. It took me 5 minutes to just accept they actually knew what they were talking about and it wasn’t prepared remarks that couldn’t work beyond a script.
  33. Then all the sudden they were diving into authoring practices and showing off codepen’s of ways they’d worked around button role attributes not providing keyboard click events.
  34. I asked one if they liked reading or following any experts, and they said they were fans of @marcysutton :D
  35. zakim-robot
    @zakim-robot
    Mar 20 19:27
    [marcysutton] Awesome =D
  36. Jonathan Neal
    @jonathantneal
    Mar 20 19:31
    Hey, thanks for the example, @car - i like that strategy of listening for focus rather than hijacking the tab key.
  37. zakim-robot
    @zakim-robot
    Mar 20 19:32
    [quidkid] hey guy, I posted this in jobs but if anyone is looking for remote a11y/wcag aa 2.0 work, hit me up. anyways I’m having trouble getting the focus outlines to show properly on my nav. I feel like they are being cutoff. Is there something like a z-index for focus outlines so they can appear on top of everything? or what’s a good workaround?
  38. Jonathan Neal
    @jonathantneal
    Mar 20 19:33
    I think there’s a happy medium, because the aria-pracites example doesn’t protect against continued navigation without tab (e.g. using CMD+Option + arrow keys in VoiceOver).
  39. zakim-robot
    @zakim-robot
    Mar 20 19:34
    [conley] @quidkid I apply focus via CSS, which will usuallt be the container of the nav item. most likely something obstructing the border
  40. [conley] z-index would have to be applied to the element itself although thats not ideal, check margins per element etc
  41. [quidkid] @conley thank you so much for responding!! yeah i have the focus via CSS. i do have borders on the container in question. is that the issue? on my other components, I get focus outline on the top and bottom but not on the sides.. or just the top. weird
  42. Jonathan Neal
    @jonathantneal
    Mar 20 19:42
    @quidkid, I sometimes use outline-offset to make the outline more apparent when they are near the edge of a viewport. Otherwise, sometimes it’s a matter of being sure other content (even ::before or ::after content) isn’t creating additional rectangles that confuse the intended outline shape.
  43. zakim-robot
    @zakim-robot
    Mar 20 19:46
    [quidkid] Screen Shot 2017-03-20 at 3.46.24 PM.png
  44. [quidkid] ^thats me after trying outline-offset
  45. [conley] Is the tan part another element?
  46. [quidkid] yes it’s a different div that has a before
  47. [quidkid] it’s a background image
  48. [quidkid] both are in the same section tab with a specified width and height… i wonder if that’s the case
  49. Jonathan Neal
    @jonathantneal
    Mar 20 19:49
    FWIW, negative values on outline-offset move the outline inside the element. Still, it looks like you have some visually obscured elements contributing to the outline. You may want to look into how those elements are being visually hidden.
  50. zakim-robot
    @zakim-robot
    Mar 20 19:51
    [quidkid] what do you by visually obscured elements OHHHHHH i see
  51. [quidkid] because it’s a tabbed layout
  52. [quidkid] so whatever the tab panel must be screwing it over
  53. [quidkid] but then how do I solve that?
  54. [quidkid] wait maybe the tabs are overlapping the panel and not being next to it. but even if it is IS overlapping, i still don’t understand why that would prevent the outline from going through… i’ll dig around. thank you so much!!
  55. [quidkid] wow that negative offset worked very well for the tabs. didn’t work for the navigation. but the navigation has i bet the same issue about something obsuring.. i just don’t understand how it works
  56. [conley] Yeah, I'd not have any padding on focus outlines at all, and Jonanthan's suggestion of a negative outline offset might help you