Archive index

A11y Slackers Gitter Channel Archive 18th of July 2017

What fresh hell is THIS now? - Patrick Lauke
  1. stacycarston
    @stacycarston
    Jul 18 17:11
    @skymaiden If you haven't figured out your VO menu problem yet, I just had an idea. I noticed that you are putting the "menuitem" role on the <li> element, which also contains the submenu <ul> and items. I'd suggest using a <div> or similar element to wrap the item text & arrow and giving that the role of menuitem and see if it fixes your problem. I'm wondering if it's related to this: https://www.w3.org/TR/wai-aria-practices/#children_presentational
  2. zakim-robot
    @zakim-robot
    Jul 18 17:48
    [virtualalex] Hey friends
  3. [virtualalex] How do blind people use touch screen mobile devices?
  4. [virtualalex] Does iOS have voice over as well?
  5. [alexlande] yep, iOS and Android both have built in screen readers
  6. [virtualalex] how would a blind person control Safari even with a screen reader?
  7. [alexlande] they have modes where you can swipe through page content which is similar to using a desktop screen reader, or you can touch different parts of the screen and the reader will read the UI element that you're touching
  8. zakim-robot
    @zakim-robot
    Jul 18 18:06
    [quidkid] Has anyone tried using accessible frameworks? http://responsivebp.com/ Do you think they are WCAG AA compliant?
  9. zakim-robot
    @zakim-robot
    Jul 18 18:22
    [ugi] @virtualalex https://support.google.com/accessibility/android/answer/6006598?hl=en
  10. [virtualalex] Thanks
  11. [ugi] and also https://support.apple.com/en-us/HT204783
  12. powrsurg
    @powrsurg
    Jul 18 18:28
    From what I recall from the last webaim, most blind users were using iOS
  13. could just be that that is who responded though
  14. zakim-robot
    @zakim-robot
    Jul 18 18:45
    [ugi] ~70% of WebAIM survey respondents are living in North America, where iPhone already has a lead in general consumer market.
  15. LauraOU
    @LauraOU
    Jul 18 19:04
    It would be nice if they updated some of those surveys
  16. zakim-robot
    @zakim-robot
    Jul 18 19:10
    [virtualalex] Do browser have build in keyboard controls and display a focus?
  17. [virtualalex] If I run into a website without a focus, does that mean they actively disabled it?
  18. [ugi] @virtualalex Yes, and it’s a really bad practice. http://www.outlinenone.com
  19. [virtualalex] Thank you
  20. zakim-robot
    @zakim-robot
    Jul 18 19:17
    [virtualalex] heh who owns this domain?
  21. [virtualalex] interesting
  22. zakim-robot
    @zakim-robot
    Jul 18 20:24
    [tyronem] Is there an equivalent of Front End Focus (email mailing list with web dev topics), but targeted towards a11y?
  23. [marcysutton] Yes: http://a11yweekly.com/
  24. [tyronem] Thank you very much!
  25. [marcysutton] I'm also always looking for submissions for Accessibility Wins! A periodic reminder to send me your awesome web accessibility work to get some recognition :) https://a11ywins.tumblr.com/
  26. zakim-robot
    @zakim-robot
    Jul 18 21:13
    [dylanb] @sandecorbett the aXe analyzer finds three legit issues on that page
  27. [dylanb] @dereklewis have you tried aXe on AMP? What have your results been?
  28. zakim-robot
    @zakim-robot
    Jul 18 21:30
    [sandecorbett] Thanks, @dylanb. I wasn’t able to get aXe working on my machine. Can you let me know what the issues it identified were? I’m also looking at the examples on this page: https://0.s3.envato.com/files/52772426/index.html
  29. [sandecorbett] Neither WAVE not Tota11y find a lot of errors on that example, although the HTML doesn’t directly mimic ours. The HTML for ours (for an individual hotspot) looks more or less like this:
    <div id="img_1j8ipv7_hotspot_1" class="hotSpot" data-content="#tile_tpfjvf"> <i class="fa fa-flag"></i> <div class="hotSpot__toolTip hotSpot__toolTip--left" style="top: -132px; left: -210px; display: none; opacity: 1;"> <div id="tile_tpfjvf" style="max-width: 300px; margin: 0 auto;"> <div class="product-tile" id="bcczMiaaitl5caaadin5Vb9a0j" data-itemid="1589321"> <div class="product-image"></div> <div class="product-caption"></div> </div><!-- END: .product-tile --> </div> </div> </div>
  30. [sandecorbett] I had found one suggestion to use aria-label with aria-hidden and a title tag, but we haven’t implemented that yet.
  31. zakim-robot
    @zakim-robot
    Jul 18 21:38
    [marcysutton] > one suggestion to use aria-label with aria-hidden and a title tag
    hopefully not on the same element, since aria-label and aria-hidden will sort-of cancel each other out.
  32. [sandecorbett] No, the aria-label would go on the outer div and the aria-hidden on the <i> tag.
  33. [sandecorbett] The sample I saw looked like this:
    <a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart"> <i class="fa fa-shopping-cart" aria-hidden="true" title="Open shopping cart"></i> </a>
  34. [marcysutton] Oh good to see an anchor in there. I was about to say that aria-label only works reliably on interactive elements, so a DIV wouldn't work.
  35. [sandecorbett] Ah, so the outer div in our code would need to be an anchor tag instead. Do we need the aria attributes? At this point the component will go live without them, so I’m just trying to make sure it will be accessible.
  36. zakim-robot
    @zakim-robot
    Jul 18 21:43
    [sandecorbett] ( I didn’t build it, but I’m the resident ADA watchdog. :) )
  37. [marcysutton] You do need the aria attributes if there's no actual text in there. aria-label will expose text on the link to assistive technology users, and aria-hidden will prevent the title from being read too...since that's only for mouse users.
  38. [marcysutton] the aria-hidden will also prevent any font glyphs from being read aloud (or at least attempted), since those are generally for visual presentation only.
  39. [sandecorbett] Thanks, @marcysutton! I’ll share this with the developer. I’m not sure if we can change the outer div to an anchor before release, but we can at least look at it for the next iteration.
  40. zakim-robot
    @zakim-robot
    Jul 18 21:49
    [marcysutton] Cool! iterative improvements are always better than none. Just don't let them try to convince you the styling changes are too hard, because they're not rocket science no matter what they say :rocket:
  41. [sandecorbett] True. I just talked to him. Would a <button> element work with aria-label?
  42. zakim-robot
    @zakim-robot
    Jul 18 21:58
    [marcysutton] Yep! It's an interactive element. But the rule of thumb is if the action navigates the user, it should be a link.
  43. zakim-robot
    @zakim-robot
    Jul 18 23:54
    [caesar] Hi guys. Can someone please point me in the direction of a best practice example of a non-binary set of toggle buttons (e.g. list vs grid view). The ones I'm looking at currently fail 1.4.1 Use of Color because they're just colour inverse versions of each other - it's impossible to tell which state corresponds to which option.
  44. zakim-robot
    @zakim-robot
    Jul 18 23:59
    [garcialo] ah, one of my least favorite guidelines