Archive index

A11y Slackers Gitter Channel Archive 21st of January 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Jan 21 01:57
    [kevinchao89] Are there others working on accessibility of apps on Watch OS or Android Wear?
  2. iandevlin
    08:54
    So, I am in the position where I may have to use a div with role="button". I don't want to do it, but it seems like the best solution for what is needed as the element in question needs to have some HTML that reacts to flexbox within it, so a <button> seems to be out.
  3. MichielBijl
    08:58
    <button><div></div></button>? http://codepen.io/Michiel/pen/YwYEJo
  4. MichielBijl
    08:58
    @iandevlin
  5. iandevlin
    09:04
    Hmmm, so it might work then? But it's also fitting something into existing code and styles and we would need to override lots of existing button styling.
  6. MichielBijl
    09:05
    Depends on what you're going for I guess.
  7. iandevlin
    10:00
    It's not so straightforward sadly. There are elements that contain various HTML with lots of information, but the entire element is clickable, and handled via JS, as most of them perform some action (open a popup for example) and have no href, so cannot be an <a>. I am not entirely sure what it should be.
  8. iandevlin
    10:00
    Any suggestions?
  9. MichielBijl
    10:01
    There was a similar question regarding recreating Windows Live Tiles. @jnurthen suggested making the whole thing clickable, but have a smaller/descriptive part focusable/an actual button.
  10. iandevlin
    10:02
    I suspect that making the entire thing focusable would render the content within less- or not-accessible?
  11. iandevlin
    10:03
    So the whole <div> should be clickable but without any tabindex or role="button" set for example?
  12. MichielBijl
    10:03
    Yes :)
  13. MichielBijl
    10:04
    If you had a button with two paragraphs of text in it, that's the text that would show up in say the VoiceOver Web Rotor
  14. MichielBijl
    10:04
    i.e. accname
  15. iandevlin
    10:04
    And that's not advisable?
  16. MichielBijl
    10:04
    You could overwrite that with an aria-label I guess.
  17. iandevlin
    10:04
    As it would be too much or what
  18. MichielBijl
    10:05
    2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  19. MichielBijl
    10:05
    https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html
  20. MichielBijl
    10:06
    Yeah it would be too much. But also depends on what's inside the button.
  21. iandevlin
    10:06
    Hmm, ok. This is not straightforward :D
  22. MichielBijl
    10:06
    So if you have a Windows Live Tile type thing with a weather widget and this weeks forecast, that wouldn't make sense as button text.
  23. MichielBijl
    10:07
    If I told you what the weather here is like at the moment you wouldn't know you could click that =P
  24. MichielBijl
    10:07
    “Show weather forecast” would be much better.
  25. iandevlin
    10:09
    Sadly, everything is JS only at the moment, even if it links to another page.
  26. iandevlin
    10:09
    So headings in a h4, are clickable but should they have role="button"?
  27. iandevlin
    10:10
    In this case I would say yes, as it's descriptive enough.
  28. zakim-robot
    10:10
    [i-like-robots] We're looking to build an expandable widget that loads content dynamically. Building an accessible expander is no problem but does anybody have an example of how should we could handle the loading and error states?
  29. iandevlin
    10:11
    And an <li> is clickable...
  30. iandevlin
    10:12
    Part of me thinks, because I cannot change/add the JS at the moment, thay making these things more accessibile won't help.
  31. iandevlin
    10:12
    As I cannot add code to focus on any popup or revealed section at the moment.
  32. MichielBijl
    10:15
    Hmm. <h4 role="button"> doesn't make sense, <h4><button> would make more sense anyway.
  33. MichielBijl
    10:15
    But if you can't change what element is clickable, <h4 role="button" tabindex="0"> is better than nothing I guess =)
  34. MichielBijl
    10:19
    @i-like-robots: if the content is loading, the element is busy/being updated; you can use aria-busy for that: https://www.w3.org/TR/wai-aria-1.1/#aria-busy
  35. MichielBijl
    10:20
    As for errors, I'd say aria-busy combined with an alert? https://www.w3.org/TR/wai-aria-1.1/#alert
  36. MichielBijl
    10:20
    Scratch that aria busy and alert, just use an alert…
  37. iandevlin
    10:39
    ok thank
  38. iandevlin
    10:39
    s
  39. MichielBijl
    10:40
    Reason being that if you use role="button" the element is no longer a heading.
  40. stevefaulkner
    10:52
    https://twitter.com/stevefaulkner/status/690123978543865856 any thoughts, observations?
  41. MichielBijl
    10:53
    https://twitter.com/MichielBijl/status/690124678090887169
  42. stevefaulkner
    10:53
    role=button is not allowed on headings btw https://www.w3.org/TR/html-aria/#h1-h6
  43. MichielBijl
    10:55
    That's good to know. So <h4 role="button" tabindex="0"> is not better than nothing.
  44. MichielBijl
    10:55
    @iandevlin
  45. iandevlin
    10:58
    Rightio.
  46. stevefaulkner
    10:59
    see example used in Second rule of ARIA use http://w3c.github.io/aria-in-html/#second
  47. zakim-robot
    11:21
    [i-like-robots] @MichielBijl thanks, we've come up a with decent solution using busy and alert =]
  48. MichielBijl
    11:26
    :+1:
  49. stevefaulkner
    11:42
    VO on iOS quirky with block level links though https://twitter.com/stevefaulkner/status/690137014428106756
  50. MichielBijl
    12:32
    =(
  51. jkva
    15:44
    There's not a finished standard related to WCAG SC 3.3.4, no?
  52. MichielBijl
    15:58
    What do you mean with standard?
  53. jkva
    15:59
    The version I can find is a working draft
  54. jkva
    15:59
    That suggests to me it's not an accepted standard yet. Do I misunderstand?
  55. jkva
    15:59
    s/standard/guideline/, rather
  56. MichielBijl
    16:00
    I don't understand. WCAG is a recommendation.
  57. jkva
    16:00
    But SC 3.3.4. is not (yet), for it is a working draft, right?
  58. jkva
    16:00
    I get the feeling I'm overlooking something obvious
  59. MichielBijl
    16:00
    https://www.w3.org/TR/WCAG20/#minimize-error
  60. MichielBijl
    16:01
    That is in the Rec.
  61. MichielBijl
    16:01
    Maybe I misunderstand.
  62. MichielBijl
    16:01
    Which URL are you looking at?
  63. jkva
    16:01
    Huh, TIL. Google keeps giving me https://www.w3.org/TR/2008/WD-UNDERSTANDING-WCAG20-20081103/minimize-error-reversible.html
  64. jkva
    16:01
    Wait a sec, 2008?
  65. jkva @jkva sighs at his incompetence
  66. MichielBijl
    16:01
    Rec is also from 2008 ;)
  67. MichielBijl
    16:02
    Bookmark: http://www.w3.org/TR/WCAG20/ that will always link to the last version (of 2.0)
  68. MichielBijl
    16:03
    Not sure, but I think https://www.w3.org/TR/WCAG/ will always link to the last version (no matter the version number).
  69. jkva
    16:03
    Added to a11y folder, thanks
  70. cptvitamin
    17:12
    hey all. came across an interesting bug today RE off screen text. Many of the examples on the web combine clip and absolute postioning with a width and a height of zero (IMHO this is overkill). We have verified that elements with these properties will populate the IA2 name value without spaces. JAWS and NVDA will (attempt to) read the value without spaces
  71. cptvitamin
    17:13
    removing height and width from the offscreen css class fixes the issue
  72. cptvitamin
    17:13
    “Search all content” -> “Searchallcontent"
  73. cptvitamin
    17:14
    there are so many sites out there that recommend combining clip/absolute/zero height/width
  74. jkva
    17:23
    I recall @StommePoes advising me against use of clip for hiding content, not sure why that was again. Older browsers? Can't remember.
  75. MichielBijl
    17:24
    Related WCAG issue: w3c/wcag#131
  76. jkva
    17:25
    @MichielBijl ++
  77. MichielBijl
    17:26
    clip is also recommended by WebAIM: http://webaim.org/techniques/css/invisiblecontent/#techniques
  78. MichielBijl
    17:28
    Also see this pull request: w3c/wcag#132
  79. MichielBijl
    17:47
    Gonz is a funny guy!
  80. jkva
    17:48
    How so?
  81. MichielBijl
    17:48
    Viking and the Lumberjack Show with Gonz and @LjWatson: https://plus.google.com/events/cte7mvvfcso0od7bo80dd1hqlg4
  82. jkva
    17:49
    Woah! Nice find
  83. jkva
    17:49
    I've never heard his voice, actually. Just conversed by e-mail
  84. MichielBijl
    17:49
    You should follow them on Twitter: https://twitter.com/VandLShow
  85. jkva
    17:49
    Looking forward to meet him at CSUN
  86. cptvitamin
    18:35
    clip is also deprecated in CSS3
  87. cptvitamin
    18:35
    but the spec says that User Agents must support it
  88. MichielBijl
    18:37
    If someone shows me how to properly use clip-rect I'll use that…
  89. MichielBijl
    18:37
    For some unknown reason I've never been able to get that to work.
  90. cptvitamin
    18:43
    I don’t know how long this has been an issue, but I find it concerning how many sites recommend that approach.
  91. cptvitamin
    18:43
    its not a screen reader bug either, the space-less value is in the AAPI
  92. jnurthen
    18:51
    @cptvitamin is that just an IA2 bug then or it is the same in other APIs too?
  93. jnurthen
    18:53
    @cptvitamin or actually, assuming this is FF - a FF bug.... I can see that noting how FF uses its layout engine to create the accessibility information
  94. cptvitamin
    19:36
    @jnurthen i haven’t looked beyond FF at this point, but it sounds like it could be related to how FF populates IA2
  95. cptvitamin
    19:41
    looks like its OK in chrome
  96. jnurthen
    19:43
    do you have a testcase?
  97. cptvitamin
    19:44
    chrome is populating IA2 correctly
  98. cptvitamin
    19:44
    @jnurthen you can just go to the www.edx.org the top level nav and the search both have offscreen text associated with them
  99. jnurthen
    19:44
    yep - sounds like a simple FF bug. Rather than changing a bunch of advice to people perhaps we should just log the bug :)
  100. cptvitamin
    19:46
    Coursesmenu and Submitacoursesearch
  101. MichielBijl
    19:46
    @jnurthen don't be silly :P
  102. cptvitamin
    19:46
    agreed, but is clip really necessary?
  103. cptvitamin
    19:46
    seems like overkill to me
  104. cptvitamin
    19:47
    I’ll open a bug on FF
  105. MichielBijl
    19:47
    If you have width: 1px; height: 1px; overflow: hidden; it should be fine.
  106. jnurthen
    19:47
    whether it is necessary or not it is used often
  107. MichielBijl
    19:47
    But I'm no expert…
  108. jnurthen
    19:47
    wouldn't that result in a pixel on the screen?
  109. MichielBijl
    19:48
    @jnurthen that's like saying that murder is okay because it happens ofter =P
  110. jnurthen
    19:48
    @MichielBijl more like speeding ;)
  111. jnurthen
    19:48
    @MichielBijl or jaywalking :)
  112. MichielBijl
    19:48
    Yeah, murder might be a bit too much =P
  113. MichielBijl
    19:49
    Anyway, with position: absolute that shouldn't be a problem.
  114. jnurthen
    19:49
    there must have been a reason that clip got introduced into the mix
  115. MichielBijl
    19:49
    I've heard people say things like but background colour and what not, then add background: transparent.
  116. MichielBijl
    19:49
    Yeah I guess, just don't know what.
  117. MichielBijl
    19:51
    @jnurthen will you join the APA at some point? Or is it still a waiting game?
  118. cptvitamin
    20:09
    @MichielBijl and @jnurthen I created a test case while preparing the bug and realized that there was another condition that was missing: word-wrap: break-word;
  119. cptvitamin
    20:10
    the combination of height and width of 1px with word-wrap break-word is what was causing the collapse of the spaces
  120. cptvitamin
    20:10
    still sounds like a FF bug
  121. MichielBijl
    20:10
    Yeah, that shouldn't matter.
  122. MichielBijl
    20:11
    But why is word-wrap: break-word on visually hidden text? That makes no sense.
  123. cptvitamin
    20:11
    it was inherited
  124. MichielBijl
    20:11
    word-wrap: none to the rescue =P
  125. cptvitamin
    20:11
    or normal
  126. MichielBijl
    20:12
    Ah right, I have no clue what the default value is.
  127. cptvitamin
    20:13
    I’m comforted by the fact that its only this particular case that is affecting the offscreen technique.
  128. cptvitamin
    20:13
    I’ll write a blog post about it, and file the bug
  129. MichielBijl
    20:14
    :+1:
  130. jnurthen
    21:13
    excellent.... sounds like no need to panic then. I'll put my towel away.
  131. MichielBijl
    21:14
    Good one
  132. MichielBijl
    21:14
    I'm staying with a friend in Oxford this weekend, and she said I didn't have to bring a towel as she has spares.
  133. MichielBijl
    21:14
    I asked her if she really wanted me to travel without a towel, but she didn't get the reference =(
  134. jnurthen
    21:14
    LOL
  135. jnurthen
    21:15
    obviously isn't a software developer then
  136. MichielBijl
    21:15
    Neuroscientist =P
  137. jnurthen
    21:16
    hmm - i thought there was crossover appeal.
  138. MichielBijl
    21:16
    She later did get it, just not at first, which was a bummer.
  139. MichielBijl
    21:16
    Ah well, she makes a lot of science jokes I don't immediately get, so it's okay.
  140. jnurthen
    21:17
    I was reading this story the other day (forgot how I got there) which made me laugh.
  141. jnurthen
    21:17
    http://thejumbuckisalmostextinct.com/2009/12/cookies-by-douglas-adams/
  142. MichielBijl
    21:21
    Oh my, I'm glad I wasn't drinking milk when I read that.
  143. MichielBijl
    21:21
    That is proper humour =D
  144. MichielBijl
    21:26
    I was watching a lecture by Carl Sagan the other day, these were the Christmas lectures. And at one point he said “What if we were to discover Earth?” And he went on to show closer and sharper pictures of Earth, first from space, then from planes, up until about a 100m scale. At that scale you could clearly make out cars and busses. He said something like “At this stage we would certainly believe that these creatures are the dominant life forms”. And then it struck me, that is exactly what Ford Prefect thought when he first met Arthur Dent =D
  145. jnurthen
    21:27
    :)
  146. MichielBijl
    21:27
    That lecture actually predates HGTTG, but I'm sure there were others that thought of that.
  147. cptvitamin
    21:27
    https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
  148. MichielBijl
    21:28
    :+1:
  149. cptvitamin
    21:28
    I’ll write a blog post tonight to warn about the unexpected consequences of your offscreen text inheriting a word-wrap: break-word
  150. MichielBijl
    21:29
    Please share if you're done =)
  151. StommePoes
    22:02
    The reason I don't like clip: commas but not, deprecated but replacement unsupported, and Yahoo's example was like 500 lines of code and I just do pos: abso, left: -999em and maybe a height: 0 for old IE
  152. StommePoes
    22:02
    the difference is, clip will not expose your content if you switch to a rtl page
  153. jnurthen
    22:02
    left -999 messes up RTL
  154. StommePoes
    22:02
    in those instances I do html[dir=rtl] element {left: auto, right: -999em;}
  155. StommePoes
    22:03
    well, it' doesn't mess up
  156. StommePoes
    22:03
    it
  157. StommePoes
    22:03
    does what it should
  158. StommePoes
    22:03
    but not what we want
  159. jnurthen
    22:03
    well yeah.... computers tend to do that ;)
  160. StommePoes
    22:03
    :P
  161. StommePoes
    22:03
    But the listen-for-dir and switch seemed to work the one time I actually needed to use it.
  162. jnurthen
    22:04
    we always need it as most of our products get translated
  163. StommePoes
    22:04
    So, I've got a designer who wants to:
    set lists to display table
    use generated content
    for
    getting bullets, and numbers, in lists to line up without issue.
  164. StommePoes
    22:04
    So far I've explained to him some possible issues, but I think they might be ok, and to make an example that we can test the crap out of.
  165. jnurthen
    22:05
    q? is it a list or a table?
  166. MichielBijl
    22:07
    @StommePoes but pos abs with height/width 1px actually hides the content in place, instead of just displacing it; much neater if you ask me.
  167. StommePoes
    22:07
    Oh it's a list, he's using display: table to make the numbers (in the case of an ol) have the widest number set the width of all the numbers
  168. MichielBijl @MichielBijl is CSS nerd :x
  169. StommePoes
    22:07
    I used to hide stuff upscreen
  170. MichielBijl
    22:07
    That messes with focus
  171. StommePoes
    22:08
    but back in the day that would actually screw up Window eyes
  172. MichielBijl
    22:08
    Messes with focus to this day…
  173. StommePoes
    22:08
    These weren't focusables, but W-E would read stuff on the top first :P
  174. cptvitamin
    22:08
    you shouldn’t be focusing on anything that is offscreen anyway though
  175. StommePoes
    22:08
    correct.
  176. MichielBijl
    22:08
    @cptvitamin what about icon only buttons?
  177. jnurthen
    22:08
    shouldn't be focussing on anything that is hidden in any way :)
  178. MichielBijl
    22:09
    You're not, but hidden content can still be part of something that you focus.
  179. jnurthen
    22:09
    then that is ok. the offscreen will screw up the VO focus indicator though
  180. MichielBijl
    22:09
    <button><span>Some crappy button with crappy icon font icon</span></button>
  181. MichielBijl
    22:09
    Not with pos abs width/height 1px overflow hidden
  182. MichielBijl
    22:10
    That's why I love that solution, it's very clean and effective.
  183. cptvitamin
    22:10
    but the button is not offscreen
  184. cptvitamin
    22:10
    that is what i meant
  185. StommePoes
    22:10
    well, remember what moz did/does?
  186. StommePoes
    22:10
    when people used to use negative text indent
  187. StommePoes
    22:11
    you'd see the focus ring go ofscreen, lawlz
  188. MichielBijl
    22:11
    @cptvitamin right =)
  189. MichielBijl
    22:11
    @StommePoes same point =)
  190. StommePoes
    22:11
    I think Michiel is saying similar happens with abso-pod' children of a focusable, which I've never seen BUT I don't have a mac
  191. StommePoes
    22:11
    everything I know about VO came from other people
  192. StommePoes
    22:12
    But so I'm hoping the lists do okay after the designer does his stuff... his other options are a lot more CSS-hack intense and he hoped this would be simpler.
  193. MichielBijl
    22:12
    Like that time I told you VO was voiced by GLaDOS?
  194. StommePoes
    22:12
    But if IE is still not reading generated content then I might have ot say no.
  195. StommePoes
    22:12
    No that's Cortana... no wait
  196. MichielBijl
    22:13
    They should do a VO with HAL and GLaDOS.
  197. StommePoes
    22:13
    The vicki voice in VO is the only one I like. Chris Hills uses the Alex voice which somehow annoys me
  198. StommePoes
    22:13
    Alex doesn't sound too far off of HAL actually
  199. StommePoes
    22:13
    For NVDA I use one of the "males" male# something and for JAWS I like Reid best.
  200. StommePoes
    22:14
    ried?
  201. StommePoes
    22:14
    Not sure how it's spelled.
  202. StommePoes
    22:14
    Make a video of VO+Vicki saying "this is a triumph..."
  203. jnurthen
    22:14
    JAWS has some excellent voices you can download
  204. jnurthen
    22:15
    I use Daniel - https://www.freedomscientific.com/Downloads/synthesizers
  205. MichielBijl
    22:15
    I use Karen, Australian accent :P
  206. jnurthen
    22:15
    (British English), but when I do training in India I switch to Veena (Indian English)
  207. StommePoes
    22:15
    oh Marco Zehe had some amazing voice he had for NVDA... can't remember if they were festival voices or what
  208. StommePoes
    22:15
    No, actually
  209. StommePoes
    22:16
    it was daniel!
  210. MichielBijl
    22:16
    @jnurthen you use Daniel?
  211. jnurthen
    22:16
    If you used Lee it would be just like @stevefaulkner talking to you
  212. StommePoes
    22:16
    When I start up JAWS, because it's a Dutch disc, it's this very soft Belgian woman. Ug.
  213. StommePoes
    22:16
    is that the bogan voice?
  214. MichielBijl
    22:16
    Hmm, I don't have Lee installed
  215. MichielBijl
    22:17
    I use Belgian Siri
  216. MichielBijl
    22:17
    Much more fun than that dull Dutch dude
  217. jnurthen
    22:18
    ftp://ftp.freedomscientific.com/users/hj/private/WebFiles/synthesizers/VocalizerExpressive/VocalizerExpressive-1.0.19.101-ena-Lee-Sample-enu.mp3
  218. MichielBijl
    22:19
    Steve's voice is a bit deeper isn't it?
  219. jnurthen
    22:22
    i'm sure you can change the pitch :)
  220. MichielBijl
    22:22
    True
  221. MichielBijl @MichielBijl changes pitch of @stevefaulkner's voice
  222. StommePoes
    22:27
    need to feed it other text
  223. StommePoes
    22:28
    calling patrick lauke a cunt or some other endearment
  224. jnurthen
    22:28
    just install it in JAWS
  225. StommePoes
    22:30
    running linux right now :P
  226. MichielBijl
    22:40

    just install it in JAWS

    Right, like I can afford to buy JAWS :P

  227. jnurthen
    22:40
    says it works on the demo version too
  228. StommePoes
    22:40
    I ran the demo version for years... it's not technically legal Michiel but go for it (when you get a windows)
  229. StommePoes
    22:41
    Like, their EULA says not for testing websites etc
  230. StommePoes
    22:41
    but, everyone does it
  231. StommePoes
    22:41
    I paid 3k for JAWS
  232. jnurthen
    22:41
    yeah.... except us.....
  233. StommePoes
    22:41
    it's too damn expensive here
  234. StommePoes
    22:41
    Pearson paid for mine, luckily
  235. jnurthen
    22:41
    we have site licenses - but yeah its expensive
  236. StommePoes
    22:41
    but, I mean... 3k.
  237. StommePoes
    22:41
    Oh we also have a box somewhere with licenses
  238. StommePoes
    22:41
    like 50 or smoething
  239. MichielBijl
    22:41
    I'll get it when I get my own machine.
  240. StommePoes
    22:41
    people sign a license in, use it
  241. MichielBijl
    23:15
    Okay, I'm off for the weekend to do science, see you all on Monday!
  242. StommePoes
    23:22
    SCIENCE