Archive index

A11y Slackers Gitter Channel Archive 22nd of August 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Aug 22 05:36
    [thedaviddias] Hi! May I ask why we don't have different channels for different subjects? :)
  2. [rawaljohn] I'm glad to join this group
    Hey Everyone
    https://www.behance.net/rawaljohn
  3. zakim-robot
    @zakim-robot
    Aug 22 05:44
    [caesar] @thedaviddias but we do? #native-mobile #aria-patterns #assistive-tech just to name a few. Just click "Channels" on the left menu to see them all...
  4. zakim-robot
    @zakim-robot
    Aug 22 06:02
    [thedaviddias] @caesar my bad, didn't use Slack for 2 months and I already forgot how to use it :)
  5. zakim-robot
    @zakim-robot
    Aug 22 07:36
    [avraam] https://www.avraammavridis.com/blog/Improve-Website-accessibility-using-the-Ambient-Light-API
  6. zakim-robot
    @zakim-robot
    Aug 22 10:46
    [karlgroves] @thedaviddias there are a number of other channels. Click on ‘Channels’ to see a full list
  7. [karlgroves] Oops. @caesar beat me
  8. Anastasia Lanz
    @anastasialanz_twitter
    Aug 22 14:15
    Hi everyone. I have a question in regards to using VoiceOver on a Mac and closing out a modal. If interacting with a modal, would one use the ESC key to close out of a modal when VoiceOver is turned on?
  9. zakim-robot
    @zakim-robot
    Aug 22 14:26
    [tyronem] One definitely would. Even if they’re not using VO.
  10. Anastasia Lanz
    @anastasialanz_twitter
    Aug 22 14:35
    ESC key works fine using keyboard controls only. In my case it's not working on the new MacBook Pro with the ESC key in the touch bar when VO is turned on.
  11. zakim-robot
    @zakim-robot
    Aug 22 14:36
    [rselzer] if you're pressing a key in the touch bar and not on the physical key board, it may be sending a different keycode to the browser than the physical esc, so the javascript for the modal may need to be updated to listen for that new keycode as well
  12. Anastasia Lanz
    @anastasialanz_twitter
    Aug 22 14:37
    That makes sense. Thanks! I will try it out.
  13. zakim-robot
    @zakim-robot
    Aug 22 14:47
    [cmegown] this may be handy: http://keycode.info/
  14. [cmegown] i'm assuming keys in the touch bar will report their keycodes
  15. Anastasia Lanz
    @anastasialanz_twitter
    Aug 22 14:48
    It's the same keycode as esc..
  16. hmm
  17. zakim-robot
    @zakim-robot
    Aug 22 14:50
    [rselzer] the key press events have 2 properties for the keycode- event.which and event.keyCode back in the day I remember there were sometimes discrepancies between the two. Without seeing the modal's actual code that's what I'd guess at next
  18. zakim-robot
    @zakim-robot
    Aug 22 18:12
    [spell] Howdy, Gang! I'm sure this gets asked a lot, but do any of you have any recommendations for a solid and accessible carousel plugin?
  19. [rselzer] http://kenwheeler.github.io/slick/
  20. zakim-robot
    @zakim-robot
    Aug 22 18:17
    [spell] LOL! Thanks, @rselzer . That is the one I was trying to avoid using. I'm running a scan on a site, and keep running into an issue with Slick generating aria-describedby with no corresponding ID's present. Using 1.6, though and see it is up to 1.7, maybe they fixed it?
  21. [tyronem] I think I found the github issue that tells you to remove that one line of code. But I had the same problem - however, this is still much better than most of the sliders I’ve come across.
  22. [rselzer] yep! I'm familiar with that issue. You can use Slick's init callback and a setTimeout to removeAttr the various ADA things your scan is complaining about. I tend to remove the describedby and role attribs
  23. [rselzer] you have to use the setTimeout becase Slick sets all its ADA stuff after it fires the init event so you need to wait for it to do the stuff before you undo the stuff, this way you can still have the keyboard functionality without the misused attribs
  24. [ruijdacd] You can always check Swiper
  25. [spell] Thanks, gang. @rselzer Okay, do you know if the issue is still present in 1.7? Will do as recommend if it is not.
  26. [spell] @ruijdacd Thanks. Will check it out.
  27. [rselzer] not sure if they've changed how they do ADA attribs in 1.7, sorry
  28. zakim-robot
    @zakim-robot
    Aug 22 18:22
    [spell] No worries, @rselzer. I'll run it now and report back.
  29. zakim-robot
    @zakim-robot
    Aug 22 18:35
    [marcysutton] I'm sure Ken would be open to feedback on Slick, too. If you get any friction let me know and I'll give him a hard time (he can take it) :)
  30. zakim-robot
    @zakim-robot
    Aug 22 18:51
    [spell] Thanks, @marcysutton. Well, I'll be darned, it looks like there are some great a11y improvements between 1.6 and 1.7. The issue surrounding aria-describedby is now gone. When in doubt, see if an upgrade is available. :) Thanks, all!
  31. zakim-robot
    @zakim-robot
    Aug 22 19:24
    [seankeegan] I have been going round and round with colleague as to accessibility testing environments that boils down to this question - is there a major difference in screen-reader+browser combinations in Windows 8.1 vs. Windows 10? In other words, will I get different results from JAWS+IE11 or NVDA+Firefox in Windows 8.1 vs. Windows 10 environment?
  32. [garcialo] have you tested it out?
  33. [seankeegan] Colleague has taken position that we should be testing all screen-reader+browser combinations from Windows 7 through Windows 10 as changes in the OS impact website accessibility.
  34. zakim-robot
    @zakim-robot
    Aug 22 19:31
    [seankeegan] I have tested a few sites and not noticed anything significant. My position is the major factor to address is the screen-reader and browser versioning, not so much the Windows OS version (unless dealing with macOS). Open to other perspectives if those testing have found differences in how screen-readers+browsers function together in different Windows OS environments.
  35. [seankeegan] The only real impact I can see is if the screen-reader version you want to test with is not supported in the OS environment.
  36. zakim-robot
    @zakim-robot
    Aug 22 20:07
    [sylvia] There were some issues with Windows 10 in the early days, but they seem to have mostly been resolved.
  37. [sylvia] I might do multiple OS tests for an in-depth review of a native Windows application, but not for a browser-based application or website. Seems like a lot of duplicative effort
  38. zakim-robot
    @zakim-robot
    Aug 22 20:22
    [car] On Windows 10 you could also try Narrator+Edge. :)
  39. [car] (Just to complicate things <grin>)
  40. [karlgroves] @seankeegan: Just to play Devil’s Advocate, what do you plan on doing if something is broken on a specific combination?
  41. [seankeegan] @karlgroves Blame the web-a11y slack channel…
  42. [karlgroves] Blame Michael Spellacy in particular
  43. [seankeegan] =D
  44. [spell] @karl Wait? WUT? What did I do? LOL!
  45. zakim-robot
    @zakim-robot
    Aug 22 20:30
    [spell] Oh, you guys. Heh.
  46. [spell] @karlgroves made me do it.
  47. zakim-robot
    @zakim-robot
    Aug 22 20:37
    [seankeegan] @karlgroves More seriously - I am not sure what plan is if specific combo is broken. I am recommending testing with current plus 1 version back, develop according to standards, and then set up complaint/feedback process. Testing with multiple SR+browsers across multiple Windows OS’s is not going to provide any clarity, particularly for basic (non-application) website.
  48. [spell] Quick question while I am here (and being falsely accused), aria-required and required, are we at a point yet where we can safely just use the required attribute or is aria-required still, er, required? :)
  49. [ghanek] @seankeegan are they hoping to be able to verify complete accessibility, or is your testing intended to be preventing inaccessibility? Because if the first, you're gonna need a bigger timeline.
  50. [fstorr] @spell The HTML required attribute is a mess and I wouldn’t recommend using it. I’d stick with aria-required. Peter-Paul Koch has a three-part series on the mess that is form validation, including why to not use required. It starts here: https://medium.com/samsung-internet-dev/native-form-validation-part-1-bf8e35099f1d
  51. zakim-robot
    @zakim-robot
    Aug 22 20:42
    [spell] @fstorr Gosh, I love this place. Thank you for sharing.
  52. [fstorr] @spell Have fun—and despair—reading that :)
  53. zakim-robot
    @zakim-robot
    Aug 22 20:48
    [seankeegan] @ghanek yeah…exactly. I think they want to verify complete accessibility.
  54. zakim-robot
    @zakim-robot
    Aug 22 21:04
    [karlgroves] @seankeegan I agree with current version & 1 version back. But IMO if something is b0rked it might be necessary to track down the cause and, if it is an AT bug, you have to determine whether to just punt and document it as such
  55. [ghanek] Does anyone have an opinion to share here or privately DM about the ITIC org or their VPAT template (http://www.itic.org/policy/accessibility)? Looks to be a lobbying group.
  56. zakim-robot
    @zakim-robot
    Aug 22 21:13
    [seankeegan] @karlgroves agreed. good point.
  57. [seankeegan] @ghanek yes, they are advocacy and policy group. my opinion on current VPAT model is that it has become extension of marketing and many lack substance.
  58. zakim-robot
    @zakim-robot
    Aug 22 21:22
    [seankeegan] Haven’t made decision on VPAT 2.0 beta version. A lot more detail, but still going to depend on who completes the form. Will also require person reviewing to be more literate on accessibility standards.
  59. zakim-robot
    @zakim-robot
    Aug 22 21:33
    [arturo] :wave: everyone
  60. zakim-robot
    @zakim-robot
    Aug 22 21:46

    [davidakennedy] Hi all! Struggling with something…

    My markup on a typical archive page in WordPress: 

    <a href="/post-title/" class="post-thumbnail" aria-hidden="true">     <img src="/post-image.jpg" alt="Post Title"> </a> <a href="/post-title/"><h1 class="post-title">Post Title</h1></a>

    I recently learned that aria-hiddenon focusable elements means they’re still focusable. So a user could still tab to the link, but not hear anything via assistive technology. Which is probably worse than announcing the double links. Any way to handle this, or should I just settle for the double links? Thanks!

  61. [marcysutton] You have a few options–the easiest is to wrap both the img and the h1 in an anchor instead of separate links.
  62. [marcysutton] Or, you could render the first one unfocusable with tabindex="-1", so it isn't a "ghost link" with aria-hidden stripping the information away when you focus it.
  63. zakim-robot
    @zakim-robot
    Aug 22 21:53
    [davidakennedy] Ah, totally forgot about tabindex="-1". Both seem reasonable here. :) Thanks @marcysutton!
  64. [rselzer] I would avoid breaking the natural functionality of an html tag if you can help it
  65. [rselzer] also in general 2 links that go to the same place riht beside each other in the DOM isn't ideal for ADA
  66. [spell] Is it possible to add h1 as child of a?
  67. zakim-robot
    @zakim-robot
    Aug 22 21:59
    [davidakennedy] This is for a starter theme in WordPress. My pattern outputs the code for the link around the image or just the image with no link around it.
  68. [davidakennedy] So it can be used in man contexts.
  69. [davidakennedy] Although, 9/10 it’s near a post title link.
  70. zakim-robot
    @zakim-robot
    Aug 22 22:04
    [davidakennedy] @spell So not really… in this case.
  71. zakim-robot
    @zakim-robot
    Aug 22 22:11
    [davidakennedy] But maybe I can rethink how the code is patterned… may be able to better approach things that way. Rather than break a tag.
  72. [rselzer] wrapping your h1 and img all in a single a tag is probably the way to go
  73. [rselzer] or whatever level h you're using
  74. [spell] @davidakennedy Sure, just thought I'd throw it out there. Sometimes it is easiest approach. :)