Archive index

A11y Slackers Gitter Channel Archive 11th of September 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 11 01:04
    [clairewebber] Hi all - wondering if anyone has any suggestions on a game or activity to do at the beginning of an accessibility and inclusive design workshop to get people engaged in the topic? Looking for something engaging / fun to get people involved. Any suggestions appreciated :)
  2. zakim-robot
    @zakim-robot
    Sep 11 12:00
    [raquel] Giving myself a little shoutout here: https://twitter.com/raqueldesigns/status/907210725789233152
  3. [raquel] ‘d love to give this talk more often, so please let me know of venues where I can do that, and give me your thoughts for improvement!
  4. zakim-robot
    @zakim-robot
    Sep 11 12:43
    [goncaloreis] Hi Guys, someone knows a Web acessibility checker where we can check if the aria and roles that we are using its correct ?
  5. zakim-robot
    @zakim-robot
    Sep 11 13:10
    [lauraf] to varying degrees of success: bookmarklet that runs on the page http://whatsock.com/training/matrices/visual-aria.htm
    Hi Guys, someone knows a Web acessibility checker where we can check if the aria and roles that we are using its correct ?
  6. [lauraf] NU validator https://validator.w3.org/nu/
    Hi Guys, someone knows a Web acessibility checker where we can check if the aria and roles that we are using its correct ?
  7. [lauraf] But only humans can really say if your div you have coded as a button or an accorion is actually a button or accorion. Which role are you looking for validation on?
    Hi Guys, someone knows a Web acessibility checker where we can check if the aria and roles that we are using its correct ?
  8. zakim-robot
    @zakim-robot
    Sep 11 13:16
    [tink] @lauraf axE or Tenon are both worth trying.
  9. [tink] But tools are limited in their ability to detect when the wrong roles and attributes have been used.
  10. [tink] They can tell when a role has been incorrectly applied (for example because it duplicates the implicit role of an element), or when an attribute has been used incorrectly (for example when aria-labelledby points to a non-existent idref), but that's about it.
  11. zakim-robot
    @zakim-robot
    Sep 11 15:50

    [kara.franco] Hi everyone! I have a client that would like to implement Skip Navigation Links on their site's interior pages for their users who use Browesaloud and other screenreaders.

    I found some information around about how to add the links (from Webaim: http://webaim.org/techniques/skipnav/ ), however wanted to know if anyone has some best practice or advice before I start diving in implementing the links.

    Any insight is super appreciated!

  12. [eric] I would say WebAIM’s advice is sound. My opinion is to keep the skip link content area itself as short and to the point as possible, and link to the main content of the page as directly as possible
  13. zakim-robot
    @zakim-robot
    Sep 11 15:56
    [higley] I think the CSS to show and hide the links may be a little outdated. I’d use this: 
    .skip-link {     clip: rect(0 0 0 0);     height: 1px;     margin: -1px;     position: absolute;     overflow: hidden;     width: 1px; }  .skip-link:focus {     clip: auto;     height: auto;     margin: 0;     position: static;     overflow: visible;     width: auto; }
  14. [rselzer] if you inspect webaim.org itself, their skip link is really good. As soon as you hit webaim.org press tab to focus their skip link and it'll slide out from the top of the page
  15. zakim-robot
    @zakim-robot
    Sep 11 16:03

    [rselzer] here's the SCSS I use to emulate that 

    #skip, .skip-to-content {     font-size: 2em;     padding: .2em .4em;     background-color: #fff;     color: #000;     position: fixed;     z-index: 999999999999;     top: 0px;     left: .8em;     display: inline-block;     @include animated();     transform: translateY(-100%);      &:focus     {         transform: translateY(0);     } }

    I like to make it super big so that partially sited users will see it when using their keyboard to focus it

  16. zakim-robot
    @zakim-robot
    Sep 11 17:22
    [cmegown] would y'all consider accounting for text direction (ltr/rtl) to be an important accessibility consideration?
  17. [cmegown] i'm noticing it's really breaking the designs of some popular sites
  18. [kara.franco] Thank you so much everyone! I will take this useful advice and run with it!
  19. zakim-robot
    @zakim-robot
    Sep 11 18:22
    [spell] Hi Folks! Noticed that primary play button on Youtube has no label. A) Any workarounds? and B) Is the issue logged in a tracking tool somewhere? I may need to cite it. Thnaks!
  20. [eric] Adrian Roselli wrote about it: http://adrianroselli.com/2017/08/inaccessible-youtube-embeds.html
  21. [eric] >Unfortunately I don’t have a public tracker to provide for you, however, as you mentioned this has been fixed with the new UI recently pushed.
  22. [cmegown] @eric beat me to it
  23. [spell] Thank you, @eric (and Adrian Roselli)
  24. [spell] You too, @cmdalbem! :)
  25. [eric] @cmegown not 100% accessibility related, but here’s a really good post about design considerations for implementing Arabic/RTL designs: https://medium.freecodecamp.org/designing-for-the-arab-user-basic-arabic-ux-for-business-6ff29d4c7c60
  26. zakim-robot
    @zakim-robot
    Sep 11 18:27
    [eric] I think some of the content around mirroring and icons are pertinent, at least in terms of preserving legibility
  27. [cmegown] ahh excellent link, thanks man
  28. [spell] Hmmm, @eric, is there a specif way to access the new YT UI? The code my colleque is using still appears to render a play button without the proper labeling: <iframe src="http://www.youtube.com/embed/6uw\_agYpo9c?playsinline=0&rel=0&showinfo=0&controls=2&modestbranding=1&autohide=1" frameborder="0" width="300" height="169"></iframe>
  29. zakim-robot
    @zakim-robot
    Sep 11 18:35
    [eric] not sure off the top of my head - I’ll ask around
  30. [cmegown] @eric what i'm basically getting from that article is that don't do anything stupid and weird with your content and just make sure your designs don't get all funky if you toggle ltr/rtl
  31. [eric] that’s my takeaway as well - I’ve also read that you need to accommodate for flexibility in certain areas like primary navigation, where a translated word might be a lot longer than its English equivalent
  32. [cmegown] true, i suppose if anything this is more relevant to i18n than a11y
  33. zakim-robot
    @zakim-robot
    Sep 11 18:40
    [spell] @eric - it appears to be the querystring, when I remove &controls=2, the Play label is present.
  34. zakim-robot
    @zakim-robot
    Sep 11 21:49
    [jonathantneal] What is the name for the black or white color we give text when we give it contrast from the background? The … contrasting black and white color?
  35. zakim-robot
    @zakim-robot
    Sep 11 22:10
    [marcysutton] foreground color?
  36. [ugi] text stroke?
  37. [marcysutton] I could go on into color theory.... lol
  38. [ugi] (joy/allthethings emoji)
  39. zakim-robot
    @zakim-robot
    Sep 11 22:17
    [marcysutton] text-shadow? Not enough details to answer :)
  40. zakim-robot
    @zakim-robot
    Sep 11 22:47
    [conley] what @ugi said
  41. [marcysutton] The new aXe Chrome extension is out: https://twitter.com/marcysutton/status/907372962101182465
  42. Jonathan Neal
    @jonathantneal
    Sep 11 23:40
    marcysutton, ugi, conley, it's like when you use either black or white to achieve a sufficient contrast ratio. I can simulate the effect in CSS here: https://mobile.twitter.com/jon_neal/status/907362800867135488
  43. I just don't know what you call the color. It's ... the inverted grayscale color fully contrasted.
  44. And it seems like something that would have a name.
  45. zakim-robot
    @zakim-robot
    Sep 11 23:48
    [fionatay] opacity?
  46. zakim-robot
    @zakim-robot
    Sep 11 23:57
    [ugi] oh, I get it now. It is a function that generates a contrasting color, but with a high bias, so that it only outputs black or white. I think, that doesn’t have a name of it’s own.. a high-biased-contrast-color maybe? :)