Archive index

A11y Slackers Gitter Channel Archive 29th of February 2016

What fresh hell is THIS now? - Patrick Lauke
  1. jonathantneal
    Feb 29 04:58
    @stevefaulkner, the DOM ordering goes <ul class="main"/><button class="toggle"/><ul class="overflow/>. I was thinking it should include aria-controls like <button class="toggle" aria-controls="overflow-id"/><ul class="overflow" id="overflow-id"/> unless you think it’s implied by the focus order (the next focus item would be the first overflow item).
  2. jkva
    Feb 29 06:28
    Morning folks
  3. MichielBijl
    Feb 29 07:10
    Mornin
  4. MichielBijl
    Feb 29 07:21
    @jonathanneal: if I recall correctly, aria-controls is only needed if the two elements are separated in the taborder. So let's say you have four buttons that control different hidden menu's. You would want users to be able to navigate to the controlled thing via a keyboard shortcut rather than having to tab around the page—and past the three other buttons.
  5. jonathantneal
    Feb 29 07:23
    Excellent. Thanks @MichielBijl for the confirmation. I’ve applied that to the okaynav update I am working on here. Time for sleep. http://s.codepen.io/jonneal/debug/wGwjZN
  6. MichielBijl
    Feb 29 07:27
    I'll check it out, good night =)
  7. MichielBijl
    Feb 29 07:37
    @jonathanneal: it'll need a label of sorts.
  8. MichielBijl
    Feb 29 07:38
    And would it make sense to close the menu if you tab out of the hidden content and back into the normal menu? I noticed that is what happens if you tab to the main content.
  9. zakim-robot
    Feb 29 08:59
    [jitendra] Is it possible to open something in new tab not new window?
  10. MichielBijl
    Feb 29 08:59
    Only via user preference as far as I know
  11. MichielBijl
    Feb 29 09:01
    alt=Safari preferences shows option to open pages in new tabs instead of windows. https://usercontent.irccloud-cdn.com/file/49cl04wB/Screen%20Shot%202016-02-29%20at%2010.00.15.png
  12. zakim-robot
    Feb 29 14:18
    [jergason] hello friends. i'm looking for a decent "aria-expanded" tutorial but i'm a bit overwhelmed by all the different writeups out there. is there something that you all would recommend?
  13. MichielBijl
    Feb 29 14:20
    Do you have a specific question about it?
  14. zakim-robot
    Feb 29 14:22
    [jergason] i've just heard a mention of it as a good way to implement a button that toggles some other control open or closed
  15. zakim-robot
    Feb 29 14:23
    [jergason] oh nm i have found https://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/ which looks ok
  16. zakim-robot
    Feb 29 14:23
    [jergason] sorry for early-morning laziness!
  17. zakim-robot
    Feb 29 14:26
    [jdan] @jergason bootstrap's dropdowns make good use of aria-expanded (and aria-haspopup) http://getbootstrap.com/components/#btn-dropdowns but don't use aria-controls
  18. stevefaulkner
    Feb 29 14:26
    https://twitter.com/stevefaulkner/status/704310868364935169
  19. stevefaulkner
    Feb 29 14:26
    feedback/input welcome
  20. powrsurg
    Feb 29 14:27
    @jergason http://oaa-accessibility.org/ look here for examples
  21. jonathantneal
    Feb 29 14:43
    @MichielBijl, thanks so much for checking it out. I will definitely add the label to the toggle. I thought it made sense to keep the overflow navigation open as long as you’re in any part of the navigation.
  22. zakim-robot
    Feb 29 15:16
    [jergason] jdan: why not user aria-controls?
  23. zakim-robot
    Feb 29 15:17
    [jdan] @jergason oh my apologies, I should've said "but doesn't use aria-controls"
  24. zakim-robot
    Feb 29 15:17
    [jdan] you can use aria-controls :simple_smile: someone else here can speak on how important they are
  25. zakim-robot
    Feb 29 15:17
    [jergason] ah
  26. zakim-robot
    Feb 29 15:17
    [jergason] i thought this was one of those sneaky aria things where the standard is wrong or bad somehow
  27. zakim-robot
    Feb 29 15:18
    [jergason] and i was getting ready to whine
  28. TzviyaSiegman
    Feb 29 15:51
    good morning
  29. jkva
    Feb 29 15:51
    o/
  30. TzviyaSiegman
    Feb 29 15:51
    thanks for answering my qs last week. I was planning the future of epub a11y in a dark room, so I didn't see until today
  31. jkva
    Feb 29 15:52
    @TzviyaSiegman: Use a red lamp ;-)
  32. jkva
    Feb 29 15:52
    Oh wait, that's just for photo development
  33. TzviyaSiegman
    Feb 29 15:52
    new question: if I have an image with no caption in a book or journal, what is the recommendation for <figcaption> wrt to a11y?
  34. TzviyaSiegman
    Feb 29 15:53
    i had been excluding it completely, but I heard a rec to include an empty <figcaption> as I would a null alt, where appropriate
  35. stevefaulkner
    Feb 29 16:07
    if there is no caption, don't include <figcaption> assuming there is an alt?
  36. MichielBijl
    Feb 29 16:08
    Should it even be a figure?
  37. stevefaulkner
    Feb 29 16:09
    figure not required http://w3c.github.io/html/grouping-content.html#the-figure-element
  38. stevefaulkner
    Feb 29 16:09
    aural UI wise, figure on its own is not exposed to user
  39. TzviyaSiegman
    Feb 29 16:09
    @MichielBijl @stevefaulkner thanks. We are using <figure> for our own sanity. Also it sometimes wraps more than 1 <img>
  40. stevefaulkner
    Feb 29 16:10
    @TzviyaSiegman and that is fine, but <img> needs an alt or at least a non empty <figcaption>
  41. TzviyaSiegman
    Feb 29 16:11
    yup, thanks
  42. zakim-robot
    Feb 29 16:29
    [felix.berger] i'd use a plain img / if decorational with empy alt attribute, if content related with descriptional alt information ...
  43. StommePoes
    Feb 29 16:36
    even with a non-empty figcaption, if you've got images without alt, they either won't exist (JAWS/NVDA), will exist with no other information (Orca), or will get their filenames read out (VO).
  44. StommePoes
    Feb 29 16:36
    bizaare. So even with a nonempty figcaption, use some alts.
  45. StommePoes
    Feb 29 16:36
    for sanity.
  46. StommePoes
    Feb 29 16:42
    http://stommepoes.nl/work/figures.html
  47. TzviyaSiegman
    Feb 29 16:46
    I am planning alt for all of these!
  48. StommePoes
    Feb 29 16:53
    woots.
  49. TzviyaSiegman
    Feb 29 17:36
    @StommePoes, have you published analysis for other elements?
  50. MichielBijl
    Feb 29 17:47
    @TheOneWithTheHat, you mean like other elements within figure?
  51. TzviyaSiegman
    Feb 29 17:48
    @MichielBijl , good memory! i'm interested in seeing breakdown like that for a lot of elements, not just figures.
  52. MichielBijl
    Feb 29 17:49
    ;)
  53. MichielBijl
    Feb 29 17:49
    Yeah, that would be interesting, there is TPG's aural HTML thing, let me fetch you the link
  54. MichielBijl
    Feb 29 17:49
    http://thepaciellogroup.github.io/AT-browser-tests/
  55. TzviyaSiegman
    Feb 29 17:50
    cool, thanks!
  56. StommePoes
    Feb 29 18:00
    Tzviya no, I haven't. Other than Michiel's stuff
  57. TzviyaSiegman
    Feb 29 18:01
    This should keep me busy for a few hours
  58. powrsurg
    Feb 29 19:04
    am I alone in getting a headache whenever they test with a screen reader?
  59. MichielBijl
    Feb 29 19:07
    Set it to Lee, solves everything
  60. powrsurg
    Feb 29 19:09
    ????
  61. MichielBijl
    Feb 29 19:19
    Use a more natural voice is what I'm saying :)
  62. jasonday
    Feb 29 19:27
    Hi all
  63. jasonday
    Feb 29 19:30
    I've got a org structure question - for those of you that work for orgs that have a 'compliance offiicer' role, how does that role review & approve everything that hits the web?
  64. powrsurg
    Feb 29 19:34
    I had no idea you could even do that ... and now I love it :p
  65. powrsurg
    Feb 29 19:34
    Zac is so cute
  66. zakim-robot
    Feb 29 19:36
    [karlgroves] At some point that becomes unsustainable for one person.
  67. powrsurg
    Feb 29 19:37
    a decade+ ago when I was working at my college's web department we had to run every change through marketing. Eventually we just stopped and they never noticed or cared
  68. zakim-robot
    Feb 29 19:38
    [karlgroves] Yeah, being a roadblock is a good way to become uninvited to meetings. :wink:
  69. powrsurg
    Feb 29 19:43
    To accomplish what you're looking for you'd need a CMS that has some type of versioning and notifications of revisions. It will get to be a huge pain in the butt as your org scales up.
  70. jasonday
    Feb 29 19:48
    All good points. I'm referencing the DOJ recommendations of a compliance officer, and just curious how others have implemented
  71. jasonday
    Feb 29 19:49
    Through a CMS and a pattern library, many a11y considerations get 'baked in', but then there's cruft that has to be reviewed somewhere somehow
  72. zakim-robot
    Feb 29 19:53
    [karlgroves] Jason, chances are that person’s role would be involved more in policies, procedures, training, lending subject matter expertise, etc.
  73. zakim-robot
    Feb 29 19:54
    [karlgroves] That’s not to say they wouldn’t be involved in testing, but rather that testing would more likely be reserved for special cases - or for a team of people
  74. jasonday
    Feb 29 19:54
    thanks - that gives me a better idea of intent
  75. jasonday
    Feb 29 19:55
    behind the compliance officer role.
  76. zakim-robot
    Feb 29 19:55
    [karlgroves] i’ve seen very large companies have a dozen SMEs on hand for testing, training, etc.. I’ve seen 2
  77. jkva
    Feb 29 19:59

    Is one of these pages more relevant than the other?

    1) https://www.w3.org/TR/html-markup/hr.html#hr
    2) https://www.w3.org/TR/html5/grouping-content.html#the-hr-element

  78. jkva
    Feb 29 19:59
    I'm trying to find the semantic use for a hr
  79. jkva
    Feb 29 20:00
    The second link seems to be more up-to-date with ARIA-roles
  80. stevefaulkner
    Feb 29 20:00
    https://www.w3.org/TR/html-markup/ avoid this
  81. TzviyaSiegman
    Feb 29 20:01
    @jasonday , somehow I am becoming the compliance office, despite my lack of skill or time. I am teaching myself to use AT
  82. stevefaulkner
    Feb 29 20:01
    its out of date - like ancient
  83. jkva
    Feb 29 20:01
    @stevefaulkner Thanks for confirming my gut feeling.
  84. StommePoes
    Feb 29 20:01
    steve can't we get a FLAMING RED WARNING on that?
  85. StommePoes
    Feb 29 20:02
    because if it's the FIRST thing you stumble across, one may not realise there's a Recommendation version of that out there somewhere
  86. stevefaulkner
    Feb 29 20:02
    i want to yes its - @sideshowbarker's fault
  87. StommePoes
    Feb 29 20:02
    people goooooogle this stuff
  88. jkva
    Feb 29 20:02
    Or redirect, or HTTP gone
  89. StommePoes
    Feb 29 20:02
    whatever looks like it has a good w3c-y look, is what the developer clicks
  90. jasonday
    Feb 29 20:03
    @TzviyaSiegman - I'm the SME/compliance officer leading our a11y projects - developing our process framework, which is challenging
  91. StommePoes
    Feb 29 20:03
    I spent a long time not knowing S had been brought back to life
  92. StommePoes
    Feb 29 20:03
    some designer guy showed me a newer page
  93. TzviyaSiegman
    Feb 29 20:04
    @jasonday , maybe we can talk?
  94. jasonday
    Feb 29 20:05
    @TzviyaSiegman - sure
  95. jkva
    Feb 29 20:07
    harrumph, VO ignores hr
  96. MichielBijl
    Feb 29 20:09
    VO doesn't ignore hr
  97. MichielBijl
    Feb 29 20:09
    Which version?
  98. jkva
    Feb 29 20:09
    @MichielBijl: I must be using VO wrong (likely). Yosemite.
  99. jkva
    Feb 29 20:10
    @MichielBijl: How do you make VO read it?
  100. MichielBijl
    Feb 29 20:10
    VO+arrow key to it
  101. MichielBijl
    Feb 29 20:10
    should be read out as “horizontal rule, dimmed”
  102. jkva
    Feb 29 20:11
    Huh, 's what I did, goes right past it
  103. jkva
    Feb 29 20:11
    I'm going to try again
  104. zakim-robot
    Feb 29 21:54
    [jiatyan] We have a long list of links. For those little icons which indicate external links, my developer is using a javascript to scan for off-domain urls and adding a:external-link: after { content: "\016"; cont-family: FontAwesome; } , but she is worried about screen reader not reading this external link icon. Does anyone know of a good CSS solution? Her alternate solution is add <scan class="sr-only"> to all the these external links.
  105. zakim-robot
    Feb 29 22:02
    [jdan] @jiatyan @heydon has a pure-css solution, but it requires background-image instead of an icon font if that's possible in this case! http://codepen.io/heydon/pen/pgBBdR
  106. jnurthen
    Feb 29 22:04
    Except of course that doesn't work in Windows High Contrast mode
  107. zakim-robot
    Feb 29 22:04
    [jiatyan] Ah, clever @heydon . I'll check with my dev. thanks @jdan
  108. MichielBijl
    Feb 29 22:42
    I think the JS version would be better. On the other hand, it's optional information.
  109. zakim-robot
    Feb 29 22:47
    [jiatyan] Yea, she went for the JS solution by adding aria-label. Thanks folks!