Archive index

A11y Slackers Gitter Channel Archive 28th of June 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jun 28 06:46
    [michiel] Morning all
  2. Job van Achterberg
    @jkva
    Jun 28 08:02
    @Michiel: Thanks so much! Couldn't find it anywhere
  3. zakim-robot
    @zakim-robot
    Jun 28 08:02
    [michiel] No problem :)
  4. [michiel] Time for stroopwafel cornflakes with scotch instead of milk.
  5. [michiel] It's an amazing recipe…
  6. jkva @jkva drools
  7. zakim-robot
    @zakim-robot
    Jun 28 08:07
    [jakecross] So I guess an <a> with text doesn't respect a role of presentation and hide it from an AT... I am sure I came across the decision tree for this kind of thing in my travels across the web but can't seem to track it down again now. I'm not imagining it am I? There are clear rules on when it will respect attributes and when it won't...
  8. [michiel] jakecross: <a role=presentation>foo</a> is the same as <span>foo</span>. So it doesn't hide anything.
  9. Job van Achterberg
    @jkva
    Jun 28 08:08
    link (default - do not set), button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem
  10. Allowed ARIA role attribute values:
  11. zakim-robot
    @zakim-robot
    Jun 28 08:08
    [michiel] We could make a decision tree I guess.
  12. [michiel] Thing is that role=presentation doesn't hide an element form AT or visually for that matter.
  13. [jakecross] Ah ok... I was using aria-hidden but the AT was still picking it up... wondered if it was because of where it was on the page or because it had text inside or what...
  14. [michiel] And as jkva just said, isn't even allowed on anchors.
  15. Job van Achterberg
    @jkva
    Jun 28 08:10
    aria-hidden should've hidden it, weird
  16. Can you show code?
  17. zakim-robot
    @zakim-robot
    Jun 28 08:10
    [michiel] I'm wondering if aria-hidden is allowed on focusables.
  18. [michiel] It doesn't conform WCAG I believe.
  19. [jakecross] <a href class="invisible" id="thing" aria-hidden="true">Some Text Not Visible On The Screen</a>
  20. Job van Achterberg
    @jkva
    Jun 28 08:12
    VoiceOver doesn't announce it when I check
  21. I don't have Dolphin to test :-/
  22. zakim-robot
    @zakim-robot
    Jun 28 08:13
    [michiel] jakecross: first rule of ARIA: if you don't have to, don't use it.
  23. [michiel] You can achieve what you want with display: none; or visibility: hidden;
  24. Job van Achterberg
    @jkva
    Jun 28 08:14
    That, too. What are you trying to do
  25. zakim-robot
    @zakim-robot
    Jun 28 08:14
    [jakecross] jkva, well remembered, I am using SuperNova Dolphin Screen Reader.
  26. Job van Achterberg
    @jkva
    Jun 28 08:15
    Why have a link that AT doesn't see, and that you can't see on a screen?
  27. zakim-robot
    @zakim-robot
    Jun 28 08:15
    [michiel] visibility: hidden; shouldn't trigger a repaint, whereas display: none; would.
  28. [jakecross] Display none causes all sorts of problems with the visuals of the page.
  29. [michiel] That sounds like a serious CSS issue.
  30. [jakecross] The class invisible is "visibility: hidden"
  31. [jakecross] The <a>'s are start and finish of some slide out panel... if I set the links to display none, the slide out goes bye bye...
  32. Job van Achterberg
    @jkva
    Jun 28 08:16
    Ah, so this is a link that shows conditionally
  33. Right
  34. zakim-robot
    @zakim-robot
    Jun 28 08:17
    [jakecross] I can get around this with no text in the <a> which seems fine. Does not change the layout, keeps the panel and means Dolphin ignores the links with no aria tags
  35. [jakecross] ********attributes
  36. [jakecross] :)
  37. Job van Achterberg
    @jkva
    Jun 28 08:17
    a without accessible name is illegal :(
  38. zakim-robot
    @zakim-robot
    Jun 28 08:18
    [jakecross] I am going to change them to spans and see what breaks... I can't see anything that means they would need to be there other than for pointers to the start and end of the markup of the slide out panel
  39. Job van Achterberg
    @jkva
    Jun 28 08:18
    A <a> with aria-hidden="true" still being read out would be a very serious bug, one I would not expect Dolphin software to have.
  40. Personally I'd not fuck about with invalid HTML and weird stuff to get around screen reader bugs, TBH
  41. zakim-robot
    @zakim-robot
    Jun 28 08:20
    [michiel] jakecross: can you supply a full code example (replace with dummy content if necessary). I'm interested to find what is going on.
  42. [jakecross] I might just add this to some notes to discuss with the Development team. I tried [x], and it was a pain in the bum. I've ignored it. They can tell me what they were trying to do here or resolve the issue.
  43. [jakecross] @michiel: I'll get it on pastee now
  44. Job van Achterberg
    @jkva
    Jun 28 08:20
    Awesome
  45. zakim-robot
    @zakim-robot
    Jun 28 08:26
    [jakecross] http://paste.ubuntu.com/18015452/
  46. [jakecross] There are three "THIS IS BEING READ" sections that I would hope don't get read.. but are
  47. [michiel] Right.
  48. [michiel] Riiiiiiight
  49. [michiel] I feel for you Jake, but without reasoning for the links I have no clue what this does or why it is set up this way :(
  50. Job van Achterberg
    @jkva
    Jun 28 08:29
    @jakecross Humor me and put a pound sign in those anchors
  51. href="#"
  52. zakim-robot
    @zakim-robot
    Jun 28 08:30
    [jakecross] @michiel: You feel for me.. as in... this is madness?
  53. Job van Achterberg
    @jkva
    Jun 28 08:30
    There are some bad practices in there
  54. Ah, this is AngularJS
  55. You have custom directives, too
  56. zakim-robot
    @zakim-robot
    Jun 28 08:31
    [michiel] @jakecross: yes.
  57. [jakecross] Oh dear =D
  58. [michiel] What does the id="start-of-sidebar" do?
  59. [michiel] Or the id="before-sidebar" for that matter.
  60. Job van Achterberg
    @jkva
    Jun 28 08:32
    I have no idea if any of your AngularJS controllers modify your DOM and hence screw with your ARIA attributes
  61. There is no way of knowing
  62. But I find it highly unlikely that Dolpin would not deal with aria-hidden correctly
  63. zakim-robot
    @zakim-robot
    Jun 28 08:33
    [jakecross] What does it "do" is a good question. It sits before the slide in panel (everything inside) and I guess if used by the Angular gubbins to grab things on the page.
  64. [michiel] Ugh
  65. Job van Achterberg
    @jkva
    Jun 28 08:33
    Also, using empty <a>s as action sandbags is bad practice. What are those, what do they do? They're <button>s
  66. zakim-robot
    @zakim-robot
    Jun 28 08:33
    [michiel] So you can't click them?
  67. [jakecross] aria-hidden has been fine everywhere else, so I figured it was either contextual or dynamic changes.
  68. Job van Achterberg
    @jkva
    Jun 28 08:33
    "Angular gubbins", hehe
  69. <a href="" class="close-button" ng-click="vm.something()" id="close-sidebar"> <i class="close"></i> </a> <-- this is what <button> is for
  70. zakim-robot
    @zakim-robot
    Jun 28 08:40
    [jakecross] jkva, why are you listed as a BOT? Is that why I can't tag your name with "@"?
  71. [jakecross] <button> takes longer to type than <a> :p
  72. Job van Achterberg
    @jkva
    Jun 28 08:40
    Oh, I got written by some of the IBM eggheads. Doesn't mean my advice isn't good.
  73. zakim-robot
    @zakim-robot
    Jun 28 08:40
    [jakecross] Although adding numerous "button" classes kind of takes that point and throws it in the bin
  74. Job van Achterberg
    @jkva
    Jun 28 08:41
    It's about semantics =) you can't deal with AT and not be concerned about that
  75. @jakecross: What lists me as a bot?
  76. zakim-robot
    @zakim-robot
    Jun 28 08:43
    [jakecross] I am looking at your name in Opera on Mac and your name comes up here as jkva then BOT in dark grey text on light grey background
  77. Job van Achterberg
    @jkva
    Jun 28 08:43
    Weird
  78. Wait, you're on Opera on Mac?! Try VoiceOver and see if it behaves differently from Dolphin
  79. If it does, you can verify it as a Dolphin bug
  80. zakim-robot
    @zakim-robot
    Jun 28 08:44
    [michiel] Try with Safari. Opera is not officially supported by VO.
  81. Job van Achterberg
    @jkva
    Jun 28 08:45
    @jakecross: I use IRCCloud to connect, that might suggest I am a bot b/c of networks I proxy through. Not sure.
  82. zakim-robot
    @zakim-robot
    Jun 28 08:46
    [michiel] Anyway, this channel is actually two channels linked. You can connect via Slack (where Jake is), or via Gitter (where jkva is). You can then use either of Slacks or Gitter's IRC bridge to connect. jkva is on Gitter's, I'm on Slack's.
  83. [michiel] Because of the link, people in Slack see Gitter people as bots.
  84. Job van Achterberg
    @jkva
    Jun 28 08:47
    beep-boop. Destroy.
  85. zakim-robot
    @zakim-robot
    Jun 28 08:47
    [michiel] Vice versa, people on Gitter see slack people as zakim the robot (but they start messages with slack-person's-name: message)
  86. Job van Achterberg
    @jkva
    Jun 28 08:48
    yeah
  87. zakim-robot
    @zakim-robot
    Jun 28 08:49
    [michiel] And as much as I think Gitter is better, Slack's IRC bridge is superior if you ask me.
  88. [michiel] Although I've heard blinks complain about it.
  89. stevefaulkner
    @stevefaulkner
    Jun 28 08:50

    Slack's IRC bridge is superior if you ask me.

    if you are sighted maybe

  90. zakim-robot
    @zakim-robot
    Jun 28 08:50
    [michiel] Yeah exactly.
  91. [michiel] Also, I'm connecting via IRCCloud where you can hide a bunch of stuff. So not sure what it would be like in a native client a la that Firefox IRC plug-in or Pidgin or something.
  92. [michiel] I forgot the name for that plugin :/
  93. Job van Achterberg
    @jkva
    Jun 28 08:52
    Chatzilla?
  94. zakim-robot
    @zakim-robot
    Jun 28 08:53
    [michiel] That's the one.
  95. Job van Achterberg
    @jkva
    Jun 28 08:53
    Used that back in 2001, good times
  96. Hmm can't have been 2001. More likely 2003
  97. But I love how IRCcloud just sits in a tab
  98. zakim-robot
    @zakim-robot
    Jun 28 08:54
    [michiel] Yeah, and you can just close it and get back to it whenever.
  99. [michiel] Without it taking up space in dock.
  100. Job van Achterberg
    @jkva
    Jun 28 08:55
    I used CIRC in Chrome for a while, but it needed a separate window
  101. zakim-robot
    @zakim-robot
    Jun 28 09:08
    [jakecross] Thanks for all the advice folks! I am marking up some of these things as "odd" and leaving it to the development team to decide how they would like to resolve it. I have made notes on all the things you have said and we'll see how it moves forward
  102. [jakecross] Many thanks for all your help! I'll be back in 5 minutes with more questions I'm sure =D
  103. [michiel] Get ready folks, four minutes till more questions arrive!
  104. Job van Achterberg
    @jkva
    Jun 28 09:15
    =D
  105. zakim-robot
    @zakim-robot
    Jun 28 09:18
    [jakecross] Much desk flipping later, a wild jakecross has appeared
  106. Job van Achterberg
    @jkva
    Jun 28 09:18
    It wasn't very effective?
  107. zakim-robot
    @zakim-robot
    Jun 28 09:19
    [jakecross] jakecross used splash
  108. [michiel] Michiel used :focus-within, it's very effective.
  109. [michiel] (https://bugs.webkit.org/show_bug.cgi?id=140144)
  110. zakim-robot
    @zakim-robot
    Jun 28 10:59
    [jakecross] Brackets beautify plugin causing inline styling to go wrong has been discovered as the source of some of my earlier issues! :S
  111. stevefaulkner
    @stevefaulkner
    Jun 28 11:14
    @bkardell the difference between panel and panelset is that you have role=tab on focusable element in panelset, it picks up children text nodes as tab name, for acc name calc it doesn't matter that button is hidden. 2 things you can do/try to fix 1. use aria-labelledby to explicitly reference paneltitle as acc name, also change button name from title to aria-label, these 2 things fix the issue.
  112. zakim-robot
    @zakim-robot
    Jun 28 11:59
    [michiel] Well that was fun.
  113. Job van Achterberg
    @jkva
    Jun 28 12:02
    ?
  114. zakim-robot
    @zakim-robot
    Jun 28 12:02
    [michiel] https://twitter.com/stevefaulkner/status/747754000406159361
  115. Job van Achterberg
    @jkva
    Jun 28 12:03
    Dude why
  116. It's like internet self-flagellation
  117. zakim-robot
    @zakim-robot
    Jun 28 12:04
    [michiel] I need to practice in case I need to have a discussion with Steve
  118. [michiel] No, I'm not implying he's a racist.
  119. [michiel] That came out wrong didn't it :P
  120. [michiel] s/what I just said//
  121. [michiel] Why doesn't that work :(
  122. [michiel] Regex needs to keep with the times.
  123. Mallory
    @StommePoes
    Jun 28 12:41
    dwim-gex
  124. powrsurg
    @powrsurg
    Jun 28 14:34
    do W3C workshops get streamed anywhere?
  125. nm, I didn't click around enough
  126. zakim-robot
    @zakim-robot
    Jun 28 14:40

    [jakecross] I have an input and a separate list of... well list items, and they are being used to create a set of results. I have been asked to get this mock select list to allow someone using AT to navigate the result with the arrow keys (up and down) rather than tab to the list items.

    Does it make sense to implement this? Will a user of AT really be trying to move around this mocked select list with arrow keys?

  127. zakim-robot
    @zakim-robot
    Jun 28 14:45
    [karlgroves] That is how a native select works, so yes.
  128. zakim-robot
    @zakim-robot
    Jun 28 14:59

    [jakecross] Change markup, test suite collapses...

    Maybe I'll just highjack the keydown events

  129. [karlgroves] Update the tests?
  130. [jakecross] They are not mine. I can speak with the team I am looking at this for and ask them if they are happy for me to do that - or how they'd like to proceed.
  131. [jakecross] I'll pass it to them and see what they want...
  132. zakim-robot
    @zakim-robot
    Jun 28 15:07
    [karlgroves] Ah ok. You can make the select accessible. Look at WAI-ARIA design patterns. BRB getting you the link
  133. [karlgroves] https://www.w3.org/TR/wai-aria-practices/#combobox
  134. [jakecross] It's beautiful http://motherfuckingwebsite.com
  135. [jakecross] Thank you for that! I'll work through that and see what I can do with it. Much appreciated.
  136. zakim-robot
    @zakim-robot
    Jun 28 15:14
    [karlgroves] thumbsup emoji
  137. zakim-robot
    @zakim-robot
    Jun 28 16:00
    [marcysutton] ><button> takes longer to type than <a>
    Thanks for my daily groan
  138. zakim-robot
    @zakim-robot
    Jun 28 16:26
    [jakecross] =D
  139. [jakecross] Pleeenty more where that came from

  140. [jakecross] I should probably point out that I was guessing as to why the development team opted for <a> over <button>

    It was watching your talk that made me want to volunteer to resolve current accessibility work on another team when they asked - https://www.youtube.com/watch?v=dmYDggEgU-s - </fanboy>

  141. zakim-robot
    @zakim-robot
    Jun 28 16:33

    [scottohara] fewer characters used === fewer bytes === better performance, rite?

    <button> takes longer to type than <a>
    Thanks for my daily groan

  142. powrsurg
    @powrsurg
    Jun 28 16:41
    @jakecross that website you linked last doesn't load the entire title on my watch
  143. also, if you're sacrificing accessibility for smaller byte size to claim better performance you're prematurely optimizing
  144. and hey, if you want things tabble you'll need to add ' href="#"' which at that point, when you include the closing tags, you're saving two characters. Saving two characters to produce an improper response is not worth it
  145. zakim-robot
    @zakim-robot
    Jun 28 16:46
    [marcysutton] don’t shoot the messenger, haha
  146. [marcysutton] Good to know that battle royale in Paris is still proving useful. I had the ultimate rebuttal after the Virgin America team spoke the day before
  147. zakim-robot
    @zakim-robot
    Jun 28 17:16
    [scottohara] @powrsurg agreed. i wish that was simply a joke, but unfortunately I have actually had that reasoning recited to me. the mouth mouth dropping was real. so real.
  148. powrsurg
    @powrsurg
    Jun 28 18:10
    there are a ton of devs that just learn from simple tutorials and don't know the basics
  149. we've got an interview with someone whose entire dev experience is a 16 week course from some online institute. They linked to their github where they had some games and stuff they did (I believe it was coursework actually). They had a Simon game that didn't actually play like Simon. I contemplated forking it to make it play properly and then doing a pull request. :p
  150. powrsurg
    @powrsurg
    Jun 28 18:15
    ... meanwhile I'm updating something and I just discovered that we had a helper area that I've worked in every day where there were a bunch of links (that should be links, things like view a certificate, help, etc) ... and one of them should actually be a button since it's a show/hide toggle ...