Archive index

A11y Slackers Gitter Channel Archive 25th of May 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    May 25 01:28
    [hallaathrad] hey all :)
  2. [hallaathrad] a11y noob here. will lurk and learn for a while
  3. zakim-robot
    @zakim-robot
    May 25 01:33
    [cehfisher] welcome @hallaathrad :wave:
  4. zakim-robot
    @zakim-robot
    May 25 02:03
    [ghanek] @artistic_abode Voluntary, by def?
    But I've seen most oft used in purchasing chain.
  5. zakim-robot
    @zakim-robot
    May 25 02:19
    [garcialo] Good to have you, @hallaathrad
  6. zakim-robot
    @zakim-robot
    May 25 09:58
    [pluma] Does anybody know a JS library that takes a CSS color string and spits out black or white depending on which one has a better contrast? Or an easy way to derive this from rgb/hsl values?
  7. JP DeVries
    @jpdevries
    May 25 09:59
    so like check if the color is closer to black or white, and return the opposite?

  8. could probably use something like this https://gist.github.com/mjackson/5311256#file-color-conversion-algorithms-js-L12

    and just determine if it should be black or white based off the lightness returned

  9. zakim-robot
    @zakim-robot
    May 25 10:10
    [pluma] Yeah but hsl lightness is not reliable for this.
  10. [pluma] e.g. yellow with 50% lightness is brighter than blue with 50% lightness because of how human perception works
  11. [pluma] I'm already using polished.js for color manipulation, so I can parse values into h/s/l or r/g/b
  12. [pluma] This seems like it does what I want, just hoped there'd be a library: https://codepen.io/davidhalford/pen/ywEva
  13. zakim-robot
    @zakim-robot
    May 25 14:44
    [spell] Good morning you wonderful a11y people! Question! Is there any statistical data avilable that compares time spent building a11y into your design/dev process vs. retrofitting it in AFTER a site has launched? We all know it's more expensive to do it after, but I was just wondering if there were numbers available anywhere to help make a stronger case for being more inclusive, etc. Thanks in advance!
  14. zakim-robot
    @zakim-robot
    May 25 15:04
    [karlgroves] Michael, I don’t have any such data, but there’s a lot of data around this in the general QA realm.
    https://www.google.com/search?q=site%3Akarlgroves.com+extreme+accessibility
  15. [karlgroves] http://www.karlgroves.com/2016/01/10/the-business-case-for-issue-prevention-extreme-accessibility/
  16. zakim-robot
    @zakim-robot
    May 25 15:10
    [spell] @karlgroves comes through again. Thanks, man. I'll check it out. Welcome any more insight here from rest of community.
  17. zakim-robot
    @zakim-robot
    May 25 15:29
    [tink] @spell it depends on what needs retro fitting. If you choose a CMS or a JS framework that simply doesn't handle accessibility, then the cost of retrofitting is the cost of starting all over again.
  18. Jonathan Neal
    @jonathantneal
    May 25 17:00
    Should I always specify the contentinfo role on footers, e.g.<footer role="contentinfo">? Here’s a yes answer from 2012, but the browser landscape may surely have changed: https://stackoverflow.com/questions/11191746/should-role-contentinfo-be-always-added-on-footer-element
  19. zakim-robot
    @zakim-robot
    May 25 17:04
    [garcialo] @jonathantneal I’m pretty sure it’s not necessary anymore.
  20. [garcialo] Yeah, I put a footer with role in Nu checker and it told me “The contentinfo role is unnecessary for element footer.”
  21. [garcialo] Everything I know, I learned from the Nu checker.
  22. zakim-robot
    @zakim-robot
    May 25 17:12
    [cmegown] this mirrors a question i had a few weeks back about what certain icons mean in html5accessibility.com
  23. [cmegown] for example, if you expand the footer section you can see it's "not mapped" so does that mean you still need to add the role to support IE 11?
  24. zakim-robot
    @zakim-robot
    May 25 18:54
    [garcialo] ah, perhaps. I blame @stevef
  25. [garcialo] Slack, I do not approve of you autocorrecting me when I’m trying to ping @stevefaulkner
  26. [tessenate] Does anyone have any recommendations/examples of accessible styled radio buttons or checkboxes? I’ve seen the Deque University version (https://dequeuniversity.com/library/aria/custom-controls/sf-checkboxes-radios) but I think my team would like a sample that uses the native elements and relies on native html behavior rather than Javascript.
  27. zakim-robot
    @zakim-robot
    May 25 19:00
    [backwardok] if you visually hide the actual input and use css to mimic the checkbox/radio button inside the label element, you can have the same behavior
  28. [backwardok] you have to handle the focus behavior though
  29. [tyronem] I think rewriting the tab navigation would be enough forme to avoid this.
  30. [tyronem] *for me
  31. zakim-robot
    @zakim-robot
    May 25 19:06
    [scottohara] here’s a codepen of my ‘custom’ native radio/checkbox code - https://codepen.io/scottohara/pen/xdBeOE
  32. [scottohara] and when i say ‘my’ i mean, on par with just about any other accessibility focused version that exists out there
  33. [karlgroves] nonononononononononono you need to replace it entirely with javascript and 15 nested divs
  34. [scottohara] well…. if you say so
  35. [scottohara] :(
  36. [karlgroves] And make them select only with the click event
  37. [scottohara] I HAVE SO MUCH TO LEARN
  38. [karlgroves] Actually, I’m stealing the hell out of this. ;)
  39. [tessenate] Yeah, that’s essentially what we’re doing right now. We’re using bootstrap’s sr-only class to hide the default inputs, but apparently it doesn’t work well with Google Talkback (it doesn’t show the green rectangle indicating focus).
  40. [scottohara] oh….i see what you did there
  41. [cmegown] i'll throw my own pen into the mix too i guess: https://codepen.io/cmegown/pen/GNMrbe
  42. zakim-robot
    @zakim-robot
    May 25 19:11
    [cmegown] like @backwardok said though the real pinch here is that you have to manually add a focus style to the custom radio button/checkbox
  43. [scottohara] mine is missing :disabled / [disabled] good one there @cmegown
  44. [scottohara] and updated =D
  45. [cmegown] well on that note then here's a very similar one for checkboxes that needs a checked state, a disabled state, and a checked and disabled state: https://codepen.io/cmegown/pen/LbzyLV
  46. [seankeegan] We have a few developers using the following. I’m usually not a fan of implicit labeling, but this has worked - https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
  47. zakim-robot
    @zakim-robot
    May 25 19:20
    [cmegown] @seankeegan just out of curiosity what are you reasons for not liking implicit labeling? i may or may not be writing something about this topic and your opinion would be really interesting
  48. zakim-robot
    @zakim-robot
    May 25 19:29

    [karlgroves] I’m going to agree with what sean is about to say.

    But then I’m going to say I like to use explicit implicit labels. I like to use the <label> as a wrapper but still give it an explicit association with for & id

  49. [seankeegan] @cmegown issue has more to do with training and working with devs who are learning accessibility. In showing label options, the preference is to go with implicit solution, but then I find code where all sorts of things are wrapped in <label>, but not the actual input elements.
  50. [karlgroves] expected sean to get into esoteric description of historical lack of good support for implicit labels
  51. [seankeegan] Also found that explicit labels tended work better with speech recogntion, although, have not tested in past year. May have changed.
  52. [scottohara] i’ve gotten into the habit of explicit/implicit labels. i think it’s actually your blog post, @karlgroves that put me on said path.
  53. [seankeegan] It’s not that implicit is bad, but prefer explicit as I feel it is more robust given past AT implementations and support. Perhaps I am grumpy old man with these newfangled technologies. I also yell at clouds.
  54. [scottohara] since we’re stealing from each other n’ all :)
  55. zakim-robot
    @zakim-robot
    May 25 19:35
    [scottohara] ain’t nothing wrong with that, sean. sometimes they rain on parades…they should be scolded
  56. [karlgroves] Who doesn’t appreciate a good belt & suspenders?
  57. [scottohara] kids these days?
  58. [scottohara] unless that’s in style now.
  59. [karlgroves]
    the it thing these days
  60. [scottohara] in which case, i’d think it’d come down to the brand of said belt ans suspenders to determine their appreciation
  61. zakim-robot
    @zakim-robot
    May 25 19:40
    [karlgroves] giphy lets me down again. :(
  62. [scottohara] ha
  63. [karlgroves] https://www.youtube.com/watch?v=LV0wTtiJygY

  64. [karlgroves] Text transcript: Grandpa simpson speaking to Homer and his friend

    “I used to be with it, but then they changed what ‘it’ was, and now what I’m with isn’t it. And what’s ‘it’ seems weird and scary to me. And it’ll happen to you”

  65. zakim-robot
    @zakim-robot
    May 25 19:53
    [cmegown] http://i.imgur.com/91sn32Q.jpg
  66. [seankeegan] The Simpsons. So prophetic.
  67. [cmegown] simpsons did it!
  68. powrsurg
    @powrsurg
    May 25 19:55
    I really do love the old man yells at cloud gag.
  69. I've referenced it frequently when complaining about AWS, or not understanding my co-worker with his flat brimmed hat and grills for his teeth.