Archive index

A11y Slackers
Gitter Channel Archive 16th of July 2015

What fresh hell is THIS now? - Patrick Lauke
  1. powrsurg
    Jul 16 03:17
    @stevefaulkner I'll have it up tomorrow. Work PC flaked out a few minutes before quitting time as I tried to debug the chart in IE9 since d3.js was generating an error with text-anchor="bottom"
  2. powrsurg
    Jul 16 03:38
    Would something like https://gist.github.com/powrsurg/bc413f5e3ae48fbf5cec be useful for providing more information to AT users so that they'd know what they were deleting more easily?
  3. powrsurg
    Jul 16 03:39
    also, is the scope attribute still useful?
  4. stevefaulkner
    Jul 16 07:23
    @powrsurg I believe that if you have a a simple data table with only row or column headers (marked up using <th>, the scope attribute is not necessary.
  5. yatil
    07:43
    @powrsurg What @stevefaulkner says. But it doesn’t hurt and removes the ambiguity of some screen readers interpreting “Name” as a heading for “Grade”… I personally try to use scope whenever possible.
  6. stevefaulkner
    07:53
    @yatil you are right it doesn't hurt, but would be very surprised if any SR would have a problem as you describe.
  7. goetsu
    08:55
    @Heydon there is an issue with the code example in the article http://www.sitepoint.com/accessible-footnotes-css/
  8. yatil
    08:55
    @stevefaulkner When we researched it for the W3C/WAI tables tutorial it was a behavior seen in many Browser/SR combinations. It is not a huge problem in this example and probably only occurs when you actively query the heading(s) for that heading cell but I have heard it first hand from screen reader users.
  9. goetsu
    08:56
    the aria-describedby value must use the id value of the <li>
  10. goetsu
    08:57
    not the id value of the h2 of the footnote
  11. MichielBijl
    09:03
    I think the idea there is that SR's mention it's a footnote and that you can activate it.
  12. goetsu
    09:05
    depending on the content sometime it may be better to mention the content of the footnote directly
  13. goetsu
    09:06
    @powrsurg @stevefaulkner for svg i 've done a lot of testing recently and support of aria-label are better than aria-labelledby. But transparent svg <text> has the best support in SR for now.
  14. goetsu
    09:06
    (but not sure if google will think it's black hat SEO)
  15. Heydon
    09:09

    @goetsu Good morning! I don't see that as an issue. It wouldn't be a footnote if the content wasn't at the foot of the document. A paragraph of supplementary (footnote) content inline is overkill, hence the invention of footnotes.

    Another angle is: If the sighted user doesn't get that content, in that position, neither should the AT user.

  16. goetsu
    09:21
    not always true especially for commercial one like "call this number XXXXX *"
  17. MichielBijl
    09:21
    Who would put a phone number in a footnote?
  18. goetsu
    09:22
    not the number but mention of the price of the call
  19. goetsu
    09:22
    like you will pay 3$ a minute
  20. goetsu
    09:22
    many commercial website are doing that
  21. goetsu
    09:23
    for customer service
  22. MichielBijl
    09:23
    Ah, like that.
  23. goetsu
    09:24
    it's more a graphical footnote than a true editorial one
  24. MichielBijl
    09:24
    I think I'm with @Heydon on this one. I've played around with pulling the content of the footnote to their linked location, but it doesn't feel right.
  25. MichielBijl
    09:25
    Throwing loads of extra information at AT isn't doing anyone any favours.
  26. MichielBijl
    09:26
    But that's just my opinion :)
  27. stevefaulkner
    09:46
    @yatil interesting, as column/row hearders of simple tables are represented correctly in browser acc tree https://dl.dropboxusercontent.com/u/377471/tests/datatables.html
  28. goetsu
    09:48
    yes and even for wcag it's note mandatory to use scope on simple data tables
  29. goetsu
    09:50
    "Note 1: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope."
  30. stevefaulkner
    09:50
    On another note: Anybody have the chops/time to work on creating a permanent discussion archive in structured HTML using the gitter API? It looks perfectly doable https://developer.gitter.im/docs/welcome but beyond my limited capacities :-(
  31. goetsu
    09:50
    http://www.w3.org/WAI/GL/WCAG20-TECHS/H63.html
  32. MichielBijl
    09:52
    Is it a known bug that VO doesn't speak row headers? Or am I doing something wrong, I used tables mode.
  33. MichielBijl
    09:53
    I assume it should announce when switching rows, same as with columns.
  34. goetsu
    09:54
    yes it doesn't speak "headers"
  35. goetsu
    09:54
    very old bug
  36. MichielBijl
    09:54
    Okay.
  37. MichielBijl
    09:55
    Thank you for the confirmation.
  38. yatil
    09:56
    This message was deleted
  39. goetsu
    09:58
    there other bug too like using a empty td as first cell in first raw
  40. goetsu
    09:58
    http://pauljadam.com/demos/tableA11yTest.html
  41. goetsu
    09:58
    http://pauljadam.com/demos/tableA11yTest.html
  42. yatil
    09:58
    @stevefaulkner Yeah, it might be dependent on the Browser/SR combination, but they were fairly recently when this was discovered. I have to do some more research here (if only I had more time :-/).
  43. MichielBijl @MichielBijl donates some time to @yatil
  44. stevefaulkner
    10:00
    @yatil yes time...
  45. yatil
    10:05
    @goetsu Yes, scope is not required by WCAG’s techniques, but I (again, personally) like consistency. There has been talks about the state and usefulness of scope recently… moving target at the moment. (Note that techniques are not mandatory anyway, they are examples of how to comply to WCAG2.0 :-))
  46. yatil
    10:13

    @yatil interesting, as column/row hearders of simple tables are represented correctly in browser acc tree https://dl.dropboxusercontent.com/u/377471/tests/datatables.html

    In the last table, the top left header could easily be a row header but is automatically identified as a column header.

  47. stevefaulkner
    10:14
    @yatil note last table "column and rowheaders with scope" has scope attributes, i only consider really simple tables as those with col or row headers :-)
  48. MichielBijl
    10:33
    Nice :)
  49. MichielBijl
    10:34
    Colloquy and Chatzilla should be h3's, no?
  50. MichielBijl
    10:34
    @stevefaulkner
  51. MichielBijl
    10:35
    That's what I used in the WICG one
  52. yatil
    10:35
    @stevefaulkner Argh. my bad :-)
  53. stevefaulkner
    10:37
    a11ySlackers now has a repo and start of a readm me with IRC instructions ripped from wicg https://github.com/w3c/a11ySlackers/blob/master/README.md#a11yslackers
  54. stevefaulkner
    10:37
    @MichielBijl ? i just copied the markdown
  55. MichielBijl
    10:38
    That's weird.
  56. MichielBijl
    10:38
    Ah
  57. stevefaulkner
    10:38
    looks like marcos edited
  58. MichielBijl
    10:38
    They moved it to a separate page.
  59. MichielBijl
    10:39
    So everything moved up a spot.
  60. MichielBijl
    10:39
    In the a11ySlackers readme they should be H3's
  61. stevefaulkner
    10:41
    fixed
  62. MichielBijl
    10:41
    Nice :)
  63. Heydon
    11:11
    @goetsu Isn't what you're describing more of a tooltip?
  64. stevefaulkner
    11:56
    'Focusing' on the Web Today https://gauntface.com/blog/2013/12/09/focusing-on-the-web-today a few years old but interesting. via mr touchy @patrickhlauke
  65. stevefaulkner
    12:07
    more on data tables Data Tables: Exposing row headers and Does a Simple Data Table Need to Expose Row and Column Headers? by Sailesh Panchang
  66. yatil
    12:15
    Note that Sailesh demands a row header (<th>) for every row, this is [currently] not in WCAG 2.0 techniques.
  67. stevefaulkner
    12:17
    @yatil yeah not saying I agree with him, but providing more info/data points
  68. yatil
    12:19
    And thanks for that, Steve :-)
  69. MichielBijl
    13:00
    @stevefaulkner that is an interesting read. I do agree that Safari does the right thing. Would this be something that should be further defined in a spec?
  70. MichielBijl @MichielBijl wishes @LjWatson a very happy birthday!
  71. rodneyrehm
    13:29
    @stevefaulkner I’ve been writing up my findings regarding focus management. what started out as an article, is now becoming a small book. Until ready, it’s a private repo on github, would you like having a look at that?
  72. stevefaulkner
    13:29
    @rodneyrehm sure
  73. rodneyrehm
    13:30
    I’ve added you as a collaborator to the repo, you should be getting an email about it any minute…
  74. stevefaulkner
    13:32
    :+1:
  75. rodneyrehm
    13:33
    I’d appreciate feedback (preferably in form of github issus or pull requests like @chaals and @alice have done)
  76. stevefaulkner
    13:36
    @rodneyrehm will see what I can do :-)
  77. rodneyrehm
    13:36
    thx :)
  78. rodneyrehm
    13:36
    no pressure, that lazy @patrickhlauke hasn’t commented yet either :P
  79. stevefaulkner
    13:37
    It reminded me I have a book chapter to review by end of week, so will need to do that first, and yeah he is lazy
  80. stevefaulkner
    13:55
    http://depictfor.us/ "Depict provides a platform for the blind to easily request image descriptions from sighted volunteers."
  81. powrsurg
    14:27
    Finally got to see a result for my question ... while glad to get an answer to the th scoping question, my primary question that I meant to be asking (and admit I was not clear), was the use of an aria-label on the button tag. I figure doing something like that for large tables (where I only did 1 row for the example) might be more helpful for a user that was tabbing through to know what records they might be deleting
  82. LjWatson
    14:52
    @powrsurg I missed the earlier part of the conversation, but if you're using <button> wouldn't the element's content serve as accessible name?
  83. Heydon
    14:57
    @LjWatson @powrsurg was using aria-label to override the text node and include the header text.
  84. powrsurg
    14:58
    @LjWatson https://gist.github.com/powrsurg/bc413f5e3ae48fbf5cec was what I pushed earlier. Imagine you have many rows in there. A visual user knows what the context of delete buttons easily, but if someone was simply tabbing through it might be harder to understand
  85. powrsurg
    14:58
    I was wondering if that was really necessary, or am I being too verbose
  86. powrsurg
    15:01
    https://www.dropbox.com/s/tcw159l1m9g1e5n/svg_example.html is the computed output for a chart I was working on using d3.js that I was trying to make more accessible that would not read the <text> nodes in Firefox in NVDA if I added a role="img" but would read the <title> and <desc>, but if the role="img" is not their it will read the <text> but ignore the <text> and <desc>. Chrome does a decent job, save reading "graphic" before each bar (not sure how to avoid that). IE has ... issues
  87. LjWatson
    15:04
    @powrsurg that example looks good to me. Don't think it's too verbose.
  88. powrsurg
    15:05
    I've seen talk of role="graphic" and role="diagram" in a few places, but I'm having trouble finding the explanations for them on w3.org.
  89. powrsurg
    15:05
    @LjWatson thank you! I've gone back and forth on doing that
  90. LjWatson
    15:13
    @powrsurg We've been discussing roles like graphic, diagram and others in relation to the proposed ARIA Graphics module http://rawgit.com/w3c/aria/master/aria/graphics.html
  91. LjWatson
    15:14
    But it's *extremely rearly days - and absolutely nothing is stable/decided yet.
  92. powrsurg
    16:20
    Is there a better way to include text that a screen reader would read but is not visible in SVG besides doing an off-left style approach like I was doing?
  93. stevefaulkner
    16:37
    @powrsurg here some test/results, I did last years, around SVG https://dl.dropboxusercontent.com/u/377471/SVG/index.html
  94. stevefaulkner
    16:38
    @powrsurg the current state of acc support is um... patchy
  95. stevefaulkner
    16:42
    This message was deleted
  96. stevefaulkner
    16:44

    @powrsurg

    save reading "graphic" before each bar (not sure how to avoid that). See note at bottom of https://dl.dropboxusercontent.com/u/377471/SVG/adobesimplesvgtest4.html

  97. powrsurg
    16:48
    What are you using to create that graphic at the end? I've seen some of your tweets that show how you're able to get status and roles and the like
  98. jenstrickland
    16:53
    Would appreciate #a11y input: jqplot doesn't seem accessible (no underlying data). jQuery Visualize seems better (https://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html). Do I understand this correctly? Are there graphing solutions that use best practices for accessibility (with the understanding that a developer must implement mindfully)?
  99. stevefaulkner
    17:08
    @powrsurg aViewer http://www.paciellogroup.com/resources/aviewer/
  100. stevefaulkner
    17:13
    @jenstrickland hi, jQuery Visualize looks pretty good at first glance
  101. jenstrickland
    17:30
    Thank you, @stevefaulkner!
  102. fstorr
    17:48

    Question on WCAG 2.0's 4.1.2 "Name, Role, Value". tenon.io flags <a href="#"> as an issue as it "[the] href attribute does not conform to RFC1630 which defines the proper construction of URIs. The behavior, in certain scenarios, may not match the intended behavior." 4.1.2. states that links can be programatically determined so if I have a <a href="#"> where the href value is replaced by a script, should that pass 4.1.2?

    (I realise that <a href="#"> isn't ideal by any means but need to provide guidance to developers)

  103. stevefaulkner
    18:01
    @fstorr I am not convinced that is an accessibility issue, will ping karl about it (he is on vacation this week)
  104. fstorr
    18:03
    @stevefaulkner thanks.
  105. stevefaulkner
    18:06
    So I created a cleaned up archive manually: A11y Slackers Gitter Channel Archive 15th of July 2015 will do so until we have an automated process
  106. stevefaulkner
    18:08
    @fstorr what does the scripted href do?
  107. stevefaulkner
    18:09
    @jenstrickland no problem, if you have a coded example ping me and can take a look
  108. LjWatson
    18:24
    @stevefaulkner @fstorr Having href="#" is an a11y issue in itself - It would cause the page to reload and for keyboard focus to be lost without apparent change of page/context. If scripted to be a unique idref, it's a moot point though.
  109. alice
    18:30
    Did you all see that Slack is sponsoring our web-a11y slack now?
  110. fstorr
    18:31
    It is? That's fantastic
  111. alice
    18:38
    Sure is! :D
  112. MichielBijl
    18:42
    Woah
  113. MichielBijl
    18:43
    Who got them to sponsor us?
  114. MichielBijl
    18:43
    @alice
  115. stevefaulkner
    18:45
    @alice cool!
  116. MichielBijl
    18:47
    @stevefaulkner @LjWatson what is the problem with the Slack IRC-brigde. Steve said something about too much noise.
  117. LjWatson
    18:48
    @MichielBijl too much irrelevant status/ident updates in the IRC chat history.
  118. stevefaulkner
    18:49
    @MichielBijl ask @LjWatson I am glad that slack have stepped up, but am gonna hang here now as its more open and its being used for W3C groups I am involved in
  119. MichielBijl
    18:49
    @callumacrae (I think) said something about filtering. Wouldn't that be an option?
  120. LjWatson
    18:49
    It's good that someone has sponsored the channel, but Slack is simply too unusable for me.
  121. LjWatson
    18:50
    @MichielBijl Filtering what and how?
  122. MichielBijl
    18:50
    I'm happy to keep both, but am afraid I'll won't keep tabs on Slack that much.
  123. MichielBijl
    18:50
    @LjWatson not really sure, I'll have to look it up in the Slack chat.
  124. fstorr
    18:50
    @stevefaulkner @LjWatson Some links toggle dropdown menu visibility, some are referenced by Angular which swaps in a URL to another page.
  125. MichielBijl
    18:52
    @LjWatson it was @callumacrae, he can probably help you setup a filter (to filter out the status updates I assume).
  126. LjWatson
    18:52
    @MichielBijl thanks. I left the Slack channel so can't grab an example, but there was a never-ending stream of +/-i type messages - probably around 20 to every actual message from a channel participant.
  127. MichielBijl
    18:52
    That is unusable. Hope @callumacrae can help; he has setup something similar for his phpBB Slack channel.
  128. LjWatson
    18:53
    @MichielBijl @callumacrae Thanks, but TBH it's just easier to hang out here where stuff works :)
  129. MichielBijl
    18:53
    True.
  130. LjWatson
    18:53
    Gitter is also the lesser of two evils in terms of overall a11y :)
  131. alice
    18:58
    It's just a shame to have two places where people hang out
  132. alice
    19:00
    @MichielBijl Haley (Slack employee) organised it after Marcy brought it up
  133. fstorr
    19:00
    Indeed. Slack is better for me as I'm in there a lot and it doesn't make my computer's fan spin when I load it in a browser.
  134. MichielBijl
    19:02
    @alice awesome! I guess I'll try and hang in both.
  135. MichielBijl
    19:02
    Slack does have some interesting channels.
  136. MichielBijl
    19:02
    We'll see how it goes I guess.
  137. MichielBijl
    19:04
    I just have to find out how to setup a bouncer for IRC; missing a lot of stuff.
  138. alice
    19:17
    I find Slack more slick and more usable, but frankly if @stevefaulkner and @LjWatson are going to be hanging in here then I guess I will be as well!
  139. stevefaulkner
    19:21
    @alice I agree that slack has some advantages, but as gitter is one of the tools of choice for the WICG https://gitter.im/WICG/admin I would like to use it and help improve the accessibility
  140. stevefaulkner
    19:23
    @alice this may be an option https://sameroom.io/open-a-tube for having best of both worlds, but haven't investigated
  141. alice
    19:29
    @stevefaulkner Giving it a shot, so far I'm confused
  142. garcialo
    19:56
    @alice Make sure and let us know once you've figured it out. =)
  143. alice
    20:04
    [Alice Boxhall, a11y] Typing this from Slack
  144. alice
    20:05
    Ooh weird
  145. garcialo
    20:10
    Neat! =)
  146. alice
    20:11
    [garcialo, a11y] Does it work if I type in slack as well?
  147. alice
    20:11
    ????
  148. alice
    20:11
    [garcialo, a11y] It did!
  149. alice
    20:11
    I'm now a sock puppet?
  150. alice
    20:11
    [garcialo, a11y] Apparently.
  151. alice
    20:11
    Malkovich
  152. alice
    20:12
    [garcialo, a11y] Probably would be best to create (yet another) account to be the slack/gitbot
  153. alice
    20:17
    [Alice Boxhall, a11y] Ok, trying the portal version now
  154. alice
    20:22
    @garcialo Or each of us could just create a tube and a private room in web-a11y slack? It's a little odd that it creates a new "channel" but then posts in here as an individual
  155. alice
    20:31
    [garcialo, a11y] Yeah
  156. garcialo
    20:33
    @alice Well, and then there's the problem of getting the conversations from #general and other slack channels in here
  157. alice
    20:43
    That's just a pipe in the other direction surely
  158. alice
    20:43
    (@garcialo ^^)
  159. garcialo
    20:47
    I guess I'm not understanding what sameroom is doing.
  160. alice
    20:49
    It's a little bit weird, yeah.
  161. alice
    20:49
    It seems like it pipes things from here into the slack channel under the names we use in here, but in the other direction everything goes under my name. Possibly that's just a limitation of gitter?
  162. alice
    20:50
    Looks like slack allows arbitrary numbers of bots while gitter requires everything to be a human
  163. alice
    20:51
    So we'd need to create a whole separate git account to use as a bot on the gitter end
  164. alice
    20:51
    We could theoretically connect #general in slack into this room if we did that, then everything would go into both rooms - though rate limited unless we paid for it
  165. garcialo
    20:52
    Don't think we could get slack to sponsor that =p
  166. alice
    20:53
    haha unlikely
  167. alice
    20:53
    Though it's $9/mo for up to 3 unlimited tubes so that's much less of an ask of $other_org
  168. garcialo
    20:53
    oh yeah, quite less
  169. alice
    20:53
    Though that's for "personal use" - not sure this qualifies? $49/mo for "professional use"
  170. garcialo
    20:54
    We could just point at @stevefaulkner if they suggested this was for professional use.
  171. alice
    20:54
    poor ol' @stevefaulkner
  172. stevefaulkner
    22:53
    @alice @garcialo sounds like it might work, we could create another room here that pipes a11yslack#general
  173. MichielBijl
    22:56
    I would like to try it out :)
  174. stevefaulkner
    23:00
    @alice @garcialo for testing https://gitter.im/w3c/a11ypipe
  175. stevefaulkner
    23:03
    We could just point at @stevefaulkner if they suggested this was for professional use.
  176. stevefaulkner
    23:03
    I pride myself on a complete lack of professionalism
  177. MichielBijl
    23:04
    Haha
  178. stevefaulkner
    23:12
    Trying out gitter iOS app...