Archive index

A11y Slackers Gitter Channel Archive 3rd of November 2015

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Nov 03 00:47
    [rickb] @alice I'm typing up an accessibility issue on the chromium project issue tracker
  2. zakim-robot
    Nov 03 00:49
    [alice] @rickb: Excellent, send me a link once you're done :simple_smile:
  3. zakim-robot
    Nov 03 00:49
    [rickb] ok will do
  4. zakim-robot
    Nov 03 01:02
    [rickb] long story short, chrome is not exposing fieldset legends
  5. zakim-robot
    Nov 03 01:04
    [rickb] i'm reporting another chrome bug too but not accessibility related
  6. zakim-robot
    Nov 03 01:12
    [alice] @rickb: Thanks for that! I see there's no note of fieldset in http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#accessible-name-and-description-calculation which [@stevefaulkner] may be an oversight
  7. zakim-robot
    Nov 03 01:12
    [alice] @stevefaulkner The above goes back to my frustration at not having a reliable single source for native accessible name sources
  8. zakim-robot
    Nov 03 02:01
    [rickb] oh yeah
  9. zakim-robot
    Nov 03 02:01
    [rickb] wow didn't realize that!
  10. zakim-robot
    02:04
    [rickb] the upshot is that without the legend being read we end up with situations like, for example, a "yes/no" radio button group with absolutely no context (yes what? no what?)
  11. StommePoes
    07:54
    @rickb if it's a long question though it's generally not part of the legend
  12. StommePoes
    07:56
    You could get away with it for a single question I suppose, but generally if it's a long question I stuff them in a p and try aria-describedby or similar.
  13. StommePoes
    08:01

    <legend>cookie preferences</legend>

    <p id="c00ki3">Please choose, between 1 and 9, with 1 being 'never' and 9 being 'very much', your rating on how much you enjoyed our delicious marketing-driven-description whole-grain gluten-free fair-trade low-fat oatmeal chocolate-chip cookies.</p>

    <input type="radio" id="hateses" aria-describedby="c00ki3"><label for="hateses">1</label>

    <input type="radio" id="luvs" aria-describedby="c00ki3"><label for="luvs">9</label>

  14. StommePoes
    08:02
    (obviously an accessibility problem caused by sh*tty copywriting but I'm no Khaled Hosseini)
  15. MichielBijl
    09:31
    Good morning slackers!
  16. MichielBijl
    10:47
    For those who haven't seen—or rather just read—@LjWatson's excellent “Design like we give a damn” talk, you can now also read it here: http://dir.agosto.nl/accessibility/design-like-we-give-damn.html
  17. MichielBijl
    10:48
  18. MichielBijl
    11:54
    Does anyone see any a11y issues in this widget type thing: http://s.codepen.io/Michiel/debug/RWBQKy
  19. MichielBijl
    11:54
    There is a button that expands more text.
  20. MichielBijl
    11:54
    Not sure how to mark that up really…
  21. StommePoes
    13:03
    I thought it was finally agreed that the expanded attribute goes on the expander rather than the expandee
  22. StommePoes
    13:03
    or at least, I found that both in my work's guidelines and some recent copy I was checking
  23. MichielBijl
    13:04
    Hmm
  24. MichielBijl
    13:04
    Yeah, had some difficulty deciding how to mark this up as I don't really know the concept behind it.
  25. StommePoes
    13:04
    it's a special case though that this is a one-time button, rather than something pushed or toggled
  26. MichielBijl
    13:05
    Exactly.
  27. StommePoes
    13:05
    Well the specs I remember were kinda wishy washy waffle-buckets at the time
  28. StommePoes
    13:05
    and you couldn't tell who got what attribute
  29. MichielBijl
    13:05
    But I could set expanded on the hidden thingy.
  30. StommePoes
    13:05
    apparently finally someone bitched loud enough that this was about as clear as Bill Clinton's testimony
  31. MichielBijl
    13:05
    If we follow tab pattern it should go on the tab (thing you click on)
  32. StommePoes
    13:05
    I'm also wondering if -owns is useful here if, once clicked, there's no button anymore to have any relationship
  33. StommePoes
    13:06
    right, the expander (tab) rather than expandee
  34. StommePoes
    13:06
    but here...
  35. StommePoes
    13:06
    I think it should prolly be analogous to when you click a button and, without a page refresh, end up in another scenario
  36. MichielBijl
    13:06
    No wait, what I said is false
  37. StommePoes
    13:07
    oh?
  38. MichielBijl
    13:07
    “authors should ensure each visible tabpanel has its aria-expanded attribute set to true”
  39. StommePoes
    13:07
    "The aria-expanded attribute is not attached to the content that has been expanded itself. " is what I just ran into with some copy I was reviewing
  40. StommePoes
    13:08
    hm, I'm going to send these both to my boss
  41. MichielBijl
    13:08
    Let's make it interesting…
  42. MichielBijl
    13:09
    Tab - When focus is on an accordion header, pressing the Tab key moves focus in the following manner:
    1. When the corresponding panel is expanded (its aria-expanded state is 'true'), then focus moves to the first focusable element in the panel.
  43. MichielBijl
    13:09
    So, it should be on the panel according to both ARIA 1.1 and the APG.
  44. MichielBijl
    13:10
    Different patterns too (tab and accordion).
  45. MichielBijl
    13:10
    So my example is invalid whatever you make of it in terms of pattern.
  46. MichielBijl
    13:10
    No wait
  47. MichielBijl
    13:10
    Aaaargh
  48. MichielBijl
    13:11
    My codepen thingy is actually according to those patterns :P
  49. MichielBijl @MichielBijl needs more coffee!
  50. StommePoes
    13:11
    "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
  51. StommePoes
    13:12
    I'm sorry but that right there is so damn ambiguous, everyone should just expect developers to get it wrong
  52. StommePoes
    13:12
    and the moving the focus to the tab panel is a PAIN in any user's butt
  53. StommePoes
    13:12
    if all they are really doing is trying to move from tab to tab
  54. StommePoes
    13:13
    as far as I'm concerned, if they arrow to another tab and if focus is the trigger (which I do like), I feel we should still wait for the next Tab to bring the user to the panel because we cannot know where they are trying to go.
  55. MichielBijl
    13:13
    Moving between tabs is done via arrow keys (as per spec anyway).
  56. StommePoes
    13:13
    If they consistently have to keep freaking shift-tabbing back to the tabs to move from tab to tab, that
  57. StommePoes
    13:13
    's just bad UX and makes people want to throw their computers off a cliff
  58. StommePoes
    13:14
    think about it
  59. MichielBijl
    13:14
    Where did you get that text?
  60. StommePoes
    13:14
    you moved to a tab panel, sitting on the open tab. You arrow to the next one, which moved the focus to that next one
  61. StommePoes
    13:14
    because the focus, and not Enter, is triggering showing the new panel, if you move the focus to the tab panel, you've been prevented from continuing on to the next tab with arrow
  62. StommePoes
    13:15
    because now your focus is in the tab panel and your arrows don't hit anyone's knee
  63. StommePoes
    13:15
    "our arrows... will BLOT out the sun"
  64. StommePoes
    13:15
    I got the text from the general aria-expanded spec part
  65. StommePoes
    13:17
    "If the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute."
  66. MichielBijl
    13:18
    That would be if a tab panel would expand something else?
  67. StommePoes
    13:18
    maybe it's my cognative defecits but when it comes to text like this, I need an example code to see what the hell it actually means. If she floats, it means she's made of wood and weighs as much as a duck
  68. StommePoes
    13:18
    should a tab panel expand something else?
  69. MichielBijl
    13:18
    Not that I know, but that is what it reads like.
  70. StommePoes
    13:18
    (what if a tab panel has a magical read-more button inside it that is teh g0ne when clicked and shows content)
  71. StommePoes
    13:19
    Maybe they're thinking broader than tab panels, since they're assuming all sorts of kinky things could be expanding other kinky things
  72. MichielBijl
    13:19
    A single button that expands all the things!
  73. StommePoes
    13:19
    SHE'S A WITCH
  74. MichielBijl
    13:20
    I have added this conversation to my list of things to discuss in the aria wg :P
  75. StommePoes
    13:20
    step 1: request a web page
    step 2: send a boatload of JS instead
    step 3: have <html><body><button>click for web page!</button></body></html>
    step 4: profit
  76. MichielBijl
    13:21
    Seems legit
  77. StommePoes
    13:21
    Just remember if I'm this stupid, I probably have a lot of web-devving inbred cousins wondering the same
  78. MichielBijl
    13:21
    Nah, it's not just you; that text is not clear at all.
  79. MichielBijl
    13:22
    Problem is that it's hard to write good copy for stuff like this.
  80. StommePoes
    13:22
    I will mention that the stuff from work that says expanded goes on the expander used a toggle button as an example there and not tab-panel
  81. MichielBijl
    13:22
    When you're writing it and it isn't clear, the person who wrote it explains and all is well.
  82. MichielBijl
    13:22
    Until someone else reads it and has the same issue.
  83. StommePoes
    13:22
    Unless they're using witch-logic
  84. MichielBijl
    13:22
    Ain't we all?
  85. StommePoes
    13:23
    if she weighs less than a duck... wood... floats... witch
  86. StommePoes
    13:23
    logic! Boole would be proud
  87. MichielBijl
    13:23
    If Harry Potter can read Stephan Hawking's “A Brief History of Time”; then I should be allowed to use magic!
  88. StommePoes
    13:23
    "Would you like coffee or tea?" "Yes."
  89. StommePoes
    13:23
    Wait, Harry Potter can read that?
  90. StommePoes
    13:23
    Hermione, sure
  91. StommePoes
    13:23
    Harry? I dunno
  92. StommePoes
    13:23
    He's no superstar student I must say
  93. StommePoes
    13:23
    always running around with that ginger boy
  94. StommePoes
    13:24
    that's not potter
  95. StommePoes
    13:24
    is it?
  96. MichielBijl
    13:24
    I don't know what character that is, but it said underneath it was from HP.
  97. StommePoes
    13:24
    I stopped with the series back years ago
  98. StommePoes
    13:25
    A Brief History of Rhyme
  99. MichielBijl
    13:25
    Alt = someone (apparently not Harry Potter) is reading Stephan Hawking's “A Brief History of Time”
  100. StommePoes
    13:25
    alt="while sitting in a dungeony-looking pub with people way in the background apparently dressed ready to party like it's 1599"
  101. MichielBijl
    13:26
    I didn't even notice those :x
  102. StommePoes
    13:27
    I was watching Big Hero 6 (for like the 4th time, I usually never rewatch movies) and I was pointing out all the background characters to $husband
  103. StommePoes
    13:27
    And the fact that everyone looks like the 2 females in Frozen because almost all females look like those
  104. MichielBijl
    13:27
    Apparently that is Ian Brown, who plays a nameless wizard in Harry Potter :)
  105. StommePoes
    13:27
    The males have a wide range of facial features. The women all look like... one girl with different hair and clothes.
  106. StommePoes
    13:28
  107. StommePoes
    13:28
    kinda looks like him
  108. StommePoes
    13:28
    oh wait
  109. StommePoes
    13:28
    "Brown had a cameo role in the 2004 film Harry Potter and the Prisoner of Azkaban'.[33]"
  110. StommePoes
    13:29
    I'm wearing my Internet Explorer T-shirt now. I should stroll into a front-end meetup and say hi loudly :P
  111. MichielBijl
    13:30
    Haha
  112. StommePoes
    13:30
    In other news, have you checked this out? http://chaals.github.io/accesskey/index.src.html ?
  113. MichielBijl
    13:30
    Not yet, added to reading list
  114. MichielBijl
    13:31
    I'm still working on feedback for the a11y API
  115. MichielBijl
    13:31
    Well, I gave some and still need to reply to the reply :P
  116. StommePoes
    13:31
    I honestly would rather cross-browser and maybe even cross-OS keyboard navs for major roles and HTML types but as noted, this will never happen and vendors have some kind of begin with accesskeys already
  117. MichielBijl
    13:34
    It's difficult to do stuff cross OS
  118. StommePoes
    13:44
    yeah
  119. StommePoes
    13:44
    reading chris coyier's thing about clip
  120. StommePoes
    13:45
    I'm sorry, but if vendors go out and say "x is deprecated" and then in the same breath "oh but nobody supports the replacement yet haha" I'm going to pretty much ignore the whole sentence and carry on like it's still 2001
  121. MichielBijl
    13:45
    I still use clip.
  122. MichielBijl
    13:46
    They can suck my clip until they support clip-path.
  123. StommePoes
    13:46
    The other things is, with new-clip, svg, etc there's like lots and lots of hand-written geometry stuff there. As I've stated before, I do not have enough fingers and toes to figure even the simplest of shapes out. Yes, I failed Shapes in school. They still let me graduate to basis/elementary school.
  124. StommePoes
    13:47
    Cause I was all like "when are we evar going to use this stuff in real life?" and they weren't all like "you'll need it to draw pictures in CSS hon"
  125. StommePoes
    13:47
    srsly wtf
  126. StommePoes
    13:47

    .clip-examples {

    clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)

    clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)
    / Looks like this is what rect() used to be like with clip /
    / Will replace inset(), I suppose /

    clip-path: polygon(a, bunch, of, points)
    clip-path: circle(radius at x, y)
    clip-path: ellipse(radius-x, radius-y at x, y)

    }

  127. MichielBijl
    13:48
    This one time, at CSS camp, I tried to use clip-path, and drew a circle, but it came out a square.
  128. StommePoes
    13:48
    One time I tried fingerpainting some mendelbrot bugs and it just turned into a brown puddle
  129. StommePoes
    13:48
    That was the first time (of many) that I failed art class
  130. StommePoes
    13:49
    .clip-polygon {
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    }
  131. StommePoes
    13:49
    wut
  132. MichielBijl
    13:49
    There is no way to visualise that ins your head.
  133. StommePoes
    13:49
    remember back in school when we had to draw a turtle in LOGO? yeah
  134. MichielBijl
    13:49
    Maybe there is, but I havent figured it out.
  135. zakim-robot
    13:55
    [mlockrey] Here's some innovative #captioning that I can only describe as "captions for hearing people"
    http://youtu.be/qFI_-kJ95vc
  136. zakim-robot
    13:55
    [mlockrey] Very interested in the various thoughts out there
  137. zakim-robot
    13:56
    [mlockrey] As its not perfect accessibility (ie they don't caption the entire audio track - only the song etc)
  138. zakim-robot
    13:57
    [mlockrey] But it seems to be an attempt to take an accessibility tool (ie captions) and manipulate them creatively to engage the hearing audience - whilst Deaf people like me are still beneficiaries (for part of the video at least)
  139. zakim-robot
    13:59

    [cryberg] @michiel: I don't know if this helps or hinders, but I've been trying to follow Bootstrap for when or when not to use aria-expanded (it's a library already used in my project, so for the sake of consistency)
    Their dropdowns put aria-expanded only on the button that triggers the dropdown
    http://getbootstrap.com/javascript/#dropdowns

    Their collapse component puts aria-expanded on both the button and the content that gets expanded and collapsed
    http://getbootstrap.com/javascript/#collapse

  140. MichielBijl
    14:00
    @cryberg, thank you for your contribution. Not sure if that helps or hinders either ;)
  141. MichielBijl
    14:01
    There is no clear pattern for my use case, and the aria text is confusing.
  142. StommePoes
    14:02
    I think it puts a bit more jam on the same waffles, (the expanded stuff)
  143. zakim-robot
    14:03
    [cryberg] Yeah....I take it to mean that you use aria-expanded where it will offer the most helpful information. I've noticed that having aria-expanded on a collapse component will tell the user when they are navigating content that isn't always visibly, but putting it on dropdown menus doesn't give any new helpful info.....so....case by case judgement?
  144. StommePoes
    14:03
    Honestly, the music industry could just make it a standard thing to have the lyrics as part of the music video. Lots of people like to sing along anyway and we're all like "why is Hendrix singing 'scuse me while I kiss this guy'?"
  145. zakim-robot
    14:03
    [cryberg] *visible
  146. StommePoes
    14:03
    the problem with judgement is... we suck as Judges.
  147. StommePoes
    14:03
    "I am the Law!"
  148. zakim-robot
    14:03
    [cryberg] hahaha too true
  149. StommePoes
    14:05
    I mean, the spec should pick whatever one is "true", and write it clearly, and honestly I believe the spec is incomplete without code examples, no matter how ludicrous or contrived. They can be links to a separate document + fragment, but eithout "seeing" what they mean, I have too much trouble "understanding" what they mean, and when it comes to a lot of this aria stuff, screwing it up by putting the wrong stuff somewhere can take something that sucked pre-aria for visitors to turning it completely 100% b0rked
  150. MichielBijl
    14:05
    Besides thinking “what the fuck did I just watch”, that captioning was actually nicely done. They should have included subs for the first part too.
  151. StommePoes
    14:06
    And I've seen navigation menus with all the "menu" roles, and then on the wrong elements with the wrong nesting... and it was a mega menu and a total a11y disaster. And the devs totally meant well.
  152. MichielBijl
    14:06
    Menu role is not for navigation! But you now this…
  153. StommePoes
    14:06
    Michiel yeah it seems they only "captioned" the music, the girl in the beginning is an intro. And I could find no craptions (as auto-craptions probably wouldn't fail too badly as she speaks clearly with no background noise)
  154. StommePoes
    14:07
    I know this about menus, but it was not in the spec.
  155. StommePoes
    14:07
    The spec was like "okay this role is for menus"
  156. StommePoes
    14:07
    that kind of stuff is practially dangerous
  157. StommePoes
    14:07
    it needs to be clear, and lots of the spec I don't find clear
  158. MichielBijl
    14:07
    I do agree we need more examples.
  159. StommePoes
    14:08
    Honestly, it should be written a bit moron-proof. Like Ikea instructions. Building something like a tab-panel or a mega menu should be like unwrapping a fastfood hamburger and stuffing the straw in the straw-top-plastic-thing on drink-things
  160. StommePoes
    14:08
    thing things
  161. zakim-robot
    14:08
    [cryberg] Is there any particular reason the spec doesn't already have examples? I've found a lot of it confusing without clear example to work with too
  162. zakim-robot
    14:09
    [cryberg] Or is it just "something that hasn't happened yet"
  163. StommePoes
    14:09
    I could be the ultimate tester: if i can read the specs and build something that doesn't collapse a skyscraper onto untold millions of victims, it's good.
  164. StommePoes
    14:09
    So far, examples in the wild are built by companies like TPG adn Dequeue, who themselves have people who are part of writing some of the specs
  165. MichielBijl
    14:10
    @cryberg, possibly (wo)manpower
  166. MichielBijl
    15:07
    What the hell, I can no longer favourite tweets but have to heart them :/
  167. MichielBijl
    15:07
    Who comes up with this stuff?
  168. MichielBijl
    15:09
    Probably Twitter saying “MUST CONFORM!”
  169. StommePoes
    15:17
    wait you have to heart?
  170. MichielBijl
    15:17
    Yep
  171. StommePoes
    15:17
    oh didn't you used to have to star?
  172. MichielBijl
    15:18
    Yep
  173. StommePoes
    15:18
    hm that does seem to change the whole meaning
  174. MichielBijl
    15:18
    It's no biggy, just weird
  175. StommePoes
    15:18
    No it's like Facebook's Like button
  176. StommePoes
    15:19
    that button is pretty much the unconscious signal that FB should only be happy BS
  177. MichielBijl
    15:19
    I liked to star stuff, because it was emotionless.
  178. StommePoes
    15:19
    I mean, you don't want to read an important, heart-renching tale of rape in the Congo and then... Like rape in the Congo
  179. StommePoes
    15:19
    I used it to bookmark links I'd otherwise forget
  180. MichielBijl
    15:19
    Yep
  181. StommePoes
    15:19
    but some followers of mine use it to let me know they liked or maybe agreed with something I twotted
  182. StommePoes
    15:20
    I mean, if I bookmark a tweet, I'm not lovin' it.
  183. StommePoes
    15:20
    That's for McDonald's.
  184. StommePoes
    15:20
    oh well, designers making UX choices is the way of the world
  185. MichielBijl
    15:21
    Screen Shot 2015-11-03 at 16.20.59.png
  186. MichielBijl
    15:21
    alt = screenshot of a notification that someone “liked” a tweet I was mentioned in.
  187. MichielBijl
    15:21
  188. StommePoes
    15:28
    If they're gonna do that, they oughtta make two buttons: like and add to reading list
  189. MichielBijl
    15:29
    They should've left it alone
  190. MichielBijl
    15:29
    “Leave the favourite button alone! I'm serious! Leave it alone!”—Weird YouTube guy
  191. StommePoes
    15:40
    he's crying out his eye makeup
  192. stevefaulkner
    18:57
    @alice the fieldset/legend acc name calc is a bug on my part, need to add, if you file an issue would be much appreciated. Note if you look at the details for legend element in HTML mapping spec it provides requirements for relationship mapping for some Apis but not for AX I need to add that