Archive index

A11y Slackers Gitter Channel Archive 3rd of May 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Job van Achterberg
    @jkva
    May 03 06:08
    Where are my manners, morning Slackers!
  2. Peter Krautzberger
    @pkra
    May 03 07:19
    :sunrise: @jkva
  3. Peter Krautzberger
    @pkra
    May 03 07:36
    quick question: does aria-flowto work in the wild?
  4. zakim-robot
    @zakim-robot
    May 03 07:43
    [hhillen] no
  5. Peter Krautzberger
    @pkra
    May 03 07:50
    @hhillen Thanks! (That was in response to my question, right? :-) )
  6. zakim-robot
    @zakim-robot
    May 03 07:50
    [hhillen] @pkra: yes
  7. Peter Krautzberger
    @pkra
    May 03 07:50
    :-)
  8. Peter Krautzberger
    @pkra
    May 03 07:51
    Thanks so much @hhillen!
  9. Michiel Bijl
    @MichielBijl
    May 03 08:24
    Morning slackies.
  10. Job van Achterberg
    @jkva
    May 03 08:25
    o/
  11. Mallory
    @StommePoes
    May 03 08:29
    the aria must flow
  12. Michiel Bijl
    @MichielBijl
    May 03 08:35
    \o
  13. Mallory
    @StommePoes
    May 03 08:35
    Michiel, I just cc'd you to a question on WebAIM to Bryan
  14. Mallory
    @StommePoes
    May 03 08:36
    tho you might already know the answer
  15. Michiel Bijl
    @MichielBijl
    May 03 08:36
    I saw that, thanks.
  16. Mallory
    @StommePoes
    May 03 08:36
    When you tested VO did you do it with or without rotor?
  17. Michiel Bijl
    @MichielBijl
    May 03 08:36
    I have 50+ e-mails + 10+ tweets to reply to :P
  18. Michiel Bijl
    @MichielBijl
    May 03 08:36
    I have not read mail yet.
  19. Michiel Bijl
    @MichielBijl
    May 03 08:36
    Will look now.
  20. Mallory
    @StommePoes
    May 03 08:37
    Ah, the life of an accessibility celebrity. I just get people blocking me :P
  21. Michiel Bijl
    @MichielBijl
    May 03 08:38
    Haha
  22. Michiel Bijl
    @MichielBijl
    May 03 08:39
    Well, I'll reply to the mail too, but dialog is not a landmark role.
  23. Michiel Bijl
    @MichielBijl
    May 03 08:39
    So it does not turn up in the web rotor.
  24. MichielBijl @MichielBijl checks if there is a setting for that.
  25. Michiel Bijl
    @MichielBijl
    May 03 08:41
    There is not.
  26. Michiel Bijl
    @MichielBijl
    May 03 08:42
    And all the mails and tweets is just because Mathilde was here for the weekend and yesterday; so couldn't do much work.
  27. Peter Krautzberger
    @pkra
    May 03 09:52
    @MichielBijl I was wondering you need more volunteers for lightning talks at the meetup.
  28. Peter Krautzberger
    @pkra
    May 03 09:53
    would be happy to talk about our work on math.
  29. Michiel Bijl
    @MichielBijl
    May 03 09:58
    Oeh, we can squeeze one more in!
  30. Michiel Bijl
    @MichielBijl
    May 03 09:58
    I'll put you on the list!
  31. Peter Krautzberger
    @pkra
    May 03 09:59
    yay! No worries if it's too tight.
  32. Michiel Bijl
    @MichielBijl
    May 03 10:00
    Can I put in a company name as well?
  33. Peter Krautzberger
    @pkra
    May 03 10:28
    Hm. MathJax probably makes most sense even if I'm independent.
  34. Michiel Bijl
    @MichielBijl
    May 03 11:25
    pkra: don't have to include it :) Updated the list.
  35. Job van Achterberg
    @jkva
    May 03 11:42
    heheh
  36. Job van Achterberg
    @jkva
    May 03 11:42
    1:28 PM <•davorg> People who have been doing Perl for ten years don't need training?
  37. Job van Achterberg
    @jkva
    May 03 11:42
    1:28 PM <•djh> no, they need therapy :)
  38. Job van Achterberg
    @jkva
    May 03 11:46
    http://www.adultswim.com/misc/developer-test/
  39. Michiel Bijl
    @MichielBijl
    May 03 11:49
    Ha
  40. Peter Rushforth
    @prushforth
    May 03 13:25
    Hi there a11yslackers, I have a11y issues to think about and I would appreciate your views. I am working on progressively enhanced web maps (e.g. Google Maps). I have developed a custom type extension element. The element extends the map element. When script is enabled, or the browser is capable enough, it should give you a google maps-like rectangle. In IE or in the case of disabled script, it should give you a basic image map. Here is a (page you can visit)[http://maps4html.github.io/Web-Map-Custom-Element/map-vs-web-map.html] that will help you understand what I've built. I hope it works for you, but even if it doesn't that might help me if you tell me about your experience. It should create a different experience in IE than in other browsers, that is intentional. I have read a bit about roles, but I note that the map element has no default role, so I'm wondering if I should leave it that way, or add something? What about the layer element, which is a bit like the source element child of picture, except that there can be more than one layer active at a time. Thanks. Sorry for the long message.
  41. powrsurg
    @powrsurg
    May 03 13:31
    layer element? I haven't seen that around since I had to support Netscape 4 ...
  42. Peter Rushforth
    @prushforth
    May 03 13:33
    What is old is new again! I thought about calling it source, but for maps, 'layer' is a thing so it was semantically more appropriate. Also, the source element seems to imply exclusive OR addition to the parent, whereas as I mentioned on a map you can have multiple layers .
  43. Jason Day
    @jasonday
    May 03 13:41
    Good morning, folks
  44. powrsurg
    @powrsurg
    May 03 13:41
    1) Why do you need it in IE7 mode? That seems like it's leading to a problem ... 2) Make your zoom controls button elements since they are buttons. Buttons are for actions, links are to take you to another page. 3) Wrap your marker in a button (unless you meant to have it link to a page and just "example domain"), and remove the tabindex on the image tag. 4) The marker needs an alt attribute, preferably one that says something more meaningful than just "Marker"
  45. powrsurg
    @powrsurg
    May 03 13:41
    morning
  46. Jason Day
    @jasonday
    May 03 13:43
    I agree with @powrsurg - older IE is going to be a problem. In that scenario, for any browser less than x.x version, I would automatically give that group a static map
  47. powrsurg
    @powrsurg
    May 03 13:43
    The keyboard controls were decent. Is there a pattern that describes them somewhere? I was surprised that when the map had focus I could move it.
  48. powrsurg
    @powrsurg
    May 03 13:43
    Try testing it in NVDA and see how you feel about what is read.
  49. powrsurg
    @powrsurg
    May 03 13:44
    If you can close your eyes and get a meaningful experience with a screen reader than you're on the right track at least.
  50. powrsurg
    @powrsurg
    May 03 13:45
    I think Google goes with the most recent version and one back. I don't know how they handle IE now that Edge is around though
  51. Peter Rushforth
    @prushforth
    May 03 13:45
    IE surprised me, as I thought it was not capable of running Polymer, but I found that in fact it is. There are still many issues to get the thing running well on any IE. I was using IE as a way of experimenting with fallback to simple image map processing. You can do that by turning JS off too, but anyway it was an experiment. Thanks! for your comments, I am thinking...
  52. powrsurg
    @powrsurg
    May 03 13:46
    my work hasn't yet dropped IE8, despite only getting 101 hits in the last 30 days
  53. Jason Day
    @jasonday
    May 03 13:47
    @powrsurg - any data on metrics (conversion, etc)? - that's how we finally killed it
  54. Jason Day
    @jasonday
    May 03 13:47
    x number of hours developing/debugging for older versions of IE > the dollars earned in that browser
  55. powrsurg
    @powrsurg
    May 03 13:49
    We are a learning management system. A lot of our the courses our software uses has Flash (most of it defaults, but some as a fall back). That is what most of our customers use, though we're trying to get them to use other features we're building out. Those features mostly work in older IE really.
  56. Peter Rushforth
    @prushforth
    May 03 13:50
    Great comments. I will try to make the zoom controls buttons - they come straight from Leaflet, but with a bit of hacking it likely could be done. Yes, the marker is supposed to behave like a link in this case. If it is supposed to display a balloon, are you saying it should be a button? I will remove the tabindex for the image . I suppose it should have a tabindex when it is in image map mode, though?
  57. Jason Day
    @jasonday
    May 03 13:50
    Question for the group - anyone have data/research on the impact on accessibility of buttons with rounded or square corners? From a usability angle, rounded is generally preferred, but I could use an a11y angle.
  58. powrsurg
    @powrsurg
    May 03 13:50
    Our IE numbers are weird. 86.2% of IE users in our site are on 11, 6.8% on 9, and 4.57% on 10
  59. Jason Day
    @jasonday
    May 03 13:51
    @powrsurg - that's due to recent forced updates by IE
  60. Jason Day
    @jasonday
    May 03 13:51
    6+ months ago, I'm sure your numbers were more distributed
  61. Peter Rushforth
    @prushforth
    May 03 13:51
    Try testing it in NVDA and see how you feel about what is read.
  62. Peter Rushforth
    @prushforth
    May 03 13:51
    OK
  63. powrsurg
    @powrsurg
    May 03 13:52
    @prushforth Well you need the person to be able to tab to marker. That is why I was saying it should be a button (though it sounds like it should be a link here). If you can't do either than you need the tabindex and you need to apply role="link" and handle other semantics ... stuff that would be easier avoided if you can just make a link in there.
  64. powrsurg
    @powrsurg
    May 03 13:52
    @jasonday I'm sad that IE8 hasn't dropped as much as I hoped given MS killing it
  65. powrsurg
    @powrsurg
    May 03 13:53
    and to your comment, I hadn't heard of any research on rounded buttons
  66. powrsurg
    @powrsurg
    May 03 13:55
    https://www.w3.org/TR/mobile-accessibility-mapping/#h-provide-clear-indication-that-elements-are-actionable
  67. powrsurg
    @powrsurg
    May 03 13:57
    the iconography point made me laugh
  68. powrsurg
    @powrsurg
    May 03 13:58
    that said, I still don't think that hamburger menus are as clear to people as designers and seem to think it is
  69. Peter Rushforth
    @prushforth
    May 03 14:28
    @powrsurg @jasonday thanks for your comments. I've been using NVDA on the page and it is educational, but I think it interferes with the use of the keyboard somehow. For example, when focus is on the map, the arrow keys no longer move the map etc.
  70. Fiona Holder
    @FionaHolder
    May 03 14:32
    Hi all, let's say I have seen a case where an additional technique would be worth adding to the WCAG, how do I go about suggesting the change? I had a nose around in the Github, but without much documentation there I don't want to just throw something incorrect in and cause unnecessary work for the editors
  71. Peter Rushforth
    @prushforth
    May 03 14:33
    @prushforth I get it I have to hold the numpad insert key while using the arrow keys.
  72. powrsurg
    @powrsurg
    May 03 14:35
    @FionaHolder maybe worth mentioning on the mailing list first?
  73. Fiona Holder
    @FionaHolder
    May 03 14:37
    @powrsurg Mailing list? I'm not really sure how these things work, haha
  74. James Nurthen
    @jnurthen
    May 03 14:37
    @FionaHolder There are multiple ways to create something... Don't have time to comment now as getting kids ready for school but will try to remember later
  75. Peter Rushforth
    @prushforth
    May 03 14:46
    @powrsurg , and anyone else: A question I still have is: does extending the map element make more sense than creating a new element entirely? Semantics and accessibility seem to be related. Yet the map element has no default role. Why? Should the enhanced map element have a default role? I guess this is related to the zooming and panning behaviour which is accessed by the keyboard when the focus is on the map. You were surprised by the focus going to the map, and you mentioned to remove the tabindex from the img - are these related?
  76. Fiona Holder
    @FionaHolder
    May 03 14:47
    @jnurthen Thanks! :)
  77. powrsurg
    @powrsurg
    May 03 14:55
    well, <map> was for image maps. Not for maps like say, Google Maps
  78. Peter Rushforth
    @prushforth
    May 03 14:55
    I was afraid you'd say that
  79. Michiel Bijl
    @MichielBijl
    May 03 14:58
    NOM NOM NOM NOM
  80. Michiel Bijl
    @MichielBijl
    May 03 14:58
    HAMBURGERS!
  81. powrsurg
    @powrsurg
    May 03 14:58
    mens?
  82. powrsurg
    @powrsurg
    May 03 14:58
    menus
  83. Michiel Bijl
    @MichielBijl
    May 03 14:59
    Yes. I love menu's with hamburgers.
  84. Michiel Bijl
    @MichielBijl
    May 03 14:59
    When I'm at a restaurant that is…
  85. Michiel Bijl
    @MichielBijl
    May 03 15:00
    The only time I know what three stacked stripes mean is when it's on a shoe or some sport clothing…
  86. Michiel Bijl
    @MichielBijl
    May 03 15:01
    “Why is there a button to justify text in the menu bar :/”
  87. powrsurg
    @powrsurg
    May 03 15:01
    it has meaning for them?
  88. powrsurg
    @powrsurg
    May 03 15:01
    only clothing where I know three stripes mattering would be in the military, and I don't know what that means? a general?
  89. Michiel Bijl
    @MichielBijl
    May 03 15:03
    I meant Adidas.
  90. Michiel Bijl
    @MichielBijl
    May 03 15:04
    I vaguely remember it having meaning, but can't tell you what.
  91. Mallory
    @StommePoes
    May 03 15:16
    three stripes-- word processing. Justify that text.
  92. Mallory
    @StommePoes
    May 03 15:16
    Sometimes it also means "text document" and "file"
  93. Mallory
    @StommePoes
    May 03 15:16
    I honestly can't see how it ever came to mean "menu", it looks nothing like one.
  94. powrsurg
    @powrsurg
    May 03 15:17
    I think it was used as a menu in some older mac program (may not have even been an apple program). Not sure
  95. Mallory
    @StommePoes
    May 03 15:18
    makes sense designers would take something from their computers of choice :P
  96. powrsurg
    @powrsurg
    May 03 15:19
    It's small which makes it good for mobile, and it avoids international issues you would have with text ...
  97. powrsurg
    @powrsurg
    May 03 15:20
    one of the first designers I worked with that put together a menu had 4 bars ...
  98. Mallory
    @StommePoes
    May 03 15:21
    Someone thought it would be a good idea to put an eyeball with a squiggle through it for that reason... so I tend to think it's a terrible reason. universal symbols that avoid translation issues only work if they really are universal symbols that avoid translation issues.
  99. Mallory
    @StommePoes
    May 03 15:21
    That, or I'm just incapable of deciphering mobile symbols
  100. powrsurg
    @powrsurg
    May 03 15:22
    symbols get weird. Does it really still make sense to use a floppy disk for saving?
  101. Jason Day
    @jasonday
    May 03 15:23
    That's what we call 'having legs' - meaning it's gained so much traction that it would be futile to go against the grain
  102. powrsurg
    @powrsurg
    May 03 15:23
    Last year we had an intern that was 18 at the time and didn't know that a computer could be connected to the internet via wires. I doubt she had used a floppy disk
  103. zakim-robot
    @zakim-robot
    May 03 15:24
    [kate] So what should the symbol for 'phone' be?
  104. zakim-robot
    @zakim-robot
    May 03 15:24
    [kate] A rectangle?
  105. powrsurg
    @powrsurg
    May 03 15:24
    she only ever used the net via wi-fi
  106. Michiel Bijl
    @MichielBijl
    May 03 15:24
    During important call: “Can I just say, Mitch smells”—Steve
  107. Michiel Bijl
    @MichielBijl
    May 03 15:24
    Stay classy
  108. powrsurg
    @powrsurg
    May 03 15:26
    See, another reason why one should avoid meetups :p
  109. Job van Achterberg
    @jkva
    May 03 16:45
    wtf =D
  110. Mallory
    @StommePoes
    May 03 16:46
    Smelly Dutch, smelly Dutch, what are they feeding us
  111. Michiel Bijl
    @MichielBijl
    May 03 16:47
    =D
  112. Job van Achterberg
    @jkva
    May 03 16:48
    Did it improve the call quality? Perhaps the mood needed it
  113. Michiel Bijl
    @MichielBijl
    May 03 16:49
    Haha, well, I guess it did.
  114. Mallory
    @StommePoes
    May 03 16:49
    Japanese smell-o-vision technology improvements
  115. Michiel Bijl
    @MichielBijl
    May 03 16:49
    We were discussing pesky tab paels.
  116. Mallory
    @StommePoes
    May 03 16:49
    pesky pesky
  117. Mallory
    @StommePoes
    May 03 16:49
    hateses
  118. Mallory
    @StommePoes
    May 03 16:49
    Did you see Sara Souiedan's tweets?
  119. Job van Achterberg
    @jkva
    May 03 16:49
    Keep in mind Steve is a Lamarkian, he can't help it
  120. Job van Achterberg
    @jkva
    May 03 16:50
    Wait no that's a type of evolution
  121. Michiel Bijl
    @MichielBijl
    May 03 16:50
    @StommePoes: yeap
  122. Mallory
    @StommePoes
    May 03 16:50
    "So-and-so's tab panels/accordion is broken" pat lauke: "because you need to switch to arrows" Sara: oh, ok, then it's not broken...
  123. jkva @jkva goes to work for his diabolical client
  124. Mallory
    @StommePoes
    May 03 16:50
    Please add to the specs "developers MUST add explanatory text above tab panels explaning how they now work
  125. Michiel Bijl
    @MichielBijl
    May 03 16:51
    We actually discussed that during call.
  126. Mallory
    @StommePoes
    May 03 16:53
    Bryan Garavanta had some ideas, but those are more the kinds of things you add when some graphics overlord stands over you with a weapon and forbids explanatory texts
  127. Mallory
    @StommePoes
    May 03 16:54
    I like their sneakiness, but they're not sufficient for graphics-stupids like me
  128. Mallory
    @StommePoes
    May 03 16:55
    Personally, I think I'm going to remove all the aria stuff from a particular tab panel we've got running in some software
  129. Mallory
    @StommePoes
    May 03 16:55
    there's only ever 3 tabs, they need clicks to be engaged, and so long as they've existed and people have used them, they were tabbable.
  130. James Nurthen
    @jnurthen
    May 03 17:25

    @FionaHolder re: new WCAG techniques. Here are some useful (and some not so useful) links for WCAG techniques

    • WCAG techniques wiki
      • look at instructions, template and notes
      • also check to see if someone has already started your technique... many have been started and abandoned (not through any fault of the technique itself.
    • Once done you can submit either through
      • https://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/
      • github (the XML format is a bit of a pain but you just need to copy from another really)
      • create it on a wiki (I don't think the public have write access to the wcag wiki - and then create a github issue and point to it

    There are probably other ways of doing it too - but that is where I would start.

  131. James Nurthen
    @jnurthen
    May 03 17:25
    what is the technique by the way
  132. Mallory
    @StommePoes
    May 03 17:52
    the replies to this tweet from Slack are "promise soon" but I wonder if they filled that a11y slot... https://twitter.com/tuukkao/status/727520425354383360
  133. zakim-robot
    @zakim-robot
    May 03 18:06
    [karlgroves] :dusty_stick: Just as soon as they get done adding more emojis
  134. Mallory
    @StommePoes
    May 03 18:08
    what's a dusty stick?
  135. Mallory
    @StommePoes
    May 03 18:08
    Karl you guys said the open position they had was gone... was that on their site?
  136. zakim-robot
    @zakim-robot
    May 03 18:09
    [karlgroves] Who knows what a dusty stick is. While they were fucking around with moronic emojis they could’ve been fixing their accessibility
  137. zakim-robot
    @zakim-robot
    May 03 18:09

    [karlgroves] >was that on their site?

    Yes

  138. zakim-robot
    @zakim-robot
    May 03 18:11
    [karlgroves] Screw accessibility! At least I can put a :wastebasket: emoji in my messages!
  139. zakim-robot
    @zakim-robot
    May 03 18:12
    [karlgroves] and a :dash: emoji that looks like a fart cloud
  140. zakim-robot
    @zakim-robot
    May 03 18:13
    [karlgroves] AND 7 DIFFERENT TRAINS
  141. Mallory
    @StommePoes
    May 03 18:13
    that last one actually showed up as a fart cloud.
  142. zakim-robot
    @zakim-robot
    May 03 18:13
    [lsilver] Hi! I've been working on creating some accessibility guidelines for websites, and was wondering about what might be best practice for mobile navigation buttons that open to reveal a nav list. I've looked at examples on http://simplyaccessible.com/ and http://www.perkins.org/contact# and noticed neither of these websites use aria-hidden. Is aria-hidden not accepted as a good practice anymore?
  143. Mallory
    @StommePoes
    May 03 18:14
    aria-hidden is one of those things you use carefully
  144. Mallory
    @StommePoes
    May 03 18:14
    and if you're already display: nonning stuff, you generally won't need it anyway.
  145. zakim-robot
    @zakim-robot
    May 03 18:15
    [lsilver] Oh, ok
  146. Mallory
    @StommePoes
    May 03 18:15
    It's specifically useful if for some reason you can't display:none or visibility:hidden something but need to prevent users of AT from accessing it...
  147. Mallory
    @StommePoes
    May 03 18:15
    like when a modal dialog is open, if you could aria-hide the rest of the page, that's kinda nice
  148. zakim-robot
    @zakim-robot
    May 03 18:15
    [lsilver] That makes a lot of sense
  149. Mallory
    @StommePoes
    May 03 18:15
    since keyboard traps only trap tab, but with a screen reader you could just arrow out of the thing without realising
  150. Mallory
    @StommePoes
    May 03 18:15
    as an example
  151. Mallory
    @StommePoes
    May 03 18:16
    or having both a visible icon and invisible text... maybe you want to aria-hide the icon if it possibly could be read out as emoji-poop-cloud or something
  152. zakim-robot
    @zakim-robot
    May 03 18:16
    [lsilver] Thanks!
  153. Fiona Holder
    @FionaHolder
    May 03 18:17
    @jnurthen Thanks, I'll have a look! I think ARIA role=presentation needs adding to Situation F (decorative content) of 1.1.1
  154. Mallory
    @StommePoes
    May 03 18:17
    you mean to undo a role of img on things?
  155. Fiona Holder
    @FionaHolder
    May 03 18:18
    @jnurthen It's mentioned in F38, but not in the actual techniques, so it either needs removing from F38 or adding as a technique I guess
  156. James Nurthen
    @jnurthen
    May 03 18:19
    @FionaHolder when we created the ARIA techniques this was proposed. The WG rejected it as they didn't want to encourage not using alt="" for decorative images
  157. James Nurthen
    @jnurthen
    May 03 18:20
    as a compromise the failure was changed so those images didn't trigger the failure technique
  158. Fiona Holder
    @FionaHolder
    May 03 18:22
    @jnurthen Ah that makes sense, I hadn't thought of it from the point of view of it not being "recommended" but it shouldn't cause a fail. That Wiki is helpful, thanks
  159. James Nurthen
    @jnurthen
    May 03 18:22
    @FionaHolder there is lots of history there....
  160. James Nurthen
    @jnurthen
    May 03 18:23
    @FionaHolder please don't let me discourage you from contributing though - there are lots of techniques which need writing
  161. Fiona Holder
    @FionaHolder
    May 03 18:24
    @jnurthen Not at all, will certainly contribute if I come across something else that needs adding!
  162. zakim-robot
    @zakim-robot
    May 03 18:50
    [jitendra] > ARIA is too often dismissed as “just accessibility,” but really—true to its name—it’s about Accessible Rich Internet Applications. Which means it’s chock-full of expanded semantics.
    http://alistapart.com/article/meaningful-css-style-like-you-mean-it
  163. zakim-robot
    @zakim-robot
    May 03 18:51
    [cameron] @dylanb @marcysutton does aXe have a CLI runner?
  164. zakim-robot
    @zakim-robot
    May 03 18:59
    [marcysutton] Not in the open source version, no. There are more tools available on the Attest side of things
  165. Mallory
    @StommePoes
    May 03 19:13
    "Each part of a form is considered a paragraph, and is typically separated from other parts using p elements." <-- who came up with this?
  166. zakim-robot
    @zakim-robot
    May 03 19:19
    [karlgroves] Where was that
  167. zakim-robot
    @zakim-robot
    May 03 19:20
    [karlgroves] OMG
  168. zakim-robot
    @zakim-robot
    May 03 19:20
    [karlgroves] WTAF
  169. zakim-robot
    @zakim-robot
    May 03 19:20
    [karlgroves] https://www.w3.org/html/wg/spec/forms.html#writing-a-form-s-user-interface
  170. zakim-robot
    @zakim-robot
    May 03 19:21
    [karlgroves] @stevef: who do we yell at for this
  171. Mallory
    @StommePoes
    May 03 20:26
    I think Steve is ok with it, I remember him pointing me to the original old HTML 4.01 blah blah specs which used <P>'s as example wrappers (but did not explicitly state that label-input pairs are semantically considered paragraphs(
  172. Mallory
    @StommePoes
    May 03 20:27
    Also, you just yelled at poor Steve Finkelstein
  173. Mallory
    @StommePoes
    May 03 20:27
    You meant the mighty @stevefaulkner
  174. Job van Achterberg
    @jkva
    May 03 20:28
    BWAAAAAAHM
  175. Mallory
    @StommePoes
    May 03 20:34
    He's also ok with labels wrapping inputs but I avoid it because something, somewhere, consistently manages to break with that setup (for some reason, damned if I know why it's so difficult for browsers or AT to deal with it)... currently being Dragon
  176. zakim-robot
    @zakim-robot
    May 03 20:35
    [marcysutton] ugh still??
  177. zakim-robot
    @zakim-robot
    May 03 20:35
    [marcysutton] Can’t we have one thing be easy (implicit labels)?
  178. Mallory
    @StommePoes
    May 03 20:36
    as of Dragon 13 anyway, I hear 14 is out
  179. powrsurg
    @powrsurg
    May 03 20:38
    wait, labels and input pairs are paragraphs?
  180. powrsurg
    @powrsurg
    May 03 20:38
    what?
  181. Mallory
    @StommePoes
    May 03 20:46
    yeah I read that article Jitendra mentioned above
  182. Mallory
    @StommePoes
    May 03 20:47
    A List Apart article
  183. Mallory
    @StommePoes
    May 03 20:47
    and he mentions and actually links to it
  184. Mallory
    @StommePoes
    May 03 20:47
    in the specs
  185. Mallory
    @StommePoes
    May 03 20:47
    and I was like, wut? so I read it
  186. Mallory
    @StommePoes
    May 03 20:47

    and also noticed all the examples were like

    <p><label>Foo <input name=bar/></label></p>

  187. powrsurg
    @powrsurg
    May 03 20:56
    oh, I hadn't read today's ALA article today
  188. Mallory
    @StommePoes
    May 03 20:58
    http://alistapart.com/article/meaningful-css-style-like-you-mean-it
  189. zakim-robot
    @zakim-robot
    May 03 20:58
    [stevef] @karlgroves: the URL you provided was a working draft of HTML5 "Editor's Draft 25 October 2010". Have a look at https://w3c.github.io/html/ if the offending content is still there, file an issue https://github.com/w3c/html/issues/new
  190. Job van Achterberg
    @jkva
    May 03 20:59
    Time for scotch
  191. Mallory
    @StommePoes
    May 03 21:00
    zomg scotch
  192. Job van Achterberg
    @jkva
    May 03 21:00
    Took only a minute
  193. zakim-robot
    @zakim-robot
    May 03 21:00
    [karlgroves] 4.10.1.1
  194. Mallory
    @StommePoes
    May 03 21:01
    various people trying to npm install our stuff getting seemingly random errors where some unknow unknown of unknowns is requiring some version of Babel that nobody can load, instead of the version specified in the package.json... grrrrr node
  195. zakim-robot
    @zakim-robot
    May 03 21:01
    [karlgroves] BRB filing issues
  196. Mallory
    @StommePoes
    May 03 21:01
    To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer’s name
  197. Job van Achterberg
    @jkva
    May 03 21:06
    This scotch sure is tasty. If only I could share it with somebody
  198. Mallory
    @StommePoes
    May 03 21:06
    Soon there will be someone to share it with!
  199. zakim-robot
    @zakim-robot
    May 03 21:23
    [alice] Hello, who's about for an ARIA design patterns question?
  200. stevefaulkner
    @stevefaulkner
    May 03 21:37
    Nothing wrong with using <p>s in forms
  201. stevefaulkner
    @stevefaulkner
    May 03 21:40
    "The solution is to realize that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five
  202. zakim-robot
    @zakim-robot
    May 03 21:41
    Sorry trying to work this UI on phone on 🚽
  203. Job van Achterberg
    @jkva
    May 03 21:42
    push for victory
  204. zakim-robot
    @zakim-robot
    May 03 21:42

    [karlgroves] I’ve added a bug: w3c/html#336

    As a container for any generic phrasing content, there’s nothing wrong with a <p> as a wrapper for form elements/ labels, but I think there are better choices

  205. Job van Achterberg
    @jkva
    May 03 21:43
    Did you have to <p> because of that Steve?
  206. stevefaulkner
    @stevefaulkner
    May 03 21:43
    😜
  207. stevefaulkner
    @stevefaulkner
    May 03 21:43
    As laid down by hixie https://w3c.github.io/html/dom.html#paragraph
  208. zakim-robot
    @zakim-robot
    May 03 21:43

    [karlgroves] >BAD+98BAD+9C

    Whatever

  209. Mallory
    @StommePoes
    May 03 21:44
    Structure??
  210. Job van Achterberg
    @jkva
    May 03 21:44
    =D
  211. zakim-robot
    @zakim-robot
    May 03 21:44
    [karlgroves] Good thing we have Sir Ian to look up to
  212. Mallory
    @StommePoes
    May 03 21:44
    the reason people wrap something around label-input pairs is pretty much a sandbag to hang CSS styles from
  213. Job van Achterberg
    @jkva
    May 03 21:45
    Meh, I wrap in ul, li. I like AT announcing the amounts to me anyway
  214. stevefaulkner
    @stevefaulkner
    May 03 21:45
    It's too late for me to be arguing spec minutiae
  215. Mallory
    @StommePoes
    May 03 21:45
    Because you are on the loo and are not drinking scotch
  216. Job van Achterberg
    @jkva
    May 03 21:45
    Why not both
  217. stevefaulkner
    @stevefaulkner
    May 03 21:45
    @jkva Dutch hammer
  218. Mallory
    @StommePoes
    May 03 21:46
    jkva scotch in one hand, phone in the other? Where's the 3rd for wiping?
  219. stevefaulkner
    @stevefaulkner
    May 03 21:46
    Who wipes
  220. Job van Achterberg
    @jkva
    May 03 21:46
    @Steve that's a new term
  221. stevefaulkner
    @stevefaulkner
    May 03 21:46
    Yeah I just made it up
  222. zakim-robot
    @zakim-robot
    May 03 21:46

    [karlgroves] Yes. In that regard <p> it isn’t any more/ less useful/ usable than <div> or <section>

    Its just that <p> says “paragraph” to me, not interactive user interface controls

  223. Mallory
    @StommePoes
    May 03 21:46
    he means multiple Dutch Fuckers are pestering him about spex
  224. Job van Achterberg
    @jkva
    May 03 21:47
    @stevefaulkner UrbanDictionary says otherwise
  225. stevefaulkner
    @stevefaulkner
    May 03 21:47
    Really what's it mean?
  226. Job van Achterberg
    @jkva
    May 03 21:47
    I won't quote, this stuff gets saved and then my illustrous a11y career is over
  227. zakim-robot
    @zakim-robot
    May 03 21:48
    [karlgroves] @jkva: Knock Knock
  228. Job van Achterberg
    @jkva
    May 03 21:48
    Mike Paciello will just slam the door in my face!
  229. Mallory
    @StommePoes
    May 03 21:48
    "TPG STUFF, GO AWAY"
  230. Job van Achterberg
    @jkva
    May 03 21:48
    =D
  231. stevefaulkner
    @stevefaulkner
    May 03 21:48
    It was an off cuff response to your oversemantisaztionism
  232. Job van Achterberg
    @jkva
    May 03 21:48
    That caviar looked good though
  233. Job van Achterberg
    @jkva
    May 03 21:49
    @stevefaulkner yeah a little cat told me
  234. Mallory
    @StommePoes
    May 03 21:49
    I use <div>s to wrap my label-input pairs.
  235. stevefaulkner
    @stevefaulkner
    May 03 21:49
    That's fine by me
  236. Mallory
    @StommePoes
    May 03 21:49
    but I can't if the spec says they are in fact paragraphs
  237. Mallory
    @StommePoes
    May 03 21:49
    a paragraph is a thing
  238. Mallory
    @StommePoes
    May 03 21:49
    sentence fragments and full paragraphs!
  239. Mallory
    @StommePoes
    May 03 21:50
    They're even things I can navigate by
  240. stevefaulkner
    @stevefaulkner
    May 03 21:50
    Yeah it is but it's not what you expect it to be
  241. zakim-robot
    @zakim-robot
    May 03 21:50

    [karlgroves] I use TDs.
    Actually, I use TDs inside of TDs inside of TDs inside of iframes inside of iframes inside of TDs inside of TDs

    I’m writing software for Oracle!

  242. zakim-robot
    @zakim-robot
    May 03 21:50
    [karlgroves] leaves before @jnurthen arrives
  243. Job van Achterberg
    @jkva
    May 03 21:50
    I smell a CSUN talk coming up. "Why the W3C makes me <p> all the time"
  244. stevefaulkner
    @stevefaulkner
    May 03 21:50
    If you use jaws you can navigate via divisions
  245. Mallory
    @StommePoes
    May 03 21:50
    me or ... every web developer evar who might accidentally read that spec now that it's been specifically linked to by a Web Guru in a High Class Magazine
  246. Mallory
    @StommePoes
    May 03 21:51
    I've moved by p's, I've not moved by divs before
  247. Mallory
    @StommePoes
    May 03 21:51
    that will we interesting to see
  248. zakim-robot
    @zakim-robot
    May 03 21:51

    [karlgroves] > it's been specifically linked to by a Web Guru in a High Class Magazine

    Add a comment saying what they linked to was out of date.

  249. Mallory
    @StommePoes
    May 03 21:51
    Karlgroves that's sounding better than spans and spans and spans because React
  250. Mallory
    @StommePoes
    May 03 21:51
    or divs in divs in divs in divs because Drupal
  251. stevefaulkner
    @stevefaulkner
    May 03 21:51
    Jaws behaviour based on age old concept of divs actually having meaning
  252. Job van Achterberg
    @jkva
    May 03 21:51
    Ok, I'm off, night slackers
  253. Mallory
    @StommePoes
    May 03 21:51
    You know those funny slides where a dev shows callback hell closing brackets? Drupal has that with divs
  254. stevefaulkner
    @stevefaulkner
    May 03 21:52
    🚴
  255. stevefaulkner
    @stevefaulkner
    May 03 21:53
    Divitis is benign
  256. zakim-robot
    @zakim-robot
    May 03 21:59
    [karlgroves] Unless you have to maintain it, style it, or script it
  257. zakim-robot
    @zakim-robot
    May 03 21:59
    [karlgroves] But yeah. Otherwise harmless
  258. zakim-robot
    @zakim-robot
    May 03 21:59
    [karlgroves] ;)
  259. zakim-robot
    @zakim-robot
    May 03 22:44
    [estelle] I’ve created what I think is an ARIA free accessible carousel of options. It's open source. Feed back desired. https://github.com/estelle/carousel-carousel
  260. James Nurthen
    @jnurthen
    May 03 22:53
    @estelle you can't use aria-hidden to hide something that takes focus
  261. James Nurthen
    @jnurthen
    May 03 22:54
    See the 4th rule of ARIA - https://www.w3.org/TR/aria-in-html/#fourth-rule-of-aria-use
  262. James Nurthen
    @jnurthen
    May 03 22:56
    but I really like the use of radio group for the paging controls. I don't know why it had never occurred to me to do that... they even look like radio buttons
  263. zakim-robot
    @zakim-robot
    May 03 23:06
    [estelle] The issue is, if I unhide them from the screen reader, then I need to add a whole bunch of JS and ARIA to inform the user of the changes that were made when the arrows were clicked.
  264. zakim-robot
    @zakim-robot
    May 03 23:06
    [estelle] Is there a way around this?
  265. zakim-robot
    @zakim-robot
    May 03 23:07
    [estelle] Originally the arrows didn't get focus, as the radio buttons could do all the navigation.
  266. James Nurthen
    @jnurthen
    May 03 23:07
    If you make them focusable then you need to have them in the accessibility tree.
  267. James Nurthen
    @jnurthen
    May 03 23:08
    that would be ok - if they don't get focus and you make keyboard/screen reader users use the radio group that would work
  268. zakim-robot
    @zakim-robot
    May 03 23:08
    [estelle] If I make them not focusable with the keyboard, is there an issue,
  269. James Nurthen
    @jnurthen
    May 03 23:08
    might be less usable for a keybaord user though
  270. zakim-robot
    @zakim-robot
    May 03 23:11
    [estelle] I think it was @scottohara I was having that conversation with, about 3 weeks ago
  271. James Nurthen
    @jnurthen
    May 03 23:12
    but you absolutely cannot do what you are doing at the moment. When you tab to the fields the screen reader doesn't know what to say as you have removed the element from the accessibility tree with aria-hidden
  272. zakim-robot
    @zakim-robot
    May 03 23:12
    [estelle] To me, arrows can be decorative, but if there are elements that could be possible UI features, would that be confusing.
  273. zakim-robot
    @zakim-robot
    May 03 23:12
    [estelle] ok. I'll remove the tab-index.
  274. zakim-robot
    @zakim-robot
    May 03 23:12
    [estelle] of -1
  275. James Nurthen
    @jnurthen
    May 03 23:13
    you have 0
  276. James Nurthen
    @jnurthen
    May 03 23:13
    not -1
  277. zakim-robot
    @zakim-robot
    May 03 23:14
    [estelle] i have neither now ;)
  278. James Nurthen
    @jnurthen
    May 03 23:14
    i also had some weird rendering of the radio buttons with FF Dev Edition but that could be a FF bug somewhere
  279. zakim-robot
    @zakim-robot
    May 03 23:14
    [estelle] if you refresh, the tabindex is gone
  280. James Nurthen
    @jnurthen
    May 03 23:14
    was ok in FF45 but broken in FF48
  281. James Nurthen
    @jnurthen
    May 03 23:15
    are you deliberately including all 5 pages in the screen reader rendering?
  282. zakim-robot
    @zakim-robot
    May 03 23:17
    [estelle] The screen reader should see it as a list of options. On the carousel example, they can pick any of the group, and get redirected to the flickr page for that. On the address example, it sumbits the form to itself with the selected item. The sited user gets the progrssively enhanced appearance of a carousel.
  283. zakim-robot
    @zakim-robot
    May 03 23:18
    [estelle] the flickr redirection for the horses right now is broken if you use the arrows. Fixing that now.
  284. James Nurthen
    @jnurthen
    May 03 23:19
    but the problem is that reading through the page I get all 5 addresses then the 5 radio buttons. The ordering is just weird. When navigating through the virtual buffer I'm not sure it is really going to be clear what is going on.
  285. James Nurthen
    @jnurthen
    May 03 23:19
    but may be best to ask a screen reader user rather than me :)
  286. zakim-robot
    @zakim-robot
    May 03 23:23
    [estelle] i have it working right in some screen reader combinations. It reads the labels along with the the input, as it should, but i am not a pro SR user (barely novice, actually)
  287. zakim-robot
    @zakim-robot
    May 03 23:24
    [estelle] what combo reader/browser is it wonky in?
  288. zakim-robot
    @zakim-robot
    May 03 23:24
    [estelle] by the way, thank you for all your feedback
  289. zakim-robot
    @zakim-robot
    May 03 23:26
    [estelle] Chrome / Voice Over works perfectly, but that's not a usual SR combo of course.
  290. James Nurthen
    @jnurthen
    May 03 23:27
    not wonky - just weird. When I read through the page using the virtual buffer I read through 5 addresses with no indication of what they are. It just doesn't seem like stuff is in the correct meaningful sequence
  291. James Nurthen
    @jnurthen
    May 03 23:28
    I'd be tempted to hide stuff when it is offscreen using display:none and then label the radio buttonbs using aria-labelledby rather than label. If you label using aria-labelledby things are allowed to be hidden using display:none and still be used for an accessible name
  292. James Nurthen
    @jnurthen
    May 03 23:29
    anyway - have to head home
  293. zakim-robot
    @zakim-robot
    May 03 23:30
    [estelle] perhaps the way I hid the legend is an issue. I'll fix a little, then pop back in for more feedback. Thanks for all your help, It has been invaluable
  294. zakim-robot
    @zakim-robot
    May 03 23:46
    [estelle] tested FF with voice over, Safari with voice over and Chrome with ChromeVox. Works for me in all.