Archive index

A11y Slackers Gitter Channel Archive 25th of July 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Mallory
    @StommePoes
    Jul 25 10:19
    Dean is that still not fixed? I poked some Booking people about the datepickers and they poked people who were directly responsible for the datepicker code
  2. zakim-robot
    @zakim-robot
    Jul 25 10:26
    [dean] I’ve been poking them for over a month, and threw in a few passive aggressive tweets to boot. Still nothing.
  3. Job van Achterberg
    @jkva
    Jul 25 11:10
    @stevefaulkner in W3C#539 - in the issue description, did you mean to write <dfn> where you wrote <df>?
  4. Ian Devlin
    @iandevlin
    Jul 25 11:24
    Hello all. I have a short question. If one has some text, that is currently contained within a h3, if clicking on this text reveals a slideout of information, should this h3 now also contain a button (although it needs to be styled so as it looks like normal text), since semantically this is what it is.
    I suspect the answer is "yes", but prefer to hear expert opinions.
  5. Job van Achterberg
    @jkva
    Jul 25 11:27
    iandevlin: imo a button has clearest semantics (and aria-expanded on the slideout), but how are you going handle the affordance for the slideout toggling if you style the button to look like text?
  6. The reason a button doesn't have cursor:pointer is because a button should clearly look like a button
  7. Ian Devlin
    @iandevlin
    Jul 25 11:30
    @jkva: Yeah I know, I am just going through a lot of existing code at the moment and trying to see what needs to be done to make it keyboard accessible without changing the look of the thing at all as that would open a can of large, scary worms with big teeth and machine guns.
  8. Working in little steps at the moment.
  9. Job van Achterberg
    @jkva
    Jul 25 11:32
    @iandevlin: Ah, thanks for the context :)
  10. Ian Devlin
    @iandevlin
    Jul 25 11:32
    @jkva And thanks for the answer! You are of course correct, if it's a button it should look like one but at the moment it can't.
  11. Léonie Watson
    @LJWatson
    Jul 25 11:33
    @iandevlin what is the visual cue that the heading expands some ontent?
  12. *content
  13. Job van Achterberg
    @jkva
    Jul 25 11:33
    @iandevlin Are you able to add in some signifiers that it can be clicked ?
  14. Léonie Watson
    @LJWatson
    Jul 25 11:35
    @iandevlin also, is there an interactive element of any kind inside the heading that provides the interaction, or is it all JS?
  15. Ian Devlin
    @iandevlin
    Jul 25 11:36
    @LJWatson Currently it is all JS, there are no indicators of any kind. It is also not the only place on this page where this occurs.
  16. @jkva Not at the moment.
  17. Some of the other examples that also open a slideout are currently clickable divs.
  18. Again I could probably change these to buttons but for the moment they would need to look the same as they currently do.
  19. Job van Achterberg
    @jkva
    Jul 25 11:38
    @iandevlin Darn. I at least hope you'll be able to improve on that part of the site, assuming this is contracting for a client.
  20. Léonie Watson
    @LJWatson
    Jul 25 11:38
    Ok. For the first thing you probably want to do something like <h><span role="button" tabindex="0">Lorem ipsum</span></h>
  21. This preserves the screen reader's ability to navigate by heading and by button. If you put the button semantics around the heading, you lose the ability to navigate by heading.
  22. Then chuck aria-expanded on the <span> to indicate the expanded/collapsed state of the content.
  23. Ian Devlin
    @iandevlin
    Jul 25 11:40
    @jkva It is the behemoth that is the trivago search website, which is currently completely inaccessible and we are trying to improve that, but it takes time and we have lots of internal barriers and such, hence the "can't change too much" restriction at the moment.
  24. Léonie Watson
    @LJWatson
    Jul 25 11:40
    If you use ^^ then you can do what you like with the styling.
  25. Just adapt the JS to provide the expected space/enter key handling for the button.
  26. Ian Devlin
    @iandevlin
    Jul 25 11:41
    @LJWatson Ok thank you so much for the suggestion! This is what I will aim to do.
  27. Job van Achterberg
    @jkva
    Jul 25 11:41
    @iandevlin: Not too shabby for a client. Yeah, understandable with a company that size. Good luck!
  28. Léonie Watson
    @LJWatson
    Jul 25 11:41
    There are some design patterns here that deal with pseudo-buttons of one sort or another http://ljwatson.github.io/design-patterns
  29. NP @iandevlin :)
  30. Ian Devlin
    @iandevlin
    Jul 25 11:42
    Thank you both for your help and discussion.
  31. jkva @jkva bows
  32. stevefaulkner
    @stevefaulkner
    Jul 25 12:34
    @jkva yup, thanks, fixed
  33. jkva @jkva bows
  34. Job van Achterberg
    @jkva
    Jul 25 12:34
    ouch,my back
  35. stevefaulkner
    @stevefaulkner
    Jul 25 12:42
    :-)
  36. zakim-robot
    @zakim-robot
    Jul 25 12:54
    [michiel] jkva: maybe you should go back to that masseuse at LAX.
  37. Job van Achterberg
    @jkva
    Jul 25 12:54
    Haha
  38. zakim-robot
    @zakim-robot
    Jul 25 12:56
    [michiel] Confirmed speakers for upcoming role=drinks in Amsterdam: https://twitter.com/roledrinks/status/757559317079924737
  39. Job van Achterberg
    @jkva
    Jul 25 12:56
    Awesome
  40. zakim-robot
    @zakim-robot
    Jul 25 12:56
    [dean] What date is that @michiel ?
  41. Job van Achterberg
    @jkva
    Jul 25 12:57
    Oct 8
  42. After FronteersConf
  43. zakim-robot
    @zakim-robot
    Jul 25 13:01
    [dean] oh yeah, I’m away again.
  44. [dean] I hope you upload Jake’s slides somewhere
  45. Ian Devlin
    @iandevlin
    Jul 25 13:11
    Maybe one day I will attend role=drinks, but Amsterdam is so expensive to stay in.
  46. stevefaulkner
    @stevefaulkner
    Jul 25 13:12
    @iandevlin you can stay with @jkva
  47. Job van Achterberg
    @jkva
    Jul 25 13:13
    Yeah sure. As long as you don't mind cats (Stupid ones or meowing ones)
  48. Ian Devlin
    @iandevlin
    Jul 25 13:13
    Ha! I am used to two dogs, one of which jumps on me when she decideds it's time for breakfast.
  49. Léonie Watson
    @LJWatson
    Jul 25 13:13
    @iandevlin would be good to meet you if you make it to the 8th Oct role="drinks".
  50. Job van Achterberg
    @jkva
    Jul 25 13:15
    I'm staying in a hotel that night though, b/c FronteersConf the days before :-/
  51. Darn
  52. zakim-robot
    @zakim-robot
    Jul 25 13:22
    [michiel] iandevlin, where abouts do you live?
  53. zakim-robot
    @zakim-robot
    Jul 25 13:29
    [michiel] We're expanding, so might be one closer to you :D
  54. Job van Achterberg
    @jkva
    Jul 25 13:34
    Germany methinks?
  55. zakim-robot
    @zakim-robot
    Jul 25 13:35
    [michiel] There is one in Hamburg, and one coming to Berlin too.
  56. [michiel] Oxford is also on the cards.
  57. [michiel] Also San Diego ;)
  58. [michiel] But that one is a ways away.
  59. Job van Achterberg
    @jkva
    Jul 25 13:36
    Yeah =)
  60. Ian Devlin
    @iandevlin
    Jul 25 13:49
    @zakim-robot I am near Düsseldorf
  61. @LJWatson It would indeed, we shall see. I will see what I can do.
  62. Mallory
    @StommePoes
    Jul 25 14:02
    Ian we have a similar issue, clickable headings in an "accordion" with only a little arrow to tell people it's clickable
  63. and in a nested list
  64. I'm trying to flatten that list and put buttons in the headings.
  65. Ian Devlin
    @iandevlin
    Jul 25 14:02
    At least you have the little arrows :D
  66. Mallory
    @StommePoes
    Jul 25 14:03
    Design just added them
  67. before you just had to be psychic
  68. all students are psychic, dint'cha know
  69. zakim-robot
    @zakim-robot
    Jul 25 14:03
    [michiel] iandevlin: more info on the different events: https://github.com/role-drinks
  70. Mallory
    @StommePoes
    Jul 25 14:03
    On the actual design site though the text is just italic and slightly grey with some spacing underneath
  71. Ian Devlin
    @iandevlin
    Jul 25 14:05
    Thanks @zakim-robot
  72. Mallory
    @StommePoes
    Jul 25 14:05
    That's Michiel Bijl
  73. Job van Achterberg
    @jkva
    Jul 25 14:05
    bleep, bloop
  74. Ian Devlin
    @iandevlin
    Jul 25 14:05
    :D
  75. I like the name Zakim.
  76. Léonie Watson
    @LJWatson
    Jul 25 14:06
    Zakim has its origins way back in W3C space.
  77. Mallory
    @StommePoes
    Jul 25 14:06
    I've always said it like zah-KEEM but apparently it's more like Zack'm
  78. Job van Achterberg
    @jkva
    Jul 25 14:07
    Ha really, huh
  79. I always read it in an Arab accent yeah
  80. Léonie Watson
    @LJWatson
    Jul 25 14:07
    It's pronounced zay-kim.
  81. Mallory
    @StommePoes
    Jul 25 14:07
    My head will always call him Zah-KEEM
  82. Ian Devlin
    @iandevlin
    Jul 25 14:07
    Zah-KEEM is also what I thought, now I am disappointed.
  83. Léonie Watson
    @LJWatson
    Jul 25 14:08
    It's named after Zakim Bridge in Boston (where W3C HQ is at MIT).
  84. Mallory
    @StommePoes
    Jul 25 14:08
    yeah, no bots will replace him with similar names like Hakim
  85. Ian Devlin
    @iandevlin
    Jul 25 14:08
    Aha, interesting!
  86. Job van Achterberg
    @jkva
    Jul 25 14:08
    </mystery>
  87. Ok, so my theory of it being a W3C intern locked in the basement is incorrect
  88. Léonie Watson
    @LJWatson
    Jul 25 14:09
    Well, maybe once upon a time..
  89. Mallory
    @StommePoes
    Jul 25 14:10
    never heard of lenny zakim, Jewish-American religious and civil rights leader who created interfaith Seders and fought racism and poverty
  90. Mallory
    @StommePoes
    Jul 25 14:16
    Oh listening to that Dropdowns Must Die talk and they have a section "As toothbrush designer Dieter Rams once said..."
  91. Mallory
    @StommePoes
    Jul 25 14:31
    http://www.fuckdropdowns.com/
  92. Job van Achterberg
    @jkva
    Jul 25 14:32
    Golden Krishna, huh I just started reading a book by them
  93. @StommePoes is that talk any good
  94. Cos it's 45mins
  95. zakim-robot
    @zakim-robot
    Jul 25 14:35
    [dean] No Interface is fantastic Job. I saw him last year, great speaker too.
  96. Mallory
    @StommePoes
    Jul 25 14:36
    Yeah it's about shitty dropdowns and while not all slides are spoken/described, it's generally a good listener
  97. Job van Achterberg
    @jkva
    Jul 25 14:36
    Cool, will watch at some point
  98. zakim-robot
    @zakim-robot
    Jul 25 14:36
    [dean] Same.
  99. Job van Achterberg
    @jkva
    Jul 25 14:36
    Need to find a good presentation on design to watch during DINNER
  100. And a good book/documentary on the psychology behind design.
  101. Something that says "Yeah we know this is pretty but WHY is this"
  102. "A is easier to use than B and here is the SCIENCE"
  103. Stuff that NN/G does
  104. Mallory
    @StommePoes
    Jul 25 14:38
    Like why people asked which socks are better consistently stated the socks on the right were better
  105. despite being exactly the same
  106. zakim-robot
    @zakim-robot
    Jul 25 14:45
    [dean] https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535
  107. Job van Achterberg
    @jkva
    Jul 25 14:46
    Sweet, thanks @dean. On that note, what's a book you consider profound to your understanding of design?
  108. Mallory
    @StommePoes
    Jul 25 14:47
    one bad thing about the fuckdropdowns talk is they really are ready to rely on geolocation to remove dropdowns. Go ahead and use that data as a smart default if I allow it, but don't take away my ability to correct you about what info I'm trying to fill in.
  109. Amazon book looks really good, author is a psychiatrist and behavioural scientist
  110. Job van Achterberg
    @jkva
    Jul 25 14:48
    I love Safari so much. alt=list of design books by Susan Weinschenk https://usercontent.irccloud-cdn.com/file/7TROp5qF/
  111. zakim-robot
    @zakim-robot
    Jul 25 14:48
    [dean] It’s an excellent book if you’re interested in why people do things
  112. Mallory
    @StommePoes
    Jul 25 14:50
    Yeah I love reading about experiments where people show they're not the logical, rational creatures they think they are
  113. zakim-robot
    @zakim-robot
    Jul 25 15:02
    [jakecross] hello everyone!
  114. Mallory
    @StommePoes
    Jul 25 15:03
    Hi, Dr. Nic!
  115. zakim-robot
    @zakim-robot
    Jul 25 15:04
    [jakecross] Well if it isn't my friend my Mikey McGreg, with a leg for an arm and an arm for a leg
  116. Mallory
    @StommePoes
    Jul 25 15:04
    Oh Dean there's a Dutch-language book out there called Verleiden Op Internet if you want to read that sorta (sometimes slimy marketing tricks) stuff and improve your Dutch
  117. "Try to think back to Med School..." [can only remember drinking at parties]
  118. zakim-robot
    @zakim-robot
    Jul 25 15:06
    [jakecross] What would you do with a button that said "Yes"... how do you give it context based on the text elsewhere on the page that describes what you are saying "Yes" to?
  119. Mallory
    @StommePoes
    Jul 25 15:07
    One idea

  120. <p id="foobar">Blah blah, who doesn't like caviar? Would you like to try 3 kilos at ABSOLUTELY NO COST?<p>

    <button aria-describedby="foobar">YES!</button>

  121. <button aria-describedby="foobar">No, I don't want my FREE caviar</button>
  122. I would test it though
  123. zakim-robot
    @zakim-robot
    Jul 25 15:09
    [jakecross] I'll look into how that behaves with a screen reader, but thank you :)
  124. Mallory
    @StommePoes
    Jul 25 15:09
    I don't always get some of these aria things reading out. The good thing about the above setup though is that someone going through the page in a sane, linear fashion has a good chance of hitting the explanatory text first anyway.
  125. Apparently buttons can actually have label-labels
  126. but I don't know what happens to the text inside when you use one.
  127. <label for="foobar">3 FREE KILOS DELICIOUS CAVIAR</label> <button id="foobar">YES!</button>
  128. Without aria junk, there's a better chance of context being available if the buttons are part of a form, maybe with a fieldset+legend depending
  129. zakim-robot
    @zakim-robot
    Jul 25 15:14
    [jakecross] It does logically progress from the explanation to the button... so there is there. A short described by can't hurt though I suppose

  130. [jakecross] "should I look into the accessibility?"

    It's not been budgeted for or planned for or talked about....

  131. Mallory
    @StommePoes
    Jul 25 15:54
    That step prolly needs to be done first
  132. It needs to be part of the project plan, the project manager needs to plan for it, the product owner needs to expect/demand it... can't just be on devs.
  133. Job van Achterberg
    @jkva
    Jul 25 16:26
    snap YES!
  134. zakim-robot
    @zakim-robot
    Jul 25 17:52
    [dean] Mallory, if you want slimy stuff then this is good - https://www.amazon.com/Evil-Design-Interaction-Lead-Temptation/dp/1118422147
  135. [dean] I’m passed learning de Nederlands taal. Ik heb geen hope.
  136. Job van Achterberg
    @jkva
    Jul 25 18:07
    How can you that now say @dean
  137. "Illuminating, amusing, and a genuine page-turner....this book will give you insight into ways you have been tricked and, even better, give you the tools to persuade others either for evil or, if you really must, for good."
  138. — Bruce "Tog" Tognazzini, Principal, Nielsen Norman Group, mad scientist, and former Apple employee #66
  139. Wow
  140. powrsurg
    @powrsurg
    Jul 25 18:32
    For admins that have a table with an edit or delete button that typically repeats Edit or Delete in the button text I tend to either add an aria-label that says something like "Edit ..." or a span with a CSS class that makes the text invisible to sighted users that adds in the text.