Archive index

A11y Slackers Gitter Channel Archive 13th of July 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jul 13 01:34
    [car] @caesar WCAG 2.1 (draft - not final - but sounds like good advice...) SC 1.4.11 Graphics Contrast says ratio of 4.5:1 for 1 - 2 pixels, or 3:1 for >= 3 pixels: https://rawgit.com/w3c/wcag21/master/guidelines/#graphics-contrast
  2. zakim-robot
    @zakim-robot
    Jul 13 01:54
    [caesar] @car perfect, thanks.
  3. zakim-robot
    @zakim-robot
    Jul 13 08:21
    [callumacrae] i've been playing with the idea of making a website which simulates a screen reader where you can navigate around a hidden page while simple instructions (how to use the screen reader) are displaying on screen in order to educate people—primarily web developers—what it's like to use a screen reader. I couldn't find anything like it recent online. One thing I'm stuck with is which screen reader to simulate—while JAWS seems to be the most widely used, most front-end developers I've met seem to use Macs, so VoiceOver might be a better choice for them (it's also what I'm most familiar with - no idea how to navigate using JAWS). Anyone have any thoughts?
  4. [callumacrae] I guess ideally it would detect which OS the user is using and simulate either JAWS or VoiceOver depending on their OS
  5. [callumacrae] also, before i start, is this even a good idae?
  6. zakim-robot
    @zakim-robot
    Jul 13 10:05

    [hampelusken] That sounds awesome. I'd go for Jaws, since we want to show how it works for most users, not what rich it teams with MacBooks experience ;)

    I'm in a project that's building a browser plugin that will simulate different disabilities, like motor, cognition, dyslexia etc. www.funkify.org. Maybe we could work together on the screenreader simulator if you're interested? Or integrate what you build into the simulator to spread it?
    i've been playing with the idea of making a website which simulates a screen reader where you can navigate around a hidden page while simple instructions (how to use the screen reader) are displaying on screen in order to educate people—primarily web developers—what it's like to use a screen reader. I couldn't find anything like it recent online. One thing I'm stuck with is which screen reader to simulate—while JAWS seems to be the most widely used, most front-end developers I've met seem to use Macs, so VoiceOver might be a better choice for them (it's also what I'm most familiar with - no idea how to navigate using JAWS). Anyone have any thoughts?

  7. zakim-robot
    @zakim-robot
    Jul 13 10:15
    [callumacrae] haha my thinking was more that I don't want to inspire people to test their sites using a screen reader and then tell them that actually everything they've just learned control-wise won't work for them
  8. [callumacrae] that plugin looks super interesting. i just downloaded it and I can't figure out how to get it to work (probably because I can't speak swedish), but I like the idea. definitely interested!
  9. zakim-robot
    @zakim-robot
    Jul 13 13:12
    [donnabungard] @hampelusken, do you know when you'll have an english translation ready for that plugin? Id love to learn more!!
  10. zakim-robot
    @zakim-robot
    Jul 13 13:18
    [deconspray] @callumacrae As the topic of a screen reader simulator came up recently for me, I couldn't help but to jump into this discussion with a devil's advocate counterpoint. Why create a screen reader simulator (esp. for devs on Mac) when performing the basic actions is fairly simple key combination away? As VoiceOver is pre-installed on Macs, and have the benefit of a visual captions panel if the voice cannot be understood, why create what is fairly available already? Unless you believe there is a gap between no knowledge and basic skills. I do believe "showing" or "demoing" a screen reader is very helpful to newbies, to get them over the initial fear.
  11. [callumacrae] @deconspray fair point - and ideally, the goal for this simulator is for people to think "oh, it's not that tricky" and try out the real screen reader. The thing for me is that I want the instructions on the page to react to what the user is doing - for example, it'll say "press VO+shift+down to enter the web content area" and then once that's done it'll read out whatever a screen reader will read out, and the instructions on the screen will change to "great! now you can use VO+left or VO+right to navigate around the page. Navigate around until you find the second heading element", and then once you've found it the instructions will change once again
  12. [callumacrae] I'm not aware of any way to detect where a real screen reader is focused in the page
  13. [deconspray] @callumacrae Agreed. Are you planning on testing this, maybe simulator and VO with devs to see the benefit or impact?
  14. [callumacrae] using voiceover shortcuts because I don't know the JAWS equivilants yet
  15. [callumacrae] Not really sure yet. Very early idea, figured I'd get feedback before I did too much
  16. zakim-robot
    @zakim-robot
    Jul 13 13:23
    [deconspray] @callumacrae Great thinking. Good luck with your endeavour and keep this channel posted. Interesting stuff.
  17. [callumacrae] anyone know of any good videos of people using JAWS? With VoiceOver I just read some article and then used VoiceOver for a week to figure it out, but JAWS seems like a pretty significant investment
  18. zakim-robot
    @zakim-robot
    Jul 13 13:28
    [callumacrae] alternatively, anyone willing to contribute if I implement it with VoiceOver shortcuts and make it possible to add other screen readers?
  19. powrsurg
    @powrsurg
    Jul 13 13:37
    https://twitter.com/Kevin_Church/status/885111508958576645
  20. zakim-robot
    @zakim-robot
    Jul 13 13:39
    [tyronem] thanks for sharing that @powrsurg. That’s fantastic.
  21. [car] @callumacrae Here's the WebAIM tutorial on using JAWS: http://webaim.org/articles/jaws/
  22. powrsurg
    @powrsurg
    Jul 13 13:42
    I assume that's American Sign Language :p
  23. zakim-robot
    @zakim-robot
    Jul 13 13:42
    [callumacrae] @car that looks like a good resource, thanks! the 40 minutes trial is useful too
  24. [callumacrae] > It has been brought to our attention that the terms of use for the JAWS trial specifically prohibits testing of web pages.
  25. [callumacrae] oh…
  26. [car] Oh, man! They are shooting themselves in the foot...
  27. powrsurg
    @powrsurg
    Jul 13 13:43
    I'm not sure if everyone's system shows a description of the link (gitter did). For those that didn't it was a video of an actor at Disneyland dressed like Captain America sing sign language to communicate with a guest.
  28. Chris O'Brien
    @a11ycob
    Jul 13 15:27
    Anyone care to share their thoughts regarding app development (iOS) using React-native vs Swift? Any drawbacks from an A11Y perspective?
  29. zakim-robot
    @zakim-robot
    Jul 13 15:56
    [karlgroves] Hey a11y friends, can i get an RT on this for visibility?
    https://twitter.com/karlgroves/status/885210306909278208
  30. [tyronem] Done
  31. [karlgroves] I’m hoping WebAIM does another survey soon.

  32. [donnabungard] Odd question for ya's.
    Someone came to me saying that the H-Tags on a site only had room visually for x-many characters so titles such as More Information About Cats was abbreviated to More Info. Obviously the later isn't very descriptive for non-sighted users.

    The question is, is there a best practice methodology to provide additional heading information for non sighted users without compromising the sighted UX?

  33. zakim-robot
    @zakim-robot
    Jul 13 16:04
    [karlgroves] “H-Tags”? Headings? Like H1, H2, etc?
  34. [donnabungard] yes

  35. [karlgroves] “only had room visually for x-many characters”

    That’s not true. You can wrap all of the text on a site with an H1 if you wanted to

  36. [karlgroves] Are you referring to a specific site?
  37. [karlgroves] Where the CSS dictates that?
  38. zakim-robot
    @zakim-robot
    Jul 13 16:10

    [donnabungard] I understand that H1's etc don't have a max-character count but in the design they need something short and sweet for visual balance.

    He's trying to find a balance point between being Accessible and not telling a client that they need to completely rethink 80% of the headers on a large site.

    He's trying to find a balance point to help him guide the marketing team.

    My gut reaction was "well it's on the writers" but he was wondering if there was another way to add more valuable info for non-sighted users without layout / site-wide complete re-writes.

    Am I being clear?

  39. zakim-robot
    @zakim-robot
    Jul 13 16:43

    [karlgroves] @donnabungard something like this?

    <h2 id="topicHeading1">Topic Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <a href="/path/to/article" aria-labelledby="blabel1 topicHeading1 "> <span id="articlelabel1">More Info</span> </a>

  40. [donnabungard] Thank you for looking into it!!
    Sorta close but we'd need the h2 tag to have a more descriptive option, not the href tag.
  41. zakim-robot
    @zakim-robot
    Jul 13 17:03
    [kivi] I would claim that "More info", as an H1, isn't particularly descriptive for sighted users either.
  42. [kivi] The design people need to get with the content people and figure this out for everyone.
  43. [karlgroves] I agree with Kivi, that users in general want the whole content too
  44. [donnabungard] OK.. so my initial gut reaction of push it back to the authors was right-on.
    go me!
  45. [donnabungard] hehehe
  46. [donnabungard] sorry.... need more coffee
  47. zakim-robot
    @zakim-robot
    Jul 13 18:51
    [marcysutton] Yes, I'd argue that clear heading text would affect more than just non-sighted users.
  48. zakim-robot
    @zakim-robot
    Jul 13 19:15
    [quidkid] hey guys are parallax websites accessible? I found an article against it so I had included it the design accessibility checklist and things to be mindful
  49. [quidkid] but getting backlash since they want parallax
  50. [virtualalex] It depends probably
  51. [virtualalex] Certainly can be
  52. [quidkid] @virtualalex thanks for replying so fast! do you have an example of an accessible parallax site?
  53. [virtualalex] Hm now sorry I do not… But making sure all relevant content is accessible isn’t mutually exclusive with a parallax website
  54. [quidkid] i included in the design checklist to be wary of exaggerated parallax and scroll jacking
  55. [quidkid] we have done several sites that used scroll jacking
  56. [quidkid] is scroll jacking accessible?
  57. [virtualalex] Hm… I’ll fully admit that I am not an expert here, I actually came here to ask a question myself
  58. [virtualalex] but as long as you aren’t interfering with a users ability to access content, it is accessible.
  59. [virtualalex] Can the website still be used with keyboard only?
  60. [virtualalex] Can it be used with a screen reader only?
  61. [virtualalex] Maybe post your site in here so we can take a peek
  62. [quidkid] @donnabungard We have some more info buttons to reveal more text so it says More info visually but then we have some inline text that is thrown off screen so the screenreader can see say More info about cats
  63. zakim-robot
    @zakim-robot
    Jul 13 19:20
    [marcysutton] How about giving users an option to turn it off?
  64. [marcysutton] https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
  65. [marcysutton] Since that article came out prefers-reduced-motion has been introduced by Apple, you could potentially use the media query for OSX and iOS users to opt out https://webkit.org/blog/7551/responsive-design-for-motion/
  66. zakim-robot
    @zakim-robot
    Jul 13 22:26
    [cyns] @caesar thank you, that's good info. My question is less about user experience, and more about creating a clear and testable compliance requirement for my product team.
  67. zakim-robot
    @zakim-robot
    Jul 13 23:27
    [quidkid] @marcysutton thank you so much!!
  68. zakim-robot
    @zakim-robot
    Jul 13 23:35
    [quidkid] @marcysutton that’s really cool but what about people viewing the Apple website that are on Windows or other platforms? or does the Apple site just remain inaccessible?
  69. [marcysutton] Correct...it would only provide an affordance for Apple users, which isn't enough. A more holistic approach would be to put a custom toggle button on your site that lets users turn animations off.
  70. zakim-robot
    @zakim-robot
    Jul 13 23:40
    [quidkid] @virtualalex I appreciate your reponses though! i was speaking more generally. All the sites that are scroll jacked and parallax are not built with accessibility in mind. But i feel like it would be difficult to make it screenreader friendly. or maybe i’m biased because I don’t like scroll jacked websites plus i’m not sure how to build them myself that I’m trying to decrease the amount of designs built with that and piggybacking on accessibility as my cause XD but i do feel a bit motion sick with those kind of sites
  71. [jiatyan] @michiel or anyone familiar with WAI-ARIA Authoring Practices. On accordions, what's the recommended pattern for within an accordion? If a keyboard tab lands on the first accordion header, where should the next tab send it: 2nd accordion header or links beyond this accordion set?