Archive index

A11y Slackers Gitter Channel Archive 22nd of September 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Peter Krautzberger
    @pkra
    Sep 22 06:48
    Good morning, slackers! :coffee:
  2. Job van Achterberg
    @jkva
    Sep 22 07:13
    \o/
  3. Peter Krautzberger
    @pkra
    Sep 22 07:26
    \o/ @jkva
  4. I'm wondering what people think about using a checkbox to toggle visibility of an adjacent span (using CSS).
  5. Job van Achterberg
    @jkva
    Sep 22 07:29
    @pkra you could, and use aria-expanded & aria-owns to indicate that, no>
  6. (even given the problems with aria-owns support)
  7. Peter Krautzberger
    @pkra
    Sep 22 07:30
    cool. I wasn't aware of those.
  8. Job van Achterberg
    @jkva
    Sep 22 07:30
    https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded
  9. Peter Krautzberger
    @pkra
    Sep 22 07:31
    From a quick test, it seemed like screenreaders would read out the content anyway when toggled.
  10. Job van Achterberg
    @jkva
    Sep 22 07:31
    Gah, I mean aria-controls, not owns, sorry
  11. pkra: if you use display:none for toggling, they still read it out?
  12. Peter Krautzberger
    @pkra
    Sep 22 07:31
    no no.
  13. zakim-robot
    @zakim-robot
    Sep 22 07:32
    [michiel] No no no no, no no there's no limit.
  14. Peter Krautzberger
    @pkra
    Sep 22 07:32
    I mean, when I reveal, the AT would read out the entire label (which wraps input + span).
  15. michiel mtha mtha mtha mtha. no no ...
  16. Job van Achterberg
    @jkva
    Sep 22 07:33
    Can you use the label separately and associate with a for=? That's overall better supported iirc
  17. zakim-robot
    @zakim-robot
    Sep 22 07:33
    [michiel] Mtha?
  18. Job van Achterberg
    @jkva
    Sep 22 07:33
    beat noise?
  19. Peter Krautzberger
    @pkra
    Sep 22 07:33
    @jkva gets me.
  20. zakim-robot
    @zakim-robot
    Sep 22 07:33
    [michiel] Ahh
  21. Job van Achterberg
    @jkva
    Sep 22 07:33
    ntsh
  22. zakim-robot
    @zakim-robot
    Sep 22 07:33
    [michiel] What do I get?
  23. Peter Krautzberger
    @pkra
    Sep 22 07:34
    not having to meet me?
  24. :(
  25. zakim-robot
    @zakim-robot
    Sep 22 07:34
    [michiel] :(
  26. Job van Achterberg
    @jkva
    Sep 22 07:34
    :)
  27. zakim-robot
    @zakim-robot
    Sep 22 07:34
    [michiel] I'm still here today.
  28. Job van Achterberg
    @jkva
    Sep 22 07:34
    Sorry, don't want the room to be all sad
  29. zakim-robot
    @zakim-robot
    Sep 22 07:35
    [michiel] gives flowers to jkva
  30. Peter Krautzberger
    @pkra
    Sep 22 07:35
    @jvka I don't see how to style it sensibly if I'm not wrapping everything in the label.
  31. :( :( :(
  32. which is a sad reason, I know.
  33. http://s.codepen.io/pkra/debug/LRRKJv
  34. (just a pen to play)
  35. Job van Achterberg
    @jkva
    Sep 22 07:36
    @pkra can you give me the edit link?
  36. Peter Krautzberger
    @pkra
    Sep 22 07:36
    http://codepen.io/pkra/pen/LRRKJv
  37. let's clean that up a bit...
  38. Job van Achterberg
    @jkva
    Sep 22 07:41
    Ah right, I see what you're saying
  39. Peter Krautzberger
    @pkra
    Sep 22 07:41
    what was I saying? :smile:
  40. (also: the realization that footnotes are terrible thing in general)
  41. Job van Achterberg
    @jkva
    Sep 22 07:43
    @pkra: I'd use a toggle button
  42. And style it appropriately
  43. Peter Krautzberger
    @pkra
    Sep 22 07:44
    you mean <button>?
  44. Job van Achterberg
    @jkva
    Sep 22 07:44
    And you can indicate it with aria-pressed to AT
  45. yes
  46. label it with Show footnote [N]
  47. well, aria-label
  48. or just 'footnote 1' in general, that's clear to everybody
  49. and easier to click with mouse or finger
  50. Peter Krautzberger
    @pkra
    Sep 22 07:45
    I was trying to avoid that (non-JS fallbacks).
  51. Job van Achterberg
    @jkva
    Sep 22 07:45
    you can still superscript it
  52. Peter Krautzberger
    @pkra
    Sep 22 07:45
    I wished I didn't have to superscript this ;-)
  53. jkva @jkva thinks
  54. Job van Achterberg
    @jkva
    Sep 22 07:46
    Either that or your in-page anchor with :target selector is a non-js alternative
  55. Peter Krautzberger
    @pkra
    Sep 22 07:46
    Ah, now we go down the rabbit hole -- that has other repercussions due to the surrounding technology in this project...
  56. zakim-robot
    @zakim-robot
    Sep 22 07:47
    [michiel] pkra: you can work around it with <label for=job></> <input type=checkbox id=job/><span>freelance firefighter</span>
  57. Peter Krautzberger
    @pkra
    Sep 22 07:47
    Do you have a link for the problems around "input inside label"?
  58. zakim-robot
    @zakim-robot
    Sep 22 07:47
    [michiel] Input#job:checked + span { display: awesome }
  59. [michiel] I mean, block.
  60. Peter Krautzberger
    @pkra
    Sep 22 07:48
    you mean display:michiel?
  61. zakim-robot
    @zakim-robot
    Sep 22 07:48
    [michiel] 8)
  62. Peter Krautzberger
    @pkra
    Sep 22 07:49
    @michiel I don't know how to visually style that well :(
  63. Job van Achterberg
    @jkva
    Sep 22 07:50
    @pkra I remember @stevefaulkner writing an article on that
  64. Having trouble finding it
  65. zakim-robot
    @zakim-robot
    Sep 22 07:50
    [michiel] What is the problem with styling it pkra?
  66. Peter Krautzberger
    @pkra
    Sep 22 07:51
    I don't want to show a checkbox and I need to provide a target area to toggle it.
  67. I picked this approach from wtfforms (though I also filed mdo/wtf-forms#70 immediately ;-) )
  68. zakim-robot
    @zakim-robot
    Sep 22 07:51
    [michiel] That is the label.
  69. [michiel] You can click the label.
  70. [michiel] Maybe you can do an inline details/summary?
  71. Job van Achterberg
    @jkva
    Sep 22 07:52
    But it also shows the checkbox. Is that what you don't like @pkra? I mean I agree - it makes it look less like a footnote
  72. Peter Krautzberger
    @pkra
    Sep 22 07:52
    @michiel hehe. I need something that works
  73. Job van Achterberg
    @jkva
    Sep 22 07:53
    Otherwise :hover, but that's also a problem
  74. Peter Krautzberger
    @pkra
    Sep 22 07:53
    I added a third example to the pen.
  75. where I split things up.
  76. but now I can't trigger the checkbox.
  77. zakim-robot
    @zakim-robot
    Sep 22 07:53
    [michiel] Button + ARIA expanded
  78. Peter Krautzberger
    @pkra
    Sep 22 07:53
    (by mouse)
  79. Job van Achterberg
    @jkva
    Sep 22 07:53
    But that requires JS
  80. we're trying to not use JS
  81. Peter Krautzberger
    @pkra
    Sep 22 07:53
    @michiel just as jkva said.
  82. I was hoping for a non-JS solution.
  83. Job van Achterberg
    @jkva
    Sep 22 07:53
    So, progressive enhancement
  84. 1) link with in-page anchor to the actual footnote
  85. 2) enhance link into toggle button with JS
  86. Peter Krautzberger
    @pkra
    Sep 22 07:54
    Right.
  87. Job van Achterberg
    @jkva
    Sep 22 07:54
    And have the footnote link have a link [back to reference] for easy nav
  88. so you can easily go to the footnote and back
  89. Everyone wins
  90. Peter Krautzberger
    @pkra
    Sep 22 07:55
    Do you have some references for why this approach is bad though?
  91. Job van Achterberg
    @jkva
    Sep 22 07:55
    Which approach?
  92. Peter Krautzberger
    @pkra
    Sep 22 07:55
    the input+span inside label.
  93. Job van Achterberg
    @jkva
    Sep 22 07:55
    I'm trying to find steve's article on it
  94. Peter Krautzberger
    @pkra
    Sep 22 07:55
    ah.
  95. thanks.
  96. Job van Achterberg
    @jkva
    Sep 22 07:55
    for= is better supported by browsers iirc
  97. Peter Krautzberger
    @pkra
    Sep 22 07:56
    http://www.html5accessibility.com/tests/form-labels.html
  98. ?
  99. Job van Achterberg
    @jkva
    Sep 22 07:56
    @pkra https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/
  100. 2011 tho
  101. Peter Krautzberger
    @pkra
    Sep 22 07:56
    I was about to say that ;-)
  102. Job van Achterberg
    @jkva
    Sep 22 07:56
    But I also recall @karlgroves using wrapped inputs because of some AT compatibility
  103. Peter Krautzberger
    @pkra
    Sep 22 07:57
    https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/
  104. is the article for my previous link
  105. Job van Achterberg
    @jkva
    Sep 22 07:57
    Isn't hat the same one?
  106. I ran some tests and found that a control labeled using for and id without placing the control inside the label element is by far the most robust method. I also found use of aria-labelledby is more robust across browsers and AT than the standard HTML method of placing a control inside the label.
  107. Peter Krautzberger
    @pkra
    Sep 22 07:58
    indeed.
  108. Job van Achterberg
    @jkva
    Sep 22 07:58
    I mean, the spec says you can do both
  109. Peter Krautzberger
    @pkra
    Sep 22 07:58
    sorry :D
  110. Job van Achterberg
    @jkva
    Sep 22 07:58
    Nah - it's a good point
  111. Peter Krautzberger
    @pkra
    Sep 22 07:58
    Right. that was the first thing that surprised me -- it was valid HTML :)
  112. Job van Achterberg
    @jkva
    Sep 22 07:59
    "When in doubt, follow the spec. When the spec is ambiguous, do what @stevefaulkner says"
  113. Peter Krautzberger
    @pkra
    Sep 22 07:59
    "When from 2012, maybe run the test again"
  114. :)
  115. I mean IE9 for crying out loud.
  116. (heh, wasn't so long ago that IE9 was bliss)
  117. Job van Achterberg
    @jkva
    Sep 22 08:01
    @pkra I don't know what to tell you, honestly.
  118. Peter Krautzberger
    @pkra
    Sep 22 08:01
    I should test some more.
  119. Job van Achterberg
    @jkva
    Sep 22 08:01
    That's always smart
  120. Peter Krautzberger
    @pkra
    Sep 22 08:01
    And see how this behaves in real life.
  121. Will report back.
  122. Job van Achterberg
    @jkva
    Sep 22 08:01
    Thanks for the good discussion :)
  123. Peter Krautzberger
    @pkra
    Sep 22 08:01
    thanks for your time, @jkva, @michiel!
  124. Peter Krautzberger
    @pkra
    Sep 22 08:25
    Gah. One more question.
  125. opacity:0 hiding.
  126. ChromeVox ignores content with opacity:0 but I think no other AT. amiright?
  127. (and I think ChromeVox might lose the ability to detect opacity in v2 since they're moving out of the DOM)
  128. Job van Achterberg
    @jkva
    Sep 22 09:05
    @pkra not sure. What are you trying to accomplish?
  129. Peter Krautzberger
    @pkra
    Sep 22 09:05
    Accessibly hiding an input checkbox.
  130. I was using a 1px hack but FF and Safari ignore it.
  131. they still show the checkbox.
  132. The opacity:0 hack (e.g., mdo/wtfforms) works visually but ChromeVox then ignores the checkbox input.
  133. thus not accessibly hidden.
  134. Job van Achterberg
    @jkva
    Sep 22 09:07
    So you want to hide it visually but be still available to AT @pkra?
  135. Peter Krautzberger
    @pkra
    Sep 22 09:07
    AFAIK ChromeVox was the only AT that ignores opacity:0 content but I can't test thoroughly right now.
  136. Yup.
  137. To be clear: there's still something there.
  138. Job van Achterberg
    @jkva
    Sep 22 09:08
    have you tried this class: https://www.irccloud.com/pastebin/YFAPUuAj/
  139. Peter Krautzberger
    @pkra
    Sep 22 09:08
    It's just that you can't style checkboxe, right.
  140. Job van Achterberg
    @jkva
    Sep 22 09:08
    I've never tried using that on a checkbox tho
  141. Peter Krautzberger
    @pkra
    Sep 22 09:08
    I tried something similar.
  142. But I'll try that :)
  143. Job van Achterberg
    @jkva
    Sep 22 09:08
    Although I get kinda worried when I hear about controls being hidden
  144. Sounds hackish
  145. Also you'll have to take it out of the focus
  146. otherwise keyboard focus will focus on something that can't be seen
  147. Peter Krautzberger
    @pkra
    Sep 22 09:10
    Again, there's something there.
  148. and I'd like the hidden control to focus on the right area.
  149. Not my fault that browsers don't let us style checkboxes :(
  150. Job van Achterberg
    @jkva
    Sep 22 09:11
    Ah, that's what you mean
  151. Peter Krautzberger
    @pkra
    Sep 22 09:11
    But I'd rather use the native elements and controls.
  152. Job van Achterberg
    @jkva
    Sep 22 09:11
    You have something overlaying the hidden checkbox
  153. Peter Krautzberger
    @pkra
    Sep 22 09:11
    Yeah.
  154. Job van Achterberg
    @jkva
    Sep 22 09:11
    Ah, now I get it
  155. Peter Krautzberger
    @pkra
    Sep 22 09:11
    You'll allow it? ;-)
  156. Yay -- your accessibly-hiding css works better than mine.
  157. Thanks for that.
  158. Peter Krautzberger
    @pkra
    Sep 22 09:30
    Let me correct that. The CSS works but breaks the input control :(
  159. Job van Achterberg
    @jkva
    Sep 22 09:31
    I was wondering how well it'd apply.
  160. When I did something similar before (toggle switch) I used the opacity trick
  161. Peter Krautzberger
    @pkra
    Sep 22 09:31
    Wait a minute...
  162. (But yes, I think the opacity trick is probably better since ChromeVox should stop ignoring that)
  163. Ok. I had broken the input in another way -- but I also had misapplied your CSS example (and it gets ignored on an input on FF)
  164. Blargh.
  165. Job van Achterberg
    @jkva
    Sep 22 09:41
    Blargh indeed.
  166. Peter Krautzberger
    @pkra
    Sep 22 09:46
    Oh, and as to @michiel's suggestion -- I can't use summary/details either since I need something within p's.
  167. Peter Krautzberger
    @pkra
    Sep 22 10:07
    @stevefaulkner 's test needs an update, I think. VoiceOver+Safari seems to have deteriorated (duplicating in more cases)
  168. blergh. Safari does horrible visual things as well.
  169. Mallory
    @StommePoes
    Sep 22 10:15
    Ah, wish I was online earlier
  170. the hidden checkbox with opacity is an old trick
  171. didn't know Chromevox ignored it but then, who the hell uses chromevox? it's like worrying about fireeyes
  172. Opacity should be good to use for this, visible label is clickable (style it like anything you want) and then the :checked+thingie-to-show as michiel had should be great
  173. no JS
  174. it's what we all used when grafixerz wanted us to make "custom" checkboxes and radios-- opacity on the control and a background image (today would be an SVG so works no-images and Windows High-Contrast too) on the label.
  175. Peter Krautzberger
    @pkra
    Sep 22 10:18
    Hey @StommePoes !
  176. Who uses ChromeVox? ChromeOS is growing quickly in US education and thus I have clients worry about it.
  177. Mallory
    @StommePoes
    Sep 22 10:18
    Geen slimme!
  178. That's sad, chromevox was Google's original solution to not making Chrome and Mail and Docs etc work with real screen readers
  179. oh well
  180. Guess we should add that to our testing suite as well if it's popular in the US
  181. Peter Krautzberger
    @pkra
    Sep 22 10:19
    From what I've heard through the grapevine, ChromeVox 2 will be very different.
  182. More like regular screenreaders.
  183. Mallory
    @StommePoes
    Sep 22 10:19
    I don't know any blinks who use it, but then even the youngest is already out of school now
  184. Peter Krautzberger
    @pkra
    Sep 22 10:19
    (i.e. no DOM access)
  185. Mallory
    @StommePoes
    Sep 22 10:20
    Hm then it might work with Edge
  186. I read Serotek's whinge about how Edge doesn't allow DOM access
  187. Peter Krautzberger
    @pkra
    Sep 22 10:20
    Thanks for supporting my original solution though :)
  188. Mallory
    @StommePoes
    Sep 22 10:20
    Jamie said it was an issue too (not breaking, but prevents any hacks to work around author mistakes)
  189. Peter Krautzberger
    @pkra
    Sep 22 10:20
    But VO has declined from 2011, now voices doubles.
  190. Mallory
    @StommePoes
    Sep 22 10:20
    I didn't look at the Pen but the whole idea seems very doable
  191. Peter Krautzberger
    @pkra
    Sep 22 10:20
    NVDA has improved though.
  192. Mallory
    @StommePoes
    Sep 22 10:20
    Well, VO on iOS is good
  193. VO on OSX, ug
  194. Peter Krautzberger
    @pkra
    Sep 22 10:21
    that's good to hear.
  195. Yes, I meant OSX.
  196. Mallory
    @StommePoes
    Sep 22 10:21
    it's as if they moved all their good people to mobile
  197. Peter Krautzberger
    @pkra
    Sep 22 10:21
    hehe
  198. Alright.
  199. I have a green light then.
  200. Mallory
    @StommePoes
    Sep 22 10:21
    yeah people like Bram (who you'll meet at role-drinks) had to switch back to Windows for work
  201. Peter Krautzberger
    @pkra
    Sep 22 10:21
    I think.
  202. Mallory
    @StommePoes
    Sep 22 10:21
    Yeah, do they have a bug tracker, the Chromevox people?
  203. I think the opacity-hiding thing should be considered a bug.
  204. although... I'd have to see if the specs are explicit it what CSS the browser should remove from the tree
  205. Peter Krautzberger
    @pkra
    Sep 22 10:22
    I agree.
  206. But I think it will resolve itself if ChromeVox loses DOM access.
  207. :)
  208. Mallory
    @StommePoes
    Sep 22 10:22
    when's that coming out?
  209. Peter Krautzberger
    @pkra
    Sep 22 10:22
    IIRC v2 is already available in ChromeOS as a beta.
  210. Mallory
    @StommePoes
    Sep 22 10:23
    ok, so prolly soon
  211. Peter Krautzberger
    @pkra
    Sep 22 10:23
    I have no idea if they'll roll it out as an extension.
  212. since it's so different.
  213. Mallory
    @StommePoes
    Sep 22 10:23
    I'll have to ask my testing guy what he's seeing in the wild
  214. Peter Krautzberger
    @pkra
    Sep 22 10:23
    Again, all hear-say here.
  215. Mallory
    @StommePoes
    Sep 22 10:23
    I got a bunch of poewrpoints and guess what they're full of and need to "work with JAWS"??
  216. yup, mathitty math-math. Statistics, trig, calculus. Ug
  217. my math allergies... flaring up again
  218. Peter Krautzberger
    @pkra
    Sep 22 10:24
    hehe.
  219. Mallory
    @StommePoes
    Sep 22 10:24
    I think P should hire some mather to deal with all these vendors so I can go back to bitching about react
  220. Peter Krautzberger
    @pkra
    Sep 22 10:25
    uhm. not sure what's worse ;-)
  221. Mallory
    @StommePoes
    Sep 22 10:25
    geogebra now has... the ability to use Acer webcams to let students turn their hands around in front of the screen to rotate 3d graphs
  222. Peter Krautzberger
    @pkra
    Sep 22 10:25
    sweet.
  223. Mallory
    @StommePoes
    Sep 22 10:25
    math, I think. I have a tab open on my Win machine pointing to a NVDA bug where someone at P couldn't get NVDA to read some math (but Jamie could) and it's last touched Feb 2016
  224. https://www.geogebra.org/m/sMddBGMQ
  225. Peter Krautzberger
    @pkra
    Sep 22 10:26
    Where did I recently hear about a blind user realizing that non-blind people can't see a cube from all sides at the same time?
  226. Mallory
    @StommePoes
    Sep 22 10:26
    Maybe me
  227. I read that in the Godfrey paper
  228. Peter Krautzberger
    @pkra
    Sep 22 10:26
    Oh yeah. When we talked on hangouts.
  229. I've used that quite a few times recently.
  230. Mallory
    @StommePoes
    Sep 22 10:26
    yeah you want to peruse that paper? It's a great read
  231. Peter Krautzberger
    @pkra
    Sep 22 10:26
    Yes please!
  232. Mallory
    @StommePoes
    Sep 22 10:26
    from two blind statisticians
  233. Peter Krautzberger
    @pkra
    Sep 22 10:29
    freaky moment was to realize that Safari sometimes does not repaint properly when triggering the checkbox.
  234. Mallory
    @StommePoes
    Sep 22 10:30
    oh?
  235. Peter Krautzberger
    @pkra
    Sep 22 10:32
    in one situation, the revealed content overwrote what followed. In the other, when re-hiding, it looked like only the characters had been removed (leaving whitespace).
  236. switching from inline to inline-block seemed to fix it.
  237. Mallory
    @StommePoes
    Sep 22 10:34
    ug, safari is the new IE
  238. Peter Krautzberger
    @pkra
    Sep 22 10:34
    (Not as bad as a serious Chrome paint bug I ran into but that only happens on some OSX machines, including some testing services but not all)
  239. Mallory
    @StommePoes
    Sep 22 10:35
    bleh
  240. Peter Krautzberger
    @pkra
    Sep 22 10:37
    In a not-too complex setup, setting display:none on a few items left a different element partially invisible and inactive (no selection or links working) -- until you resized the window a tiny bit after which everything was fine.
  241. and if you hid that partially visible element, its size still influenced layout but if you brought it up again, it would still be inactive.
  242. :angry:
  243. anyway. Back to work.
  244. Thanks for your help, @StommePoes !
  245. Mallory
    @StommePoes
    Sep 22 10:41
    "macOS: in 10.12, vo-n brings up a VO menu of all on-screen alert/banner notifications. Vo-space on one to move to it." from @voTips
  246. Peter Krautzberger
    @pkra
    Sep 22 10:41
    @tomoes
  247. @StommePoes http://www.chromevox.com/next.html
  248. Mallory
    @StommePoes
    Sep 22 10:52

    Just saw this on the BBC blog about switching away from Flash:
    "Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."

    Tim Berners-Lee 1996

  249. The date looks suspicious though
  250. Peter Krautzberger
    @pkra
    Sep 22 10:57
    https://en.wikiquote.org/wiki/Tim_Berners-Lee
  251. Technology Review (July 1996)
  252. supposedly.
  253. Mallory
    @StommePoes
    Sep 22 11:00
    How many browsers were there in 1996?
  254. looks like 4 big ones
  255. Peter Krautzberger
    @pkra
    Sep 22 11:24
    Just like today then (in terms of engines). That's a little sad.
  256. Mallory
    @StommePoes
    Sep 22 11:32
    I don't want too many
  257. honestly, a handful is good
  258. zomg so someone twotted http://uinames.com/ and the interface is death but now I have the bug to send in a big fat PR
  259. too bad I have to work today :(
  260. zakim-robot
    @zakim-robot
    Sep 22 11:35

    [karlgroves] >uinames.com is a simple tool to generate names for use in designs and mockups. Made by Thom.

    OMG WHAT IS WRONG WITH “JOE SCHMOE”? WHY DO WE NEED A SITE FOR THIS

  261. Mallory
    @StommePoes
    Sep 22 11:42
    joe schoe is too damn short
  262. "Gyöngyösi Sebestyén Dos Santos", the Spanish-Hungarian who logged into your site but their name gets cut off because some american designed the thing :P
  263. Mallory
    @StommePoes
    Sep 22 12:49
    Question, I thought aria-labelledbys/describedbys couldn't be parents/children of the referrer?
  264. http://oaa-accessibility.org/examplep/combobox2/
  265. in this example, a grandparent element is being referenced as the aria-labelledby (instead of the sibling div with the actual label text in it)
  266. zakim-robot
    @zakim-robot
    Sep 22 13:01
    [karlgroves] Sure, why not
  267. [marcysutton] Isn't that how SVG title got mapped?
  268. Peter Krautzberger
    @pkra
    Sep 22 13:02
    also doing this for SVGs.
  269. Mallory
    @StommePoes
    Sep 22 13:02
    so how does the browser or AT know which text is the labelleing text?
  270. <div id="foo">Some text <div fakelabel> some more text</div> <input aria-labelledby="foo" .../> more random text and whatever else is in this div...<p>copyright bar</p></div>
  271. Peter Krautzberger
    @pkra
    Sep 22 13:09
    Oh I think I misunderstood you.
  272. but the link you posted only has siblings, no?
  273. Mallory
    @StommePoes
    Sep 22 13:12
    happens to.
  274. It seems obvious that we want the box with the label text to label stuff
  275. and not anything else
  276. so I thought for this reason that you couldn't just label yourself with yourself
  277. that you also couldn't
  278. zakim-robot
    @zakim-robot
    Sep 22 13:13
    [karlgroves] Yup. you can.
  279. Mallory
    @StommePoes
    Sep 22 13:13
    <a href="foo" aria-labelledby="bar"><some icon/><span sr-only id="bar">label</span></a>
  280. can it be both ways then?
  281. zakim-robot
    @zakim-robot
    Sep 22 13:14
    [karlgroves] yup
  282. [karlgroves] Wait. No
  283. Mallory
    @StommePoes
    Sep 22 13:14
    ok, just can point to ancestors but not descendents
  284. zakim-robot
    @zakim-robot
    Sep 22 13:14
    [karlgroves] The icon would be ignored
  285. Mallory
    @StommePoes
    Sep 22 13:14
    the icon should be ignored, it's a picture of god knows what
  286. zakim-robot
    @zakim-robot
    Sep 22 13:14
    [karlgroves] ok
  287. Mallory
    @StommePoes
    Sep 22 13:15
    but I saw something like that (except it made more sense) where something deep inside a link was trying to label it
  288. there was lots of stuff in the link I believe
  289. the author only wanted to have one part be the link text
  290. zakim-robot
    @zakim-robot
    Sep 22 13:50
    [michiel] thierryk: the thing you reference is 5 years old. Here is the most recent TR version: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
  291. [michiel] I’m not sure, but could be tab widget wasn’t around 5 years ago.
  292. Thierry Koblentz
    @thierryk
    Sep 22 14:35
    @MichielBijl yes, thanks, that one shows a new section: "Inherits into Roles" which Steve Faulkner mentioned to me yesterday. I think I need to update many of my a11y bookmarks :(
  293. zakim-robot
    @zakim-robot
    Sep 22 15:25
    [car] https://web-a11y.slack.com/archives/general/p1474539525001928
    In Canada, too. My son's high school just announced their new Chromebook Lending Library.
  294. [karlgroves] My daughter’s entire school has them
  295. zakim-robot
    @zakim-robot
    Sep 22 15:34
    [car] @StommePoes regarding the old "hidden checkbox with opacity" trick, how would you mark up this toggle switch for accessibility?
    http://www.w3schools.com/howto/howto_css_switch.asp
  296. [car] _(man, the examples on the w3schools howto site, while cool and all, seem to be mostly inaccessible. And lots of devs go there to get ideas. Maybe I'll try to find their "suggestion box" and mention that they are leading so many devs astray...)_
  297. zakim-robot
    @zakim-robot
    Sep 22 15:43
    [car] _(for example, the toggle switch example doesn't even work with the keyboard!)_
  298. [car] _(they have a "Report error" link near the bottom of the page. I sent them my suggestion... :)_
  299. [car] http://www.w3schools.com/howto/
  300. zakim-robot
    @zakim-robot
    Sep 22 15:52
    [car] @StommePoes - cool trick! I changed their .switch input {display:none;} to .switch input {opacity:0;} and not only does it still look ok, but as an added bonus it works with keyboard (because of course the checkbox is no longer hidden).
  301. [car] @jkva @pkra @StommePoes Thanks!
  302. [beth] Anyone know if the A11Y Summit 2016 online conference videos have been released yet? I purchased an option that included unlimited replays, but can’t find info on where/when/how they will be released.
  303. Job van Achterberg
    @jkva
    Sep 22 15:57
    I didn't do anything? 😓
  304. zakim-robot
    @zakim-robot
    Sep 22 15:59
    [scottohara] heh, you just reminded me i was going to check on that later @beth, cause i’ve been looking out for a release of them too
  305. [beth] @scottohara If you go to the original event purchase page, the sessions are on sale for download, which leads me to believe they’re out there somewhere… but where?
  306. [scottohara] right.
  307. zakim-robot
    @zakim-robot
    Sep 22 16:11
    [joe-watkins] @beth @scottohara You could try pinging @teleject on Twitter. Usually an email gets blasted when they are ready.
  308. [car] @jkva Yes, you did. You talked it through with @pkra. :)
  309. zakim-robot
    @zakim-robot
    Sep 22 16:27

    [csantos] @Here hi all,
    Using NVDA in Windows 10 (also in Windows 7) with any browser. Navigating using Down/Up arrow key, I'm hearing 'blank' when it reaches elements.
    This is the example
    http://codepen.io/santospro/pen/VKPrOy

    Can anyone give a light with that?

  310. zakim-robot
    @zakim-robot
    Sep 22 16:33
    [patrickfox] The <br/> is read as ‘blank'
  311. [csantos] always?
  312. [patrickfox] not sure why it does that, but having that br there is unnecessary
  313. [csantos] VO doesn’t read <br/> as blank. VO just ignores that tag
  314. [patrickfox] right - that’s the way it should be in NVDA
  315. [patrickfox] I’d report it as an issue with NVDA
  316. [patrickfox] it does the same in Firefox as well, so it’s not just an IE issue
  317. [csantos] I reported that issue nvaccess/nvda#6400
  318. [patrickfox] +1 that’s awesome
  319. [garcialo] waves at @patrickfox
  320. [car] @pkra Maybe you could report the ChromeVox "Should not ignore opacity: 0" bug? https://bugs.chromium.org/p/chromium/issues/list?q=component:UI%3EAccessibility
    Click on "New Issue" button.
  321. zakim-robot
    @zakim-robot
    Sep 22 17:14
    [teleject] @beth the sessions information went out last week.
  322. zakim-robot
    @zakim-robot
    Sep 22 17:34
    [teleject] @beth followed up on your email to E4H. Let me know if you have any more questions.
  323. Mallory
    @StommePoes
    Sep 22 17:43
    @car is that the same team as ChromeVox?
  324. ah scrolling down I do see some ChromeVox issues, however there are also NVDA issues, so still not sure if this is the same team to file the bug with.
  325. unless it's only in Chrome/chromium with ChromeVox.
  326. zakim-robot
    @zakim-robot
    Sep 22 17:44
    [car] I searched, and there seems to be a bunch of ChromeVox bug reports there. The team labels them with a "cvox2" label.
  327. [heidi] @karlgroves re: IAAP membership site, the vendor says: " IAAP was a custom project. We do not have the ability to provide similar WCAG projects at this time. If we can support a non-wcag project, please let me know.” - boo.
  328. James Nurthen
    @jnurthen
    Sep 22 18:12
    @MichielBijl are you around? I hear you were looking for dinner plans.
  329. zakim-robot
    @zakim-robot
    Sep 22 18:17
    [heidi] @karlgroves I also asked if I could make the customizations myself and they said no - there’s no theming, and everything’s hardcoded.
  330. zakim-robot
    @zakim-robot
    Sep 22 18:58
    [heidi] iMIS looks AA...
  331. Mark Sadecki
    @cptvitamin
    Sep 22 18:58
    Wondering if anyone here knows what the future holds for drag and drop. I’ve noticed it is being referred to as deprecated in the aria 1.0 spec and vaguely referenced in 1.1
  332. and what someone who is tasked to build a drag and drop widget should use for a spec
  333. zakim-robot
    @zakim-robot
    Sep 22 19:03

    [csantos] @Here hi guys, more questions/bugs from my test cases heheh

    NVDA is reading clickable bullet for <ul><li> in Google Chrome
    Using NVDA with Google Chrome in Windows 10 (also in Windows 7).
    http://codepen.io/santospro/pen/bwgLLm
    Navigating using Down/Up arrow key, I'm hearing 'clickable bullet first item' and 'clickable bullet second item’.

    Can someone help me, or am I doing something wrong?

    _I created a NVDA issue for that (nvaccess/nvda#6399)_

  334. zakim-robot
    @zakim-robot
    Sep 22 19:14
    [jpdevries] @csantos ya that seems like a bug to me :bug:
  335. Mark Sadecki
    @cptvitamin
    Sep 22 19:37
    @csantos is that happening just in codepen?
  336. Mallory
    @StommePoes
    Sep 22 19:38
    I didn't think a ul could be a child of a p?
  337. meh they probably changed it, they've been changing all sorts of HTML out from under me. U isn't even obsolete anymore... so now our designers are using it for underlined text.
  338. Mark Sadecki
    @cptvitamin
    Sep 22 19:39
    @StommePoes is right, p’s can only have phrasing content: https://www.w3.org/TR/html5/dom.html#phrasing-content-1
  339. zakim-robot
    @zakim-robot
    Sep 22 19:39
    [csantos] I thought the same, I moved <ul> outside the <p> but the issue still happening
  340. Mallory
    @StommePoes
    Sep 22 19:39
    Still, the button's completely closed first
  341. usually, in other browsers, the clickables are because non-clickable things are inside some ancestor who is clickable. but here, the button is a sibling.
  342. I wonder if someone (chrome or NVDA) sees the button's actions as being able to influence the container of them both
  343. Mark Sadecki
    @cptvitamin
    Sep 22 19:40
    whenever a screen reader tells me a non-clickable element is clickable, its almost always because a parent has an event listener on it. that’s why I was wondering if it happened outside of codepen.
  344. codepen likely has all sorts of JS on the page
  345. Mallory
    @StommePoes
    Sep 22 19:41
    Does it change if you add type="button" to the button? since otherwise they could submit J random forms on the page?
  346. ah yeah, could be codepen itself.
  347. zakim-robot
    @zakim-robot
    Sep 22 19:41
    [csantos] It’s not a problem with codepen, I also tested it in a simple .html file

  348. [karlgroves] Yeah, I’d create a test case in its own HTML file. Not in codepen.

    Next, I’d check it in Firefox and IE.

    Finally, I’d use aViewer to find out what NSRV information is being exposed.

    Chances are, this is not an NVDA issue but a chrome issue.

  349. Mallory
    @StommePoes
    Sep 22 19:42
    so when there's no button anywhere, list items are just bullet blah blah...?
  350. zakim-robot
    @zakim-robot
    Sep 22 19:42
    [csantos] oh @karlgroves hell!
  351. StommePoes @StommePoes tries to imagine what a karlgroves hell is like...
  352. Mallory
    @StommePoes
    Sep 22 19:43
    prolly lots of punk music. The really bad stuff with no melody
  353. and bad "singing"
  354. zakim-robot
    @zakim-robot
    Sep 22 19:43
    [karlgroves] Hair metal, actually
  355. [csantos] lol
  356. Mallory
    @StommePoes
    Sep 22 19:44
    edguy!
  357. laaa-va-tory love machiiiiine....
  358. Mark Sadecki
    @cptvitamin
    Sep 22 19:44
    @karlgroves, hair metal? compensating for something?
  359. zakim-robot
    @zakim-robot
    Sep 22 19:44
    [karlgroves] Or, black metal where they try to sing.
  360. Mallory
    @StommePoes
    Sep 22 19:44
    it's when guys who claimed to be metal looked like Stu Robeson's twitter avatar
  361. zakim-robot
    @zakim-robot
    Sep 22 19:45
    [csantos] well, wait haha… so where can I do to fix that chrome issue?
  362. Mallory
    @StommePoes
    Sep 22 19:45
    I think that's david bowie, who isn't hair metal but totally had the hair for hair metal
  363. Follow karl's steps
  364. so we know if it's limited to Chrome
  365. and then bug chrome people
  366. and ask Jamie or Derek
  367. zakim-robot
    @zakim-robot
    Sep 22 19:46
    [csantos] this is not happening with Chrome-Mac-VoiceOver

  368. [karlgroves] TPG has a “Metal Club” Skype room. We have differences of opinion. I’m a bigger fan of yelling and screaming.

    well, wait haha… so where can I do to fix that chrome issue?

    Confirm the issue resides in Chrome

    Then yell at @Sundress

  369. Mallory
    @StommePoes
    Sep 22 19:47
    yelling at her seems mean, but either she gets stuff done, or she knows who to poke, endlessly, with an annoying finger until it's fixed
  370. zakim-robot
    @zakim-robot
    Sep 22 19:47

    [karlgroves] > Chrome-Mac-VoiceOver

    Good lord, man. Don’t use that combo. You’ll be chasing your tail. Safari/VO is the only legitimate combo for VO

  371. Mark Sadecki
    @cptvitamin
    Sep 22 19:47
    nothing happens with Chrome-Mac-Voiceover ;)
  372. Mallory
    @StommePoes
    Sep 22 19:47
    That anything works on VO and Chrome is amazing and the proof that there are supernatural beings among us
  373. zakim-robot
    @zakim-robot
    Sep 22 19:47
    [karlgroves] Yeah, “yell” was a strong term. @sundress is too nice to yell at.
  374. Mallory
    @StommePoes
    Sep 22 19:48
    You just said you were a big fan of yelling and screaming.
  375. zakim-robot
    @zakim-robot
    Sep 22 19:48
    [karlgroves] In a nice way
  376. Mallory
    @StommePoes
    Sep 22 19:48
    Me, I'm a fan of cursing and breaking shit.
  377. zakim-robot
    @zakim-robot
    Sep 22 19:48

    [karlgroves] > poke, endlessly, with an annoying finger until it's fixed

    The Mallory Method ™

  378. Mallory
    @StommePoes
    Sep 22 19:48
    and then drinking my problems away
  379. actually, i'm almost done fixing that uinames thing
  380. it was just such a keyboard abomination
  381. zakim-robot
    @zakim-robot
    Sep 22 19:49
    [karlgroves] Did you add “Joe Schmoe” to the list?
  382. Mallory
    @StommePoes
    Sep 22 19:49
    I'm not adding uselessly-short names to a list I would personally use to encourage designers to stop setting name-placeholder-widths in any limits
  383. zakim-robot
    @zakim-robot
    Sep 22 19:50
    [karlgroves] Fine.
  384. Mallory
    @StommePoes
    Sep 22 19:50
    Before I heard of that, my fake-names-to-show-designs-suck were NSFW and something HR would go after me for
  385. and would break CoCs
  386. and make orphan children weep
  387. etc
  388. "Josephina Henrietta Schmuckenberger-Jones"
  389. zakim-robot
    @zakim-robot
    Sep 22 19:51
    [karlgroves] Nothing NSFW about that
  390. Mallory
    @StommePoes
    Sep 22 19:52
    No, it's what I would add to the list if I were adding names to the list
  391. When P put my full hyphenated name on everything it made my email address so long it didn't fit on the gmail page
  392. but I blame gmail being very terrible with enlarged fonts
  393. icons_suck_most.png
  394. I can only gues 2 of those.
  395. hate icon buttons
  396. developers should get a painful shock every time they do it
  397. so now as I tab around them, I get visible names showing up underneath... with Dragon I'd only have to tab through the things once and then I know what they're called (I don't dare try to change his design because that'll get my PR rejected in no time)
  398. zakim-robot
    @zakim-robot
    Sep 22 20:13
    [beth] @teleject Thanks! I dug around outlook and found the original email hiding in my “email quarantine” folder.
  399. powrsurg
    @powrsurg
    Sep 22 21:27
    Does anyone know if there is an already accessible library for doing one of those drag and drop interfaces for something like a "make your own shirt" interface. Upload a base image, let you move it around, put stuff over it, etc
  400. zakim-robot
    @zakim-robot
    Sep 22 23:39
    [alacker] thats an interesting thought @powrsurg, how would you expect that to work with a screen reader?