Archive index

A11y Slackers Gitter Channel Archive 3rd of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Mar 03 00:10
    [caesar] Q: is Angular known for causing issues with Screen Readers? We're having diabolical issues with a site where JAWS is constantly bugging out (stops reading, etc.)
  2. [caesar] I believe it's 1.5, not 2 (onwards)
  3. zakim-robot
    @zakim-robot
    Mar 03 00:55
    [dboudreau] @mgifford not that i know of, no.
  4. zakim-robot
    @zakim-robot
    Mar 03 02:09
    [mgifford] Ok, I’ve created a #canada channel.
  5. zakim-robot
    @zakim-robot
    Mar 03 04:38
    [caesar] LOL for what it's worth, I've created a set of WCAG 2.0 Flashcards on Tiny Cards: tiny.cards/decks/5364aa19-472b-456a-be6e-01bff1b2e57c
  6. [caesar] Why anybody would want to deliberately memorise WCAG 2.0 I don't know, but I won't hold it against them. Could be a useful discussion tool :)
  7. [caesar] A more traditional hyperlink: https://tinycards.duolingo.com/decks/5364aa19-472b-456a-be6e-01bff1b2e57c
  8. zakim-robot
    @zakim-robot
    Mar 03 09:35
    [bobby] Morning all, I'm a UX designer in Scottish Enterprise, we're looking to establish some good practice for accessibility. We're having regular meetings where we work out who owns what, between user researchers, designers, developers and quality assurance. We'd like to establish good ways of working without documenting everything to death. Cheers
  9. zakim-robot
    @zakim-robot
    Mar 03 11:34
    [nilsel] One of our testers have started turning off images when doing a11y-checks, but I cannot see if that solves any issues.. thoughts?
  10. zakim-robot
    @zakim-robot
    Mar 03 12:01
    [emplums] hi friends! I’ve created #wins a channel to celebrate accessibility wins! :) I struggle a lot with feeling like I’m not getting a lot done or there’s too much to fix and thought it might be nice to have a place to chat about our a11y victories! :dancers:
  11. zakim-robot
    @zakim-robot
    Mar 03 13:10
    [sarahebourne] This is one way of making sure your images have alt text, and that it's appropriate in context. Although there are tools that can do this for you (and they won't miss any by mistake) a visual inspection is good for making sure it's done well for sighted users without images (to save bandwidth for instance) as well as AT users.
    One of our testers have started turning off images when doing a11y-checks, but I cannot see if that solves any issues.. thoughts?
  12. [sarahebourne] nilsel: This is one way of making sure your images have alt text, and that it's appropriate in context. Although there are tools that can do this for you (and they won't miss any by mistake) a visual inspection is good for making sure it's done well for sighted users without images (to save bandwidth for instance) as well as AT users.
  13. zakim-robot
    @zakim-robot
    Mar 03 15:01
    [emplums] Has anyone here gone through the process of getting your IAAP certification? Curious to hear about anyone’s experience with it and whether they found it useful! :)
  14. powrsurg
    @powrsurg
    Mar 03 15:54
    Isn't aria-current a thing? Axe is saying complaining about our use of it with our new redesign. Beyond that our new redesign seems to work ... except the third party widget we're using to contact our sales team.
  15. zakim-robot
    @zakim-robot
    Mar 03 16:12
    [michiel] powrsurg: it’s a thing, not yet implemented as far as I know.
  16. [michiel] https://www.w3.org/TR/wai-aria-1.1/#aria-current
  17. [michiel] It’s a CR now, so should be safe to use.
  18. [michiel] What’s the error aXe throws at you?
  19. powrsurg
    @powrsurg
    Mar 03 16:20
    "Invalid ARIA attribute name: aria-current"
  20. zakim-robot
    @zakim-robot
    Mar 03 16:21
    [michiel] Well, it’s not invalid, just not supported by UA AFAIK
  21. powrsurg
    @powrsurg
    Mar 03 16:22
    Okay, we're good. I just wish the third-party library was good. Seems you can tab to the chat fields even when it's not visible, and there is a button with no text ..
  22. zakim-robot
    @zakim-robot
    Mar 03 16:22
    [michiel] Seems there is already an issue: dequelabs/axe-core#270
  23. powrsurg
    @powrsurg
    Mar 03 16:23
    and we have a state map in svg that we made is tabable thanks to us adding tabindex="0" but aXe says the value is > 0 ....
  24. zakim-robot
    @zakim-robot
    Mar 03 16:26
    [philswan] I’m currently working on a to-do list tool which takes the form of a big checklist. Some of the tasks have links associated with them.
  25. [philswan] I was therefore wondering whether including an <a> tag inside a <label> tag would cause any accessibility issues?
  26. [philswan] See screenshot for an example of what I mean
  27. [philswan] Screen Shot 2017-03-03 at 15.42.40.png
  28. [schoeyfield] @philswan Probably. According to the spec labels should only contain phrasing content.
  29. [schoeyfield] An <a> is considered phrasing only "if it contains only phrasing content>" - wtf that means :). I'd avoid it.
  30. zakim-robot
    @zakim-robot
    Mar 03 16:31
    [schoeyfield] What you might do is have your checklist item component made of semantically meaningless divs, that includes a label for the form element, but can then also handle extra content.
  31. [philswan] @schoeyfield thanks for the reply

  32. [schoeyfield] Oh or it could be an LI. Maybe something like 

    <liclass="checklist__item">   <input class="checklist__checkbox" type="checkbox" id="someID" name="someName">   <label for="someID" class="checklist__label">Some Label</label>   Regular LI content here and <a href="#">a link</a> </li>

    Now I'm curious what a super accessible to-do list looks like.

  33. zakim-robot
    @zakim-robot
    Mar 03 16:38
    [quidkid] how do i get the focus outline to show up on a select element?
  34. [quidkid] it shows up on everything else
  35. [jaredsmith] @philswan The link won't be identified as a link when read as part of the label, but so long as the link's presence or linked content are not vital to understanding the function of the checkbox, then this is no problem.
  36. [quidkid] focus is definitely on it because when i hit the down arrow, the options pop open. but it it is weird that the outline itself doesn’t show up.
  37. zakim-robot
    @zakim-robot
    Mar 03 16:44
    [quidkid] i’ll make a new class i guess but it’s weird it’s just that one
  38. [philswan] @jaredsmith this is useful, thanks
  39. zakim-robot
    @zakim-robot
    Mar 03 17:11
    [quidkid] ended up having to trigger the focus on the div surrounding the select because i couldn’t get the select to actually have the outline so issue is fixed but if anyone has ideas why the select couldn’t get focus, i’ll lend you my ears!
  40. zakim-robot
    @zakim-robot
    Mar 03 17:16
    [jaredsmith] @quidkid Select menus have default focus indicators by default, so something in your CSS must be overriding it (probably outline:0), or maybe scripting was changing focus onfocus. Focusing the container div will likely break the keyboard interaction for the select.
  41. [quidkid] @jaredsmith ahh thanks Jared! yeah i had a custom focus outline. but my workaround was not to focus on the container div but rather when you focused on the select, the container div gets added a class to have an outline
  42. [quidkid] so hopefully keyboard interaction would still be maintained
  43. zakim-robot
    @zakim-robot
    Mar 03 18:29
    [anevins] Hi big intimidating chat group
  44. zakim-robot
    @zakim-robot
    Mar 03 18:37
    [quidkid] welcome @anevins!!
  45. zakim-robot
    @zakim-robot
    Mar 03 19:24
    [shawn.henning] Hi, @anevins . Welcome! I don't think of it as intimidating, but as a magic answer factory.