Archive index

A11y Slackers Gitter Channel Archive 17th of February 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Feb 17 01:40
    [mgifford] Is this still the best comparison between the old Section 508 & WCAG 2.0 AA https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/background/comparison-table-of-wcag2-to-existing-508-standards
  2. [mgifford] I wish it highlighted what more is needed beyond the old Section 508 to meet WCAG 2.0 AA requirements.
  3. zakim-robot
    @zakim-robot
    Feb 17 01:55
    [michiel] For those interested: I’ve updated the APG tabs widget to include a manual activation variant and new design that works in Windows High Contrast mode: https://twitter.com/MichielBijl/status/832370520440049670
  4. [cordelia] @caeser, I tried the tabpanel / label issue just now with a local example, but I’m on El Capitan. Can’t reproduce the issue you’re seeing.
  5. [cordelia] I was using this sample code: http://codepen.io/anon/pen/vgMbGo
  6. zakim-robot
    @zakim-robot
    Feb 17 02:01
    [michiel] Can’t reproduce either (Sierra / Safari 10)
  7. [michiel] Doesn’t seem to matter whether you put the input inside the label
  8. [michiel] Even if you remove the for attribute from the label
  9. [caesar] Thanks for checking... let me see if I can codepen an example
  10. zakim-robot
    @zakim-robot
    Feb 17 02:11
    [caesar] Hmm... it behaves correctly in the Pen. Weird.
  11. [cordelia] Hm…. is there something else going on with your page that might cause that behavior?
  12. [caesar] http://codepen.io/cyberseraphic/pen/PWgVKN
  13. [caesar] OK this. It's something with the CSS, because the RAW HTML wasn't doing it
  14. zakim-robot
    @zakim-robot
    Feb 17 02:17
    [caesar] If you go to the Other details tabpanel, and VO-arrow, it will navigate label to label, field to field
  15. zakim-robot
    @zakim-robot
    Feb 17 02:22
    [cordelia] Do you have Quick Nav on?
  16. [caesar] I tested using it both on and off, same diff.
  17. [caesar] Whether arrow by itself (quicknav on) or VO+arrow (quicknav off) result is the same
  18. zakim-robot
    @zakim-robot
    Feb 17 02:28
    [cordelia] Oddly, am getting label to label, field to field with Quick Nav on, but not with Quick Nav off.
  19. [caesar] I see. It's consistent in both modes for me on Sierra
  20. stevefaulkner
    @stevefaulkner
    Feb 17 09:28
    @mgifford this may be helpful re wcag/508 http://www-03.ibm.com/able/guidelines/ci162/web61to52.html
  21. @powrsurg https://twitter.com/jared_w_smith/with_replies
  22. Peter Krautzberger
    @pkra
    Feb 17 09:38
    @StommePoes re your svg tests, did you ever run into NVDA going all "text image image image text " crazy on you?
  23. stevefaulkner
    @stevefaulkner
    Feb 17 09:40
    @pkra check stuff under table on https://dl.dropboxusercontent.com/u/377471/SVG/adobesimplesvgtest1.html
  24. may be what you are experiencing
  25. Peter Krautzberger
    @pkra
    Feb 17 09:41
    aha! Thanks @stevefaulkner that's it.
  26. behavior for aria-labels is similar.
  27. fyi.
  28. stevefaulkner
    @stevefaulkner
    Feb 17 09:42
    think you have to aria-hidden or role=presentation the suckers
  29. Peter Krautzberger
    @pkra
    Feb 17 09:42
    oh god.
  30. but doable.
  31. Do you happen to know if there is a bug filed at NVDA? some plans on the ARIA/SVG end to help?
  32. stevefaulkner
    @stevefaulkner
    Feb 17 09:43
    think aria-hidden should hide nested elements, but role=presentation will only hide roles of required children
  33. Peter Krautzberger
    @pkra
    Feb 17 09:43
    Or is it really a IE/windows bug?
  34. stevefaulkner
    @stevefaulkner
    Feb 17 09:44
    its an IE bug i think
  35. Peter Krautzberger
    @pkra
    Feb 17 09:44
    figures ;-)
  36. stevefaulkner
    @stevefaulkner
    Feb 17 09:44
    NVDA is telling you what is there in acc tree
  37. Peter Krautzberger
    @pkra
    Feb 17 09:45
    makes sense.
  38. stevefaulkner
    @stevefaulkner
    Feb 17 09:47
    looks like certain SVG elements should have a graphics role only when they have an accessible name https://svgwg.org/svg2-draft/struct.html#implicit-aria-semantics
  39. iE appears to be exposing regardless
  40. and that ain't gonna change IE is legacy :-(
  41. Peter Krautzberger
    @pkra
    Feb 17 09:48
    IE11 is officially still maintained but yeah.
  42. didn't try edge.
  43. but cool. some progress at least.
  44. (on my end that is)
  45. hm. there's no good way to explore an svg with NVDA, is there?
  46. Peter Krautzberger
    @pkra
    Feb 17 09:58
    ah, word exploration seems to work ok after all.
  47. ooh. increases noise level to repeated "outer graphic".
  48. stevefaulkner
    @stevefaulkner
    Feb 17 10:01

    E11 is officially still maintained but yeah.

    there will not be any a11y fixes - they stated it somewhere

  49. Peter Krautzberger
    @pkra
    Feb 17 10:02
    ah, thx.
  50. thankfully, what I'm working on is research and not production right now :)
  51. Mallory
    @StommePoes
    Feb 17 11:18
    @pkra @stevefaulkner that explanation doesn't explain why, when you don't hav multiples, you still hear them twice. You'll hear the repeat with simple SVGs like a circle.
  52. Okay, I am now officially confused: "Each element with role tab has the property aria-controls referring to its associated tabpanel element."
  53. I have seen exactly zero tab panels where all the panels are in the a11y tree (and this is a good thing, otherwise keyboarders will go WTF if there are focusables in hidden panels)
  54. so we can't have aria-controls pointing to any except on the active tab
  55. If this is important, and it takes another good layer of JS work to do, so it needs to be in the spec if people are to use it.
  56. For that matter, if aria-controls is not supposed to point to things we are hiding, it ought to be in the spec about aria-controls http://w3c.github.io/aria/aria/aria.html#aria-controls
  57. otherwise, how psychic do developers have to be????
  58. Sorry, I'm not psychic.
  59. And honestly, for all my disclosure widgets, i don't see the point of adding aria-controls once I've already clicked the button to open the thing, because I have enough control over my code that I can insist the new thing 1) is directly under the control and 2) if it makes sense, I can even move focus there.
  60. Mallory
    @StommePoes
    Feb 17 11:24
    Why have to hit alt+m or something to go to it when a simple down arrow works and is more intuitive? Leave it for when the control is NOT next to the controlee. I can see an SR shortcut making sense there
  61. Peter Krautzberger
    @pkra
    Feb 17 11:25
    @StommePoes only the first bit was directed at me, right? :confused:
  62. Mallory
    @StommePoes
    Feb 17 11:25
    Except, in cases where focus needs to be moved, like opening a dialog... no point in aria-controls there either, becuase by the time you've added the value, the user is already moved on to the dialog anyway. They have no chance to hear there's something being controlled. And when they hit esc or whatever to leave the dialog, they go back to the button but the aria-controls should then already be gone/empty. So it becomes a ghost the user never sees.
  63. @pkra yeah :)
  64. Peter Krautzberger
    @pkra
    Feb 17 11:25
    @StommePoes phew :sweat_smile:
  65. Mallory
    @StommePoes
    Feb 17 11:25
    I'm seeing spec stuff showing up in my twitter and I'm going on a developer rage
  66. Peter Krautzberger
    @pkra
    Feb 17 11:38
    @StommePoes would you rate this as :rage: :rage1: :rage2: :rage3: or :rage4:? ;-)
  67. Mallory
    @StommePoes
    Feb 17 11:41
    Coming from me, the only emoji I like to use ever is the unicode pile-o-poo
  68. The web is 💩
  69. also, it never takes much for me to rage
  70. zakim-robot
    @zakim-robot
    Feb 17 11:43
    [sophieschoice_slack] which spec stuff is having you rage :p ?
  71. Mallory
    @StommePoes
    Feb 17 11:46
    http://w3c.github.io/aria-practices/#tabpanel
  72. Job van Achterberg
    @jkva
    Feb 17 11:46
    Didn't that just get updated?
  73. Mallory
    @StommePoes
    Feb 17 11:47
    I says use aria-controls, in the way I thought it meant, but because I'm lucky enough to be in the bat cave, I know the new secrets-- aria-controls should not point to things that aren't in the a11y tree. Display:none'd panels are not in the a11y tree. But this spec doesn't say that, nor does the actual part on aria-controls itself (Linked to earlier)
  74. It also means those of us who try to leverage aria-foo stuff for things like CSS and JS have to stop leveraging aria-controls for hiding/showing the correct panels.
  75. we can replace that with a data-foo instead of course
  76. Job van Achterberg
    @jkva
    Feb 17 11:50
    Good lord that's a lot of ARIA
  77. Yikes, not a fan. I was fully expecting to be able to tab through tabs.
  78. Mallory
    @StommePoes
    Feb 17 11:59
    Most keyboarder do too. The current feelings are that they will have to be trained on the web to do it opposite of the way the web has done it.
  79. We never did quite train Windows-using mousers not to double click, but the keyboarders will have no choice and must eventually figure it out.
  80. Job van Achterberg
    @jkva
    Feb 17 12:01
    I have mixed feelings on that.
  81. Mallory
    @StommePoes
    Feb 17 12:02
    shrug it's been decided
  82. Job van Achterberg
    @jkva
    Feb 17 12:02
    See, this is exactly why I want to get into UX
  83. Mallory
    @StommePoes
    Feb 17 12:02
    there is no escape
  84. resistance is futile
  85. in UX you'll learn that people actually have different expectations within different (or just if they think are different) contexts...
  86. for example that the triangle meaning "Play" will get interpreted as "Play" in most video applications even by those who don't use computers much because it's been on AV equipment for over 30 years
  87. But that same triangle may not be interpreted as Play elsewhere, even if that's what it does there too.
  88. So, keyboarders expect to tab on the web, even though the aria tab panel keyboarding is simply taken from an application toolbar (like in the browser)
  89. Job van Achterberg
    @jkva
    Feb 17 12:04
    That's fine - but I want to learn why that is. And how it's changed. And how we can use that information to build intuitive interfaces.
  90. Mallory
    @StommePoes
    Feb 17 12:05
    In some places, you can't build intuitive interfaces. Intuition is guessing based on previous experience. When there is no previous experience, and if you cannot skeumorph, you're just fucked. You need to have textual and maybe video directions.
  91. Job van Achterberg
    @jkva
    Feb 17 12:05
    If, in my user tests, a varied panel of users would consistently be confused by this tab panel inplementation, that'd be interesting.
  92. Mallory
    @StommePoes
    Feb 17 12:05
    It has been tested. It is interesting. But it doesn't matter. It's been decided.
  93. Job van Achterberg
    @jkva
    Feb 17 12:05
    Yeah I'm just talking out loud
  94. I'm not fighting the power
  95. Mallory
    @StommePoes
    Feb 17 12:06
    I remember the first time I and a screen-reader-user were testing a page. The SR user was not a developer, but she was very comfortable on a computer. Neither of us figured out the tab panel easily. Actually, she never did, she just figured they were broken controls.
  96. Job van Achterberg
    @jkva
    Feb 17 12:07
    Yeah makes sense
  97. Mallory
    @StommePoes
    Feb 17 12:09
    As Zeno would say, the dog tied to the cart gets only to choose whether he walks along with the cart, or is dragged behind it by the neck.
  98. Job van Achterberg
    @jkva
    Feb 17 12:12
    Zeno said a lot of weird shit though
  99. I would chew through the fucking leash that's what
  100. Mallory
    @StommePoes
    Feb 17 12:13
    @stevefaulkner your test suite's already a bit out of date-- I got some good SVG love (with <titles> in them) on JAWS on Chrome, \o/
  101. Firefox was still an issue with JAWS.
  102. Job van Achterberg
    @jkva
    Feb 17 12:14
    Zeno the stoic would also have claimed to be virtuous. There's nothing virtuous in submitting.
  103. Mallory
    @StommePoes
    Feb 17 12:19
    WCAG says "focus must be visible" but when it's super subtle, we don't have a stated necessary difference in contrast or colour we can point to
  104. it becomes "focus is not visible to me" and becomes subjective, which to developers means "not real issue"
  105. I need to convince my team to let me add Javascript to our CSS so I can invoke crazy/fugly obvious focus rings for keyboarders than designers just won't see because they won't accept it.
  106. Mallory
    @StommePoes
    Feb 17 12:38
    WebAXE mentioning role=drinks :P
  107. Job van Achterberg
    @jkva
    Feb 17 12:39
    ROLE=DRINKS, ROLE=DRINKS
  108. Srinivas Yedhuri
    @sri429
    Feb 17 14:10
    Q: BACK button or a link ?
  109. Mallory
    @StommePoes
    Feb 17 14:11
    ¿Por qué no los dos?
  110. Srinivas Yedhuri
    @sri429
    Feb 17 14:14
    @StommePoes If this south indian guy got that spanish right, do you mean <a><input type="button"/></a> ?
  111. Mallory
    @StommePoes
    Feb 17 14:19
    ah I thought you were asking "literal control on the page vs letting the browser's back button do the work"
  112. I would say link. It navigates.
  113. "back" can in navigation also mean something back which isn't necessarily the absolute previous thing, while the browser literally goes back one URL. So navigation-wise link also makes sense in the way that when I click a Home link I'm usually also going "back".
  114. zakim-robot
    @zakim-robot
    Feb 17 14:23
    [quidkid] does anyone have a link to a quick video on why we should care about accessibility? preferably less than 3 minutes
  115. Fiona Holder
    @FionaHolder
    Feb 17 14:24
    I'd say link if it navigates, button if it does something ajaxy on the page
  116. Srinivas Yedhuri
    @sri429
    Feb 17 14:24
    fair point. thanks @StommePoes
  117. Similar Q: Create New which opens a dialog. again Link or a button because it does an action of opening a dialog?
  118. Mallory
    @StommePoes
    Feb 17 14:36
    I use buttons to open dialogs
  119. even if I also in doing that, move focus to that dialog
  120. zakim-robot
    @zakim-robot
    Feb 17 15:28
    [dean] @quidkid Barclays did a nice one - https://www.youtube.com/watch?v=sIGTC1iJmnk
  121. Mallory
    @StommePoes
    Feb 17 15:31
    dean: nice
  122. too bad the captions are open
  123. ie built-in
  124. Huh cool I didn't know the WHO switched form the medical-model definition to the new one. Nice.
  125. "or be employed by us" ++
  126. zakim-robot
    @zakim-robot
    Feb 17 16:11
    [michiel] > jkva> ROLE=DRINKS, ROLE=DRINKS
  127. [michiel] Four more beers! Four more beers!
  128. [michiel] @stommepoes, thanks for bashing tabs so I have to improve it ;)
  129. zakim-robot
    @zakim-robot
    Feb 17 16:17
    [michiel] Damn that sounds crappy.
  130. [michiel] I mean: thank you for the feedback, helps improve the APG :)
  131. zakim-robot
    @zakim-robot
    Feb 17 16:46
    [quidkid] dean: thank you so much. I’m looking for something that is a bit more general and less banking focused. I’m trying to convince my creative advertising agency to invest in a company wide accessibility on-site training. appreciate your time!
  132. [drtomlins] question -- we're working on developing the ability to scan a medical record barcode, from within our mobile patient portal site. Would blind or low vision folks typically have the apps etc already on their devices? the idea is that they would scan the barcode from the bracelet they had while in the hospital
  133. zakim-robot
    @zakim-robot
    Feb 17 17:04
    [beth] Well, I bit the bullet and turned in my resignation today. Which is great, except that I'll no longer be attending CSUN. And I’ll no longer have the opportunity to meet all you great people. :(
  134. [marcysutton] I like the Web Accessibility Perspectives videos! https://www.w3.org/WAI/perspectives/
  135. [car] Best of luck with whatever you do next!
  136. zakim-robot
    @zakim-robot
    Feb 17 17:14
    [bbuechel] Question: has anyone found that screen readers have any issues reading tables that contain multiple tbodies? Working on an itemized price list sort of thing and multiple tbodies works well to allow for visually conveying subtotals for the various sections but not sure if that is known to cause heartburn with AT. Appreciate any thoughts/lessons learned. HAPPY FRIDAY!
  137. James Nurthen
    @jnurthen
    Feb 17 17:55
    @bbuechel in my experience multiple tbodies is not an issue. TBODY is mapped like a rowgroup which sounds like it is exactly what you want here.
  138. zakim-robot
    @zakim-robot
    Feb 17 18:02
    [bbuechel] Thanks! I’ve traditionally relied on the natural semantics provided by HTML5. Do you know if there is any enhanced benefit to AT users by incorporating ARIA if the underlying structure is an HTML table (thead, tbody, th, td, scope, etc)?
  139. James Nurthen
    @jnurthen
    Feb 17 18:03
    no - none. Stick with the HTML table
  140. Mallory
    @StommePoes
    Feb 17 18:06
    @beth do what I do: take vacation to go to CSUN
  141. zakim-robot
    @zakim-robot
    Feb 17 18:50
    [beth] I wish! But CSUN will be my last 3 days with United, so I don’t think they’d let me take vacation. (Plus I’m already taking one all of next week!)
  142. zakim-robot
    @zakim-robot
    Feb 17 19:32
    [quidkid] The goal is to hide the mobile menu’s contents from the screen reader until the menu is clicked. For the non-aria solution, they recommended using “display: none; visibility: hidden”. I added these as the default and then upon click of the menu button, I removed the styles. The initial problem was that it was interfering with the animation. Our client’s vendor remediation group suggested that I should add the CSS change after the animation. But this also didn’t work. I realize it’s because if the default is display:none; visibility hidden. Of course the animation still wouldn’t show. The display: none; visibility: hidden hasn’t been removed yet. What should I do?
  143. [quidkid] I also just tried completing removing the code and adding it back in with .html() but it also doesn’t work. How can I satisfy the accessibility requirements AND keep the animation? or is it just not possible?
  144. zakim-robot
    @zakim-robot
    Feb 17 19:39
    [marcysutton] You could add display: none at the end of a keyframe animation, or use JavaScript
  145. [marcysutton] Transition something animatable like opacity and then set display at the beginning or end depending on the animation direction
  146. [quidkid] @marcysutton doesn’t it have to be display:none, visibility hidden from the start though?
  147. [quidkid] the whole issue is that the screenreader is picking up on the mobile menu contents
  148. [marcysutton] you'd have to use redundant visual CSS with something like opacity so when you toggle off display: none for animation it will only impact the accessibility tree during the animation
  149. zakim-robot
    @zakim-robot
    Feb 17 19:44
    [marcysutton] (and not the visual)
  150. [quidkid] sorry im not quite sure what you mean by redundant visual CSS
  151. [marcysutton] You can visually "hide" something with opacity: 0. It is animatable, but it doesn't affect the accessibility tree. If you use a keyframe animation, you can try setting display at the beginning or end of it to also impact the accessibility tree but at the right time.
  152. [marcysutton] Just an idea
  153. [quidkid] when you say it doesn’t affect the accessibility tree does that mean opacity:0 makes it recognizable or not recognizable to screenreaders?
  154. [marcysutton] Opacity has no effect on screen readers.
  155. zakim-robot
    @zakim-robot
    Feb 17 19:50
    [quidkid] i’m honestly not sure how this helps. sorry, newbie developer on the struggle bus. I still need to make it hidden from the screenreader....
  156. [quidkid] hang on.. I was trying to delay the animation before as a fix. it didn’t work but i think i was not doing it the right place. I think i see your point. I could have it as display: none and right before switch it to opacity zero. I think another issue i’m facing is that I don’t really understand the animation thing period as it seemed to be a jquery plugin. I think i gotta dig deeper into and perhaps i could use what i was trying to do before but in the actual JS file for the plugin
  157. [quidkid] thanks @marcysutton for your time and input!
  158. zakim-robot
    @zakim-robot
    Feb 17 20:00
    [marcysutton] Wait...so you're using jQuery? I would recommend using the built-in fadeIn and `fadeOut methods since they will handle display AND animation (assuming all you need is a fade in / fade out animation)
  159. [quidkid] yes im jusing jquery sorry for not mentioning that ahead of time. the animation is to slide in from the left
  160. [quidkid] this website isn’t something i’ve originally coded so i feel hesitant to go messing with things unless i have to because i’m worried it will break. but guess there’s no avoiding that now
  161. zakim-robot
    @zakim-robot
    Feb 17 20:34
    [marcysutton] Here's a demo, but it only slides one direction http://codepen.io/marcysutton/pen/bgyRgL
  162. zakim-robot
    @zakim-robot
    Feb 17 21:06
    [michiel] @StommePoes and others that want to follow the aria-controls discussion: w3c/aria#531
  163. zakim-robot
    @zakim-robot
    Feb 17 22:53
    [car] Any designers out there? New Inclusive Design site from Microsoft:
    https://www.microsoft.com/en-us/design/inclusive
  164. zakim-robot
    @zakim-robot
    Feb 17 23:36
    [garcialo] neat…but it renders oddly for me :p