Archive index

A11y Slackers Gitter Channel Archive 19th of October 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Oct 19 07:45
    [damoberg] Does anyone have a nice example how to do an accessible hamburger menu without javascript? On https://www.theguardian.com/uk they use the hamburger icon to link to a section above the footer (when not using js), is this a good approach?
  2. [damoberg] We are going to progressively enhance the menu with javascript later.
  3. [michiel] You can make it an anchor and use :target to show the menu part.
  4. [damoberg] A related question perhaps, what is your experience with using :target selectors to show more content, like for example a menu? Are there any pitfalls using that method?
  5. [michiel] Don't know if an example of the top of my head, but should be easy enough to find.
  6. [damoberg] Yes we have thought about doing it that way, @michiel, but I’m not sure we can get a fully accessible implementation that way. Do you know of any examples perhaps?
  7. zakim-robot
    @zakim-robot
    Oct 19 11:19
    [michiel] <a href="\#menu">Menu</a> <div id="menu"><nav aria-label="Site"><ul><li><a href="/">Home</a></li></ul></nav></div> #menu { display: none; } #menu:target { display: block; }
  8. [michiel] damoberg: that should do the trick :P
  9. Job van Achterberg
    @jkva
    Oct 19 11:53
    Afternoon slackers
  10. @michiel a 'problem' I've found with :target selector is the necessity of scrolling on the page via the use of in-page anchors
  11. zakim-robot
    @zakim-robot
    Oct 19 12:02
    [johnkmcnabb] What's the general feeling about disabled buttons? Is it ok to disable a button until certain conditions are met? And if the button is disabled, must it meet colour contrast guidelines? Thx.
  12. zakim-robot
    @zakim-robot
    Oct 19 12:09
    [scottohara] i personally don’t like disabled buttons in the context of filling out forms. It just seems like a extra hurdle for people to get over that doesn’t always guarantee that what they submitted will be accepted, since there are typically additional validation scripts running to allow a form to be submitted.
  13. zakim-robot
    @zakim-robot
    Oct 19 13:32
    [michiel] johnkmcnabb: disabled elements don’t have to meet colour contrast guidelines :)
  14. [michiel] +1 to the man from Boston.
  15. zakim-robot
    @zakim-robot
    Oct 19 14:26
    [johnkmcnabb] Ok, thanks!
  16. powrsurg
    @powrsurg
    Oct 19 15:37
    wait what, why does them being disabled make it okay to ignore color contrast guidelines? The user may not be able to tell what it is that is being disabled ...
  17. Fiona Holder
    @FionaHolder
    Oct 19 15:43
    yeah, I was aware that decorative things don't have to meet them, but i'm not sure a disabled button counts as decorative
  18. James Nurthen
    @jnurthen
    Oct 19 15:45
    disabled is an inactive user interface component - explicitly called out by WCAG as being not covered by 1.4.3 under incidental
  19. "Text or images of text that are part of an inactive user interface component,"
  20. Fiona Holder
    @FionaHolder
    Oct 19 15:48
    fair enough, that does seem to cover the use case
  21. James Nurthen
    @jnurthen
    Oct 19 15:51
    IMO making it meet the ratio would make it really unclear that it is disabled visually too
  22. powrsurg
    @powrsurg
    Oct 19 15:59
    Depends on how you've done it. I think our disabled buttons still meet it.
  23. James Nurthen
    @jnurthen
    Oct 19 16:02
    I guess you can if your enabled buttons have a super high ratio... with the "trend" to lower contrast UIs (which personally I dislike) getting something that looks disabled but meets 4.5:1 gets very challenging
  24. zakim-robot
    @zakim-robot
    Oct 19 16:20
    [marcysutton] About hamburger buttons: one thing you miss without JS is the escape key to close it and take you back where you were

  25. [scottohara] per disabled buttons. are they supposed to be accessible via screen readers?

    via normal tab controls i can’t get to them, but navigating via VO, I can...

  26. [scottohara] i can test these in other ATs later..but right now, VO is the only one i have on my machine to test this
  27. zakim-robot
    @zakim-robot
    Oct 19 16:26
    [marcysutton] they aren't focusable when disabled, but still in the accessibility tree
  28. [scottohara] cool. thanks :)
  29. zakim-robot
    @zakim-robot
    Oct 19 16:44
    [michiel] scottohara: most non-interactive elements are reachable with screen readers ;)
  30. [michiel] When navigating a page a SR / AT user doesn’t just linearly scan the page with OV+Right Arrow for example.
  31. [michiel] So having disabled buttons in there should be fine.
  32. [johnkmcnabb] Yeah I was able to get JAWS and NVDA to read a disabled button.
  33. [johnkmcnabb] I suppose disabled buttons that are grayed out could provide a slight challenge, low-vision-wise or cognitive-wise... But still better than having a button appear and disappear.
  34. zakim-robot
    @zakim-robot
    Oct 19 17:09
    [scottohara] thanks michiel.
  35. zakim-robot
    @zakim-robot
    Oct 19 17:14
    [johnkmcnabb] Thanks all. :)
  36. powrsurg
    @powrsurg
    Oct 19 19:22
    http://oaa-accessibility.org/example/41/ is this there a reason why this is done within a div with role="application"?
  37. zakim-robot
    @zakim-robot
    Oct 19 19:52
    [marcysutton] possibly to override default key commands?
  38. powrsurg
    @powrsurg
    Oct 19 20:02
    Shouldn't there not be anything at that point? I'm trying to clean up my co-worker's tree where nothing is being read off in NVDA besides "Tree View" (of course, he only has role="tree" and role="group" in his code so it's a bit off).
  39. zakim-robot
    @zakim-robot
    Oct 19 20:22
    [cordelia] This might be helpful: http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
  40. powrsurg
    @powrsurg
    Oct 19 21:22
    Yeah, this is going to be fun ...
  41. thanks for hte link
  42. zakim-robot
    @zakim-robot
    Oct 19 21:25
    [marcysutton] Ah sounds like it was for NVDA and IE10....which honestly is a low priority
  43. Mallory
    @StommePoes
    Oct 19 21:59
    @damoburg I vaguely remember David Hund having a CSS-only hamburger on his site though that was years ago
  44. to get back to where you were, you'd have links that took you back
  45. which you could remove when JS loads if JS loads
  46. zakim-robot
    @zakim-robot
    Oct 19 22:56
    [michiel] StommePoes: you can totes have an anchor that sets focus to the hamburger button again.
  47. zakim-robot
    @zakim-robot
    Oct 19 23:24
    [michiel] StommePoes, damoberg: here’s an example of that CSS only hamburger menu thinger: http://codepen.io/Michiel/details/QKJOVQ/
  48. [michiel] Of course, you have the same problems a lot of people simply ignore, like you can still access all content outside of the navigation thing.
  49. Sean Elliott
    @seanus1138
    Oct 19 23:45

    I was looking at http://simplyaccessible.com/ and noticed they have added tabindex to their h1's, i was under the impression you really shouldnt do that. But really wanted to throw it out to the wider community.
    Is this a good practice?
    Whats the thinking behind this is?
    Is its aim just to allow the user to tab the particular section?
    Doesn't this give the impression that the heading can be interacted with (like a link or button).

    Cant wait to hear peoples opinions :)

  50. zakim-robot
    @zakim-robot
    Oct 19 23:46
    [michiel] seanus1138: you really shouldn’t do that :)
  51. [michiel] Only interactive elements should be in the tab order—which isn’t to say some non interactive elements can’t get focuse programatically.