Archive index

A11y Slackers Gitter Channel Archive 3rd of March 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Mar 03 06:16
    [nathanhammond] Hello beautiful people! I've written a post about how I'm working to make Ember accessible: http://www.nathanhammond.com/building-for-accessibility
  2. zakim-robot
    Mar 03 06:17
    [nathanhammond] More specifically, I was hoping somebody new weird implementation tricks and details about Voiceover and NVDA to get them to behave correctly.
  3. zakim-robot
    Mar 03 06:21
    [nathanhammond] Given this demo: http://nathanhammond.github.io/ember-a11y/ ... when you set focus to a div (group) in Safari+Voiceover it doesn't move to the first item in the group when you VO+Right, or allow you to dive into the group when you VO+Shift+Down
  4. zakim-robot
    Mar 03 06:23
    [nathanhammond] In NVDA when using arrow left and right navigation neither space nor enter actually trigger links. Tab navigation works as expected.
  5. zakim-robot
    Mar 03 06:24
    [nathanhammond] Also, Voiceover on El Capitan seems to lose its mind after a few moments and will randomly set the focus to some other element on the page.
  6. zakim-robot
    Mar 03 06:43

    [kevinchao89] We're using nested lists to represent elements. The problem with this, however, is that users can't jump navigation from one level 0 list item to the next level 0 list item. Which means in order to get to the next element, they need to go through all the levels of the list.

    One solution to this is treeviews, but those don't work on mobile web, apparently. Another solution is using headings for the element titles so that navigation becomes easier. However, I am worried that this will clutter up the navigation panel and new users will be left overwhelmed and confused the first time they visit the page.

    Are there any other potential options that I am missing?

  7. zakim-robot
    Mar 03 06:47
    [jitendra] Anyone from Wordpress team here? linked pages on this articles are broken https://make.wordpress.org/accessibility/handbook/
  8. MichielBijl
    Mar 03 08:48
    Morning slackers
  9. zakim-robot
    Mar 03 09:23
    [dean] Morning Michiel
  10. MichielBijl @MichielBijl waves
  11. MichielBijl
    Mar 03 09:42
    Just bought a copy of Sketch. I hope it works better than Pixelmator for certain things.
  12. MichielBijl @MichielBijl is lucky enough t have been able to buy it with edu discount 8)
  13. jkva
    Mar 03 09:44
    Interesting
  14. MichielBijl
    Mar 03 09:45
    Want to use it for UI stuff (which it is made for). And maybe annotations etc.
  15. jkva @jkva comes across http://flyingmeat.com/acorn/
  16. StommePoes
    Mar 03 09:54
    @jitendra I dunno, but on Twitter there's Amanda Rush (megarush1024), Graham Armfield (coolfields) and Rian Rietveld (rianrietveld) off the top of my head. Oh and Joe Dolson (joedolson)
  17. StommePoes
    Mar 03 09:55
    https://fronteers.nl/congres/2016-spring/news/live-transcripts-at-fronteers-spring-conference check it! Fronteers will have live CART steno people!!
  18. StommePoes
    Mar 03 09:56
    @kevinchao89 the only thing I can think of right now is, you'd have to override SR navigation and Javascript in some special local accesskeys where, if the user is already focussed somewhere in the list, that numbers or some other key can bring them specifically to the first item of each sublist.
  19. StommePoes
    Mar 03 09:56
    @kevinChao89 and I've had to add role=application at times to force SRs to pass on keystrokes to JS, and that's always kinda hairy.
  20. StommePoes
    Mar 03 09:57
    @kevinChao89 is there somewhere an option to also display the lists flat with headings? Similar to what you see in TOCs and fat-footer navigation?
  21. StommePoes
    Mar 03 09:58
    Oh also, I heard via the Twitters that WordPress is looking for VO/a11y experts to help them debug some nasty dropdown bug.
  22. MichielBijl
    Mar 03 09:59
    @jkva: I tried that couple years back, didn't like it.
  23. MichielBijl
    Mar 03 10:01
    And you already bought Pixelmator =P
  24. jkva
    Mar 03 10:01
    yep :)
  25. stevefaulkner
    Mar 03 13:20
    @nathanhammond the demo you pointed to does not appear to exhibit the behaviour you talked about, as in "when you set focus to a div (group)" which div gets focus?
  26. stevefaulkner
    Mar 03 13:20
    @nathanhammond i was using firefox 44/win 10
  27. zakim-robot
    Mar 03 14:07
    [kevinchao89] AFAIK, role="application" and JavaScript only overwrites desktop screen readers and won't impact mobile screen reader touch gestures. What'd be really helpful is the directTouch iOS Accessibility API, but didn't see a solution in ARIA 1.1 Draft.
  28. zakim-robot
    Mar 03 14:45
    [deborah_kaplan] @alice: hey good morning. :D and a question: accessibility-developer-tools stable is 2 years behind master. Is it still the one we should be using?
  29. nathanhammond
    Mar 03 15:38
    Screen Shot 2016-03-03 at 7.37.48 AM.png
  30. nathanhammond
    Mar 03 15:39
    @stevefaulkner I hid the outline because I'm a terrible person. :P If you look in the inspector, whichever element receives tabindex=-1 is the one which receives the focus.
  31. stevefaulkner
    Mar 03 15:40
    @nathanhammond np will check again when i get a chance
  32. nathanhammond
    Mar 03 15:47
    Also, I just checked in a fix for NVDA reading the previous contents of a recycled div.
  33. stevefaulkner
    Mar 03 15:56
    @nathanhammond any reason why you have role=group set on <ul>?
  34. nathanhammond
    Mar 03 15:57
    That was to address an issue where some previous combination of Voiceover/Safari wouldn't read the contents of the list.
  35. stevefaulkner
    Mar 03 15:57
    @nathanhammond also why not set the focus to the heading rather than the div?
  36. nathanhammond
    Mar 03 15:58
    That's a thorny question. :P
  37. nathanhammond
    Mar 03 15:59
    1. I don't ever know what the contents of that area are going to be before they arrive, I could accidentally end up throwing somebody into forms mode if I set them to the first child of the wrapping container.
  38. nathanhammond
    Mar 03 15:59
    1. I'm trying to emulate the behavior of first load experience where screen readers start at the top and read through the contents of the page.
  39. stevefaulkner
    Mar 03 16:00
    ok, when you move focus to an element, suggest it is best for it to have a role either a native role that is exposed to AT or a an explicit ARIA role, ideally with a label
  40. nathanhammond
    Mar 03 16:03
    In my review of the taxonomy the implicit "group" role seemed correct?
  41. nathanhammond
    Mar 03 16:04
    But, point received. :) What would be ideal for a section of the page that just got swapped in?
  42. nathanhammond
    Mar 03 16:04
    (I'm looking at the taxonomy: https://www.w3.org/TR/wai-aria/rdf_model.svg)
  43. stevefaulkner
    Mar 03 16:05
    am not seeing the group role set on the div, usually a div is effectively not exposed, also group not exposed unless has an acc name such as aria-label="blah"
  44. nathanhammond
    Mar 03 16:11
    Interesting: if I set a role of "document" things appear to do what I want them to do?
  45. stevefaulkner
    Mar 03 16:12
    @nathanhammond set where/
  46. nathanhammond
    Mar 03 16:13
    Heh, precision in language is important. I set the "document" role on the element that receives focus.
  47. nathanhammond
    Mar 03 16:13
    Seeing if other roles do the right thing.
  48. stevefaulkner
    Mar 03 16:15
    setting an element to be focusable sometimes does weird things as AT think may that its an interactive element
  49. nathanhammond
    Mar 03 16:16
    This is why I love experts. :)
  50. nathanhammond
    Mar 03 16:16
    role="group" appears to do the right thing.
  51. stevefaulkner
    Mar 03 16:16
    then suggest going with group
  52. nathanhammond
    Mar 03 16:19
    Yep, I did, and the demo has been updated. :)
  53. zakim-robot
    Mar 03 16:22
    [alice] @deborah_kaplan re https://web-a11y.slack.com/archives/general/p1457016299003056 - that doesn't sound right. I should delete that branch. Use release branch, or the compiled file in dist/js (which is updated each release).
  54. zakim-robot
    Mar 03 16:22
    [deborah_kaplan] thanks! I'm so glad I asked, @alice. :D
  55. nathanhammond
    Mar 03 16:30
    Still have lots of weird behaviors in Voiceover (on a Mac, so that's really the only tool I can test right now). I'm going to open a bunch issues on the repo and get good at screen recordings. :)
  56. zakim-robot
    Mar 03 16:31
    [alice] @deborah_kaplan: Me too, now I need to go delete that branch!
  57. pkra
    Mar 03 16:44
    Hey, slackers, I have a question. Do you know a (non-MathML) way of marking up numbers (as in Pi)?
  58. powrsurg
    Mar 03 16:48
    use the utf characters and assume they understand the context?
  59. pkra
    Mar 03 17:05
    @powrsurg thanks! I'm more thinking about it from the standards side. In MathML you'd also use Unicode but there's an <mn> tag to indicate a number. It seems to me, that HTML could perceivably have a tag for numbers (seems a basic kind of notion really) but afaik there's nothing suitable to convey the semantics (nor an aria role etc).
  60. pkra
    Mar 03 17:06
    Though regarding Unicode, it's an issue that e.g. screenreaders won't read most Unicode names (e.g., integral signs) so for a11y you have to spell out the name (fun fact: Unicode names have never been localized so there goes i18n)
  61. MichielBijl
    Mar 03 17:15
    <input type="number" value="đťś‹" readonly>
  62. MichielBijl
    Mar 03 17:17
    (which probably won't work anywhere) =P
  63. pkra
    Mar 03 17:29
    @MichielBijl awesome ;-)
  64. pkra
    Mar 03 17:30
    @MichielBijl note that this comes from your suggestion I should write up a blog post...
  65. MichielBijl
    Mar 03 17:30
    :)
  66. nathanhammond
    Mar 03 18:02
    All known open issues for OS X have been filed: https://github.com/nathanhammond/ember-a11y/issues ... if you have clever thoughts on how to solve these let me know.
  67. MichielBijl
    Mar 03 18:28
    Nice one Apple: https://twitter.com/AppleSupport/status/705377216180269056
  68. zakim-robot
    Mar 03 18:35
    [marcysutton] ^^^^ that is so stupid. I hate tweets like that
  69. zakim-robot
    Mar 03 18:35
    [marcysutton] Nobody’s perfect I suppose :simple_smile:
  70. MichielBijl
    Mar 03 18:45
    I provided an alt text for them, but they should've done that, or just use, I don't know, like text maybe =)
  71. jnurthen
    Mar 03 18:47
    Although of course their twitter handle is the content of the graphic
  72. jnurthen
    Mar 03 18:48
    so you could argue the graphic is decorative only
  73. jkva
    Mar 03 19:01
    Huh. http://htmlpreview.github.io/?https://raw.githubusercontent.com/mdipierro/stupid.css/master/index.html
  74. MichielBijl
    Mar 03 19:05
    @jnurthen, naha, they end their sentence with an ellipsis.
  75. jnurthen
    Mar 03 19:05
    :)
  76. MichielBijl
    Mar 03 19:05
    That's like saying to you: Well, these are words by…
  77. jnurthen
    Mar 03 19:05
    well - that is bad enough ....
  78. jnurthen
    Mar 03 19:06
    I think it is bad too - but I have seen worse examples
  79. MichielBijl
    Mar 03 19:06
    Sure, where it is all in the image :P
  80. jnurthen
    Mar 03 19:11
    Are you going to add alt to these too https://twitter.com/AppleSupport/status/705377274564968448
  81. MichielBijl @MichielBijl has left the building
  82. MichielBijl
    Mar 03 19:39
    @jnurthen https://twitter.com/MichielBijl/status/705477583501172736
  83. jkva
    Mar 03 19:40
    Hey! You had left ;)
  84. MichielBijl @MichielBijl has entered the building
  85. jkva @jkva leaves temporarily
  86. MichielBijl
    Mar 03 19:40
    Or actually, should've said I'm on my phone
  87. MichielBijl
    Mar 03 19:40
    Damnit…
  88. powrsurg
    Mar 03 19:46
    has anyone spent any time trying to make Flowplayer accessible?
  89. powrsurg
    Mar 03 19:50
    From what I'm seeing keyboard commands only work if you click on the video first (can't tab to anything to get into anything), and the native controls aren't tabable (uses <a> with no href).
  90. MichielBijl
    Mar 03 19:52
    Then I'm guessing no ;)
  91. powrsurg
    Mar 03 19:58
    I can programmatically add the missing hrefs (and tabindexes for their menu that should be buttons). Just for the life of me can't figure out what to add a tabindex to to let you control the videos to start with ...
  92. MichielBijl
    Mar 03 20:00
    First control in the video toolbar?
  93. MichielBijl
    Mar 03 20:00
    And if you add hrefs, you might as well change it into a button…
  94. powrsurg
    Mar 03 20:05
    I know. These all should be buttons. The markup generated by the player is all wrong. But removing their anchors in the player and putting in my own buttons is likely to cause other problems with theming and functionality. At the very least with this I know I can give them the hrefs to make them clickable, the roles they need, etc. I shouldn't have to do any of that but I have to.
  95. MichielBijl
    Mar 03 20:06
    Can't you implement an accessible video player to begin with?
  96. powrsurg
    Mar 03 20:06
    JW Player handles accessibility a lot better, except it doesn't work in IE8 which we need.
  97. powrsurg
    Mar 03 20:07
    We need something with HLS support which means we'll need a flash fallback for browsers that don't support it natively
  98. powrsurg
    Mar 03 20:08
    streaming accessible video is a bit difficult it seems
  99. MichielBijl
    Mar 03 20:10
    What is HLS?
  100. powrsurg
    Mar 03 20:13
    HTTP Live Streaming
  101. MichielBijl
    Mar 03 20:14
    Ah
  102. zakim-robot
    Mar 03 22:08
    [hmig] @jitendra: I posted the issue to the WP’s accessibility slack channel
  103. zakim-robot
    Mar 03 22:08
    [hmig] thanks for the heads up
  104. powrsurg
    Mar 03 22:17
    Okay, after hours of mucking with it I've got Flowplayer mostly accessible ...
  105. stevefaulkner
    Mar 03 22:18
    :clap:
  106. powrsurg
    Mar 03 22:22
    Just need to make the video track selection actually select the track, and make the menu items not tabbable when they're not in view. And handle the rest of the keyboard stuff one must do to convert a link to function like a button (because heaven forbid the devs actually use the button tag)
  107. powrsurg
    Mar 03 22:22
    (actually select the track when using a keyboard)
  108. powrsurg
    Mar 03 22:24
    and I guess I should make the special keyboard commands (normally available if a user mouses over the video) work not just when the main video element receives focus, but when the controls receive focus too