Archive index

A11y Slackers Gitter Channel Archive 29th of November 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Nov 29 03:37
    [caesar] Any JAWS experts out there? I've encountered this bug a few times now, where on first click of a link with aria-expanded, JAWS fails to read the new state. But it works with all subsequent clicks but reads the wrong (inverse) state to what's on the screen
  2. [caesar] Seems like a rookie error, and it never happens with the examples online...
  3. [caesar] Have tested v16 - 18 and occurs in all of them, making it seem highly unlikely to be a JAWS bug
  4. zakim-robot
    @zakim-robot
    Nov 29 03:48
    [caesar] Sorry, and by "click" I mean keypress (Enter). Works fine with mouseclicks, but the first "Enter" doesn't seem to trigger the state change
  5. James Nurthen
    @jnurthen
    Nov 29 03:56
    I have seen this a lot. In fact it seems to happen more often than not. Probably worth logging with freedom scientific but I haven't ever done so.
  6. zakim-robot
    @zakim-robot
    Nov 29 04:00
    [caesar] Just talking with a dev now. He's gonna test to see whether it's just a timing issue with the toggle happening before the animation vs after
  7. zakim-robot
    @zakim-robot
    Nov 29 04:14
    [caesar] OK, it didn't work. Will log with FS.
  8. James Nurthen
    @jnurthen
    Nov 29 04:26
    Cool. I wish we had an apg sample to reference.
  9. zakim-robot
    @zakim-robot
    Nov 29 04:29
    [caesar] What's an APG sample?
  10. James Nurthen
    @jnurthen
    Nov 29 04:33
    Aria authoring practices guide.
  11. We don't have a hide/show example unfortunately.
  12. zakim-robot
    @zakim-robot
    Nov 29 04:39
    [caesar] Oh, right. Yes, I did notice that when I was wondering what it would be called :)
  13. [caesar] Expand/Collapse vs. Show/Hide or other.
  14. zakim-robot
    @zakim-robot
    Nov 29 04:52
    [hmig] quick question: should the second <header> be in a <section><article><aside> or is this ok as is? http://screencast.com/t/drGsCfoBw
  15. zakim-robot
    @zakim-robot
    Nov 29 05:09
    [hmig] nm - it validates ok via the w3c checker, so it should be ok
  16. stevefaulkner
    @stevefaulkner
    Nov 29 08:19
    @hmig in the example code, the effect will be that there are 2 headers with role=banner, wrapping header/footer in a <section> changes the role of the elements to a more generic group. so suggest using '<section>'
  17. Martin Držka
    @martindrzka_twitter
    Nov 29 10:05
    Hi, can I use block elements inside dt or dd?
  18. stevefaulkner
    @stevefaulkner
    Nov 29 10:10
    @martindrzka_twitter the descendent allowed elements are described in each element definition under "Content model" , for example <dd> https://w3c.github.io/html/grouping-content.html#the-dd-element can contain flow content https://w3c.github.io/html/dom.html#flow-content
  19. @hmig also suggest that a '<main>' element be used to wrap the main content of the page. this may be helpful https://www.paciellogroup.com/blog/2015/09/easy-content-organisation-with-html5/
  20. @hmig also suggest the main heading on the page be marked up as <h1>
  21. Martin Držka
    @martindrzka_twitter
    Nov 29 10:38
    @stevefaulkner Thanks for the link
  22. stevefaulkner
    @stevefaulkner
    Nov 29 10:43
    :+1:
  23. Mallory
    @StommePoes
    Nov 29 12:21
    On the main Github page, in the form (that they grrrrrr AUTOFOCUS you to, hate that!) where you create an account...
  24. each and every input is wrapped in a dl
  25. inside each dl is only a dd
  26. no dt
  27. wtf github. wtf.
  28. I want to wrap the whole thing in a giant <WTF> tag
  29. The autofocus is also a pain in the butt since I do log out of github regularly or access via multiple browsers and machines. To get to the sign-in "button" (actually a link, but cleverly disguised as a button), I shift-tab a lot, and end up going in a really crazy visual focus order.
  30. stevefaulkner
    @stevefaulkner
    Nov 29 12:23
    morning @StommePoes
  31. Mallory
    @StommePoes
    Nov 29 12:24
    Found yesterday in the wild: <div role=button class="someclass" disabled>blah</div>.
  32. i'm thinking of instituting an all-out ARIA ban at work.
  33. hey @stevefaulkner
  34. You happen to have access to whatever Github devs are smoking? I think I want some.
  35. stevefaulkner
    @stevefaulkner
    Nov 29 12:27
    @StommePoes nah, greedy gits won't share it
  36. Mallory
    @StommePoes
    Nov 29 12:28
    wish me luck today, I'm going to try to give a talk, with AT demos.
  37. and yes, I'm totally doing the github page for wtf-value.
  38. stevefaulkner
    @stevefaulkner
    Nov 29 12:29
    Oh am sure you will do well, remember to swear alot
  39. Mallory
    @StommePoes
    Nov 29 12:29
    I don't need any fucking reminders to talk my natural way, man.
  40. Esp when something doesn't work
  41. like the mouse control in my Dragon, I dunno what's up with it. Stops listening to me once I put it in mouse mode. Stupid.
  42. I said "click button" on github assuming there's a few buttons (since they look like buttons) but there's apparently only 1 button so it submits the (empty) form.
  43. Then I get on a new page autofocussed into an input so my commands try to type themselves since I'm back in an input again. Gawd autofocus sucks 99% of the time.
  44. Yup, I've got plenty of bitching to fill an hour!
  45. Tomorrow's going to feel so good.
  46. It's like sucking poison out of a wound. Cathartic. Pray for my audience.
  47. Mallory
    @StommePoes
    Nov 29 12:35
    https://luisperezonline.files.wordpress.com/2016/11/img_8208.jpg?w=474
  48. (alt: ESC seen on the far-left side of the new Apple TouchBar thingie)
  49. jkva @jkva waves at @StommePoes
  50. stevefaulkner
    @stevefaulkner
    Nov 29 13:03
    @stevefaulkner waves at @jkva
  51. Job van Achterberg
    @jkva
    Nov 29 13:03
    Hey Steve!
  52. zakim-robot
    @zakim-robot
    Nov 29 13:05
    [karlgroves] Don’t talk to him, Steve. He had no idea who Clutch was.
  53. stevefaulkner
    @stevefaulkner
    Nov 29 13:05
    @karlgroves neither do I, but i am old
  54. zakim-robot
    @zakim-robot
    Nov 29 13:05
    [karlgroves] Oh FFS
  55. Job van Achterberg
    @jkva
    Nov 29 13:06
    I'm 34, I don't keep up with the youngster music
  56. jkva @jkva cranks up the volume on Matthaus Passion
  57. zakim-robot
    @zakim-robot
    Nov 29 13:06
    [karlgroves] https://www.youtube.com/watch?v=X8cmbmwFAl8
  58. zakim-robot
    @zakim-robot
    Nov 29 13:52
    [michiel] waves at jkva
  59. StommePoes @StommePoes waves at Michiel
  60. zakim-robot
    @zakim-robot
    Nov 29 13:53
    [michiel] sprinkles sparkles on StommePoes
  61. Mallory
    @StommePoes
    Nov 29 13:53
    MY UNICORN ALLERGY, NOES!!!
  62. zakim-robot
    @zakim-robot
    Nov 29 13:53
    [michiel] I seem to not make great choices when it comes to sprinkle stuff.
  63. [michiel] sprinkles hagelslag on his bread
  64. [michiel] Finally…
  65. Mallory
    @StommePoes
    Nov 29 13:54
    "chocolate raaaaaaain...."
  66. zakim-robot
    @zakim-robot
    Nov 29 13:54
    [michiel] =D
  67. [michiel] Right, need to get me some internets from the company down town.
  68. Job van Achterberg
    @jkva
    Nov 29 13:59
    @michiel how'd the move go
  69. zakim-robot
    @zakim-robot
    Nov 29 13:59
    [michiel] Quite alright, I moved in.
  70. [michiel] But the letting agencies wasn’t very helpful getting me there.
  71. [michiel] They decided to do a gas certificate check or something and I had to wait for that.
  72. [michiel] So had a van and driver sitting there for 2 hours before I could move in.
  73. [michiel] In any case, moved in now, so let the shopping spree commence!
  74. Mallory
    @StommePoes
    Nov 29 14:01
    buy m0aR cats
  75. zakim-robot
    @zakim-robot
    Nov 29 14:01
    [michiel] Haha
  76. [michiel] Not sure that’s the right thing to do.
  77. Mallory
    @StommePoes
    Nov 29 14:01
    b0x oF kiTTenZ
  78. b0xeZ
  79. zakim-robot
    @zakim-robot
    Nov 29 14:02
    [michiel] If I get enough I don’t need a mattress I suppose.
  80. Mallory
    @StommePoes
    Nov 29 14:02
    soft moving bed
  81. self-warming
  82. zakim-robot
    @zakim-robot
    Nov 29 14:02
    [michiel] If I let them out self-feeding even.
  83. [michiel] self-cleaning
  84. [michiel] IT’s PERFECT!
  85. [michiel] waits for jkva to take the joke too far
  86. Job van Achterberg
    @jkva
    Nov 29 14:04
    I have that reputation now?
  87. jkva @jkva does some soul-searching
  88. zakim-robot
    @zakim-robot
    Nov 29 14:04
    [michiel] now, two weeks ago, ever since I met you…
  89. Mallory
    @StommePoes
    Nov 29 14:06
    It's my joke. He can't have it.
  90. zakim-robot
    @zakim-robot
    Nov 29 15:14
    [fstorr] Morning/afternoon/evening, all. Question about implementing right-click context menus: is there a way to do this that plays nicely with assistive technology? For a brief second it looked as though the <menu> element would work but that isn’t implemented by any browser.
  91. zakim-robot
    @zakim-robot
    Nov 29 16:06
    [michiel] I suppose you could try pop up thingy, but how would you access that with the keyboard?
  92. James Nurthen
    @jnurthen
    Nov 29 16:07
    Shift+F10
  93. zakim-robot
    @zakim-robot
    Nov 29 16:08
    [michiel] Is that on focusable stuff only?
  94. Mallory
    @StommePoes
    Nov 29 16:08
    shift f10 doesn't work nearly as much or as well as right-clicking a mouse
  95. I pretty much only bother trying to do it with keyboard if I have an SR running
  96. then it kinda works the way it needs to
  97. zakim-robot
    @zakim-robot
    Nov 29 16:09
    [michiel] Does that work on macOS too?
  98. Mallory
    @StommePoes
    Nov 29 16:09
    Michiel: for me on Linux, it doesn't matter if I'm on a focusable or not... I only ever get the general application menu, not the specific one you get with mouse.
  99. And doesn't seem to ever, ever, ever work on Chromium here for me.
  100. no idea why.
  101. Works ok in Firefox and it might be something to do with FF being more integrated into Linux than chromiums
  102. In NVDA though, you can navigate like normal to a thingie, then call the mouse to move to that thingie, then NVDA+] to right click and open the usual context menu. when it works for me (sometimes does, sometimes doesn't), it works quite well.
  103. zakim-robot
    @zakim-robot
    Nov 29 16:11
    [michiel] Hmm
  104. Mallory
    @StommePoes
    Nov 29 16:11
    So far it's how I've been able to keyboard inspect particualr elements with the devtools
  105. You can do this in JAWS too, pretty much the same steps
  106. James Nurthen
    @jnurthen
    Nov 29 16:12
    if it is a custom popup i see no reason that shift+f10 wouldnt work
  107. zakim-robot
    @zakim-robot
    Nov 29 16:12
    [fstorr] Talking to a couple of screen reader users, right-click is something they’ve not encountered on the web and, if JAWS has support for somehow announcing the presence of a context menu, they’re not aware of the functionality.
  108. [fstorr] So JAWS does announce the presence of a context menu?
  109. James Nurthen
    @jnurthen
    Nov 29 16:12
    but isn't that the same for a mouse user?
  110. Mallory
    @StommePoes
    Nov 29 16:12
    True, the people who taught me this, though blind, were all developers, who are quite aware of context menus.
  111. I haven't noticed it, but if anyone would announce such a thing, it would be JAWS.
  112. James Nurthen
    @jnurthen
    Nov 29 16:13
    there is no visual indicator that the functionality is there.
  113. it is down to documentation/help and of course the right mouse menu not being the only way to do something
  114. Mallory
    @StommePoes
    Nov 29 16:13
    And that documentation needs to be (able to be) visible
  115. I got a "drag and drop" given to me where "screen reader users get some instructions on how to use it" and it used that ctrl-m thing that nobody I know knows
  116. zakim-robot
    @zakim-robot
    Nov 29 16:14
    [fstorr] This was also my feedback: that the functionality needs to be perceptible and without a visual indicator, it’s not.
  117. Mallory
    @StommePoes
    Nov 29 16:14
    and I said "don't expect sighted keyboarders to know that stuff. Tell them the keystrokes."
  118. James Nurthen
    @jnurthen
    Nov 29 16:15
    but is it the only way to do something or is there another way (menu, button etc.)
  119. Mallory
    @StommePoes
    Nov 29 16:15
    fstorr: what is the widget? Or is this just, any widgets
  120. zakim-robot
    @zakim-robot
    Nov 29 16:15
    [fstorr] I think I’m going to build something based on this: https://www.paciellogroup.com/blog/2016/01/simple-standalone-toggletip-widget-pattern/
  121. [fstorr] @stommepoes: can’t really say :(
  122. Mallory
    @StommePoes
    Nov 29 16:17
    I don't go crazy on tooltips. I either show them on focus or if it's weird, do the button like on the blog but I just make it a simpler disclosure thing: click to toggle visibility of the whatever.
  123. and as a sighted mouser, why would I right click something with a tooltip.
  124. James Nurthen
    @jnurthen
    Nov 29 16:17
    I think that example is fine if they are used sparingly. It would be really annoying if there were a lot of tooltips and all took keyboard focus
  125. Mallory
    @StommePoes
    Nov 29 16:18
    True. However most of our little "i" icons that do nothing but show tooltips, they're not in the focus order and would have to be if they are meant to be used by non-mousers. So they'd eat up tab room anyway
  126. Like, right now I ding them on "you have this help icon thingie and I can't reach it"
  127. James Nurthen
    @jnurthen
    Nov 29 16:18
    yeah - whatevere they are - use them sparingly'
  128. Mallory
    @StommePoes
    Nov 29 16:18
    Yeah. Thousand Tabs of Death sucks.
  129. James Nurthen
    @jnurthen
    Nov 29 16:19
    if you need that many have a toggle - or (if you can work out how to make it accessible) a help overlay ;)
  130. Mallory
    @StommePoes
    Nov 29 16:19
    Oh, we also have another tab-sucker, called a "coachmark" which is those little texty help areas that appear with a message, mostly for introducing new functionality in an interface a user has already gotten acquainted with, OR for running someone through a tutorial of how an interface works.
  131. James Nurthen
    @jnurthen
    Nov 29 16:19
    or even just online help!
  132. Mallory
    @StommePoes
    Nov 29 16:20
    Can't get to the online help button. It's a clickable span
  133. I die, I die.
  134. James Nurthen
    @jnurthen
    Nov 29 16:20
    that seems like an easy fix though
  135. Mallory
    @StommePoes
    Nov 29 16:20
    Yeah I dinged them on that too. Why does anyone bother? Why isn't it a link? Why? wwwwwwhy
  136. zakim-robot
    @zakim-robot
    Nov 29 16:20
    [fstorr] I’m having to retrofit a large thing, which makes it tricky. I’m not a fan of tooltips and icons but this will fix the issue I have as best as I can. Thanks :)
  137. James Nurthen
    @jnurthen
    Nov 29 16:20
    but i understand it is probably owned by a different dev team :)
  138. Mallory
    @StommePoes
    Nov 29 16:20
    So, can it be a simple disclosure-widget?
  139. so it doens't need any context menus?
  140. or is it really, like, a full menu menu?
  141. James Nurthen
    @jnurthen
    Nov 29 16:21
    if it is associated with a form field why not have the tooltip apear when you focus on the form field
  142. zakim-robot
    @zakim-robot
    Nov 29 16:55
    [fstorr] There are two of menu items in the widget and the widget isn’t associated with a form field. There will be from 0 to n number of them on a page, which is less-than great but it’s what I have.
  143. [fstorr] And because it’s a menu I need to add in the focus management, which is always fun :)
  144. [fstorr] side note: I would love a native HTML element or JavaScript thing that made focus management for non-blocking modals easy. Sorta like the <dialog> element but for tooltips, popups, etc.
  145. zakim-robot
    @zakim-robot
    Nov 29 18:49
    [dna] does anyone know if googlebot but will follow a <a href=”URL” role=”button”>?
  146. [dna] i understand the problems of conflating links and buttons, but this is mostly an SEO concern
  147. [conley] imo I would remove the role, it's contradictory tbh
  148. [conley] but I would think the webcrawler would treat it as intended
  149. [conley] ie an anchor
  150. zakim-robot
    @zakim-robot
    Nov 29 21:03
    [techthomas] @dna i thought googlebot was a blackbox… i would err on the side that they respect role=”button” in most historic SEO/google cases i’ve encountered they were always prioritizing people that were doing the right things for a11y.. aria had problems when it first came out b/c it didn’t validate in the w3c validation parser! now the code you pasted does validate so i would feel secure
  151. [techthomas] @dna anyone that can tell you the definitive answer has the midas touch though … which is why you’ll never get one
  152. [dna] hey @techthomas
  153. [dna] turns out i got an answer!
  154. [dna] https://twitter.com/dxna/status/803667307968995328
  155. [dna] but i agree, even if that’s true, who knows how long that’ll last
  156. [techthomas] @dna thats great but they could change that any day ya
  157. [techthomas] ha
  158. zakim-robot
    @zakim-robot
    Nov 29 21:09
    [techthomas] did you go to the CSUN talk about button vs link? i didn’t but your SEO discussion point should definitely have been part of that
  159. [dna] i dont remember tbh, was it a panel?
  160. [dna] i’m familiar with the differences and everything, and i think the guidance is good in the simplest case
  161. [dna] but when UI’s get very ajax-y/single page app-y/dynamic I find that there’s a lot of gray area
  162. [hmig] @stevefaulkner - thanks! I thought this looked off. I dug into the spec (http://w3c.github.io/html/sections.html#the-header-element), but I wasn’t sure if this was ok or not. There is an <h1> in the first '<header>’ … I think was site is trying to have a '<header><h1></header><header><h2></header><footer/>' structure .. and there is a '<main>' with several '<section>s’