Archive index

A11y Slackers Gitter Channel Archive 14th of April 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Job van Achterberg
    @jkva
    Apr 14 07:37
    Morning fellas. Working on a progressive enhancement project including support for older browsers. Are things like <nav role="navigation"> considered an antipattern? I recall @stevefaulkner saying something about that.
  2. Michiel Bijl
    @MichielBijl
    Apr 14 07:45
    The spec/validator says not to do it, but you may if you have a good reason; supporting older browsers is a good reason :)
  3. Job van Achterberg
    @jkva
    Apr 14 07:46
    Yeah, discussed it with a cat this morning, she said the same thing
  4. Job van Achterberg
    @jkva
    Apr 14 07:46
    So currently it's not a negative consequence, just deprecated behaviour. Got it =)
  5. mikaelR
    @cr2a-graphique
    Apr 14 07:46
    hi @jkva , i think <nav role="navigation"> is a double information , i think its better used it like that <div role ="navigation"> or <nav> alone or better a <nav aria-label="xx">
  6. Job van Achterberg
    @jkva
    Apr 14 07:47
    @cr2a-graphique Yes it is double info, when supporting older browsers, div is also an opion
  7. Job van Achterberg
    @jkva
    Apr 14 07:47
    Not sure what the aria-label would improve?
  8. mikaelR
    @cr2a-graphique
    Apr 14 07:47
    if you hear a screen reader <nav role="navigation"> its mad
  9. Job van Achterberg
    @jkva
    Apr 14 07:49
    Will try tx
  10. Job van Achterberg
    @jkva
    Apr 14 07:51
    VO on OSX Yosemite does the right thing. Should try JAWS
  11. Job van Achterberg
    @jkva
    Apr 14 07:53
    and NVDA
  12. Job van Achterberg
    @jkva
    Apr 14 07:53
    @StommePoes can you check this on JAWS for me when you have time?
  13. mikaelR
    @cr2a-graphique
    Apr 14 07:56
    they say (french traduction) for <nav role="navigation"> : "menu navigation, navigation ,list of x element"
    and for <nav> alone : "navigation ,list of x element" that are better i think
  14. Job van Achterberg
    @jkva
    Apr 14 07:57
    Which OS + AT is that @cr2a-graphique ?
  15. mikaelR
    @cr2a-graphique
    Apr 14 07:57
    NVDA / Windows
  16. mikaelR
    @cr2a-graphique
    Apr 14 07:57
    on Firefox
  17. Job van Achterberg
    @jkva
    Apr 14 07:57
    Huh. NVDA is considered evergreen, color me surprised
  18. Job van Achterberg
    @jkva
    Apr 14 07:58
    I need a windows test box. Guess I have to get a surface ;)
  19. mikaelR
    @cr2a-graphique
    Apr 14 07:58
    ;)
  20. mikaelR
    @cr2a-graphique
    Apr 14 08:02
    of course i say that but i know some master are here and maybe better than me
  21. halna_Tanaguru
    @fhalna
    Apr 14 08:04
    If you check your code with W3C validator for <nav role="navigation"> you have this Warning: Element nav does not need a role attribute.
  22. Job van Achterberg
    @jkva
    Apr 14 08:05
    Yes - correct. But older browsers don't know what to do with certain elements without that role.
  23. Job van Achterberg
    @jkva
    Apr 14 08:05

    So 2 choices from what I can see

    1) add the role, spec be damned, support as much as possible
    2) use div with role instead

  24. halna_Tanaguru
    @fhalna
    Apr 14 08:05
    We know that wy in french referential we choose to this solution
  25. mikaelR
    @cr2a-graphique
    Apr 14 08:07
    slt @fhalna
  26. halna_Tanaguru
    @fhalna
    Apr 14 08:07
    to do a referential with this baseline http://rgaa.tanaguru.com/en/baseline.html
  27. halna_Tanaguru
    @fhalna
    Apr 14 08:07
    hello @cr2a-graphique
  28. stevefaulkner
    @stevefaulkner
    Apr 14 08:07
    @jkva @cr2a-graphique this may be helpful http://html5doctor.com/on-html-belts-and-aria-braces/
  29. Job van Achterberg
    @jkva
    Apr 14 08:07
    Cheers
  30. mikaelR
    @cr2a-graphique
    Apr 14 08:08
    thanks master @stevefaulkner :)
  31. Job van Achterberg
    @jkva
    Apr 14 08:13
    Exactly what I was looking for Steve, thanks =)
  32. halna_Tanaguru
    @fhalna
    Apr 14 08:15
    @cr2a-graphique to be compliant with the RGAA you have to implement <nav role="navigation">
  33. stevefaulkner
    @stevefaulkner
    Apr 14 08:24
    its not 'spec be damned' its making a conscious choice to double up on semantics in cases where legacy support is required/desired, its a 'should not' rather than 'must not' requirement, this may also be helpful https://www.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/
  34. stevefaulkner
    @stevefaulkner
    Apr 14 08:24
    np
  35. Job van Achterberg
    @jkva
    Apr 14 08:25
    That's indeed a better way of wording that.
  36. halna_Tanaguru
    @fhalna
    Apr 14 08:26
    if you want the french "e-accessible label" you have to.
  37. Michiel Bijl
    @MichielBijl
    Apr 14 08:27
    On a totally unrelated note, I might move to Grenoble :)
  38. Job van Achterberg
    @jkva
    Apr 14 08:28
    wat.
  39. Job van Achterberg
    @jkva
    Apr 14 08:28
    Pourqoi?
  40. Michiel Bijl
    @MichielBijl
    Apr 14 08:28
    Mathilde <3
  41. Job van Achterberg
    @jkva
    Apr 14 08:28
    Ah bien-sur.
  42. Michiel Bijl
    @MichielBijl
    Apr 14 08:28
    She may start work there in August.
  43. jkva @jkva le sigh
  44. Michiel Bijl
    @MichielBijl
    Apr 14 08:28
    Which isn't a bad time for cycling there :P
  45. Job van Achterberg
    @jkva
    Apr 14 08:29
    At the foot of the Alps, yeah sounds like it
  46. Michiel Bijl
    @MichielBijl
    Apr 14 08:29
    Well, she got an offer from a research facility there. But she also wants to work in Lund…
  47. Job van Achterberg
    @jkva
    Apr 14 08:30
    Sheesh
  48. Michiel Bijl
    @MichielBijl
    Apr 14 08:30
    Troubles of EU project managers -.-
  49. Job van Achterberg
    @jkva
    Apr 14 08:30
    I would still go for Grenoble
  50. Job van Achterberg
    @jkva
    Apr 14 08:30
    French food, Alps, one of you speaks the language fluently
  51. mikaelR
    @cr2a-graphique
    Apr 14 08:30
    :)
  52. Michiel Bijl
    @MichielBijl
    Apr 14 08:31
    Yeah, but that's where she's from. And she really wants to live abroad.
  53. Job van Achterberg
    @jkva
    Apr 14 08:31
    I hope to go to visit La Teste-de-Buch one of these days
  54. Job van Achterberg
    @jkva
    Apr 14 08:31
    See the giant sand dune
  55. Job van Achterberg
    @jkva
    Apr 14 08:31
    Go visit some wineries
  56. Job van Achterberg
    @jkva
    Apr 14 08:31
    See Bordeaux
  57. Michiel Bijl
    @MichielBijl
    Apr 14 08:32
    Je ne parle pa Française :P
  58. Job van Achterberg
    @jkva
    Apr 14 08:32
    Sweden, well, I hope you like winter
  59. Job van Achterberg
    @jkva
    Apr 14 08:32
    And lutefisk
  60. Michiel Bijl
    @MichielBijl
    Apr 14 08:32
    :r
  61. Michiel Bijl
    @MichielBijl
    Apr 14 08:32
    Nej takk
  62. Michiel Bijl
    @MichielBijl
    Apr 14 08:34
    That was funny, the other day, I had a conversation with a colleague who's parents are from Norway. He spoke Norwegian and I Danish =D
  63. Michiel Bijl
    @MichielBijl
    Apr 14 08:35
    That was a funny conversation. And we LJWatson I think ;)
  64. Michiel Bijl
    @MichielBijl
    Apr 14 08:35
    Since you can't tell Skype which language you're typing.
  65. Job van Achterberg
    @jkva
    Apr 14 08:36
    Is there a joke I am missing?
  66. Michiel Bijl
    @MichielBijl
    Apr 14 08:37
    Err, we were talking in Danish and Norwegian to each other via the Skype chat.
  67. Job van Achterberg
    @jkva
    Apr 14 08:51
    Awright, tomorrow second Dutch informa11y meetup role=drinks !
  68. mikaelR
    @cr2a-graphique
    Apr 14 08:52
    yeah like that role @jkva
  69. Job van Achterberg
    @jkva
    Apr 14 08:52
    It's the best role =)
  70. halna_Tanaguru
    @fhalna
    Apr 14 09:10
    Yesterday, i ask for a accessible slack client. I try Irc Bridge it's working ! but Now i looking for an IRC client accessible ! any idea ?
  71. Job van Achterberg
    @jkva
    Apr 14 09:26
    https://irc.gitter.im/ ?
  72. halna_Tanaguru
    @fhalna
    Apr 14 09:28
    yes but you need to have an IRC client
  73. Job van Achterberg
    @jkva
    Apr 14 09:31
    I like using CIRC in Chrome, but afaik the a11y isn't great, just usable. You could give it a try
  74. halna_Tanaguru
    @fhalna
    Apr 14 09:48
    we are testing instantbird and mirc
  75. stevefaulkner
    @stevefaulkner
    Apr 14 10:35
    @fhalna this may help https://github.com/w3c/a11ySlackers#connecting-to-gitter-over-irc
  76. halna_Tanaguru
    @fhalna
    Apr 14 10:36
    thank's @stevefaulkner
  77. stevefaulkner
    @stevefaulkner
    Apr 14 10:37
    :+1:
  78. Michiel Bijl
    @MichielBijl
    Apr 14 10:53
    @fhalna, I like IRCCloud.
  79. Michiel Bijl
    @MichielBijl
    Apr 14 10:53
    If you don't mind spending 40€ a year.
  80. Job van Achterberg
    @jkva
    Apr 14 12:54
    1,2,3
  81. Michiel Bijl
    @MichielBijl
    Apr 14 12:55
    42
  82. Job van Achterberg
    @jkva
    Apr 14 12:56
    Cool, works
  83. Mallory
    @StommePoes
    Apr 14 13:42
    pidgin is accessible on Linux, tho I hear not on Windows
  84. Mallory
    @StommePoes
    Apr 14 13:42
    not until someone makes a gtk-msaa/gtk/uia bridge
  85. Mallory
    @StommePoes
    Apr 14 13:43
    s/gtk/uia/gtk-uia/
  86. Job van Achterberg
    @jkva
    Apr 14 13:46
    This is nice (ircCloud). And now I don't have to use CIRC anymore
  87. Job van Achterberg
    @jkva
    Apr 14 13:49
    testing
  88. Eric Eggert
    @yatil
    Apr 14 14:15
    @aardrian :point_up: April 13, 2016 7:50 PM You know this document, right? http://www.w3.org/TR/mobile-accessibility-mapping/
  89. Adrian Roselli
    @aardrian
    Apr 14 15:01
    @yatil Thanks, I do. Was also hoping to ping folks with direct experience.
  90. Adrian Roselli
    @aardrian
    Apr 14 17:23
    So does anyone have experience with WCAG success criteria for a mobile app? Specifically 2.1.1, 2.4.5, 2.4.7 and 3.3.1.
  91. Adrian Roselli
    @aardrian
    Apr 14 18:53
    Ok. I'm good.
  92. Julia Gao
    @ryoia
    Apr 14 20:39
    hi i'm having a weird problem with JAWS... i threw a quick jsbin example here http://jsbin.com/dutidawija/, basically, if you tab into the two button area, it says 'hi' but added 'button' at the end, even though the div doesn't have a button role, it does have two button child nodes.
  93. Julia Gao
    @ryoia
    Apr 14 20:40
    is that an expected behavior? is there a way that i can make JAWS only speaks 'hi'?
  94. jnurthen
    @jnurthen
    Apr 14 20:42
    Works fine with FF&JAWS17
  95. Julia Gao
    @ryoia
    Apr 14 20:43
    i'm using JAWS17 and IE10
  96. Julia Gao
    @ryoia
    Apr 14 20:44
    This message was deleted
  97. Julia Gao
    @ryoia
    Apr 14 20:46
    I just tried in FF, it also says 'hi button'
  98. Julia Gao
    @ryoia
    Apr 14 20:46
    instead of just 'hi'
  99. jnurthen
    @jnurthen
    Apr 14 20:47
    I guess it is inconsistent then. just said hi for me.
  100. Julia Gao
    @ryoia
    Apr 14 20:48
    hmmmm are you using JAWS 17 trial or paid?
  101. Julia Gao
    @ryoia
    Apr 14 20:48
    i wonder if that makes a difference on this
  102. jnurthen
    @jnurthen
    Apr 14 20:48
    i have a license
  103. Julia Gao
    @ryoia
    Apr 14 20:48
    mmm
  104. Julia Gao
    @ryoia
    Apr 14 20:50
    not sure how to test that then. i'll ask if company has a license
  105. Julia Gao
    @ryoia
    Apr 14 20:50
    if somebody else hears 'hi button' instead of 'hi', let me know! thanks for checking, jnurthen! :)
  106. jnurthen
    @jnurthen
    Apr 14 20:53
    The Accessibility tree looks ok in both MSAA (for IE) and IA2 (for FF) too. The role of the "hi" element is coming through as a "grouping" and "section" respectively
  107. Julia Gao
    @ryoia
    Apr 14 20:56
    so the aria-label's hi is coming through as a "grouping"?
  108. Julia Gao
    @ryoia
    Apr 14 20:57
    i'm not familiar with Accessibility tree
  109. jnurthen
    @jnurthen
    Apr 14 20:58
    its a div so that would be the correct role. You should probably give it something more specific though. If I can tab to somthing I really want to know what kind of control it is. You should give it a role if it is tabbable.
  110. jnurthen
    @jnurthen
    Apr 14 20:58
    btw. this example is completly broken with NVDA.
  111. Julia Gao
    @ryoia
    Apr 14 20:59
    yeah i was searching through aria roles
  112. Julia Gao
    @ryoia
    Apr 14 20:59
    but not sure which one
  113. Julia Gao
    @ryoia
    Apr 14 20:59
    i tried definition but it still says 'button' at the end
  114. jnurthen
    @jnurthen
    Apr 14 20:59
    I'm really unclear what you are trying to accomplish. Why would you allow tabbing to a grouping around buttons
  115. Julia Gao
    @ryoia
    Apr 14 21:00
    yeah this example isn't a good representation of what's going on
  116. Julia Gao
    @ryoia
    Apr 14 21:00
    so the real one (with same div layout) has two buttons on a div background (like a card)
  117. Julia Gao
    @ryoia
    Apr 14 21:01
    so we allow people to tab into the div because there're words underneath
  118. Julia Gao
    @ryoia
    Apr 14 21:01
    so they'd be able to listen to what kind of card it is to choose which button to click
  119. jnurthen
    @jnurthen
    Apr 14 21:01
    why not just make those words markup
  120. jnurthen
    @jnurthen
    Apr 14 21:02
    and then use aria-describedby on the button to give more context
  121. Julia Gao
    @ryoia
    Apr 14 21:02
    right now it's a bind
  122. Julia Gao
    @ryoia
    Apr 14 21:02
    so whatever is coming from the backend will get injected to the {{name}}
  123. jnurthen
    @jnurthen
    Apr 14 21:02
    but it is still in the HTML output right?
  124. Julia Gao
    @ryoia
    Apr 14 21:03
    i used aria-labelledby instead of aria-label on the same div, pointing to the id of the div of the hi
  125. jnurthen
    @jnurthen
    Apr 14 21:03
    so you have something like this
  126. Julia Gao
    @ryoia
    Apr 14 21:03
    so it'd say hi or whatever name it is pointed to
  127. jnurthen
    @jnurthen
    Apr 14 21:05 
    <section aria-labelledby="myid"> <h2 id="myid">card name</h2> <p>some more text in the card</p> <button aria-describedby="myid">button1</button><button aria-describedby="myid">button2</button></section>
  128. Julia Gao
    @ryoia
    Apr 14 21:06
    oh interesting!
  129. jnurthen
    @jnurthen
    Apr 14 21:06
    why wouldn't something like that work?
  130. Julia Gao
    @ryoia
    Apr 14 21:06
    yeah something like that would work, let me play around with it.
  131. Julia Gao
    @ryoia
    Apr 14 21:06
    i'll get back to you on that
  132. jnurthen
    @jnurthen
    Apr 14 21:06
    don't make text that isn't active focusable as it mucks everyhting up
  133. Julia Gao
    @ryoia
    Apr 14 21:07
    yeah makes sense
  134. Julia Gao
    @ryoia
    Apr 14 21:07
    thanks!
  135. Julia Gao
    @ryoia
    Apr 14 21:07
    oh i realized something
  136. Julia Gao
    @ryoia
    Apr 14 21:08
    so i don't want the buttons to speak the same thing as card name, buttons have their own text and i want JAWS to speak their text
  137. jnurthen
    @jnurthen
    Apr 14 21:08
    it will speak "button1, button, card name" in this example
  138. Julia Gao
    @ryoia
    Apr 14 21:09
    ah
  139. Julia Gao
    @ryoia
    Apr 14 21:09
    let me try
  140. jnurthen
    @jnurthen
    Apr 14 21:09
    i was adding aria-describedby to add the context for the button when someone focusses it. you don't have to but i think the extra context is useful normally
  141. Julia Gao
    @ryoia
    Apr 14 21:10
    i added it, i'll have to listen to them later, at a meeting right now
  142. Julia Gao
    @ryoia
    Apr 14 21:10
    but i'll let you know if that worked later
  143. Julia Gao
    @ryoia
    Apr 14 22:37
    jnurthen, yup that worked! thank you! :D