Archive index

A11y Slackers Gitter Channel Archive 9th of September 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 09 00:06
    [michiel] StommePoes: I just gave away a bottle of Nikka. But I'll try to get some for RED.
  2. [michiel] I'm guessing I should bring some given that is how it all started.
  3. [michiel] waves at jnurthen
  4. [michiel] You're at TPAC too right?
  5. James Nurthen
    @jnurthen
    Sep 09 00:45
    I will be at TPAC yes.
  6. Are you bringing whisky?
  7. zakim-robot
    @zakim-robot
    Sep 09 06:07
    [muan] :wave: hi all, has anyone seen any discussions around datetime links? Like the ones github has, which actually serve as anchor link to a specific comment. I’m looking to improve them. In my opinion those should not be links at all and we should have something more obvious that reads "link to comment”. If not that at the very least they should be labelled as "link to comment”, but that'd hinder the datetime info. :\
  8. luis garcia
    @garcialo
    Sep 09 06:15
    So they shouldn't be links, but they should be announced as links?
  9. zakim-robot
    @zakim-robot
    Sep 09 06:30
    [caesar] Are you saying that the link text doesn't communicate the purpose of the link? It's no different for sighted users though...
  10. zakim-robot
    @zakim-robot
    Sep 09 06:36
    [muan] sorry, I meant that I am thinking that the time info should just be text and not links, currently they are links. But if they were to stay as links they should be labelled correctly.
  11. [muan] It is indeed confusing for sighted user as well
  12. [muan] I was wondering if labelling them like this: <a href=“#comment-123” aria-label=“Link to this comment”>10:24am 10/10/2016</a> makes it worse
  13. luis garcia
    @garcialo
    Sep 09 06:41
    Well they're already links so the label doesn't need to mention it
  14. I don't think there is actually an accessibility issue here
  15. It could be more obvious both visually and programmatically. Not sure how though
  16. zakim-robot
    @zakim-robot
    Sep 09 06:43
    [muan] > I don't think there is actually an accessibility issue here
    Do you mean that it doesn’t even need the label?
  17. [caesar] "Link to" duplicates screen reader functionality
  18. [caesar] It will already by announced as a link
  19. [muan] Thanks, I get that, so does labelling them as “this comment” works? (they are not labelled right now)
  20. luis garcia
    @garcialo
    Sep 09 06:46
    They have the link text
  21. zakim-robot
    @zakim-robot
    Sep 09 06:47
    [muan] But the link text isn't communicating what the link is for
  22. luis garcia
    @garcialo
    Sep 09 06:47
    True, but it doesn't do that visually either.
  23. zakim-robot
    @zakim-robot
    Sep 09 06:48
    [caesar] Your general "beef" seems to be that it doesn't say it's a link to a comment, and you would like to make it explicit. In that case, if you have any say in it, why not just add "comment added <date>" to the actual link text and be done with it?
  24. luis garcia
    @garcialo
    Sep 09 06:48
    I'm in favor of it being more obvious for both. I read if just adding extra text for screen reader users only why it just change the link text so you're also doing it visually
  25. 🙂
  26. zakim-robot
    @zakim-robot
    Sep 09 06:48
    [caesar] LOL @garcialo sounds like we're on the same page
  27. luis garcia
    @garcialo
    Sep 09 06:49
    The previously mangled text brought to you by autocorrect
  28. zakim-robot
    @zakim-robot
    Sep 09 06:49
    [muan] I think we are all on the same page.. perhaps I didn’t explain it well lol.
  29. luis garcia
    @garcialo
    Sep 09 06:51
    And I believe even under AAA the ambiguous text is allowed as an exception
  30. But I'd have to double check to be sure. Perhaps you could check for me 😛
  31. zakim-robot
    @zakim-robot
    Sep 09 06:52
    [muan] > why not just add "comment added <date>" to the actual link text and be done with it?
    @caesar do you think that’s enough to communicate that it is an anchor link to this comment?
  32. [caesar] 2.4.9 - "except where the purpose of the link would be ambiguous to users in general."
  33. [caesar] Yes. In my opinion, a link text that said "comment added <date>" would suggest that the target of the link would be that comment. However, in context, if you are seeing that link attached to a comment, you'd still wonder what the point of it was.
  34. [caesar] Do you open the link to a page containing only that comment?
  35. [caesar] And so down the rabbit hole we go
  36. [muan] ha, I think the general usage of such link is to share the link to someone else who’s looking for that comment
  37. zakim-robot
    @zakim-robot
    Sep 09 06:59
    [muan] Thanks though, I agree that adding "comment added” to the timestamp should be a decent improvement
  38. [caesar] OK, it's beer o'clock here. Have a good weekend, all!
  39. [muan] :wave:
  40. luis garcia
    @garcialo
    Sep 09 07:00
    Only midnight here
  41. Fiona Holder
    @FionaHolder
    Sep 09 10:13
    morning!
  42. zakim-robot
    @zakim-robot
    Sep 09 10:17
    [michiel] Good morning :)
  43. Mallory
    @StommePoes
    Sep 09 15:00
    @michiel @jnurthen torgo is also going to be at TPAC and he'd like to talk more to a11y peeps
  44. @muan one thing to point out with that code you posted... with that aria-label, if the AT follows the spec, the actual datetime itself would be lost
  45. meaning there'd be a bunch of links called "link to comment" with no differentiation
  46. aria-label replaces whatever original label a thing may have had, rather than adds to it.
  47. James Nurthen
    @jnurthen
    Sep 09 15:10
    @muan Don't do this <a href=“#comment-123” aria-label=“Link to this comment”>10:24am 10/10/2016</a>
  48. The aria-label will override the time so a screen reader user will not hear the time (note - they may when reading through using the virtual buffer but they won't when tabbing). This would be super confusing.
  49. @stephenwyattbush ping me at james at nurthen dot com if you want to chat about a11y in a large org - I've been doing that for a while
  50. zakim-robot
    @zakim-robot
    Sep 09 15:17
    [newtron] anybody have any info about accessible colour pickers? are browser/system defaults (that you’d get with input type=“color” any good? what should i look for in an accessible colour picker?
  51. zakim-robot
    @zakim-robot
    Sep 09 15:34

    [muan] Yeah am I just super unclear lol that’s what I meant by

    they should be labelled as "link to comment”, but that'd hinder the datetime info. :\

  52. [muan] I know that it doesn’t add to it :)
  53. James Nurthen
    @jnurthen
    Sep 09 15:40
    ok
  54. i'm with @garcialo in that I don't think it is any more of a problem for a screen reader user than it is visually
  55. zakim-robot
    @zakim-robot
    Sep 09 15:41
    [garcialo] “i’m with @garcialo” -@jnurthen <3
  56. James Nurthen
    @jnurthen
    Sep 09 15:41
    you forgot the ellipsis in your quote
  57. zakim-robot
    @zakim-robot
    Sep 09 15:44
    [garcialo] oh, I didn’t forget
  58. [garcialo] I omitted
  59. [garcialo] huge difference
  60. zakim-robot
    @zakim-robot
    Sep 09 15:57
    [marcysutton] Happy friday slackers (coffee emoji)
  61. Job van Achterberg
    @jkva
    Sep 09 16:00
    Happy Friday!
  62. My inclusive design talk is online, so I can look forward to captioning an hour of very nervous rambling :P https://t.co/ssu62qxMJ6
  63. zakim-robot
    @zakim-robot
    Sep 09 16:06
    [car] @marcysutton That link takes me to Job van Achterberg's talk?
  64. [marcysutton] You mean jkva?
  65. [car] Ok, sure. ;)
  66. [car] Ok, it's Friday. I read @jkva's Slack post as part of yours. :$
  67. [marcysutton] I did launch a new egghead video yesterday though: https://egghead.io/lessons/html-5-intro-to-aria
  68. James Nurthen
    @jnurthen
    Sep 09 16:08
    @jkva I've only looked at a few minutes but that looks like an awesome talk. I'll watch it in full sometime
  69. zakim-robot
    @zakim-robot
    Sep 09 16:09
    [marcysutton] Yay Job, I'll check your talk out, thanks for sharing!
  70. [car] I'll check it out, too. I'm quite sure it's awesome. ;)
  71. [marcysutton] thanks =D i waited years to put out something like that, i wanted to make sure it was accurate
  72. zakim-robot
    @zakim-robot
    Sep 09 18:55
    [teleject] Hi, everyone— general question I’d like to ask: From our survey from the Accessibility Summit, one question we received was how to convince higher ups/stake holders about the importance of accessibility into workflow.
  73. [teleject] Not sure how to best address that question—other than there’s no quick solution.
  74. James Nurthen
    @jnurthen
    Sep 09 18:57
    yep.... very situational
  75. zakim-robot
    @zakim-robot
    Sep 09 18:59
    [karlgroves] Facts.
  76. [stephenwyattbush] This won’t apply to all situations, but I was able to find a lawyer within my company who understood the importance of accessibility, get their support, and use that as leverage for allocating a11y resources
  77. James Nurthen
    @jnurthen
    Sep 09 19:02
    there is no doubt that it is a vital step but how to do it I'm sure differs based on personalities etc. Once we got a statement from our then CFO - now CEO - stating that it was important for the company - convincing people became a lot easier.
  78. powrsurg
    @powrsurg
    Sep 09 19:15
    What a11y concerns should we have for the Web Notifications API?
  79. And is there a way to make them not fade right away ... and ideally debug them?
  80. zakim-robot
    @zakim-robot
    Sep 09 19:32
    [car] @teleject There's always a trade-off between "the carrot and the stick", and while it's nicer to offer "carrots" (stories about real users being helped by more accessible sites)... I find that "sticks" are sometimes more effective with higher-ups/management. ;) I think the best "stick" out there is @karlgroves post on Web Accessibility litigation: http://www.karlgroves.com/2016/01/18/what-to-do-when-you-get-sued-revisited/
  81. [karlgroves] Thanks for the kind words, @car
    There’s also this post: http://blog.tenon.io/web-accessibility-in-high-risk-segments/
  82. [karlgroves] I love the flow chart that shows that once the litigation process starts, there’s only one outcome: “Make your shit accessible"
  83. [karlgroves] I mean, we all know that it isn’t necessarily that clean of an outcome but I’ve seen enough clients go through this process that it would have been far less painful if they’d just gotten it in their heads to make things better
  84. zakim-robot
    @zakim-robot
    Sep 09 19:38
    [car] @karlgroves Nice! I hadn't seen that one - it's great! The flowchart is awesome. I'm going to print it and tack it up in my cube at work. ;) Also going to bookmark that link. :)
  85. [karlgroves] thumbsup emoji
  86. zakim-robot
    @zakim-robot
    Sep 09 19:50
    [car] @jkva Enjoyed your talk! Nice ToDo list example. Yep, captions will definitely help with those moments when you forgot to pick up the microphone. :stuck_out_tongue_closed_eyes:
  87. [car] @marcysutton Enjoyed your mini lessons! I only had time to check out 3 of them. I'll watch more soon!
    Question about the Icon Button lesson - if you put aria-label="Help!" on the 2nd button (the one with <i>), could you then avoid adding the "visuallyhidden" span? Would that work everywhere?
    Thanks for sharing!
  88. Job van Achterberg
    @jkva
    Sep 09 19:51
    Cheers @car :) thanks for watching!
  89. zakim-robot
    @zakim-robot
    Sep 09 19:54
    [marcysutton] @car either way would work...if I remember correctly I forgot to introduce aria-label in the first lesson so I used it in the second one to show how to do it.
  90. [car] Ah, ok. Hadn't watched lesson 2 yet (I skipped to the latest, and the one on structuring your page).
  91. [car] I've been trying to avoid "visuallyhidden" lately wherever possible. It always felt "hacky" to me. ;)
  92. zakim-robot
    @zakim-robot
    Sep 09 20:02
    [marcysutton] The span method is pretty reliable but it uses a child node, which used to be a problem in Voiceover when I got started with mobile web dev but seems fine now. aria-label has pretty good support too. If I had more time I would run some tests on it to see which one wins
  93. [marcysutton] But in all honesty for the egghead readership either method would be better than nothing
  94. [car] Ah, got it. :)
  95. Mallory
    @StommePoes
    Sep 09 20:07
    Trying to convince people in another team that, for a chunk of content, having the line with the ISBN and a 'student price: $0.00' as the heading is stupid, dumb, terrible, zomgwtfbbq, etc.
  96. zakim-robot
    @zakim-robot
    Sep 09 20:07
    [car] aria-label method probably takes a few less bytes, it's slightly cleaner to read and understand, and it doesn't rely on css..... ;)
  97. Mallory
    @StommePoes
    Sep 09 20:08
    I can't imagine who thought that was a good idea. I say we force the sighties to find things by ISBN too by making that text large and in the current place of what should be the heading-- the content name.
  98. Every place I use aria-label, I ask "could I click that with Dragon?"
  99. "would I grok that a month after a serious car accident?"
  100. zakim-robot
    @zakim-robot
    Sep 09 20:09
    [car] @stommepoes As a heading? yuk.
  101. Mallory
    @StommePoes
    Sep 09 20:09
    "would I be freaked out with my magnifier to hear that text when I think I'm on that item?"
  102. I know, I lost some hair just looking at it.
  103. ISBNs are cute, but nobody except those with special powers (or a program) can scan content by that
  104. zakim-robot
    @zakim-robot
    Sep 09 20:10
    [car] Yep, but they're a great way to google a book
  105. Mallory
    @StommePoes
    Sep 09 20:10
    Yeah
  106. zakim-robot
    @zakim-robot
    Sep 09 20:10
    [car] So are you saying you would use a visuallyhidden span instead of aria-label?
  107. Mallory
    @StommePoes
    Sep 09 20:11
    No, I'm not saying that.
  108. zakim-robot
    @zakim-robot
    Sep 09 20:11
    [car] phew
  109. Mallory
    @StommePoes
    Sep 09 20:11
    Unless I knew I had to support something with no aria support
  110. then I would
  111. zakim-robot
    @zakim-robot
    Sep 09 20:11
    [car] I would have had to slap you with a fish
  112. Mallory
    @StommePoes
    Sep 09 20:11
    or if I knew I had the option of using CSS to optionally show that text
  113. But it's more like, I'm seeing aria-label (and visually hidden text) popping up more and more
  114. which is a problem for everyone who doesn't fit in the extremes of "sighted mouse user" and "completely blind screen reader user"
  115. People should treat them really carefully is all.
  116. and because they're invisible on the page, it's easy for devs to miss
  117. unless they're using something like Bryan's Vizaria
  118. zakim-robot
    @zakim-robot
    Sep 09 20:12
    [car] Right. But Marcy's example had a lovely visual icon. Just no label.
  119. [car] So it was added info.
  120. Mallory
    @StommePoes
    Sep 09 20:13
    Was it a sensible visual icon?
  121. oh was the icon next to other text?
  122. I rather like those
  123. like the warning triangle next to warning text
  124. zakim-robot
    @zakim-robot
    Sep 09 20:13
    [car] Yep. Great big honkin' question mark icon for "Help".
  125. Mallory
    @StommePoes
    Sep 09 20:13
    GREEK SEMICOLON FTW
  126. I have a personal list of acceptable icons.. it has maybe 3 pictures
  127. the loop (for search), the ? for help, the house for home.
  128. zakim-robot
    @zakim-robot
    Sep 09 20:14
    [car] Not next to any text. Just out there sitting on a button all by itself. :)
  129. Mallory
    @StommePoes
    Sep 09 20:14
    anything else, and you're hoping I learned it somewhere.
  130. Oh and the X for close.
  131. Hit the TIMES button to close this dialog
  132. zakim-robot
    @zakim-robot
    Sep 09 20:14
    [car] Your list is longer than you thought...
  133. Mallory
    @StommePoes
    Sep 09 20:14
    Hit the MULTIPLICATION button to close this dialog
  134. Well I have a lot of trouble with icons
  135. so I'm always hating on them
  136. for Discourse I had in my Opera 12 a personal stylesheet that took the class names or title attrs and displayed them next to the buttons
  137. zakim-robot
    @zakim-robot
    Sep 09 20:15
    [car] Yeah - I get that. I NEED tooltips to get some of them. I simply could not guess.
  138. Mallory
    @StommePoes
    Sep 09 20:15
    I'm always ducking into the devtools in hopes of a class name that gives me some vague idea WTF that button or thing does
  139. zakim-robot
    @zakim-robot
    Sep 09 20:15
    [car] Same same
  140. Mallory
    @StommePoes
    Sep 09 20:15
    The worst, absolute worst site in recent memory was the icomoon app site
  141. ZOMG that was hell
  142. terrible interface
  143. zakim-robot
    @zakim-robot
    Sep 09 20:15
    [car] <chuckle>
  144. Mallory
    @StommePoes
    Sep 09 20:16
    Describing it in our docs, I use the words "thingie" and "squiggley" a lot
  145. zakim-robot
    @zakim-robot
    Sep 09 20:16
    [car] Don't they, like, sell icons or something?
  146. Mallory
    @StommePoes
    Sep 09 20:16
    They have a font creator
  147. zakim-robot
    @zakim-robot
    Sep 09 20:16
    [car] Ah. So that folks can use font glyphs as icons. ;)
  148. Mallory
    @StommePoes
    Sep 09 20:16
    you are supposed to click on the icons you want (I found NO option to search by name so it's visually playing that game where you match little pictures? ZOMG I suck at that game)
  149. and then you hit a few other iconny buttons and when you're done you'll get a batch of files with the icons you want as fonts
  150. like, an eot, svg, ttf, woff, etc
  151. yeah
  152. zakim-robot
    @zakim-robot
    Sep 09 20:17
    [car] Present for you: http://www.kidsmathgamesonline.com/memory/picturematching.html
  153. Mallory
    @StommePoes
    Sep 09 20:17
    I'm debating whether we want to use fonts or SVGs for the pictures of form controls we have to do. I'm leaning towards SVGs but the steaming pile of crap I have to add to SVGs to make them work cross browser and AT, I hate
  154. zakim-robot
    @zakim-robot
    Sep 09 20:18
    [car] svg's
  155. Mallory
    @StommePoes
    Sep 09 20:18
    I can do that game, because there's only ever a few rows/cols
  156. on iconmoon, it's like FULL PAGES
  157. ug
  158. zakim-robot
    @zakim-robot
    Sep 09 20:18
    [car] generate the steaming pile of crap in js ;)
  159. Mallory
    @StommePoes
    Sep 09 20:18
    https://icomoon.io/app/#/select
  160. I FOUND! NOT KIDDING! cushions of the pile of poo emoji at the hardware store yesterday
  161. I should buy one to take pics and mail it to someone
  162. So on that icomoon there's somewhere a button called add fonts... add font-awesome for example (what we use) and that list that appears is longCatIsLong
  163. zakim-robot
    @zakim-robot
    Sep 09 20:20
    [car] Holy Mackerel! I totally see what you mean about the icomoon ico's page. Yuk.
  164. Mallory
    @StommePoes
    Sep 09 20:21
    And look at the INTERFACE
  165. zomg
  166. inhale tiny glass slivers for fun
  167. zakim-robot
    @zakim-robot
    Sep 09 20:22
    [car] Wow. :hankey:
  168. Mallory
    @StommePoes
    Sep 09 20:23
    the "Copy Selection To Set" option under the multiple lines thingie doesn't do what you think it does either. Usually your own icons you've imported are "selected" by default. Then you think "I'll scroll down and click on the ones I want to add" so tyou do and then you're like "Oh I have to choose Copy Selection To Set" BUT NO it ALSO ADDS the ones you ALREADY HAVE to your own set
  169. it touches itself
  170. that's a no-no.
  171. who is seriously looking to have font files with duplicates? nobody
  172. That ran me in circles a few times
  173. and because I'm Not Very Smart it took several tries for me to figure it all out
  174. zakim-robot
    @zakim-robot
    Sep 09 20:24
    [car] Go svg's. :)
  175. Mallory
    @StommePoes
    Sep 09 20:24
    in the meantime I could have been doing work.
  176. zakim-robot
    @zakim-robot
    Sep 09 20:24
    [car] Yep
  177. Mallory
    @StommePoes
    Sep 09 20:24
    Well, but then I'd love to be able to have an offscreen svg somewhere and call them where needed with <use> but we couldn't get the titles and descs to read out on those
  178. so we neede the actual code every single time someone wants an icon
  179. and the designers here luuuuuuv ivons
  180. I think they wear only patterned shirts just to see more icons every time they look down
  181. "What's this? A bit of text?? Good lord Parker. That needs an icon!"
  182. "Smashing, Samson, smashing good idea. I'll add one straight away."
  183. fistbump
  184. zakim-robot
    @zakim-robot
    Sep 09 20:30
    [car] Hee hee! It's the "minimalist" design thing that gets me. Strip off all the focus indicators - who needs 'em? And all actionable things can be "faint grey" while disabled things are "slightly fainter grey" and selected things are "faint grey with a teensy bit of blue".
  185. [marcysutton] Tiny, obscure icons :|
  186. [marcysutton] That only show on hover/focus
  187. [marcysutton] WORST
  188. [car] Ohhhh - yukka.
  189. [marcysutton] I have fought those battles and lost
  190. [car] :(
  191. zakim-robot
    @zakim-robot
    Sep 09 22:58
    [marcysutton] @jkva your talk was awesome! Great job (no pun intended)
  192. Job van Achterberg
    @jkva
    Sep 09 23:00
    Heh, thanks @marcy =)
  193. zakim-robot
    @zakim-robot
    Sep 09 23:06
    [michiel] Is the full talk posted somewhere?
  194. [michiel] Sorry if I missed it, have been busy annoying Heydon./
  195. zakim-robot
    @zakim-robot
    Sep 09 23:14
    [jiatyan] Does anyone know if iOS VoiveOver works with <select><optgroup> http://webaim.org/techniques/forms/controls#select <-- second example. I don't know how to control the picker.