Archive index

A11y Slackers Gitter Channel Archive 31st of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. Jonathan Neal
    @jonathantneal
    Mar 31 04:24
    Is this markup preferred for an accordion? https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion1.html using dl, dt, dd for the whole group and a button for the header?
  2. Jonathan Neal
    @jonathantneal
    Mar 31 04:33
    The region relationships are never outlined in the practices document, but they seem so intentional in the example.
  3. Or is there a repo for this doc that I could submit questions to? I also noticed a typo ("ssection") that I could submit a PR to correct.
  4. James Nurthen
    @jnurthen
    Mar 31 04:37
    You can submit an issue
  5. does the editors draft version answer your question. I think we updated the table http://w3c.github.io/aria-practices/examples/accordion/accordion.html
  6. Jonathan Neal
    @jonathantneal
    Mar 31 04:41
    It does still use the dl, dt, dd pattern, so I suppose that’s an endorsement.
  7. By the way, I keep thinking the example is broken because I cannot close all of the panels, which I saw is an existing issue.
  8. James Nurthen
    @jnurthen
    Mar 31 04:42
    yeah - but lots of accordions work like that
  9. dl dt dd is certainly not mandated though
  10. Jonathan Neal
    @jonathantneal
    Mar 31 04:45
    This PR gets complicated because I have to break something else to correct the typo. There’s an editor config file that specifies trimming spaces at the ends of a line. I corrected the typo and saw my editor had gone ahead and trimmed those spaces; doh!
  11. So, I have to re-checkout the file, disable that mandate in the editor config, make the spelling correction, restore the editorconfig :)
  12. James Nurthen
    @jnurthen
    Mar 31 04:47
    let me just fix the typo directly
  13. which file?
  14. where in the doc
  15. Jonathan Neal
    @jonathantneal
    Mar 31 04:48
    Done w3c/aria-practices#350
  16. James Nurthen
    @jnurthen
    Mar 31 04:48
    thanks. merged it.
  17. Jonathan Neal
    @jonathantneal
    Mar 31 04:49
    Yay! I was hoping to see the little “First time contributor” badge. I’m going to give myself a cookie now :)
  18. James Nurthen
    @jnurthen
    Mar 31 04:49
    :)
  19. hope it is the first of many :)
  20. Jonathan Neal
    @jonathantneal
    Mar 31 04:50
    ^ Yea, it says I have contributed before. Shrug. I don’t recall. Anyway, thanks for pointing me to the github version.
  21. I prefer specs and docs on GitHub, actually. I feel less concerned about them going out of date and remaining so.
  22. James Nurthen
    @jnurthen
    Mar 31 04:52
    well - it is all on GitHub. We publish a stable version periodically. w3c process and all that....
  23. Jonathan Neal
    @jonathantneal
    Mar 31 04:55
    Oh, the GitHub version contains much better guidance on how to or when to use role=region with an accordion. Woohoo!
  24. James Nurthen
    @jnurthen
    Mar 31 04:57
    yeah - i knew we worked on something there
  25. Jonathan Neal
    @jonathantneal
    Mar 31 05:53
    All right, my first stab at a basic accessible accordion. http://codepen.io/jonneal/details/JWwbge/
  26. zakim-robot
    @zakim-robot
    Mar 31 08:02
    [surma] Speaking of accordion: I’m building an accordion but using Custom Elements. So instead of using a button for the headings, I’m using my own element and making it behave like a button (making it focusable and reacting to keyboard input). Is that something that is acceptable?
  27. zakim-robot
    @zakim-robot
    Mar 31 11:08
    [i-like-robots] Sounds like you should just use a button ;)
  28. zakim-robot
    @zakim-robot
    Mar 31 12:13
    [surma] i-like-robots: It’s not really an option, tho, as I am using CustomElements v1 (a non-negotiable aspect of this project ;) ) and you can’t extend native elements in CEv1 anymore sadly
  29. [surma] Apart from that, some browsers (e.g. Firefox) are super buggy when it comes to using layouting inside buttons (flexbox goes haywire in FF)
  30. [scottohara] to be fair. the idea of using flexbox inside of a button just made my brain go haywire, too
  31. Komlev
    @komlev
    Mar 31 12:49
    Hi. Quick question: is there such a thing of too much accessibility?
  32. The thing is:
    imagine I have an input and label is relates to input through "for"
    I add "aria-labelledby" and "aria-describedby" to input which lead to the same label
    I also put aria-label to the input
  33. zakim-robot
    @zakim-robot
    Mar 31 12:52
    [scottohara] 1st rule of aria is to do your best not to use aria
  34. Komlev
    @komlev
    Mar 31 12:53
    But what if it is there, how would different screen readers would react?
  35. zakim-robot
    @zakim-robot
    Mar 31 12:53
    [scottohara] if you have an label w/for attribute and it correctly points to the input’s ID, then you don’t need an aria-label or aria-labelledby
  36. [scottohara] if you have additional content that gives context to the input, but is not appropriate as a ‘label’ then pointing to it with an aria-describedby can be good
  37. [scottohara] different screen readers may react differently to it, but for the examples i’m thinking of, putting an aria label on an input that already has an appropriately set label, the aria-label will overwrite the contents of the <label>
  38. Komlev
    @komlev
    Mar 31 12:57
    I've run some test with NVDA and it seems like it reads label two times
  39. first time for the aria-label
  40. Fiona Holder
    @FionaHolder
    Mar 31 12:57
    I agree, there is no point in duplicating effort, if the label and input are related through "for" then by adding labelled-by and described-by it's redundant
  41. Komlev
    @komlev
    Mar 31 12:57
    and second time for the for, aria-labelledby,...
  42. zakim-robot
    @zakim-robot
    Mar 31 12:58
    [scottohara] so then that’s clearly not a good thing
  43. [scottohara] so per your original question, i wouldn’t call that making it ‘too accessible’ as much as it’s implemented incorrectly
  44. Komlev
    @komlev
    Mar 31 13:03
    Thanks
  45. Jonathan Neal
    @jonathantneal
    Mar 31 13:37
    Which ATs could I use to be sure aria-controls is wired up correctly? I’ve been using VoiceOver.
  46. zakim-robot
    @zakim-robot
    Mar 31 13:46
    [scottohara] Jaws
  47. [scottohara] if others support it now, then i missed that
  48. zakim-robot
    @zakim-robot
    Mar 31 15:36
    [robdel12] Anyone know who made this? http://a11y-style-guide.com/ It’s awesome! Wondering if its open source?
  49. [robdel12] Had an idea to add videos of good vs bad using different screen readers in the different examples.
  50. Fiona Holder
    @FionaHolder
    Mar 31 15:38
    It's got Twitter and Github links at the top
  51. zakim-robot
    @zakim-robot
    Mar 31 15:38
    [robdel12] Ha, I wasn’t on the overview
  52. [robdel12] Thanks for that hahaha
  53. Fiona Holder
    @FionaHolder
    Mar 31 15:39
    lol, no worries
  54. zakim-robot
    @zakim-robot
    Mar 31 15:43
    [cehfisher] hmm…that would be me :$
  55. [cehfisher] but @scottohara has contributed enough already to be my co-host at this point :)
  56. [cehfisher] go to https://cehfisher.github.io/a11y-style-guide/style-guide for the real demo
  57. [cehfisher] i have a folder nesting issue i need to resolve
  58. [cehfisher] @robdel12 please contribute! it’s a GitHub project. i have several things left “to-do” and opened up tickets for each of them so far…but i’m sure there is much more we could add as a community
  59. zakim-robot
    @zakim-robot
    Mar 31 16:13
    [drtomlins] Hi everyone -some discussion with my co-workers over the title attribute on links - nielsen says use them, W3 discourages them. If the link anchor text is relevant and informative, are they needed? I have people using the title attribute on every link, and on most, if the AT reads it, it would be redundant
  60. Jonathan Neal
    @jonathantneal
    Mar 31 16:13
    Thanks, @scottohara for the info about jaws reporting aria-controls.
  61. zakim-robot
    @zakim-robot
    Mar 31 16:18
    [garcialo] @drtomlins A common issue with title elements is that if they’re used a “tooltips” then keyboard users don’t get that content.
  62. [garcialo] So if you’re presenting additional information, you won’t want to use title; you’ll want to use something that also provides the info via keyboard focus
  63. [drtomlins] @garcialo exactly the issue, they're using them for tooltips - which is also what nielsen is advocating
  64. [garcialo] Yeah, then nielsen is likely not aware of the keyboard user issue
  65. [drtomlins] here's his article https://www.nngroup.com/articles/title-attribute/
  66. [garcialo] ah, they are aware…see Touchscreen Devices and the Title Attribute
  67. [drtomlins] the 'best practices' document I made says not to use them, then someone sent me that article
  68. [garcialo] I disagree with their “its fine if it’s just an enhancement for mouse users"
  69. zakim-robot
    @zakim-robot
    Mar 31 16:23
    [drtomlins] me too. Our UX/UI team is working on an enterprise style guide and it includes accessibility
  70. [drtomlins] and our analytics shows a growing percentage of mobile visitors, like everyone else
  71. [garcialo] so…this may sound a bit crass, but when I hear things like this, I typically substitute “X user” with “white users” “black users” “asian users” etc. to see how it sounds :p
  72. [garcialo] it doesn’t make sense to always use, of course
  73. [garcialo] and I’m not suggesting you should do it =D
  74. [drtomlins] lol.. actually, our document is "Material Design"
  75. [garcialo] yeah, mobile is a great reason to not have mouse hover stuff
  76. [karlgroves] The mighty Steve Faulkner has written quite a bit about the title attribute here: https://www.google.com/search?q=site%3Apaciellogroup.com+title+attribute
  77. [drtomlins] Awesome, thanks @karlgroves I read his stuff a lot :)
  78. zakim-robot
    @zakim-robot
    Mar 31 16:42
    [surma] @scottohara @i-like-robots I guess the question then becomes: How do you do an accordion, where a heading is supposed to contain more than just a line of text?
  79. zakim-robot
    @zakim-robot
    Mar 31 16:50

    [scottohara] Display block, inline block, floats, for internal span elements to get things where you might need them?

    Would need more context on the markup and design. But I've never needed flexbox to do something like that

  80. Jonathan Neal
    @jonathantneal
    Mar 31 17:06
    So, the author practicing guidelines for an accordion don’t ever say this, but I keep feeling the urge to use the left and right arrows to open or close an accordion panel when its focused. Is there anything similar to an accordion that would be making me expect this behavior? If it’s just my personal opinion guiding me, I don’t want to add the feature and possibly confuse someone else.
  81. zakim-robot
    @zakim-robot
    Mar 31 17:36
    [surma] @scottohara Understood. It a generic component, so I don’t know what exactly will be done. But I guess I’ll go with a button for now then and see if we run into problems at some point.
  82. [surma] Thanks for your help :)
  83. James Nurthen
    @jnurthen
    Mar 31 23:41
    @jonathantneal Trees expand and collapse with left/right arrow so I can understand why you might expect that behaviour in an accordion.