Archive index

A11y Slackers Gitter Channel Archive 11th of October 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Oct 11 00:19
    [caesar] @ugi would it not be better to make the ARIA labels the actual name of the language, i.e. "English", "French", etc.? Or have I misunderstood the original question?
  2. [caesar] Ah, I think I misunderstood. The intent is to have the screen reader read the actual ISO code, right?
  3. [caesar] If so I agree with your approach
  4. zakim-robot
    @zakim-robot
    Oct 11 05:30
    [ted_drake] Does anyone have advice for getting CEFSharp to work with accessibility? This is an embedded chromium browser for windows. Getting access to accessibility seems to have been broken since 2012, but I haven’t been able to find more recent documentation.
  5. [ted_drake] https://github.com/cefsharp/CefSharp
  6. zakim-robot
    @zakim-robot
    Oct 11 07:13
    [morgan] @ugi and @caesar thank you for your feedback, @caesar good question. This would differ from what is displayed for sighted user, but with a better experience so why not ;-)
  7. zakim-robot
    @zakim-robot
    Oct 11 09:35
    [ted_drake] @morgan i put this together a while ago, but it is still relevant
  8. [ted_drake] http://www.last-child.com/screen-reader-announce-digits/
  9. [morgan] Oh thank you quite of investigation there! Very valuable, I appreciate
  10. [ted_drake] Also, Safari has increased their support for speech CSS: https://css-tricks.com/lets-talk-speech-css/
  11. [ted_drake] if you are safari/vo focused, this may be an option.
  12. [ted_drake] We struggled with this in TurboTax Canada, where we were trying to force the screen reader to announce the hyphen in a negative number within a live region.
  13. zakim-robot
    @zakim-robot
    Oct 11 09:40
    [ted_drake] We ended up redesigning the live region to not depend on a hyphen for understandability and went with text, such as Your return is xxx or You will owe xxx
  14. Schalk Neethling
    @schalkneethling
    Oct 11 13:07
    Hey All
  15. I am curious, when testing whether there is sufficient contrast between the background color and that of a button, does one use the same ratio/tools as when testing text on background?
  16. zakim-robot
    @zakim-robot
    Oct 11 13:08
    [rselzer] does the button have text?
  17. Schalk Neethling
    @schalkneethling
    Oct 11 13:08
    yes, the text contrast on the button's background color is fine, I am wondering about the contrast between the button background color and the page background color
  18. or is that not really such a big issue
  19. As long as the text on the button is readable the rest is ok as long as it looks correct when testing for color blindness
  20. @zakim-robot ^^
  21. zakim-robot
    @zakim-robot
    Oct 11 13:10
    [rselzer] I don't know if that specifically is in WCAG, but in general you're going to want your buttons to highly contrast their surrounding if they're a call to action, but maybe less so if it's a secondary action
  22. [rselzer] I'd say if the text is the right ratio to the button then you're fine
  23. Schalk Neethling
    @schalkneethling
    Oct 11 13:11
    Ok, great stuff. Thanks a lot
  24. zakim-robot
    @zakim-robot
    Oct 11 13:20
    [erik] I have a table with a <th> that uses a <th> above in the same column as it's header. But I don't want this relationship because it's incorrect. Would it be a bad practice to use the headers-attribute and point it to an empty table cell?
  25. [erik] I haven't found another way to remove the relationship yet.
  26. powrsurg
    @powrsurg
    Oct 11 14:00
    I know that color alone should not be used to relay meaning, but how far does one break down things into components when looking at things?
  27. Like we have a quiz results thing for admins. We lists the four possible answers and say "(correct)" in green after the correct one. That is fine. Then we have a graph afterwords showing the number of individuals that chose each answer. We were coloring the three answers that were wrong as red, and the correct one as green.
  28. The bar graph broken apart would not be good as at that point it would be using color alone to convey meaning, but in the context of the answers being given right above it and having text point out the correct one that is good. Is that good?
  29. zakim-robot
    @zakim-robot
    Oct 11 14:49
    [eric] a text label pointing to the area should be good
  30. [eric] you could also supplement color with texture
  31. [blind3y3design] as Eric said, just put text labels under/above each bar.
  32. [blind3y3design] Penn State has a whole page on accessible charts :) http://accessibility.psu.edu/images/charts/
  33. [eric] ooh, bookmarking that!
  34. zakim-robot
    @zakim-robot
    Oct 11 15:01
    [car] Welcome, Cam! :wave:
  35. [cam.beaudoin] :wave: Hi @car and the A11y community!
    I’m a front end dev at IBM, specializing in Angular and accessibility.
    I also can’t tell what’s contained in this circle:
  36. [cam.beaudoin] Pasted image at 2017-10-11, 11:06 AM
  37. [car] 45
  38. zakim-robot
    @zakim-robot
    Oct 11 15:06
    [car] ;)

  39. [george_zamfir] :keyboard: :a11y: About keyboard navigation in Slack...
    :wave: :keyboard: Hello keyboard users

    Just a heads up that heavy TAB users will be getting a prompt with more efficient keyboard navigation suggestions. We think that TAB support in Slack is important but it can be... repetitive :spinner:

    So this is just a reminder that we build a new navigation model to work alongside TAB navigation. Here are the basics:
    • control + ` to cycle through the main UI sections (left & right sidebars, the channel header, message list & message input), this is similar to landmark navigation for screen reader users
    • up or down to navigate through messages sequentially
    • command or control + k is the quickest way jump to channels, DMs and even workspaces
    • command or control + /\ to open the keyboard shortcuts view in Slack

    :raised_hands: :a11y: *As always, if you have feedback we'd love to hear it.*

  40. zakim-robot
    @zakim-robot
    Oct 11 16:03
    [laura.ciporen] @schalkneethling, remember to also make the contrast between active and inactive states contrast enough that users can tell the difference, where that might matter.
  41. [laura.ciporen] @powrsurg, for bar graphs it is common to use patterns along with colors to make sure the bars look different from each other.
  42. powrsurg
    @powrsurg
    Oct 11 16:05
    ...
  43. I cannot believe I didn't think of that
  44. since this may be deployed today I don't think we can tweak it before it goes up, but I will bring that up
  45. zakim-robot
    @zakim-robot
    Oct 11 16:06
    [laura.ciporen] @powrsurg that's why communities such as this are really helpful, no? :)
  46. powrsurg
    @powrsurg
    Oct 11 16:07
    Yeah. I knew there was a real solution. I've just been running in too many directions lately and dropped the ball there as the a11y guy ....
  47. That makes me sad that I forgot about that. I have my Trello set up to do similar
  48. In the past with our old reporting we used a color pattern that I had tested against various forms of color blindness and it was at least distinguishable ...
  49. zakim-robot
    @zakim-robot
    Oct 11 16:10
    [car] @chetnasamant was asking about vendors that implement an a11y audit. Here's a list (in alphabetical order) of the vendors that I know of:
    Deque: https://www.deque.com/services/
    LevelAccess (formerly SSB Bart): https://www.levelaccess.com/
    Simply Accessible: http://simplyaccessible.com/
    Tenon: https://tenon.io/services.php
    The Paciello Group (TPG): https://www.paciellogroup.com/services/
    WebAIM: https://webaim.org/services/
  50. powrsurg
    @powrsurg
    Oct 11 16:19
    https://alistapart.com/article/planning-for-accessibility
  51. Paciello Group got a shout out there
  52. zakim-robot
    @zakim-robot
    Oct 11 16:41
    [car] and BBC. :)
  53. [svinkle] I’m a little biased toward Simply Accessible. =D
  54. zakim-robot
    @zakim-robot
    Oct 11 17:16
    [cam.beaudoin] @jasonday check this out. The REVERSE Color blindness test
  55. [cam.beaudoin] Pasted image at 2017-10-11, 1:16 PM
  56. [jonathantneal] Taking these tests was how I found out I was color blind. I almost see the word “NO”.
  57. [jasonday] I almost see the same.
  58. [jasonday] except the red is throwing me off, like there's something else there I can't see
  59. [cam.beaudoin] you are both correct
  60. [cam.beaudoin] people without colourblindness can’t see the word “NO”
  61. [jasonday] really? nice
  62. [jasonday] I need to send this to my wife
  63. [cam.beaudoin] it’s like we can pass secret messages to each other
  64. [clairebones] I'm definitely not colourblind but I can see the word no, I'm just good at picking up subtle differences in colours :p
  65. [cam.beaudoin] okay. forget the “secret message” thing
  66. [cam.beaudoin] ;)
  67. [clairebones] haha sorry, i'll just pretend i can't read them
  68. zakim-robot
    @zakim-robot
    Oct 11 17:34
    [jonathantneal] It’s like “NO” but then there’s this bold orange almost making the hippie peace sign through the "O".
  69. [ghanek] worst meme EVAR!
  70. zakim-robot
    @zakim-robot
    Oct 11 18:06
    [car] If I sit way back and squint, I can almost see the NO. It's in a serif font - the capital N has those little "wing strokes" on it. But it's really fuzzy... I would never guess there was something there unless someone told me. :)
  71. [scottohara] wow, yeh. that was almost like one of those magic eye pictures. I could almost see something, but really had to blur my vision to notice it
  72. zakim-robot
    @zakim-robot
    Oct 11 18:28
    [ugi] Hmm, I was almost able to see the NO when I came to the office this morning, but can’t see it an longer after my morning coffee.. Caffeine works wonders :)
  73. [eric] I cheated with Sim Daltonism :@
  74. zakim-robot
    @zakim-robot
    Oct 11 19:33
    [laura.ciporen] OH! It's in the light oranges, ok, I can buy that that says "no" though I couldn't see it in any way until you described that. The N is almost totally hidden for me.
  75. zakim-robot
    @zakim-robot
    Oct 11 21:51
    [thanks4allthefish] I am noticing that when I tab in firefox, after the search toolbar in the top right, firefox outlines the html tag and then moves on to the first element
  76. [thanks4allthefish] is there anyway to disable that?
  77. [thanks4allthefish] I tried :focus{outline: none} under the html tag
  78. [thanks4allthefish] but that did not help
  79. [rselzer] outline: none doesnt change tabbing behaviour, it only hides the focus ring
  80. [marcysutton] furthermore, the HTML tag isn't focusable–that's the browser sending your focus into the page from the browser chrome. I don't think you'd be able to change that
  81. [marcysutton] Might be best to let that one go IMO :)
  82. [pcicere] so that's not considered a "trap" then?
  83. zakim-robot
    @zakim-robot
    Oct 11 21:56
    [rselzer] I just tried to tab around a random site and FF seemed to trap me between the address bar and the search field he's talking about. Very strange and frustrating behaviour!
  84. [thanks4allthefish] if a user has scrolled down and opened a modal - and then is tabbing, the trap results in the the document scrolling up
  85. [marcysutton] i'm not quite following how this is considered a trap. I'll have to open the latest firefox to see if it changed...
  86. [pcicere] it's not so much a trap, but an extra time that someone has to hit tab
  87. [marcysutton] it is an extra tab stop, but it doesn't really trap you from tabbing elsewhere. seems like the layout of a page should prevent it from jumping, but I could see how that might be difficult. I would definitely recommend rendering the background inert behind a modal to prevent tab stops behind it from being focused. There are a few techniques to accomplish that
  88. zakim-robot
    @zakim-robot
    Oct 11 22:02
    [marcysutton] inert="" (+ polyfill) won't impact the HTML tag but it will help with other items behind the modal.
  89. [thanks4allthefish] I am using the inert package from github where I set child.inert = true
  90. [thanks4allthefish] but after the search field when I move to the page, document.activeElement is the HTML tag, I guess ther isn't much I can do about that
  91. [thanks4allthefish] http://www.humaan.com/modaal/
  92. zakim-robot
    @zakim-robot
    Oct 11 22:07
    [thanks4allthefish] you can recreate this on firefox when you click on view example
  93. [marcysutton] yeah, nothing you can really do about that without getting hacky. And it's different in every browser. That's why I said it might be best to let that one go