Archive index

A11y Slackers Gitter Channel Archive 7th of June 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jun 07 00:29
    [spell] Howdy! Some quick help here. I have some social icons on my page (See https://www.screencast.com/t/WuKa3tv9) in which client seems to take issue with no fallback text being present when images are disabled. Thing is, these are links with text accessibly hidden offscreen and images coming in as CSS images. What to do or say to them?
  2. zakim-robot
    @zakim-robot
    Jun 07 01:58
    [pweil] @spell If the images are being included via css (as background images?), will disabling displaying images in the browser affect them? You could always put the images in the html and include alternate text. Or are you that wedded to doing them via css?
  3. zakim-robot
    @zakim-robot
    Jun 07 02:16
    [spell] @pweil Thanks. I'm not wedded to that technique, but they may be a chore to change. If there are no other solutions then I will swap in images, naturally, but is that only way to handle it?
  4. zakim-robot
    @zakim-robot
    Jun 07 02:48
    [pweil] Does disabling images affect images brought in via css?
  5. zakim-robot
    @zakim-robot
    Jun 07 04:36
    [nschonni] I think browsers have started to build that in, but I have no idea what spec defines it
  6. zakim-robot
    @zakim-robot
    Jun 07 08:02
    [oliviernourry] Hi all, I have this behavior on VoiceOver with Mac: with <div aria-live="polite" aria-atomic="true">Text1 Text2</div>, it says "Text2" although both have changed. I gather it's a VOism, but how could it be improved?
  7. [oliviernourry] Ok, I think I found the answer https://terrillthompson.com/tests/aria/live-scores.html solution 3, being to not change things separately, but as a whole
  8. zakim-robot
    @zakim-robot
    Jun 07 14:01
    [spell] @pweil In this client's case, they are using the Web Accessibility Toolbar in IE11 to disable CSS background images and flagging it as an issue for us to address. I'm told it's silly use case by some others here offline, but client is likely to be rather insistent about meeting it.
  9. zakim-robot
    @zakim-robot
    Jun 07 14:30

    [cmegown] so i'm dealing with some inaccessible links in an angular app and i'm trying to educate the devs who are working on it. this particular scenario deals with anchor tags that function with a (click) binding. adding tabindex="0" is easy enough, but it obviously doesn't allow a link to be activated using the enter key. the devs are having a hard time understanding why that's necessary/required.

    how would y'all address this problem?

  10. zakim-robot
    @zakim-robot
    Jun 07 14:36
    [cmegown] whoops, forgot to add that duping the functionality with an additional (keyup.enter) binding works...not exactly elegant
  11. [clairebones] Is it that they don't know the best approach or they just don't know why they should?
  12. [tink] If the <a> has no href attrib (and so has no focus/interaction), it's basically the same as starting with a <span>.
  13. [tink] It all has to be provided with script - including click, enter and space key activation.
  14. [tink] Example of a link that starts of life as a <span> here http://ljwatson.github.io/design-patterns/link1/index.html
  15. [tink] It's an example of how not to do it, but if there is no option but to fix the Angular weirdness, that's what needs to happen.
  16. zakim-robot
    @zakim-robot
    Jun 07 14:42
    [clairebones] Yeah as an angular dev myself if it's a link I'd normally just have both ng-click and ng-keypress or build a keypress directive once and call it ng-enter and use it to check for keypress
  17. [tink] +1
  18. [tyronem] Is it a good idea (or preferred) to change the phrasing of text so screen readers would read it better? For example, changing “300-3000 people” to “300 to 3000 people”.
  19. [karlgroves] @tyronem No
  20. [karlgroves] I mean, in the case you cite it isn’t a big deal
  21. [karlgroves] But some people take that too far
  22. [tink] On the subject of writing specifically for screen reader users... https://accessibility.blog.gov.uk/2017/02/08/advice-for-creating-content-that-works-well-with-screen-readers/
  23. [tink] +1 to Karl on people taking it too far.
  24. [tyronem] thanks @karlgroves - I don’t think it makes sense in every case, but I was wondering if screen reader users just do that conversion in their heads as the SR reads back to them even if we don’t do it explicitly.
  25. zakim-robot
    @zakim-robot
    Jun 07 14:48
    [tink] As a sample of one, I know I don't pay attention to things like this, I just do the translation automatically without even really thinking about it.
  26. [tyronem] this is very useful to know. I often wonder if we take being helpful too far to the point where it’s not useful/helpful.
  27. [tink] This is often one of those times in my experience.
  28. [tink] Which is a nice problem to have in the scheme of things, but still a problem :)
  29. zakim-robot
    @zakim-robot
    Jun 07 14:57
    [pweil] @spell I kind of agree with @kimberlymunoz. The thing is, the images are content rather than decorative, and are probably best treated as such. That means putting them into the html -- with alt text, of course. The specific complaint and use case are a little questionable (to put it mildly), but in this case changing how you code this is a relatively simple way out. For these social icons, we usually use svgs, hide them in aria, and add an aria-label to the anchor.
  30. Michael Fairchild
    @mfairchild365
    Jun 07 15:39
    Question time: This seems obvious, and maybe I'm just overlooking something, but can anyone point me in the right direction for this question (looking for standards that describe this behavior)? https://mfairchild365.github.io/notes/div-space-question.html
  31. zakim-robot
    @zakim-robot
    Jun 07 15:58
    [geekf] I don't think there's a specification on when a screen reader must take pauses. From my experience the readers behave widely different from each other and all of them are using their heuristics to figure out what is the best way to read out the content. They are like quirks mode on coke.
  32. Michael Fairchild
    @mfairchild365
    Jun 07 16:00
    Fair enough. Do you know if there are any standards around the CSS 'display' property and how it might affect the accessibility tree?
  33. zakim-robot
    @zakim-robot
    Jun 07 16:02
    [geekf] No, I don't have any knowledge on that. I would also like to know it.
  34. zakim-robot
    @zakim-robot
    Jun 07 16:13
    [tink] CSS doesn't tend to affect the accessibility tree itself.
  35. [tink] Browsers do sometimes add extra accessibility information on top of the acc tree in respond to CSS though.
  36. Michael Fairchild
    @mfairchild365
    Jun 07 16:14
    Gotcha. Do you know of any documentation or standards that describe that behavior?
  37. zakim-robot
    @zakim-robot
    Jun 07 16:14
    [tink] Like with the before/after pseudo selectors for example https://tink.uk/accessibility-support-for-css-generated-content/
  38. [tink] It ould be an interesting piece of research to document which of the display:; values do what to the accessibility layer though.
  39. Michael Fairchild
    @mfairchild365
    Jun 07 16:21
    agreed. I know the accname-aam standard describes the css pseudo selectors, but I didn't see anything about the display property. https://www.w3.org/TR/accname-aam-1.1/
  40. zakim-robot
    @zakim-robot
    Jun 07 17:01
    [tink] No. It'd be interesting to find out where the calculation is happening. With display:none; we know it's removed from the visual rendering, and so for screen readers also. I just did a (very) rough test with display:block; but didn't see the same results as with display:inline;.
  41. zakim-robot
    @zakim-robot
    Jun 07 18:39
    [jhetrick] I’ve been wondering about repeated link text in tables, such as this one: https://codepen.io/anon/pen/MoayzG each row has Show, Edit, and Delete links. should I be providing more context on those links (e.g. more verbose aria labels, like “Edit Introduction”?) or does the user agent take care of that via properly-labelled table headers?
  42. [jhetrick] VoiceOver’s list of links shows 3x Show, Edit, and Delete links, which doesn’t seem very helpful out of context
  43. Michael Fairchild
    @mfairchild365
    Jun 07 18:43
    generally, I try to handle those the same way I would treat 'read more' links. Avoid them if I can (make the name a link to view it), and add some visually hidden text (via css) to further describe the edit and delete text. 'Edit {name}' and 'name' would be visually hidden.
  44. zakim-robot
    @zakim-robot
    Jun 07 18:51
    [jhetrick] thanks. are there benefits to using text that’s visually-hidden via CSS over an aria-label?
  45. zakim-robot
    @zakim-robot
    Jun 07 19:03
    [ericmikkelsen] Hey @jhetrick in here https://www.powermapper.com/tests/screen-readers/aria/ it looks like aria-labels have pretty good support but still south of 90%, so the benefit I see is browser support.
  46. zakim-robot
    @zakim-robot
    Jun 07 19:28
    [jhetrick] awesome, I’ll check that out
  47. zakim-robot
    @zakim-robot
    Jun 07 19:56

    [karlgroves] Josh: Thanks for reminding me of something I’ve been meaning to fix on Tenon.

    FWIW, WCAG Level AA has “Link Purpose (In context)” whereas it is Level AAA that is concerned about Links out of context.

    So The table itself provides the context if it is well structured.

  48. [karlgroves] Table structure provides the context.
  49. [karlgroves] In other words, the header cell - data cell relationships for the links provide the context.
  50. [karlgroves] That said, since this content is coming from a database, adding the necessary ARIA-fu on these links is trivial so I may as well fix ‘em
  51. Michael Fairchild
    @mfairchild365
    Jun 07 21:56
    I decided to write up a better blog post on my previous question. If anyone has any answers, please let me know. I'm more curious than anything. https://mfairchild365.github.io/2017/06/07/a11y-css-standards
  52. zakim-robot
    @zakim-robot
    Jun 07 23:16
    [caesar] In case this hasn't already been posted. Facebook live captions are, well, live. http://www.ai-media.tv/facebook-live-captions/