Archive index

A11y Slackers Gitter Channel Archive 22nd of June 2016

What fresh hell is THIS now? - Patrick Lauke
  1. James Nurthen
    @jnurthen
    Jun 22 04:42
    FF seems to be exposing it correctly on the Accessible Object (looking in the DOM Inspector I see a description for each of the images). However, I can see why JAWS might be having a hard time navigating to the description - which seems to be how it is set up to work with aria-describedby in many of these cases.
  2. zakim-robot
    @zakim-robot
    Jun 22 07:16
    [michiel] marcysutton: I think most—if indeed not all—styles can be achieved without classes. One place I like to use classes is if I see no other way of doing it, or to modularise something. Take this example, from the BEM website:
  3. [michiel] <ul class="lang-switcher">
  4. [michiel] <li class="lang-switcher\_\_item">
    [michiel] <a class="lang-switcher\_\_link" href="url">en</a>
    [michiel] </li>
    [michiel] <li class="lang-switcher\_\_item">
    [michiel] <a class="lang-switcher\_\_link" href="url">ru</a>
    [michiel] </li>
    [michiel] </ul>
  5. [michiel] How does that make sense?
  6. [michiel] Really, who the fuck came up with that?
  7. [michiel] If you feel the need to modularise this language switched, the class on the ul would be enough no?
  8. [michiel] <ul class="lang-switcher">
  9. [michiel] <li>
    [michiel] <a href="url">en</a>
    [michiel] </li>
    [michiel] <li>
    [michiel] <a href="url">ru</a>
    [michiel] </li>
    [michiel] </ul>
  10. [michiel] That can do exactly the same.
  11. [michiel] I see no benefit from having the—to me—unnecessary classes on the li's and anchors.
  12. [michiel] should go back and work on his own framework: cool semantic styles
  13. [michiel] Of course, to each his own, but I don't see any benefit in using a system like this.
  14. zakim-robot
    @zakim-robot
    Jun 22 07:21
    [michiel] If the argument is “it helps younger devs develop in our environment” than maybe you should educate them first.
  15. [michiel] I've gone 13 years without using such a system. I've used SMACSS for two years and liked it when I did. I then realised it's all needlessly complicated and was bloating up my code.
  16. zakim-robot
    @zakim-robot
    Jun 22 12:30
    [michiel] Woohoo! HTML 5.1 is now a candidate recommendation! http://www.w3.org/TR/html51/
  17. Job van Achterberg
    @jkva
    Jun 22 12:32
    w00t!
  18. zakim-robot
    @zakim-robot
    Jun 22 13:06
    [jakecross] Afternoon all, is this channel a good place to get accessibility advice?

  19. [jakecross] I have been looking at a site/app created by a team of people to check it for accessibility, though I am not an expert or even a user of something like a screen reader. I am using the site/app without being an experienced screen reader user.

    When something happens in the UI - e.g. You click a button and the visual representation of the form has now changed: new controls are available, previous controls are now gone, something else is loading up etc.. - how do you notify the screen reader of that kind of information?

  20. Job van Achterberg
    @jkva
    Jun 22 13:10
    @jakecross: live regions: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
  21. See also https://www.w3.org/TR/wai-aria-practices/#chobet
  22. zakim-robot
    @zakim-robot
    Jun 22 13:10
    [jakecross] Thanks, I'll take a look at that.
  23. Job van Achterberg
    @jkva
    Jun 22 13:11
    @jakecross no problem! And yes, this is in general a good channel to get advice.
  24. zakim-robot
    @zakim-robot
    Jun 22 13:11
    [jakecross] Part of me wishes I'd never looked into this for them... as it's absolutely horrible to try and use the thing. I must have written so much code that people just can't use
  25. Job van Achterberg
    @jkva
    Jun 22 13:12
    It can only get better from here, then
  26. zakim-robot
    @zakim-robot
    Jun 22 13:13

    [jakecross] True enough. The Screen Reader I am working through is called SuperNova

    Does it have a reputation for being good/bad?

  27. Job van Achterberg
    @jkva
    Jun 22 13:15
    The Dolphin screen reader? I've not used it personally. Perhaps someone else has an opinion on it
  28. I don't think it's very popular as a Windows screen reader as compared to JAWS, but I don't know whether that's related to quality or features
  29. You can try downloading the JAWS demo and see if you like working with that better
  30. zakim-robot
    @zakim-robot
    Jun 22 13:19
    [jakecross] I am using SuperNova because that is what their users will be using. While I don't have any authority to say "use something else" - I was just curious as to whether their users were on a poor product and should at least be advised as such.
  31. [jakecross] (thank you for all your help on this, it's very much appreciated!)
  32. [jakecross] It's hard to know where to start as a total beginner in the area.... so having some jumping points will help tremendously
  33. Job van Achterberg
    @jkva
    Jun 22 13:21
    Sure. If you have other specific questions, just ask
  34. zakim-robot
    @zakim-robot
    Jun 22 13:22
    [jakecross] Keyboard shortcuts - are they something blind people should be made aware exist for navigation on the page? There are shortcuts... but are they more for sighted people using the keyboard to navigate?
  35. Job van Achterberg
    @jkva
    Jun 22 13:24
    What sort of shortcuts are these? Users tend to be used to browser default shortcuts, or their screen reader shortcuts
  36. If these are quite specific shortcuts in say, a web-based game or heavily interactive webapp, it might make sense. Unless they'd interfere with the screenreader interpretation or shortcuts, but it needs to be more specific than that
  37. zakim-robot
    @zakim-robot
    Jun 22 13:38

    [jakecross] They are application specific - so I think making them aware of these shortcuts may be a good idea.

    There is a light screen that pops up if you type in the question mark... but the user is given no indication that that is available to them.

  38. JP DeVries
    @jpdevries
    Jun 22 13:43

    if there's an aria-describedby in a form pointing to something that is display: none, the text inside that display: none object will be read out regardless

    That is a good trick to know. I've been using accessibly hidden text even with aria-describedby if I want to visually hide it https://github.com/jpdevries/availability-grid/wiki/Techniques#accessibly-hiding-text

  39. @zakim-robot

    Keyboard shortcuts - are they something blind people should be made aware exist for navigation on the page? There are shortcuts... but are they more for sighted people using the keyboard to navigate?

    I've been away for a few days. Slackin'! This is something I was recently questioning myself. I've been working on what I hope will be an uber-a11y availability grid component that supports keyboard, VoiceOver but I wanted to make sure the keyboard shortcuts are read aloud so I used the aria-describedby trick and/or accessibly hidden text to achieve that https://github.com/jpdevries/availability-grid#voiceover-usage

  40. powrsurg
    @powrsurg
    Jun 22 13:54
    @jakecross it may be worth it to listen to some of the ID24 videos http://www.inclusivedesign24.org/
  41. zakim-robot
    @zakim-robot
    Jun 22 13:58
    [jakecross] I'll check those out definitely! Thank you
  42. [jakecross] I was saying to someone this morning "you'd hope that there was something like [insert convoluted description of live regions]" - :)
  43. [michiel] I need a use case for where a developer could do an action on transitionend.
  44. [michiel] Anyone?
  45. [kate] animation?
  46. [kate] when you want to stop a loading spinner type of a thing?
  47. [michiel] Say, you do something, then something transitions in, and you do an action when the transition is done.
  48. [michiel] Here is an example: https://dir.rawr.eu/research/animation-text/test.html
  49. [michiel] I'm working on this for the CSS spec: https://dir.rawr.eu/research/animation-text/
  50. [michiel] We want to include some samples of use cases and how to solve them.
  51. [michiel] So the one I have now is to show what not to do.
  52. [michiel] It might not be the best one though. So I would like to explore other options :)
  53. [michiel] Original text taken from: https://drafts.csswg.org/css-transitions/#accessibility
  54. zakim-robot
    @zakim-robot
    Jun 22 14:05
    [michiel] Further more, focus should be set to the button, not the dialog.
  55. [michiel] But that is me messing it up :P
  56. powrsurg
    @powrsurg
    Jun 22 14:06
    Maybe I haven't had enough coffee yet this morning: are you arguing that devs should use transitionend, or should they set a timeout that fires at the time of the transition end that sets the focus?
  57. JP DeVries
    @jpdevries
    Jun 22 14:06
    @zakim-robot that is interesting. It's cool that you are in touch with a spec author. I was just wonering if it might make sense for there to be some sort of standard to disable animations / transitions complete in the spec but then I just realized I suppose you could 
    html.no-animations * {   transition:none !important;   animation:none !important; }
  58. powrsurg
    @powrsurg
    Jun 22 14:08
    @michiel one of the ID24 videos actually recommended the dialog, not the button. I always thought that made more sense but most docs I see, and people here tend to advocate, are for the first focusable eleement
  59. I feel it makes more sense for it to be the dialog, but the first focusable is more useful for everyone else ...
  60. zakim-robot
    @zakim-robot
    Jun 22 14:11
    [michiel] Brian: the text in de CSS transition spec says: User agent implementors should be aware that Web content may depend on the firing of transition events, so implementations of such mitigations may wish to fire transition events even if the transitions were not run as continuous animations. However, it is probably poor practice for Web content to depend on such
  61. [michiel] events to function correctly.
  62. [michiel] What we're arguing is that you should not rely on transitionend for web content.
  63. [michiel] So, don't set focus to something on transitionend, or show some text on transition end.
  64. [michiel] Just looking for real world use cases :)
  65. powrsurg
    @powrsurg
    Jun 22 14:13
    oh, I thought you wrote that as part of an update
  66. zakim-robot
    @zakim-robot
    Jun 22 14:13
    [michiel] No, that's already in there. We want to clarify that section by having examples in there.
  67. [michiel] Makes more sense if those examples come from the real world.
  68. powrsurg
    @powrsurg
    Jun 22 14:14
    if it's not done on transition end when should it be done, immediately?
  69. zakim-robot
    @zakim-robot
    Jun 22 14:15
    [michiel] jpdevries: it would make sense if there was a standard. There are however privacy consideration with that approach: https://drafts.csswg.org/css-transitions/#privacy
  70. [michiel] powrsurg: that could be one of the solutions, or a timeout as you said.
  71. [michiel] Kate: I'm not sure what you mean, that sounds like the opposite (triggering transitionend rather than listening for it being triggered).
  72. [kate] i was thinking of transitionend as when the pages/views/panels/etc were done switching from one to the other
  73. powrsurg
    @powrsurg
    Jun 22 14:17
    well, a timeout would have an issue in that if the AT was slowing the animation then the animation wouldn't finish by the time it fired
  74. zakim-robot
    @zakim-robot
    Jun 22 14:17
    [kate] In the past I've started something like an animation/spinner, when the transition begins, and ended it when the transition ends
  75. [kate] but maybe you meant when the animation kind of thing is done transitioning
  76. [michiel] powrsurg: how would AT slow a transition?
  77. [michiel] The point of this is to take a real world example, and show an alternative way of doing it that doesn't rely on the animation ending.
  78. powrsurg
    @powrsurg
    Jun 22 14:20
    I'm not aware of how / any AT that does, but the spec you posted earlier said "Thus, users who are sensitive to movement, or who require additional time to read or understand content, may benefit from user agent features that allow animations to be disabled or slowed down."
  79. zakim-robot
    @zakim-robot
    Jun 22 14:21
    [michiel] Right. That's not implemented, but yeah, that could mess with time-outs.
  80. [michiel] Would a solution be that it listens for transitionend but triggers anyway after a delay?
  81. powrsurg
    @powrsurg
    Jun 22 14:22
    now you're making me try to find where we even use transitions to review ...
  82. zakim-robot
    @zakim-robot
    Jun 22 14:23
    [michiel] That would however make the UI feel pretty sluggish I guess.
  83. [michiel] I'll ask for more input on today's call.
  84. [michiel] powrsurg: yeah, I'm having trouble finding this in the real world.
  85. powrsurg
    @powrsurg
    Jun 22 14:24
    I feel like a part of the problem is a lot of people end up using things like jQueryUI and calling functions on things like slideUp
  86. zakim-robot
    @zakim-robot
    Jun 22 14:25
    [michiel] That too, but that doesn't affect the CSS spec too much I guess.
  87. powrsurg
    @powrsurg
    Jun 22 14:29
    (BTW, I know it's just an example, but in your dialog example in Firefox I get a cursor when I'm over the text in the dialog, and I can I can drag the hidden text, but not highlight it)
  88. powrsurg @powrsurg feels like he is causing more problems then actually helping :(
  89. zakim-robot
    @zakim-robot
    Jun 22 14:33
    [michiel] Shit, yeah, I fucked that up.
  90. [michiel] Argh, the whole point is not the working of the example though.
  91. [michiel] This is all taking too much time :(
  92. powrsurg
    @powrsurg
    Jun 22 14:36
    it's killing me that I can't think of where we've used transitions at my current job (which admittedly, this site isn't very mobile-friendly). Trying to go through stuff at my old job, but they gutted a lot of the sites I worked on since I wasn't around to maintain them anymore and the newer devs mostly suck and can only do tweaks to WP sites
  93. I can't find a URL, but I think one example would be on a mobile-friendly navigation system where the nav gets exposed when a user clicks a button. Some sites will need to apply a tabindex=-1 to take the links out of tab order if they are bringing it in from the side or something
  94. zakim-robot
    @zakim-robot
    Jun 22 14:41
    [michiel] Okay, I'm letting this go for now. Will come back here after call and tell if we came up with something. Thank you for looking into it though!
  95. powrsurg
    @powrsurg
    Jun 22 14:44
    np, sorry for not being helpful :(
  96. zakim-robot
    @zakim-robot
    Jun 22 14:45
    [michiel] No it's fine. jQuery UI mention was good.
  97. [michiel] Even though it doesn't impact CSS spec, it is something worth mentioning during call.
  98. Mallory
    @StommePoes
    Jun 22 16:01
    Hm, I found an article about canvas accessibility in Firefox (old article) and the article states "keyboard should have access" and I've got something in canvas presented to me now which IS accessible via keyboard... except when you're using a screen reader.
  99. Other than setting role=application on the thing (which I woulnd't advise), I'm not sure how to say "let keystrokes make it through". Though even tabs aren't making it through. Turn the SR off, and I can tab onto fake canvassy "buttons" and "sliders" and arrow around as neeeded
  100. I'm not sure if they can fix this or if they'd still need to just ditch canvas entirely, as I don't seen anything new about canvas accessibility out there... lots of articles from 2009-2011 when it was newish
  101. James Nurthen
    @jnurthen
    Jun 22 16:03
    do the buttons have a DOM or are they pure canvassy buttons?
  102. if they don't have anything in the DOM (child elements of the canvas) it ain't going to work
  103. Mallory
    @StommePoes
    Jun 22 16:05
    It's pretty much all canvas, but the worst part is opening my devtools almost always makes it all die in a fire and go away
  104. and sometimes I can't load them
  105. and on one windows machine they won't load in any browser I have
  106. and in another machine on IE 11 all the canvas things flicker between white background and colours and black background and colours... which nobody else can reproduce so I can't tell what it is but if I had photosensitive epilepsy I'd be in for a possible coma
  107. James Nurthen
    @jnurthen
    Jun 22 16:06
    sounds like they have discovered an awesome way of protecting their code :)
  108. Mallory
    @StommePoes
    Jun 22 16:06
    This stuff is hard to test when it doesn't load well, load everywhere, and usually doesn't let me inspect
  109. Maybe, I tought that at first
  110. and on this Windows machine I thought maybe my Dragon plugin was causing all browsers to doie
  111. the machine that has my ZoomText and Dragon are on the machine they won't run on
  112. I've tried local files, files on my server, and files on the vendor's server
  113. But in any case, the one time I could see stuff, it looked like everything was in canvas
  114. clickables too
  115. James Nurthen
    @jnurthen
    Jun 22 16:08
    yeah - i have problems with the dragon plugin sometimes too.... I think it hijacks some stuff it shouldn't
  116. Mallory
    @StommePoes
    Jun 22 16:16
    It would explain why all my browsers on that machine won't load (or briefly load then make vanish) these canvas things, they all have the Dragon plugin.
  117. It might be triggering their DRM thing if that's indeed what makes things puke with devtools open
  118. So it looks like the best I can advise is that, if they are willing to change their tech, these interactives could be HTML form controls (sliders, buttons) on the control side and SVG perhaps paired with hidden text that updates on the other
  119. We have trouble with complex SVGs too but being DOMmy, hidden text could possibly help work around this.
  120. James Nurthen
    @jnurthen
    Jun 22 16:19
    I dont see why canvas couldn't work. You can have a child DOM for all this stuff which theoretically screen readers (and keyboard users) access
  121. but without devtools access it is hard to say if they have done this and it isn't working or they haven't done it at all!
  122. Mallory
    @StommePoes
    Jun 22 16:28
    theoretically is a bit of my issue
  123. yeah that as well, I can't measure what they've done
  124. but I can tell someone did alot of work to make the basic thing keyboard accessible
  125. James Nurthen
    @jnurthen
    Jun 22 16:29
    well yeah - but if they did it the wrong way that aint going to help!
  126. Mallory
    @StommePoes
    Jun 22 16:29
    like, without a screen reader, the sliders work beautifully, no jank or a stupid high or low amount of movement per arrow press
  127. (problems I've seen in other sliders that were somewhat keyboard accessible)
  128. And with a screen reader it seems I focus on the canvas element itself, and sometimes I can focus into the slider thumbs, but then arrows don't work, and I'm assuming the SRs are hijacking those, but can't tell for sure without devtools.
  129. James Nurthen
    @jnurthen
    Jun 22 16:30
    yeah....you really don't know!
  130. can you disable DNS plugin to see if that s causing the crash
  131. Mallory
    @StommePoes
    Jun 22 16:50
    was next on my list of things to try
  132. But esp curious of IE flickering, someone on their end checked in IE and did not get flickering, so if I can disabled dragon on IE that will be good.
  133. Job van Achterberg
    @jkva
    Jun 22 17:33
    theoretica11y
  134. zakim-robot
    @zakim-robot
    Jun 22 17:44
    [lliskovoi] Hi all! I’m interested in hearing people’s thoughts on the WordPress Accessibility plugin? Do you have any experience with it? Is it effective? Are there issues that it isn’t good at fixing? etc. All thoughts and comments are welcome and much appreciated! :)
  135. luis garcia
    @garcialo
    Jun 22 17:46
    I think it's worth looking into. I didn't use it a ton, but Joe Dolson is pretty much THE WordPress Accessibility person, imo
  136. Job van Achterberg
    @jkva
    Jun 22 17:46
    lliskovoi: A knowledgeable person to ask on that subject is https://twitter.com/rianrietveld
  137. zakim-robot
    @zakim-robot
    Jun 22 17:52
    [lliskovoi] @garcialo @jkva, thanks for the leads! :)
  138. luis garcia
    @garcialo
    Jun 22 17:53
    @lliskovoi I mentioned Joe Dolson because it's his plugin ;)
  139. Mallory
    @StommePoes
    Jun 22 17:53
    RianRietveld++ she's very knowledgable, also coolfields consulting (graham armfield)
  140. and joe
  141. zakim-robot
    @zakim-robot
    Jun 22 19:23
    [michiel] jnurthen: you here?
  142. James Nurthen
    @jnurthen
    Jun 22 19:25
    @MichielBijl yes
  143. zakim-robot
    @zakim-robot
    Jun 22 19:25
    [michiel] How's life at Oracle?
  144. James Nurthen
    @jnurthen
    Jun 22 19:26
    fine thanks... working on a presentation for the Intuit F2E summit next week
  145. zakim-robot
    @zakim-robot
    Jun 22 19:26
    [michiel] Nice!
  146. [michiel] Think I've seen that mentioned.
  147. [michiel] Anyway, heard you were in Amsterdam in August?
  148. James Nurthen
    @jnurthen
    Jun 22 19:26
    yep - quick vacation
  149. zakim-robot
    @zakim-robot
    Jun 22 19:27
    [michiel] Are you limited to Amsterdam?
  150. James Nurthen
    @jnurthen
    Jun 22 19:27
    probably.... have an AirBNB rented there
  151. not averse to a day trip but depends what the wife wants to do really :)
  152. zakim-robot
    @zakim-robot
    Jun 22 19:28
    [michiel] Is she into accessibility meetups? :P
  153. James Nurthen
    @jnurthen
    Jun 22 19:28
    i doubt it....but I can see
  154. what is the plan?
  155. zakim-robot
    @zakim-robot
    Jun 22 19:29
    [michiel] We're planning a meetup somewhere in NL, so would be nice if you could be there.
  156. [michiel] If not a beer would be nice.
  157. [michiel] Although I will probably have moved to the UK by then.
  158. [michiel] Do you by any chance have a lay over in London? :P
  159. James Nurthen
    @jnurthen
    Jun 22 19:31
    i do - i'll be there the evening of July 24-25 but will have my kids with me
  160. Job van Achterberg
    @jkva
    Jun 22 19:31
    @Michiel I'm asking him the exact same stuff in a direct channel, derp
  161. James Nurthen
    @jnurthen
    Jun 22 19:33
    @MichielBijl if it doesn't work out i'll see you in Lisbon
  162. Job van Achterberg
    @jkva
    Jun 22 19:33
    Lucky bastards ;)
  163. James Nurthen
    @jnurthen
    Jun 22 19:33
    just booking that one.... anyone know which hotels people are staying in?
  164. (other than sarcastic replys like all of them)
  165. zakim-robot
    @zakim-robot
    Jun 22 19:34
    [michiel] jnurthen: the one across the congres thingy.
  166. James Nurthen
    @jnurthen
    Jun 22 19:34
    not on my corp list unfortuenatly and is a PITA to do anything different.... I think I'm going to end up in the doubletree
  167. zakim-robot
    @zakim-robot
    Jun 22 19:34
    [michiel] Anyway, I might be moving on 24-25th, so I'll see you in Lisbon then.
  168. [michiel] jkva: whoops.
  169. Job van Achterberg
    @jkva
    Jun 22 19:35
    Haha
  170. zakim-robot
    @zakim-robot
    Jun 22 19:48
    [michiel] Gah, I need to get rid of all my apartments contents in a couple weeks :X
  171. James Nurthen
    @jnurthen
    Jun 22 20:24
    @MichielBijl after the vote will they still let you in?
  172. Job van Achterberg
    @jkva
    Jun 22 20:25
    I imagine a picture of a dinosaur onesie with a line through it
  173. zakim-robot
    @zakim-robot
    Jun 22 20:27
    [michiel] Haha
  174. [michiel] I have been informed that even if they vote to leave the EU it will take them 2 years to get it all done.
  175. [michiel] Any hopes on an agreement with the EU regarding open trading would include freedom of movement for the people. Same as with Norway.
  176. Amanda Rush
    @amandarush
    Jun 22 20:28
    @[lliskovoi re: the WPAccessibility plugin, yes very effective, but obviously won't fix color contrast issues or issues introduced by plugins. pair it with an accessibility-ready theme though and mind the plugins you choose for stuff, plus decide how much inaccessibility you're willing to put up with to get the features you want, and you're golden.
  177. Obviously I don't mean to suggest that's be-all/end-all for accessibility and a plugin can never replace knowhow or a professional.
  178. Amanda Rush
    @amandarush
    Jun 22 20:39
    And yes Rian is extremely knowledgeable and you should do whatever she tells you. :P