Archive index

A11y Slackers Gitter Channel Archive 4th of October 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Oct 04 00:36
    [chris__pearce] For a required form field that is a group of checkboxes (wrapped in a <fieldset> and using a <legend>) should each checkbox get the required attribute?
  2. zakim-robot
    @zakim-robot
    Oct 04 01:14
    [scottohara] if each input is actually required, then i would think so
  3. zakim-robot
    @zakim-robot
    Oct 04 04:27
    [chris__pearce] ok thanks
  4. Job van Achterberg
    @jkva
    Oct 04 09:38
    Morning folks
  5. zakim-robot
    @zakim-robot
    Oct 04 13:18
    [conley] mornin'
  6. Mallory
    @StommePoes
    Oct 04 13:38
    If every input that is a checkbox is required, doesn't having them not checked mean you failed?
  7. And if they are not an option not to have unchecked, why have them?
  8. Or make them disabled/checked...
  9. zakim-robot
    @zakim-robot
    Oct 04 14:09
    [michiel] waves at jkva & StommePoes
  10. jkva @jkva waves back a @michiel, see you Saturday!
  11. zakim-robot
    @zakim-robot
    Oct 04 14:21
    [michiel] Right on!
  12. [michiel] Time flies :o
  13. [michiel] Tomorrow is Digital Gaggle in Bristol. Anyone going to that?
  14. [michiel] Miss ljwatson will do a talk :)
  15. zakim-robot
    @zakim-robot
    Oct 04 14:56
    [bkardell] dear people with more experience than me, save me from a lot of testing? Is there a rule, or is it random how a11y tech deals with idrefs that have N matches? That is, nothing prevents an id from appearing more than once, in fact, the web would break if we did that because cms' are notoriously bad at this - css styles all matches, qsa returns all. so, if I have N checkboxes all with the id 'mycheckbox' and N labels that are for='mycheckbox' - what happens?
  16. zakim-robot
    @zakim-robot
    Oct 04 15:23
    [kahhrahh] What would you all recommend for a replacement of href=“#” to launch dropdowns and modals?
  17. Ian Devlin
    @iandevlin
    Oct 04 15:25
    Use a <button>
  18. zakim-robot
    @zakim-robot
    Oct 04 15:26
    [kahhrahh] Thanks! I’ll try that now!
  19. zakim-robot
    @zakim-robot
    Oct 04 15:49
    [kahhrahh] That fixes the errors on desktop, however it breaks those link on mobile. I’m using mmenu (http://mmenu.frebsite.nl/). Any one have a similar problem?
  20. [conley] Unfortunately you’re are the mercy of the library. In my experience, a bespoke implementation tends to work the best
  21. zakim-robot
    @zakim-robot
    Oct 04 15:54
    [kahhrahh] Okay that’s what I was thinking. Thanks!
  22. zakim-robot
    @zakim-robot
    Oct 04 16:58
    [car] @bkardell I'll bet the all go to first-in-dom. <grin> Is it really-really hard to make them unique?
  23. [bkardell] @car I'm not into perpetuating the problem, I just saw someone do it recently and wondered... was just wondering what it actually would do and figured someone might know/save me the testing. I bet @ljwatson knows what happens if for=".." references an id and there are many instances of that id in the page
  24. zakim-robot
    @zakim-robot
    Oct 04 17:04
    [alice] @bkardell It falls back to getElementById I believe (based on Chromium code at least), which says:
  25. [alice] "If more than one element has an ID attribute with that value, what is returned is undefined. "
  26. [alice] https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId
  27. [michiel] So wouldn’t work at all?
  28. [alice] In practice, it looks like it goes to first in dom
  29. [michiel] Ah
  30. [alice] Oh - not undefined, but undefined in the CS sense
  31. [alice] basically shruggie
  32. [alice] ¯\_(ツ)_/¯
  33. [bkardell] no it is standard to return the first
  34. [alice] de facto standard?
  35. [alice] or standard standard?
  36. [bkardell] standard standard
  37. [bkardell] but I'm asking about for="..." and a11y tech specifically
  38. [alice] ah whatwg says The getElementById(elementId) method, when invoked, must return the first element, in tree order, within context object’s descendants, whose ID is elementId, and null if there is no such element otherwise.
  39. [alice] I think the browser handles for= before most AT gets to see it at all
  40. [michiel] What do you expect AT to do different bkardell?
  41. [alice] (I suspect I'm missing the point here)
  42. [michiel] What is announced when you set focus to the form field / checkbox?
  43. [bkardell] I'm not sure there is a point :) I'm just curious how a sr handles it... sr doesn't use getElementById, right?
  44. [alice] SR typically uses the a11y tree
  45. [alice] right?
  46. [michiel] ^ what she said
  47. [bkardell] I'm not sure how we're talking past each other here :)
  48. zakim-robot
    @zakim-robot
    Oct 04 17:09
    [bkardell] you brought up getElementById IIRC ,not me?
  49. [bkardell] I asked how that is related to what sr's do
  50. [bkardell] because I'm not sure for / getelementbyid are related
  51. [alice] The browser builds the a11y tree
  52. [marcysutton] I think only the first one would be exposed
  53. [alice] and as a step in that process it gets the text for each node
  54. [alice] text/label/name/whatever you wanna call it
  55. [michiel] bkardell: VoiceOver/Safari 10 do what alice just described; all inputs are linked to the first label
  56. [alice] for a labelable element, it's going to look for labels
  57. [alice] here's how that looks in Chrome:
  58. [bkardell] @michiel good
  59. [alice] https://cs.chromium.org/chromium/src/third_party/WebKit/Source/modules/accessibility/AXNodeObject.cpp?sq=package:chromium&dr=CSs&rcl=1475579939&l=2270
  60. [michiel] http://jsbin.com/cemericaca/edit?html,output
  61. [alice] if you trace that code through, it ends up calling the internal implementation of getElementById()
  62. [bkardell] @alice great!
  63. [alice] (btw this is debuggable using the a11y experiment in chrome devtools)
  64. zakim-robot
    @zakim-robot
    Oct 04 17:15
    [marcysutton] So interesting, thanks for sharing
  65. [alice] debugging name sources for checkbox
  66. [bkardell] so really the question is whether this is standard, defacto or standard behavior
  67. [alice] "If the attribute is specified and there is an element in the tree whose ID is equal to the value of the for attribute, and the first such element in tree order is a labelable element, then that element is the label element's labeled control."
  68. zakim-robot
    @zakim-robot
    Oct 04 17:20
    [bkardell] and I could have checked myself, yes, as I said initially if someone knows I was just hoping to have to avoid testing every browser and getting at their tree and then even based on the tree (if it could contain multi) the SR I suppose could still just choose the first
  69. [bkardell] did I literally just look past that in the spec?
  70. [alice] that's in whatwg
  71. [bkardell] facepalms
  72. [bkardell] walks out of room hanging head in shame
  73. [alice] Nobody should ever feel shame for finding specs hard to read omg
  74. [michiel] Specwriters should ;)
  75. [car] Good point @alice. And there's W3 and whatwg. And there's "the latest TR" and "what's in github", and "what's in the old github where we used to keep our stuff"... :stuck_out_tongue_closed_eyes:
  76. [michiel] “And that version from 2008 everybody links to because it’s the first result in Google”
  77. [car] Ya, you get my drift. Someone should go delete the old cruft... <grin>
  78. [michiel] W3’s previous version thing sucks
  79. zakim-robot
    @zakim-robot
    Oct 04 17:27
    [garcialo] “W3…sucks” -@michiel
  80. [cordelia] :laughing:
  81. [michiel] garcialo at it again.
  82. [garcialo] ^_^
  83. zakim-robot
    @zakim-robot
    Oct 04 17:41
    [michiel] “Garcialo sucks”—Michiel
  84. [michiel] Oh, btw, you’ll have to come to the EU for that drink; not going to CSUN next year.
  85. [michiel] Or this year, or however English works in that sentence.
  86. zakim-robot
    @zakim-robot
    Oct 04 17:46
    [garcialo] bah!
  87. [garcialo] It’s next year, you went this year.
  88. [garcialo] Next year it will be this year.
  89. zakim-robot
    @zakim-robot
    Oct 04 20:01
    [michiel] Fair enough
  90. [michiel] So, when are you in Europe garcialo?
  91. zakim-robot
    @zakim-robot
    Oct 04 20:19
    [michiel] Life of a rockstar: https://twitter.com/MichielBijl/status/783375643597832192
  92. [michiel] :see_no_evil:
  93. zakim-robot
    @zakim-robot
    Oct 04 20:38
    [kkoskelin] hello, friends. I'm looking for some insight regarding how a screenreader (JAWS) navigates a particular page that's giving me great difficulty. I've got a jsfiddle to share if anyone is up for it.
  94. [michiel] If you share the link I might have a wee look
  95. [kkoskelin] thanks, @michiel . Here's the result fiddle: https://jsfiddle.net/kkoskelin/L70p2g4x/embedded/result/
  96. [kkoskelin] when using up/down arrows, JAWS skips past the entire numbered section. (source: https://jsfiddle.net/kkoskelin/L70p2g4x/ )
  97. zakim-robot
    @zakim-robot
    Oct 04 20:44
    [michiel] Probably because div aria-hidden="true" on all of them :)
  98. [michiel] There are limited use cases for aria-hidden.
  99. [kkoskelin] suddenly reminding myself why I wanted to rewrite this bit... and I feel like a dolt. thanks, @michiel
  100. [michiel] As a general rule, you should keep parity between what is visible and what is communicated to AT users.
  101. [michiel] thumbsup emoji
  102. [kkoskelin] yes, that's certainly the goal. this page wasn't done right the first time, and I'm trying to fix it.
  103. [kkoskelin] I appreciate your time.
  104. [michiel] If possible, an ordered list will go a long way.
  105. [michiel] No problem, that’s why we’re here :)
  106. [kkoskelin] Yes, that was another consideration. when styled, I'm presenting that list in 3 columns. correctly choosing the right markup and roles was difficult (in my inexperience)
  107. zakim-robot
    @zakim-robot
    Oct 04 20:49
    [kkoskelin] the idea is to be able to navigate to an item and activate it, as a link, which will change the view.
  108. [michiel] Well, no question is too small for a11ySlackers ;)
  109. [michiel] ol>li>a?
  110. [kkoskelin] ordered list, list items, each containing a hyperlink
  111. [kkoskelin] right
  112. [michiel] Yeah that should do it.
  113. [kkoskelin] there's a bit of js-action involved, so I won't directly want to use href=""
  114. [michiel] Don’t forget descriptive names for the links.
  115. [kkoskelin] because it's a backbone app
  116. [michiel] Backbone has history stuff right?
  117. [kkoskelin] sure does.
  118. [michiel] Do you have hash nav as a backup or something?
  119. [michiel] Could use that for href
  120. [michiel] domain.uk/#question-1 or whatever
  121. [kkoskelin] our convention has been to directly call the routes with JS
  122. [kkoskelin] which is reflected in the window's location of course. but we like using js hooks before/after nav
  123. [michiel] Okay, marcysutton recently wrote something on that I believe.
  124. [kkoskelin] ah, she's great
  125. [michiel] Aye
  126. [michiel] https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
  127. [michiel] marcysutton: will you be at FullFrontal this year?
  128. [marcysutton] I won't, but I am working on travel for A11yTO!
  129. [michiel] Nice, will be there next year (a11yTO)
  130. [marcysutton] thanks for linking my article!
  131. [kkoskelin] great link, thanks to both of you. :)
  132. [michiel] thumbsup emoji
  133. [michiel] Thank you for writing it ;)
  134. [michiel] I should get back to writing something.
  135. zakim-robot
    @zakim-robot
    Oct 04 20:54
    [marcysutton] I wrote it out of frustration, so glad to hear something good came of it
  136. [michiel] Heydon and I might do one on tabs somewhere near the end of this year :smiling_imp:
  137. [michiel] marcysutton: those are the best :P
  138. [marcysutton] i'm going to make it into a Smashing Conf talk next year, which should be a lot of fun
  139. [marcysutton] Links vs. Buttons: THE SHOWDOWN
  140. [michiel] :D
  141. [michiel] We need to get you to a role=drinks at some point.
  142. [marcysutton] That would be super fun!
  143. zakim-robot
    @zakim-robot
    Oct 04 20:59
    [cerebralposi] Just wanted to take a moment to share my disability and tech focused blog with this community. I’d love to hear anyone’s feedback! blog.cerebralposi.net
  144. zakim-robot
    @zakim-robot
    Oct 04 21:05
    [marcysutton] Thanks for sharing @cerebralposi! It would be good to have alt text for the journal pages. But kudos for getting your writing out there!
  145. [cerebralposi] @marcysutton yes I agree. I need to figure out how to add the alt text on tumblr
  146. [marcysutton] You have to edit the HTML source...which is a bummer. That's how I do it
  147. [cordelia] Do you know if there’s a way to add alt text for an image in an Image post on Tumblr? I’ve only been able to add it for images in Text posts, as HTMl editor doesn’t seem to be exposed for Image posts.
  148. zakim-robot
    @zakim-robot
    Oct 04 21:12
    [cerebralposi] @marcysutton @cordelia That is such a bummer! Digging into the source code through the tumblr UI is so tedious!
  149. [marcysutton] ugh i hadn't noticed that....I do have a way to contact the Tumblr team to report it though
  150. [marcysutton] I had someone at Yahoo ask me for feedback on Tumblr and I never sent it
  151. [cordelia] Oh woah, does Yahoo now own Tumblr? </out of the loop>
  152. [marcysutton] yep
  153. [cerebralposi] Yahoo has owned tumblr for a few years now I think? You should totally send the feedmack marcy!
  154. [cordelia] @cerebralposi Thanks for sharing your blog! I like your use of handwritten HTML tags. Yay semantic HTML!
  155. zakim-robot
    @zakim-robot
    Oct 04 21:22
    [cerebralposi] @cordelia Thank you! I started the blog when I was participating in a web development bootcamp back in October. I hand write most posts since I’m a one-handed typist and think much faster than I can type. But it also adds a cool aesthetic in my opinion :) The html tags are a way of giving a nod to what I was learning in class
  156. Mallory
    @StommePoes
    Oct 04 21:54
    oooh, I smell another future/potential Dragon user... :P
  157. zakim-robot
    @zakim-robot
    Oct 04 21:55
    [michiel] just registered another domain name
  158. [michiel] It has to staph!
  159. Mallory
    @StommePoes
    Oct 04 21:57
    it has to staph?
  160. like bacteria?
  161. zakim-robot
    @zakim-robot
    Oct 04 22:03
    [caesar] Reminds me of a quote from the TV show Psych... "Stalling, or, as Rutger Hauer would say, schtalling."
  162. zakim-robot
    @zakim-robot
    Oct 04 22:11
    [michiel] Yes, my domain registration addiction forms pus.
  163. Mallory
    @StommePoes
    Oct 04 22:15
    poes
  164. zakim-robot
    @zakim-robot
    Oct 04 22:21
    [michiel] https://moiety.me
  165. [michiel] Now I just need something to put there.
  166. zakim-robot
    @zakim-robot
    Oct 04 23:42

    [chris__pearce] Sorry about the delay, on the required checkbox question I posted yesterday, StommePoes mentioned this:

    If every input that is a checkbox is required, doesn't having them not checked mean you failed?
    And if they are not an option not to have unchecked, why have them?
    Or make them disabled/checked…

    I also realise I wasn’t clear enough in my original question, cc @scottohara.

    Not every checkbox is required just that at least one of them in the group is. Maybe seeing the markup will help: 

        <legend>         Group name         <span class="h-hide-visually">(select at least one option in order to proceed)</span>     </legend>     <label for="20385115">Option 1</label>     <input type="checkbox" required aria-required="true" value="1234" id="20385115">     <label for="6ec71e57">Option 2</label>     <input type="checkbox" required aria-required="true" value="12345" id="6ec71e57">     <label for="9ec055e9">Option 3</label>     <input type="checkbox" required aria-required="true" value="123456" id="9ec055e9"> </fieldset>

    It does feel funny that every checkbox has a required attr when only at least one of them in the group is required. I’ve added some hidden visually text to the <legend> element: <span class="h-hide-visually">(select at least one option in order to proceed)</span> to let assistive tech users know upfront—is that enough?

    For a group of radio buttons the spec says having the required attr on all of the radio buttons is correct but not sure about a group of checkboxes?

  167. zakim-robot
    @zakim-robot
    Oct 04 23:55
    [karlgroves] You definitely don’t want each one indicated as required.
  168. [karlgroves] Adding the required notice to the legend is a good idea - which also begs the question: why hide it?