Archive index

A11y Slackers Gitter Channel Archive 24th of May 2017

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    @stevefaulkner
    May 24 10:28

    [garcialo] Wait, is adding aria-label to links something people are doing now? Doesn’t that conflict with the link text?

    overrides link text

  2. zakim-robot
    @zakim-robot
    May 24 10:46
    [skymaiden] ^^ yep I wanted to add an aria-label to a link to give more context (that it would open a new window), but you can't do that...
  3. James Teh
    @jcsteh
    May 24 11:47
    Well, technically, the ARIA spec doesn't say it overrides link text. It says it overrides the link name. And whether or not an AT should use the name or the text is debatable (and not specified).
    But anyway... personally, I'd probably prefer to see something like "opens in a new tab" as the description (aria-describedby), not the label. That makes it secondary information (akin to a tooltip) and thus something I can query for on demand (as opposed to something I see whether I like it or not).
  4. zakim-robot
    @zakim-robot
    May 24 11:48
    [skymaiden] ah good idea!
  5. James Teh
    @jcsteh
    May 24 11:49
    One caveat: users may argue they never see this because they never "query" for it. It's a bit of a catch 22. You either end up with too much verbosity (if you have lots of these links, the user will get it all the time) or you end up with users who don't realise the info is there (because they never queried for it).
    In NVDA land, if you tab to it or press NVDA+tab, you will get the description, but if you just cursor to it in browse mode, you won't.
    In iOS VoiceOver land, you have to three finger single tap to get the description.
  6. powrsurg
    @powrsurg
    May 24 13:32
    So we are using the canvas tag to generate nice graphs for our new reporting feature. For accessibility inside of the canvas is a table with tabular data of what is represented by the graph. For visual design we had decided to a tag describing what it is under the graph, and that seems clear visually, but that is obviously not clear when someone has the table read off to them. Should we include a caption tag for the table and aria-hidden on the element that visually labels the canvas, or is there something else that should be done? And can canvases have some type of label applied to them? Lastly, how does/should the keyboardability work for both AT users and non-AT keyboard users?
  7. powrsurg
    @powrsurg
    May 24 13:41
    About you guys that were at orgs that were pushing accessibility for clients, how often do you get push back in regards to color contrast when they want to use their brand colors and the colors are bad? And do you hear any resistance to costs for captioning / audio describing long videos?
  8. zakim-robot
    @zakim-robot
    May 24 15:28
    [ghanek] @powrsurg There are often ways to keep the brand colors, but address the color contrast problems. We presented the list of requirements, and then presented the flagged low-contrast areas as design challenges. We then coached them thru as they explored the usual suspects: bigger font size, emboldened characters (or carousel/video controls), different background color for an element, and so forth.
  9. zakim-robot
    @zakim-robot
    May 24 15:49
    [bethra] Any suggestions for how to handle data visualization for a system with like 40 different data points? Even textures and patterns at this point become a cognitive nightmare. Looking for articles, but good solid advice is not being found. :\
  10. zakim-robot
    @zakim-robot
    May 24 16:08
    [violet] @powrsurg logos themselves are exempted from contrast requirements but you might be able to create an extended palette based on brand colors that includes WCAG-compliant colors/color combos
  11. zakim-robot
    @zakim-robot
    May 24 16:22
    [quidkid] if i have a Transcript button that causes another div to show up underneath and reveals the transcript, would I need aria-expanded on the button? and aria-controls?
  12. zakim-robot
    @zakim-robot
    May 24 16:57
    [garcialo] @quidkid something like this? http://ianmcburnie.github.io/mindpatterns/disclosure/expando/
  13. zakim-robot
    @zakim-robot
    May 24 17:23
    [higley] If you have a widget design that has certain visual elements (e.g. stylistic lines or borders) that aren’t necessary to determine its function, do those elements need to meet WCAG color contrast guildines?
  14. [miwayha] search is being a little wonky for me, so apologies if this is already answered somewhere: we’re getting a weird bug that the focus styling on firefox is appearing on click. not happening in other browsers
  15. [miwayha] does anyone know how to get rid of that?
  16. [tyronem] I’ve seen something similar @miwayha and I haven’t found a way to turn it off. It’s been driving me up the wall.
  17. [chrisgeary92] @miwayha Is this all websites, or specific to your project? Do you have a link?
  18. [tyronem] in my case, it’s specific to my project (it’s client work, so no link available).
  19. [miwayha] my particular project is behind a ifrewall, but i know it’s also happening on http://physics.yale.edu/
  20. [garcialo] @higley Color contrast minimums only apply to text
  21. [miwayha] i know you can get rid of focus styling by *:active:focus{outline:none !important;}, but focus styling still appears on mouseup
  22. zakim-robot
    @zakim-robot
    May 24 17:28
    [higley] @garcialo thanks! So for something like a text input widget, even borders don’t need to meet contrast requirements? (not that I’d do that)
  23. [garcialo] Correct. Yes, internally it would be nice to have a guideline that specifies a contrast minimum for non-text, but WCAG only refers to text
  24. [higley] awesome, thanks! I’ll pass that on to the designers :)
  25. [garcialo] 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
  26. [miwayha] I think WCAG 2.1 has a candidate guideline for interface controls, yeah?
  27. [miwayha] it looks like it was dropped from the most recent draft, nevermind
  28. zakim-robot
    @zakim-robot
    May 24 17:35
    [jiatyan] @bethra depending on the presentation needs for your for large data set, a possible solution might be sonification.
  29. [garcialo] @miwayha It’s in the latest one I see…I didn’t mention it since we shouldn’t be using WCAG 2.1 until it’s closer to a final draft.
  30. zakim-robot
    @zakim-robot
    May 24 17:56
    [car] @miwayha @tyronem Not sure if this applies, but worth a look:
    http://codepen.io/marcysutton/pen/mEqXmr
    http://alice.github.io/modality/demo/
  31. zakim-robot
    @zakim-robot
    May 24 18:04
    [marcysutton] You should look at :focus-ring and a library called What Input
  32. Jonathan Neal
    @jonathantneal
    May 24 20:30
    @marcysutton, would you also recommend the WICG polyfill? I was going to start using it. https://github.com/WICG/focus-ring
  33. zakim-robot
    @zakim-robot
    May 24 20:31
    [marcysutton] Yes definitely use that over the prior CSS Input Modality thing.
  34. [marcysutton] And you can file issues on it on Github, should you find something awry.
  35. Jonathan Neal
    @jonathantneal
    May 24 20:35
    Thank you! And whew, because I just wrote a plugin for us to use the drafted syntax transpiled to wicg’s class polyfill.
  36. Unrelated, should a button that launches a dialog get any special attributes to indicate it will launch one? I seem to recall aria-popup being a big no-no, even though it looks so right. My use case is a button that launches a language switcher.
  37. zakim-robot
    @zakim-robot
    May 24 20:57
    [higley] @jonathantneal are you avoiding aria-haspopup because of NVDA reading it as having a submenu? I’m not sure, but I thought that was going to be fixed by allowing specific strings to be passed in, e.g. aria-haspopup="dialog": https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup. I can’t test on NVDA right at this moment though
  38. Jonathan Neal
    @jonathantneal
    May 24 20:58
    Thanks! :)
  39. zakim-robot
    @zakim-robot
    May 24 21:02
    [cmegown] question: we've added a button to mapbox component that allows the user to switch to the satellite view. i'm receiving pushback on making the text more descriptive (i.e. "switch to satellite view") so i'm wondering if i should add the more descriptive text as a title or aria-label attribute?
  40. [cmegown] ...or both?
  41. [garcialo] What’s the current text?
  42. [cmegown] just "Satellite"
  43. [garcialo] I don’t think it needs to be that verbose; it’s a button so the user knows they can interact with it. I think “Satellite View” would be sufficient. I do personally like the more verbose version. :)
  44. [garcialo] If you already have the button text, you don’t want to use title or aria-label.
  45. [garcialo] Title just isn’t really dependable and aria-label will conflict with the existing text
  46. [garcialo] Although, I think see what you’re saying…have the visual text be one thing and the programmatic text be another
  47. [garcialo] hmm
  48. [cmegown] that's true, using aria-label would result in something like "satellite switch to satellite view" haha
  49. zakim-robot
    @zakim-robot
    May 24 21:08
    [garcialo] probably best practice not to try and do something tricky though
  50. [cmegown] agreed. would changing the text to "map view" after they've clicked on it cause any problems?
  51. zakim-robot
    @zakim-robot
    May 24 21:15
    [artistic_abode] Good afternoon, everyone. I'm looking for legal information on if and when a VPAT would be required. Specifically for a healthcare website in regards to meeting compliance for Section 508 to receive federal funding. The name suggests it is voluntary to provide. When does it come into play, only when a lawsuit is brought up, or is it asked for by the government at any time in the process of applying for or receiving federal funding?
  52. zakim-robot
    @zakim-robot
    May 24 23:10
    [garcialo] @artistic_abode I used them when I was working at a University and we were comparing how accessible products were
  53. [garcialo] And we could refer to the VPAT in contracts with the vendor.