Archive index

A11y Slackers Gitter Channel Archive 11th of May 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    May 11 07:12
    [michiel] +1 to making the buttons at least do something if you have to keep them.
  2. [michiel] As for the maxlength issue: I’ve only ever noticed it once. And it only became apparent after I registered and tried to login… The password field on the login page had a maxlength of 10 while the password field in the registration process had none. That was fun.
  3. zakim-robot
    @zakim-robot
    May 11 08:56

    [jpdevries] I've been exploring how to introduce our students to the process and concept of "user stories" and am wondering if anyone has any favorite resources on writing and testing user stories. I also keep daydreaming of a repository where people can share and contribute to common user stories, so people can easily reference them without writing their own.

    I've written a few myself, I'll post them as a thread.

  4. zakim-robot
    @zakim-robot
    May 11 10:39
    [alastc] @jpdevries it depends what you are trying to achieve with these? I can see benefit from an educational point of view, but for feature development I have a lot of reservations.
  5. zakim-robot
    @zakim-robot
    May 11 11:30
    [jpdevries] @alastc the goal is to consider various user stories in the forefront of the design process and define some success criteria the interface should achieve. What kind of reservations?
  6. [alastc] Mainly that it separates accessibility from the features as they are built. Being accessible is an attribute of the interface, it is not a separate feature, it needs to be part of ‘done’. If you have separate cards/stories for accessibility purposes, they tend to be the first dropped. If it is integrated and considered part of done you have a better chance of getting it in.
  7. [jpdevries] Ah I see. Perhaps instead of "as a user I should" it should be "as a user I must" ;)
  8. zakim-robot
    @zakim-robot
    May 11 11:37
    [alastc] More that each feature should be usable in several ways. E.g. Do the demo using keyboard only, make attributes for screen readers a check for developers and QA, test layouts at 200% zoom.
  9. [alastc] but these apply to all, they aren’t separate.
  10. [alastc] it does require that everyone is on the same page for accessibility, which generally needs enlightened management and some training.
  11. [alastc] I talked about this here, if you have a few mins, in the first half: https://www.youtube.com/watch?v=NrD5MlYcAZ8
  12. [jpdevries] Certainly. I don't want them to come across as separate things, but rather all pieces of a successful and accessible user experience, but I can see how they come across as being separated
  13. [jpdevries] cool i'll check it out. thanks!
  14. zakim-robot
    @zakim-robot
    May 11 11:51
    [jpdevries] I really like the point about accessibility needing to happen at the beginning. I think that as designers and developers we live to solve problems. We lose sleep when we can't solve a problem, and it may affect our ego as well (sob emoji). But one thing I'm starting to realize, is accessibility isn't an algorithm. You might not solve it alone, and that is OK. There' a community you can leverage. You may be better off hiring disabled people for consulting and testing than spending dozens of hours trying to solve something yourself. And you aren't a lesser designer or developer for doing so.
  15. zakim-robot
    @zakim-robot
    May 11 13:53
    [carolinelindstrom] Hi all :wave:, new here and wondering if anyone has any tips on nice articles/posts (or own stories) on how companies work to improve accessibility? I recently read this one from Dropbox https://blogs.dropbox.com/tech/2017/04/creating-a-culture-of-accessibility/ , which I thought was great!
  16. zakim-robot
    @zakim-robot
    May 11 14:00
    [dean] Will be some posts on the GDS blog I’m sure… skim reading… https://accessibility.blog.gov.uk/2016/12/02/how-to-make-accessibility-easier-for-service-teams/ ?
  17. [dean] https://accessibility.blog.gov.uk/2016/05/16/what-we-mean-when-we-talk-about-accessibility-2/
  18. zakim-robot
    @zakim-robot
    May 11 14:11
    [spell] Hypothetical question. Let's say Site A pulls in (i.e., scrapes, makes ajax call, whatever) a users interface from Site B. When the UI is pulled in from Site B, it is then styled up to create a seamless experience with Site A, etc. That's swell for visual users, but what of disabled users? Where does the responsibility of accessibility lay? I would say Site A, because if the UI is being manipulated to create a seamless experience then is obliged to handle everything else in addition to that, creating a truly seamless experience for all.
  19. zakim-robot
    @zakim-robot
    May 11 14:24
    [sethkane] Site A. We have this issue all the time with 3rd party vendors and content distrubuters. We need to either make sure what they are giving us accessible content, widgets, etc... or make the decision to not use them. I do know that the Airlines had this issue with advertisements and maybe @deconspray can speak to what they did to make sure their content from 3rd parties were compliant.
  20. zakim-robot
    @zakim-robot
    May 11 14:38
    [deconspray] @spell @sethkane Site A. Even if you where to present in an iframe and the source is external, it's still accessible from Site A (not linked to). And even then you should let users know they're going to an external site. For 3rd-party ads on our site being presented via APIs, we mandated accessibility compliance from the source.
  21. [car] @carolinelindstrom http://www.accessiq.org/news/features/2012/07/making-accessibility-part-of-culture-change-its-all-in-the-attitude
  22. zakim-robot
    @zakim-robot
    May 11 14:45
    [spell] @sethkane @deconspray Right and there is no iframe here. This is the end DOM result I'm picturing, so even less excuse for Site A to not do right by accessibility.
  23. [spell] @deconspray That's interesting about letting people know about leaving site when entering iframe. Do you have an example of that?
  24. zakim-robot
    @zakim-robot
    May 11 14:56
    [deconspray] Check out united.com, southwest.com. This treatment is mandated by the DOT, not a WCAG specification.
  25. zakim-robot
    @zakim-robot
    May 11 15:37
    [spell] Thanks, @deconspray
  26. zakim-robot
    @zakim-robot
    May 11 16:38
    [deathbear] Hi I have a topic I want to get some different point of views on. So… there’s an effort to get programmers to consistently write accessible code where I work. And you’d think just writing good html would be easy, but yadda yadda yadda nope.
  27. [deathbear] One thing that’s come up is when writing modular code, where everything is in small components, like say a react project, to use aria on the wrappers and have that be the way you can write your tests, because css classes can change and so can html
  28. [deathbear] but if I make a component and it’s a menu or a gallery, it’ll always be that
  29. [deathbear] which I thought was an interesting idea, but it would add a lot of aria to an app and the consensus I see online is “don’t put a ton of aria in your apps”
  30. [marcysutton] Can you add an accessibility test run a requirement of committing code?
  31. [deathbear] absolutely
  32. [deathbear] infact I’m teaching people how to hook up axe right now
  33. [deathbear] but this came up as a weird “why can’t we do this” thing
  34. [marcysutton] Whether or not to use ARIA depends on the specific component and what you're trying to achieve with it IMO
  35. [deathbear] yeah, also, it’s not really something you just throw around
  36. [deathbear] it might actually make the site worse
  37. [kimberlymunoz] Using aria for testing hooks seems odd. I’d use data-attributes for that because you don’t want to use ARIA where you don’t need it and you definitely want to separate your accessibility and testing concerns
  38. [marcysutton] Nope. It's an advanced topic to be reached for only after you've tried the basics
  39. [deathbear] and that’s not our goal
  40. zakim-robot
    @zakim-robot
    May 11 16:44
    [deathbear] @kimberlymunoz that’s a really good point
  41. [kimberlymunoz] data-qa=menu is my favorite pattern for that. It’s super clear and signals that it hooks into tests. And I think it works for everything IE8+ (older browsers ignore it)
  42. [deathbear] that’s perfect and I can’t believe that wasn’t obvious to me
  43. [deathbear] this is my favorite slack
  44. [deathbear] ya’ll seriously are the best
  45. zakim-robot
    @zakim-robot
    May 11 16:50
    [marcysutton] Agreed data attributes are better for testing hooks. Still doesn't quite help developers commit accessible code though. That's more of a process thing. I'd recommend using a combination of a11y testing tools like aXe and eslint-plugin-jsx-a11y to get developers more involved in fixing their own code.
  46. [deathbear] yeah I’m going to do a little workshop with everyone next week on setting up aXe and what tools they can use in the browser or as part of a linter
  47. [deathbear] It’s hard because it’s a team that doesn’t always write tests either.
  48. [deathbear] I have faith though that with training we can get everyone on board
  49. [deathbear] it’s a lot of “oh a11y, that’s important…. I should learn that someday”
  50. [deathbear] and then we have meetings to teach people and no one shows up
  51. [marcysutton] Sounds like the perfect time for training!
  52. [marcysutton] Can you make it a requirement for them to show up and have it negatively impact their performance otherwise?
  53. [deathbear] yes this next meeting is required
  54. zakim-robot
    @zakim-robot
    May 11 16:55
    [deathbear] I have been making a big deal about it.
  55. [deathbear] wait, next week is optional, the workshop is mandatory.
  56. [deathbear] I should note that we have a pretty good group of a11y minded people too. Just it’d be awesome if it was everyone.
  57. [marcysutton] It's the people who don't already care about it who need it the most.
  58. zakim-robot
    @zakim-robot
    May 11 17:20
    [robdodson] remember a few days ago when I mentioned that VoiceOver was flickering on my machine and wouldn't start? Turns out it was Angular CLI's fault. So weird.
    angular/angular-cli#6034
  59. luis garcia
    @garcialo
    May 11 17:21
    wow
  60. zakim-robot
    @zakim-robot
    May 11 17:22
    [robdodson] yeah
  61. [robdodson] @marcysutton ^
  62. zakim-robot
    @zakim-robot
    May 11 17:36
    [marcysutton] whoa
  63. [marcysutton] That is one peculiar issue. Hope they get it resolved soon
  64. zakim-robot
    @zakim-robot
    May 11 18:09
    [quidkid] does anyone know whether the HTML5 video player is accessible? like do I have to use something like VideoJS for WCAG AA compliance? I’m tasked with making the videos on a website accessible but I am able to tab through the current html5 video player. I just need to add a track for close captioning… i think..
  65. zakim-robot
    @zakim-robot
    May 11 18:14
    [conley] For the most part, I tested it in Chrome and safari
  66. [conley] The closed caption interface in safari is a bit wonky though
  67. zakim-robot
    @zakim-robot
    May 11 18:20
    [quidkid] thanks @conley so would you recommend using a library like videojs then?
  68. zakim-robot
    @zakim-robot
    May 11 18:28
    [conley] I haven't used that library so I can't attest to it
  69. [deconspray] @quidkid We've been guided to use Able Player, which is an open source media player. It is WCAG 2.0 AA compliant
  70. zakim-robot
    @zakim-robot
    May 11 18:43
    [quidkid] @deconspray thank you. I’ve definitely had that mentioned to me before but before i opted to use video.JS for ease of the custom skinning. can you customize the video controls on the able player?
  71. powrsurg
    @powrsurg
    May 11 19:56
    how do people here actually pronounce ARIA?
  72. zakim-robot
    @zakim-robot
    May 11 20:00
    [beefancohen] like a pirate ;)
  73. [higley] like an italian song :)
  74. [tink] @powrsurg it's pronounced like the opera.
  75. [tink] I can't find a pointer for now, but it was discussed by the WG working on it in the early days, and that was the agreed way to pronounce it.
  76. powrsurg
    @powrsurg
    May 11 20:01
    interesting
  77. zakim-robot
    @zakim-robot
    May 11 20:05
    [karlgroves] Dutchies, like @michiel and @jkva pronounce it like diarrhea ;)
  78. [karlgroves] uh-ree-uh
  79. [tink] +1 Karl.
  80. Job van Achterberg
    @jkva
    May 11 20:10
    Imagine how Germans pronounce "die ARIA"
  81. @karlgroves you speak some mean German, you should know
  82. zakim-robot
    @zakim-robot
    May 11 20:31
    [garcialo] @powrsurg @tink and @karlgroves are misleading you. You the correct pronunciation of ARIA is to say each of the letters, but you must sing them to the tune of YMCA.
  83. [tink] (rofl)
  84. [karlgroves] Please post a YouTube video of you doing that
  85. [tink] There are actions too, right?
  86. [garcialo] @tink Of course.
  87. [tink] (highfive)
  88. [garcialo] @karlgroves I will maybe make one for sharing.
  89. [cmegown] can't dance
  90. James Nurthen
    @jnurthen
    May 11 21:01
    anyone have any insight on marking optional fields instead of marking required fields. On forms where the majority of fields are required it is visually very heavy to have to mark all of the required fields. I'm thinking just adding a note at the top of the page saying "fields are required unless stated as optional" (as well as using either required or aria-required on the fields)
  91. zakim-robot
    @zakim-robot
    May 11 21:06
    [cmegown] that could work. alternatively maybe try an "optional" treatment similar to the "required" treatment? as in a small badge or something next to the label?
  92. [cmegown] it kind of depends on the parts and pieces that make up the form
  93. James Nurthen
    @jnurthen
    May 11 21:11
    i'm just slightly concerned that people would say it was a WCAG violation not to mark required fields explicitly
  94. zakim-robot
    @zakim-robot
    May 11 21:14
    [tink] @jnurthen we do this on the Gov.UK sites - in transactional services where most fields are required, we call out the optional ones.
  95. James Nurthen
    @jnurthen
    May 11 21:14
    thanks Léonie. I'll take a look
  96. zakim-robot
    @zakim-robot
    May 11 21:16
    [jelder] @tink we use a similar practice
  97. [tink] @jnurthen you might not easily find examples because you have to start into transactional services - like applying for a license or something. I can't think of an example that has the optional fields called out, off the top of my head, sorry.
  98. [tink] @jelder I think it's a usable approach.
  99. James Nurthen
    @jnurthen
    May 11 21:19
    Many of the screens I find seem to be wizard-type where there are very few fields (all required) on each page. Nothing seems to call them out as being required.
  100. @tink are these the sorts of screens you were talking about https://www.passport.service.gov.uk/filter/overseas
  101. zakim-robot
    @zakim-robot
    May 11 21:22
    [tink] Yes, those sorts of services.
  102. James Nurthen
    @jnurthen
    May 11 21:23
    I notice there is no "all fields are required" type of notice - that concerns me slightly but I appreciate that not having it makes the page lighter
  103. zakim-robot
    @zakim-robot
    May 11 21:25
    [jelder] @tink on a form like this there isn’t an indication of required fields, not even aria-required https://eforms.homeoffice.gov.uk/outreach/Passport_Enquiries.ofml
  104. James Nurthen
    @jnurthen
    May 11 21:27
    I suspect that is "old" and hasn't been through the redesign - it does look different to the "new" screens
  105. zakim-robot
    @zakim-robot
    May 11 21:27
    [jelder] i’m assuming you’d want both the text to let users know that all are required, as well as a required attribute to help assistive correct?
  106. James Nurthen
    @jnurthen
    May 11 21:28
    I think if you limit the number of fields to 1 or 2 on each screen maybe you don't need the "all are required" text. If someone doesn't fill them in just give them an error.
  107. when there are lots and a mix then you need it.
  108. zakim-robot
    @zakim-robot
    May 11 21:29
    [michiel] @garcialo: we should find two more people and make a music video out of it
  109. [jelder] sounds fair