Archive index

A11y Slackers Gitter Channel Archive 14th of February 2017

What fresh hell is THIS now? - Patrick Lauke
  1. Jonathan Neal
    @jonathantneal
    Feb 14 02:25
    Is there an example of an accessible carousel that anyone here might recommend I look over? I’m building one at present, using https://www.w3.org/WAI/tutorials/carousels/, but I’m anxious by the 2014 copyright.
  2. zakim-robot
    @zakim-robot
    Feb 14 02:31
    [michiel] beth knows someone that was working on one.
  3. [michiel] garcialo also had one in the ebay thingy.
  4. Jonathan Neal
    @jonathantneal
    Feb 14 02:59
    michiel, like this? http://ianmcburnie.github.io/mindpatterns/disclosure/carousel/
  5. zakim-robot
    @zakim-robot
    Feb 14 03:08
    [michiel] I remember a different page, but could be misremembering.
  6. zakim-robot
    @zakim-robot
    Feb 14 03:14
    [caesar] I think it's the right page. They've updated it, compared to the screenshot in this post https://a11ywins.tumblr.com/post/144578706413/ebays-mind-pattern-examples
  7. zakim-robot
    @zakim-robot
    Feb 14 10:39
    [herin] Hi, Has anyone tried the aria-current with Windows Firefox and IE. Just checking the browser support before implementing the fix.
  8. [tink] @herin this might be useful http://ljwatson.github.io/design-patterns/aria-current/index.html
  9. zakim-robot
    @zakim-robot
    Feb 14 16:43
    [garcialo] @jonathantneal That’s the one! We put a lot of work into it. Let me know what you think.
  10. [garcialo] @michiel There are two sites; the Patterns site and the Examples site. The one he linked is from the Examples site. You’re probably thinking of the Pattern - https://ebay.gitbooks.io/mindpatterns/content/disclosure/carousel.html
  11. [garcialo] That said, each Pattern/Example links to the other
  12. zakim-robot
    @zakim-robot
    Feb 14 16:58
    [garcialo] @jonathantneal And we actively work on them as needed. For instance, we have some unpublished notes for the carousel pagination. I’ve heard that the W3C one is being worked on, but it’s seemed the same for a while.
  13. Jonathan Neal
    @jonathantneal
    Feb 14 17:03
    Thanks, garcialo. It is my primary source of influence now.
  14. And — funny you mention it — the hardest part has been figuring out pagination.
  15. I couldn’t figure out how to tell an individual button that it is selected, other than to use tab roles.
  16. powrsurg
    @powrsurg
    Feb 14 17:21
    If you use actual pages (depends on your pagination) might I suggest rel="next/prev(ious)"?
  17. if applicable
  18. Jonathan Neal
    @jonathantneal
    Feb 14 18:20
    @powrsurg, this is a single-page self-contained carousel.
  19. There are controls to move to the previous slide or next slide. I have been calling those “immediate controls”. Then there are controls to move between all slides. I’ve been calling those “pagination controls”.
  20. Jonathan Neal
    @jonathantneal
    Feb 14 18:26
    I haven’t figured out how to get a pagination control to announce itself as “selected” unless I give everything tab roles, or unless I manually inject the word “selected” into the element or aria-label.
  21. Jonathan Neal
    @jonathantneal
    Feb 14 18:32
    @garcialo used a nice technique to markup immediate controls, putting them on either side of the list of slides. Also, in @garcialo’s version, an immediate control is aria-disabled="true" if you reach the end of the list. These might be aria-disabled="false" all the time if you’re using a circular carousel.
  22. zakim-robot
    @zakim-robot
    Feb 14 18:35
    [garcialo] For the record, it isn’t “my” version. I think that particular idea (bookending with the prev/next buttons) was Ian’s…he’s the true author of the MIND Patterns; I just help him when I can. :)
  23. Jonathan Neal
    @jonathantneal
    Feb 14 18:37
    @garcialo, would you have a recommendation for how pagination controls should eventually be rendered?
  24. zakim-robot
    @zakim-robot
    Feb 14 18:41
    [garcialo] You mean how they should look?
  25. Jonathan Neal
    @jonathantneal
    Feb 14 18:42
    Less so appearance, more so markup and roles.
  26. zakim-robot
    @zakim-robot
    Feb 14 18:42
    [tink] You could use aria-current.
  27. [garcialo] Nothing fleshed out really, once we do, it’ll be int he pattern. :p
  28. [tink] @jonathantneal ^^ you could use aria-current?
  29. Jonathan Neal
    @jonathantneal
    Feb 14 18:45
    I’ll give that a try. I’ll use a navigation or group container. I’ll put buttons inside them, labeled "Slide 1", "Slide 2", "Slide 3", etc. Should those button’s aria-control point to the carousel container or the slide they activate?
  30. zakim-robot
    @zakim-robot
    Feb 14 18:47
    [tink] To the slide the button controls.
  31. [tink] Worth mentioning that aria-controls only needs adding once a given button has been activated.
  32. Jonathan Neal
    @jonathantneal
    Feb 14 18:47
    @tink, I’ll use aria-current if I use the navigation container. Does that seem right?
  33. zakim-robot
    @zakim-robot
    Feb 14 18:48
    [tink] Yup - though it's not dependent on using a navigation container. Just use aria-current="true" on whichever button is selected.
  34. Jonathan Neal
    @jonathantneal
    Feb 14 18:49
    Okay, I can make their container meaningless except for styling purposes if it doesn’t actually help. Well, I suppose I could give it a label, like “carousel navigation”.
  35. zakim-robot
    @zakim-robot
    Feb 14 18:50
    [tink] Having it as a <nav> is helpful because it makes it a landmark (useful for screen reader navigation). Giving it a better label is a good idea.
  36. Jonathan Neal
    @jonathantneal
    Feb 14 19:20
    Is it okay that each button — whether it is the “Previous Slide”, “Next Slide”, or “Slide 4” button — use aria-describedby pointed to the slide it would activate?
  37. zakim-robot
    @zakim-robot
    Feb 14 19:21
    [tink] Why would you want to do that?
  38. [tink] Do you mean so it said "Previous Slide 3" for example?
  39. [tink] Where "Previous" is the button label and "Slide 3" is the description?
  40. Jonathan Neal
    @jonathantneal
    Feb 14 19:26
    tink, garcialo; here would be an example of the markup with the aria attributes applied. https://gist.github.com/jonathantneal/c9da7ca01890c3f3bed32bd127bcbe8e
  41. zakim-robot
    @zakim-robot
    Feb 14 19:56
    [tink] @jonathantneal do you have a rendered version?
  42. Jonathan Neal
    @jonathantneal
    Feb 14 19:57
    Either I’m using aria-controls inappropriately, which is likely, or Apple VoiceOver doesn’t really leverage it. I don’t see any way aria-controls affect what is announced or what happens when I click a button with aria-controls pointing at a valid id.
  43. @tink, that is the “rendered” version, as if it were mid-state.
  44. zakim-robot
    @zakim-robot
    Feb 14 19:58
    [tink] Hmm. I'm only seeing the code output.
  45. [tink] VO doesn't support aria-controls btw. The only screen reader that does is Jaws.
  46. Jonathan Neal
    @jonathantneal
    Feb 14 20:01
    Have I correctly pointed aria-controls to the slide, or would I point it to a parent? @tink, would you know if VO supports aria-live="polite"?
  47. zakim-robot
    @zakim-robot
    Feb 14 20:01
    [tink] Point aria-controls to the thing it controls - in this case that would be the slide.
  48. [tink] VO does support live regions, yes.
  49. [tink] Looking at this example, some suggestions...
  50. [tink] Only put aria-controls on the currently selected button.
  51. [tink] The button doesn't point to a slide until the slide is visible/displayed.
  52. zakim-robot
    @zakim-robot
    Feb 14 20:07
    [tink] The text for the prev/next buttons is very verbose "Next slide 3 of 3 carousel button" for example.
  53. [tink] Sugest that Just "Previous" and "Next" would do the trick for those buttons.
  54. [tink] I'm not sure that you need to use aria-describedby at all. Adding "Contents of slide 1" to the button's accessible info makes it very verbose to listen to.
  55. [tink] You should put aria-current="true" on the button that is initially selected (for slide 1).
  56. [tink] I'd also remove the live region. It looks as though it's intended to make screen readers announce the content of each slide as it's displayed - which would make the experience very hard to control.
  57. [tink] All that said, this is probably the most accessible carousel I've ever come across :)
  58. Jonathan Neal
    @jonathantneal
    Feb 14 20:44
    @tink, thank you! Once I get out of this meeting, I’m going to revisit your comments and make changes. I hope you won’t mind if I share those afterwards.
  59. Jonathan Neal
    @jonathantneal
    Feb 14 21:04
    @tink, when you say “only put aria-controls on the currently selected button” what do you mean by “currently selected”? The currently focused button? The button controlling the currently displayed slide?
  60. @tink, regarding verbosity, would the text “Previous” and the attribute aria-describedby="carousel" (which then uses aria-label="Carousel") provide enough context?
  61. Jonathan Neal
    @jonathantneal
    Feb 14 21:09
    I’ve seen aria-live="polite" used in many carousels, especially those that auto-rotate — and this one will. Given auto-rotation, how might you recommend I use aria-live? Would I apply it only when the carousel does not have any focus or hover?
  62. zakim-robot
    @zakim-robot
    Feb 14 21:10
    [tink] I wouldn't use aria-live at all. IThe last thing a screen reader user wants is to have carousel content automatically announced to them.
  63. [tink] Only put aria-controls on the button that has aria-current="true".
  64. zakim-robot
    @zakim-robot
    Feb 14 21:16
    [tink] I don't think you need to word "carousel" on any of the buttons.
  65. [tink] HTH :)
  66. Jonathan Neal
    @jonathantneal
    Feb 14 21:27
    @tink, thanks! Okay, one more clarifying question. Should the previous or next buttons have aria-controls pointed to their aria-hidden slides?
  67. Mallory
    @StommePoes
    Feb 14 21:33
    hm, I have aria-controls on my tab panels
  68. but only one panel is visible at a time
  69. zakim-robot
    @zakim-robot
    Feb 14 21:34
    [tink] @jonathantneal I wouldn't use it on those, no. Technically It'd be correct, but my hunch is that it would be confusing in practice.
  70. [tink] @StommePoes I'd suggest the same thing for your tabpanels. If the thing aria-controls points to isn't in the acc tree, it breaks what little support it actually has.
  71. Jonathan Neal
    @jonathantneal
    Feb 14 21:35
    Hmm, since none of these buttons use aria-control, will it be obvious if the button says “Previous Slide”, or should I add something more directive like “Goto Previous Slide”?
  72. Mallory
    @StommePoes
    Feb 14 21:36
    so I should be removing the whole attribute from all the tabs each time a tab is selected? Now I have to be reminded why i even put it on there.
  73. zakim-robot
    @zakim-robot
    Feb 14 21:36
    [tink] Or just remove the value.
  74. Mallory
    @StommePoes
    Feb 14 21:36
    I was actually using the value in my javascript
  75. since I saw people recommending it in code yet none of my readers used it, I figured I would get some use out of it as a way to point to the panel I need to show
  76. could change that to a data-foo instead
  77. Jonathan, goto is kinda implicit in the fact that it's a control tho, right?
  78. Jonathan Neal
    @jonathantneal
    Feb 14 21:39
    Perhaps. @tink, I’ve updated the code following all these recommendations. Thanks, and let me know if you think I missed something. https://gist.github.com/jonathantneal/c9da7ca01890c3f3bed32bd127bcbe8e
  79. Mallory
    @StommePoes
    Feb 14 21:40
    the aria-describedbys on the buttons confuse me
  80. Jonathan Neal
    @jonathantneal
    Feb 14 21:41
    @StommePoes, I was trying to give them context. This way, at any time, one could know they were within the Carousel.
  81. zakim-robot
    @zakim-robot
    Feb 14 21:42
    [tink] I agree with StommePoes. The -describedby makes it too verbose and confusing.
  82. [tink] The button labels are enough to give the needed context IMO.
  83. Jonathan Neal
    @jonathantneal
    Feb 14 21:42
    Perhaps I struggle with these buttons having no connection with the component other than being descendants of it.
  84. Mallory
    @StommePoes
    Feb 14 21:42
    I assume I would hear the content currently inside the carousel, which in this lorem ipsum version would be, whenever I'm on any button, in addition to the button name, These are the contents of Slide 2.
  85. Jonathan Neal
    @jonathantneal
    Feb 14 21:43
    I’ve updated the markup again to remove all of the aria-describedby attributes.
  86. Mallory
    @StommePoes
    Feb 14 21:44
    A validator might bite at you for the nav needing a "name" but if I were to give that nav a name it might be aria-label="carousel controls" or something
  87. Jonathan Neal
    @jonathantneal
    Feb 14 21:44
    @StommePoes, as in aria-describedby="carousel-slide-n" where n is the slide?
  88. Mallory
    @StommePoes
    Feb 14 21:44
    aria-describedby is pointing to the id of the carousel. meaning it would look for the contents inside the element with that id
  89. it's not a sting
  90. string
  91. aria-label is a string, but if you use labelledby or describedby to point to an id of smoe element, then the text you get is whatever text is in that element. In this case I'm asusming the aria-hiddens would stay silent and I would hear the one visible slide
  92. assuming that visible slide had text
  93. Jonathan Neal
    @jonathantneal
    Feb 14 21:45
    @StommePoes, good note about using the nav element. I will use div with role=group to prevent hypothetical outline issues.
  94. Mallory
    @StommePoes
    Feb 14 21:45
    I think nav is sensible
  95. it's a chunk of possibly primary or at least important-ish navigation
  96. Jonathan Neal
    @jonathantneal
    Feb 14 21:46
    This is the same reason I changed it from <section> to div with role=section.
  97. Mallory
    @StommePoes
    Feb 14 21:46
    but landmark roles, if there are multiples, are best to have a name so you can tell each of type apart.
  98. What's the difference between section and div role=section?
  99. Jonathan Neal
    @jonathantneal
    Feb 14 21:47
    The expectation of a heading element versus an aria-label?
  100. Mallory
    @StommePoes
    Feb 14 21:47
    I have been using either/both
  101. if the Design Lords let me hav a heading I use a heading
  102. if they don't, I either use a hidden heading or if a heading just makes no sense, aria-label
  103. I thought either could name the thingie.
  104. Jonathan Neal
    @jonathantneal
    Feb 14 21:48
    My concern with using a heading is that it becomes an element on the page, and if the design lords don’t want a visible heading, it makes the slightly visible experience somewhat confusing.
  105. Mallory
    @StommePoes
    Feb 14 21:48
    aria-labels I actually rather don't like. Theoretically with real headings, if they make sense, I could use CSS to hide/show if needed based on something like switching to desktop from mobile context or something.
  106. Right, but if you have a role region that excepts a name, then if Design Lords don't want headings then aria-label does the trick
  107. but if I did div role="nav" adn I had more than one nav on the page, I would still need to name them
  108. if there was only one I wouldn't, but more than one I would
  109. I never name my main, tho it has h1's anyway, but it's not like someone's going to worry which main they're on.
  110. Jonathan Neal
    @jonathantneal
    Feb 14 21:49
    When I used role=navigation and aria-labelledby=carousel, it announced the navigation as being contextual to Carousel.
  111. Mallory
    @StommePoes
    Feb 14 21:50
    But navs and stuff, at work at least I'm finding we've got 2 or 3.
  112. How did it announce it?
  113. Did it just say "carousel"?
  114. Jonathan Neal
    @jonathantneal
    Feb 14 21:50
    “navigation Carousel 3 items”
  115. Mallory
    @StommePoes
    Feb 14 21:51
    I wonder if, instead of taking the text that's inside the element with the id of carousel, it's taking its aria-label
  116. wow, that's some browser heuristics
  117. Jonathan Neal
    @jonathantneal
    Feb 14 21:51
    Yes, it’s using the aria-label of the carousel container.
  118. Mallory
    @StommePoes
    Feb 14 21:52
    If that's all I had to hear then that clears up the nav (still prolly a bit much for the buttons unless you jump to j random button from nowhere), I thought I'd hear the text inside the carousel which would be eq
  119. ew
  120. keep it on the nav then, that's nice and short and does have context.
  121. Jonathan Neal
    @jonathantneal
    Feb 14 21:52
    Not in my experience, but this was only with VoiceOver.
  122. Mallory
    @StommePoes
    Feb 14 21:52
    I learned a new thing
  123. If you make like some div with "whole lotta text yeah yeah yeah" and gave it an id and aria-labelled something by that id, you oughtta hear "whole lotta text yeah yeah yeah" each time you navigate to that thing
  124. I've had this at work :(
  125. the pandas, they were very sad
  126. but aria-label hijacking it is interesting.
  127. I should see if that works in FF and IE.
  128. Jonathan Neal
    @jonathantneal
    Feb 14 21:54
    In my experience; the announcement goes: role, then aria-label / aria-labelledby, then details (like “3 items”), and then aria-describedby.
  129. I’ll test this with VoiceOver and Firefox and Safari right now.
  130. Mallory
    @StommePoes
    Feb 14 21:56
    FF might not do anything useful
  131. on mac
  132. but I'll see what Orca does on it
  133. Jonathan Neal
    @jonathantneal
    Feb 14 21:57
    Safari and Chrome read the same. Firefox actually gave me a notice that accessibility wouldn’t work. And it didn’t — it had trouble navigating around, and it read aria-hidden sections aloud.
  134. Mallory
    @StommePoes
    Feb 14 21:57
    so @tink your page on aria-controls has it as an example on a disclosure widget, but normally those are also hidden until you trigger it with the button... so the aria-controls should be empty on the button when you first encounter it, and after you click it, it should appear when the disclosed info appears?
  135. Yeah Mozilla has an ongoing something with Apple about that
  136. I'm not sure of the details, only that mozilla is trying and I guess not getting very far.
  137. ok, I need sleep
  138. Jonathan Neal
    @jonathantneal
    Feb 14 22:00
    Thanks for your input, @StommePoes
  139. zakim-robot
    @zakim-robot
    Feb 14 22:14
    [tink] @StommePoes I need to go and look at that example. The aria-controls shouldn't be there until the disclosed content is shown.
  140. fstorr
    @fstorr
    Feb 14 22:26
    A question on aria-current's "location" value. For a site with a top-level ("global") nav bar and secondary page-level ("local") nav bar, would using aria-current="location" be suitable for marking up the current "global" section a user is in? For example, the nav bar as sections on cats, dogs, and mice, and the user is in the dogs section. The spec (https://www.w3.org/TR/wai-aria-1.1/#aria-current) seems to say it is as it mentions the "current location within an environment or context".
  141. zakim-robot
    @zakim-robot
    Feb 14 23:13
    [herin] Hi, A quick question
    Windows alert messages created by alert("Hello!") - will this be a failure for accessibility?
    * It does not magnify with browser zoom
    * The title cannot be provided in the alert
  142. [caesar] Yes, but possibly under UAAG rather than WCAG?
  143. zakim-robot
    @zakim-robot
    Feb 14 23:19
    [herin] hi @caesar : If a website creates an alert as confirmation of a process or submission, it will still fall under WCAG I guess
  144. [herin] Thanks for that.
  145. [herin] So I need to work on getting all the alerts into Javascript alerts now
  146. [herin] fun days
  147. zakim-robot
    @zakim-robot
    Feb 14 23:24
    [caesar] Actually alert() would fail the "Javascript not enabled" principle...
  148. [caesar] ... but that's a whole other kettle of fish :)
  149. zakim-robot
    @zakim-robot
    Feb 14 23:47
    [herin] Ah...
  150. [herin] :(