Archive index

A11y Slackers Gitter Channel Archive 7th of June 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jun 07 06:03
    [michiel] Morning slackers!
  2. zakim-robot
    @zakim-robot
    Jun 07 07:26
    [jv] morning
  3. Peter Krautzberger
    @pkra
    Jun 07 09:34
    morning.
  4. zakim-robot
    @zakim-robot
    Jun 07 13:17
    [dean] Anybody any thoughts on this? http://www.mediaaccess.org.au/digitalaccessibilityservices/services/education-and-training/pcwa/
  5. powrsurg
    @powrsurg
    Jun 07 13:22
    I love the etc. in the fourth point
  6. And that is a lot of money
  7. is that what a normal college course costs these days?
  8. And the video on who should take this course doesn't have captions
  9. powrsurg
    @powrsurg
    Jun 07 13:42
    wait, they have two separate videos. One with AD and one without
  10. zakim-robot
    @zakim-robot
    Jun 07 14:31
    [ariellecason] Hi all - who’s the @admin? Someone I know would like to be added - renaissancerachel@yahoo.com
  11. zakim-robot
    @zakim-robot
    Jun 07 14:38
    [kate] They can just join
  12. [kate] at least, i think i just joined without an admin... lol
  13. [kate] trying to remember
  14. powrsurg
    @powrsurg
    Jun 07 15:12
    https://bugzilla.mozilla.org/show_bug.cgi?id=1242599 w00t
  15. Šime Vidas
    @simevidas_twitter
    Jun 07 15:40
    Could you give me a few guidelines on how to make an <abbr> element both keyboard and screen reader-accessible?
  16. zakim-robot
    @zakim-robot
    Jun 07 15:41
    [karlgroves] Why would abbr be keyboard accessible?
  17. Šime Vidas
    @simevidas_twitter
    Jun 07 15:41
    so that you can view the tooltip when tabbing through the text
  18. (by default, the tooltip only shows when hovering with the mouse)
  19. I forgot, I need touch as well
  20. zakim-robot
    @zakim-robot
    Jun 07 15:43
    [karlgroves] <abbr> isn’t meant to be accessible to the keyboard - other than, of course, as you use reading commands to traverse through content
  21. Šime Vidas
    @simevidas_twitter
    Jun 07 15:43
    Ok, so touch (tapping on it should reveal tooltip) and screen reader would be the requirements
  22. zakim-robot
    @zakim-robot
    Jun 07 15:44
    [karlgroves] If the actual tooltip (in other words, displaying it visually) is what you want, you’ll want to create it with JS
  23. Šime Vidas
    @simevidas_twitter
    Jun 07 15:45
    ok, so click/tap opens tooltip; what about screen readers?
  24. Example:
    After “every successful <abbr title="Continuous Integration ">CI</abbr> build of your master branch”,…
  25. zakim-robot
    @zakim-robot
    Jun 07 15:47
    [karlgroves] The content should be available to the user by default.
    https://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
  26. [karlgroves] Here’s something I made that uses title attribute content for tooltip
    http://jsbin.com/tocore/1/edit?html,css,js,output
  27. Šime Vidas
    @simevidas_twitter
    Jun 07 15:48
    “The title on the abbr element is well supported by screen reader software…” Oh, good then :)
  28. zakim-robot
    @zakim-robot
    Jun 07 15:50
    [karlgroves] thumbsup emoji
    I created the above because a client absolutely positively had to have their tooltip display no matter what and didn’t want to hear any of my logic.
  29. Šime Vidas
    @simevidas_twitter
    Jun 07 15:50
    Ok, thanks for all the help 👍
  30. zakim-robot
    @zakim-robot
    Jun 07 15:52
    [marcysutton] @ariellecason: your friend can join by going to the signup app: https://web-a11y.herokuapp.com
  31. Michael Fairchild
    @mfairchild365
    Jun 07 15:58
    re:abbr tool tip. I want to understand this better as it was my impression that the title attribute on abbr elements were not well supported by screen readers. See for example the abbr element in http://thepaciellogroup.github.io/AT-browser-tests/
  32. some basic testing with VO also shows that the title attribute is not read
  33. zakim-robot
    @zakim-robot
    Jun 07 17:07
    [ry5n] Happy to see my article on text contrast discussed. And thanks for pointing out that my thought on placeholder contrast are contraindicated by WCAG. I’m going to update the article to make it clearer this is not a WCAG exception. I think the crux is that placeholders are of limited value due to conflicting UX issues.
  34. [ry5n] Overall with accessibility I’m most interested in outcomes. So WCAG aside I’m curious what people think about text as an enhancement. If a placeholder is redundant (in a good way, i.e. there is a label, no missing cues), fails WCAG AA contrast but helps some users, is that something to avoid?
  35. zakim-robot
    @zakim-robot
    Jun 07 20:10
    [simong] What’s the opinion of the channel about office document formats? Assuming somebody is making an effort of creating accessible documents (e.g., using proper headings, alternative descriptions, minding contrast, ..), is there a preference as to whether the document is exported as a tagged PDF file or provided in the source format (.doc, .ppt) ?
  36. zakim-robot
    @zakim-robot
    Jun 07 20:17

    [johnbhartley] @ry5n the placeholder text is looking at users with visual disabilities, who may have trouble with color contrast, but may not necessarily be using a screen reader. So if the placeholder is truly redundant (duplicate text from the label) then I don't think contrast matters, but generally you would have some sort of suggestion in there, at which point it seems like contrast should meet guidelines. 

    <label for="searchBox">Search:</label> <input id="searchBox" placeholder="Enter city, zip, or potato">

    The above gives a lot of suggestion to the user via the placeholder, so in that situation I think contrast would need to meet the guidelines. In general I can't think of too many truly redundant visual label/placeholder pairings, so overall the contrast should be 4.5:1. Just my two cents =D

  37. zakim-robot
    @zakim-robot
    Jun 07 20:49
    [jv] https://developers.facebook.com/videos/f8-2016/design-for-everyone-using-react-to-make-your-apps-globally-accessible/
  38. Michael Fairchild
    @mfairchild365
    Jun 07 21:40
    Can someone confirm that I am not going insane? This issue has been driving me up the walls the last few days http://mfairchild365.github.io/aria-tabs-vo-bug/
  39. James Nurthen
    @jnurthen
    Jun 07 21:41
    VO focus issues :) I think there are a few on here that can sympathise
  40. Michael Fairchild
    @mfairchild365
    Jun 07 21:42
    Are focus issues common with VO?
  41. zakim-robot
    @zakim-robot
    Jun 07 21:43
    [marcysutton] yes.
  42. Michael Fairchild
    @mfairchild365
    Jun 07 21:43
    :( thats not good
  43. zakim-robot
    @zakim-robot
    Jun 07 21:45
    [marcysutton] is the problem that the currently selected tab isn’t announced unless you add some CSS? that seems really odd...
  44. Michael Fairchild
    @mfairchild365
    Jun 07 21:47
    Sort of. The problem is that after you activate a tab, VO sends focus to an adjacent tab and reads that instead... unless you remove some css.
  45. css that should be purely presentational (padding-bottom).
  46. zakim-robot
    @zakim-robot
    Jun 07 21:48
    [marcysutton] Your video is really hard to follow…. I would recommend annotating it so people know when you were the one moving the cursor, versus VO moving it
  47. [marcysutton] I ran into that with this one as well: https://www.youtube.com/watch?v=hqd4ZgQMuK0
  48. Michael Fairchild
    @mfairchild365
    Jun 07 21:49
    Ah, good idea.
  49. zakim-robot
    @zakim-robot
    Jun 07 21:50
    [marcysutton] I haven’t ever run into issues with tabs, but I know VO has trouble keeping track of things right now.
  50. [marcysutton] There was an Ember-a11y issue in here a few days ago in addition to mine...
  51. James Nurthen
    @jnurthen
    Jun 07 21:51
    we've been having some weird ones on iOS safari with VO where focus keeps on tracking to the wrong places until we rotate the device....
  52. zakim-robot
    @zakim-robot
    Jun 07 22:02
    [nathanhammond] We tracked down one issue today:
  53. Michael Fairchild
    @mfairchild365
    Jun 07 22:03
    I updated the video with annotations, hopefully it is easier to follow now.
  54. zakim-robot
    @zakim-robot
    Jun 07 22:03
    [nathanhammond] https://github.com/ember-a11y/ember-a11y/issues/2#issuecomment-224357862
  55. [nathanhammond] Using hash URLs for anything results in focus trouble and should be avoided for Safari/VO issues.
  56. [marcysutton] TIL!
  57. [nathanhammond] TIL too!
  58. Michael Fairchild
    @mfairchild365
    Jun 07 22:05
    The tabs implementation also uses hash URLs.
  59. zakim-robot
    @zakim-robot
    Jun 07 22:06
    [marcysutton] I wonder if that impacts my recommendation to use <a ng-href=“#”> and routing instead of <a href=“#” ng-click=“someRoutingFunction()”>
  60. [nathanhammond] Sarbbottam spent three days researching that issue and creating the simplistic reproductions.
  61. James Nurthen
    @jnurthen
    Jun 07 22:06
    hmmm - thanks
  62. zakim-robot
    @zakim-robot
    Jun 07 22:07
    [nathanhammond] Note that it has trouble even with preventDefault
  63. [marcysutton] I’m so glad we have this space, we can connect issues
  64. [nathanhammond] @marcysutton: I'm not sure how all of the things inside of Angular works, but my guess is that we need to make sure recommended behavior for routing doesn't rely on hash at all.
  65. Michael Fairchild
    @mfairchild365
    Jun 07 22:09
    I created a webkit bug here. I'm not sure how to bring attention to it so that it gets addressed. Perhaps if more people follow or comment on it? https://bugs.webkit.org/show_bug.cgi?id=158430
  66. zakim-robot
    @zakim-robot
    Jun 07 22:09
    [nathanhammond] @marcysutton: It looks like your recommendation is safe, but I don't know the implementation details.
  67. [marcysutton] I’ll have to do some investigating on it. So far my client isn’t moving forward with that one because it’s too risky.
  68. [marcysutton] (in a large application)
  69. [marcysutton] A related question I had though: what is the correct place to report VO bugs? I had filed a Webkit bug, but it’s more of a platform bug...
  70. Michael Fairchild
    @mfairchild365
    Jun 07 22:11
    Good question. I had assumed that it was an issue with webkit because everything works correctly in other browsers on the same version of the OS.
  71. zakim-robot
    @zakim-robot
    Jun 07 22:12
    [nathanhammond] I filed two radars against VO.
  72. [nathanhammond] So, I think we've covered it between us. :p
  73. [cordelia] @marcysutton, you may find this “Where to report bugs” page helpful: http://whoseline.a11yideas.com/bugs.html
  74. [marcysutton] ooh thanks @cordelia!
  75. [marcysutton] bookmarks it
  76. [cordelia] ^ from a talk at CSUN this year by cb, birkir, and sina
  77. [cordelia] It’s really tricky to figure out whether something is a browser bug or a screenreader bug. :\
  78. Sarbbottam Bandyopadhyay
    @sarbbottam
    Jun 07 22:54

    @mfairchild365 commenting out https://github.com/mfairchild365/aria-tabs-vo-bug/blob/gh-pages/index.html#L239-L246 and adding 

    ev.preventDefault(); ev.stopPropagation();

    after line#229, works fine for me.

  79. Michael Fairchild
    @mfairchild365
    Jun 07 23:04
    @sarbbottam that would do it, but it would also prevent the current url from changing, which i need so that tabs can be shared.
  80. Šime Vidas
    @simevidas_twitter
    Jun 07 23:16
    Quick question: Say, I have a button that opens the site’s menu. Would this system work:
    1. I have <a href="#menu"> in my markup (the menu is displayed at the end of the page)
    2. With JavaScript, I hide the menu (I want it to slide in from the side), and then I transform the anchor into a button by:
      a. adding role="button"
      b. adding a "keyup" handler (SPACE should activate it)
      c. adding a "click" handler (JavaScript logic that slides in the menu)
  81. All this is for progressive enhancement, in case it’s not obvious :)
  82. zakim-robot
    @zakim-robot
    Jun 07 23:20
    [scottohara] I have a guess where you're coming from, but what's the expectation w/out js?
  83. Šime Vidas
    @simevidas_twitter
    Jun 07 23:21
    It’s an anchor that links to the menu at the bottom of the page; the anchor is then progressively enhanced into a button that slides the menu from the side.
  84. The gist of my question is, is it enough to add role="button" or do I need to actually replace the anchor with a <button> (all in JavaScript)?
  85. Michael Fairchild
    @mfairchild365
    Jun 07 23:24
    i think that sounds reasonable, but you would probably want to send focus to the newly exposed navigation too.
  86. zakim-robot
    @zakim-robot
    Jun 07 23:27
    [scottohara] if you’re going to treat it as a jump link w/out, then using JS to add the expected aria attributes and click events should be good. As @mfairchild365 says, you’ll want to be sure that focus is moved to the menu, but the #menu should do that.
  87. [scottohara] the reason i framed my question that was is because I was working through a similar issue the other day, where I was trying way too hard to recreate the JS experience without JS, and I realized that it just wasn’t a proper expectation to think that people would expect a component to work exactly the same with/without JS
  88. Šime Vidas
    @simevidas_twitter
    Jun 07 23:32
    I think a good approach is to try to define the no-JS experience first; JavaScript is so powerful, you can add the JS experience easily once the no-JS part works :)
  89. but this is just a button that opens a thing; it may not be that easy for more complex behaviors
  90. zakim-robot
    @zakim-robot
    Jun 07 23:49
    [scottohara] right. no argument here to any of that