Archive index

A11y Slackers Gitter Channel Archive 15th of September 2015

What fresh hell is THIS now? - Patrick Lauke
  1. MichielBijl
    08:49
    I hate it when you feel overrun by information and are unable to read anything to keep up :(
  2. MichielBijl
    08:50
    Sorry, I just had to tell someone, so why not 204 people at once…
  3. stevefaulkner
    09:30
    morning slackers
  4. MichielBijl @MichielBijl waves @stevefaulkner
  5. stevefaulkner
    09:32
    :smile:
  6. schalkneethling
    10:07
    @stevefaulkner so in terms of color/brightness vs luminosity/contrast which is the most important in your opinion. The reason I ask is because I am in this situation where I cannot change the background color :-/ but, the current foreground color, whilst very good in terms of color/brightness, fails dismally when it comes to luminosity and, the legibility is terrible. With all of that said, I cannot find a foreground color that passes both luminosity and color/brightness so, I wonder. Which one takes precedence in this scenario?
  7. schalkneethling
    10:07
    Obviously being able to change both the background and foreground is the ideal but, here we are ;)
  8. MichielBijl
    10:10
    @schalkneethling what tool do you use to test?
  9. MichielBijl
    10:10
    Does it pass WCAG at any level?
  10. MichielBijl
    10:10
    Can we get the background hex?
  11. schalkneethling
    10:11
    @MichielBijl I am using the paciello group's colour contrast analyzer.
  12. schalkneethling
    10:11
    sure thing
  13. schalkneethling
    10:11
    so here are the combinations
  14. schalkneethling
    10:12
    background-color: #0095DD; color: #FFD200;
  15. schalkneethling
    10:13
    background-color: #0095DD; color: #fff; #visually seems to work but, the tests all fail
  16. schalkneethling
    10:13
    background-color: #0095DD; color: #000; #visually does not seem great but passes most AA/AAA for large bold text and AA for small normal text
  17. MichielBijl
    10:14
    Hmm
  18. MichielBijl
    10:14
    That is a weirdish background colour
  19. MichielBijl
    10:14
    White passes on large text (18pt+)
  20. schalkneethling
    10:14
    yes, that is a crappy background color and is clearly the central problem.
  21. schalkneethling
    10:15
    yes, the problem is, the text in question here is small
  22. MichielBijl
    10:15
    Any particular reason you cannot change the background colour?
  23. schalkneethling
    10:15
    design, @see https://www.mozilla.org/en-US/firefox/partners/
  24. schalkneethling
    10:16
    a winning combination I have found is changing the background color to #00539F and slightly changing the foreground color to #FFCB25
  25. schalkneethling
    10:17
    not sure if the designers will go with this though so, this is why I was wondering if there is one of those two values that takes precedence. Although, to be honest, black does not really work for me nor the design
  26. MichielBijl
    10:18
    Black doesn't seem to cut it: http://codepen.io/Michiel/pen/5bb2d15e8ca28c4709af943ca9c6bbce
  27. MichielBijl
    10:18
    I don't find that readable.
  28. schalkneethling
    10:18
    me neither, even though the tool suggests that it passes a lot more than white does
  29. schalkneethling
    10:19
    I find white to be the most readable although, without an underline it is not distinct enough from the body copy
  30. schalkneethling
    10:20
    Although, adding an underline is probably easier to argue for than changing the background color ;)
  31. MichielBijl
    10:26
    Maybe change it to black on yellow? ftp://Agosto.nl//domains/agosto.nl/public_html/dir/dump/Screen%20Shot%202015-09-15%20at%2012.25.46.png
  32. MichielBijl
    10:26
    hmm, an ftp uri doesn't do much good :p
  33. MichielBijl
    10:26
    http://dir.agosto.nl/dump/Screen%20Shot%202015-09-15%20at%2012.25.46.png
  34. MichielBijl
    10:27
    I did a quick hue shift on the background image, so there is room for improvement there.
  35. MichielBijl
    10:27
    Tim for lunch, I'll be back later.
  36. stevefaulkner
    10:36
    @schalkneethling color/brightness was the test used for WCAG 1.0, it was superceded by luminosity/contrast in WCAG 2.0. the luminosity algorithm was focumulated after research, the details http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html are worth a read. in short if the luminosity contrast is good then no worrries
  37. schalkneethling
    10:37
    Ah, good point to be aware of for my upcoming blog post :) Thanks @stevefaulkner
  38. schalkneethling
    10:38
    Thanks @MichielBijl - I will float these ideas by creative and see what they think.
  39. stevefaulkner
    11:53
    May be of interest: Short note on coding alt text http://www.paciellogroup.com/blog/2015/09/short-note-on-coding-alt-text/
  40. garcialo
    12:50
    Nice one, @stevefaulkner
  41. stevefaulkner
    12:51
    :+1:
  42. zakim-robot
    18:33
    [Jesse Beach, a11y] So, I just experienced that the dog-eared unhappy page face icon in Chrome on the screen when a page can't be loadeded, has an aria-description of "Very bright. Crisp."
  43. zakim-robot
    18:33
    [Jesse Beach, a11y] What's up with that?
  44. zakim-robot
    18:34
    [jane, a11y] hi everyone!
  45. zakim-robot
    18:35
    [jane, a11y] @marcysutton: hey pizza queen
  46. zakim-robot
    18:35
    [Jesse Beach, a11y] very-bright-crisp.png
  47. brunopulis
    18:35
    Hello Jane
  48. zakim-robot
    18:37
    [Marcy Sutton, a11y] :wave: hi jane
  49. zakim-robot
    18:39
    [jane, a11y] i'm having a lot of trouble with some work stuff, ultimately it hink i have to refactor all of it but i'd like to be able to tweak just a couple of things instead
  50. zakim-robot
    18:40
    [jane, a11y] on here: https://vimeo.com/categories the topnav submenus are not accessible
  51. zakim-robot
    18:40
    [jane, a11y] the create/watch/ondemand bits
  52. zakim-robot
    18:41
    [jane, a11y] i think i just have to refactor the css to trigger the :focus css change on the right element but in addition to that, can't tab through the individual items in the submenu
  53. zakim-robot
    18:41
    [jane, a11y] any advice would be much appreciated
  54. brunopulis
    18:43
    jane you use javascript to manipulate something else or just css?
  55. zakim-robot
    18:44
    [jane, a11y] just css
  56. zakim-robot
    18:45
    [jane, a11y] so right now the current problem is, the css to open the menu gets applied when the list item (create/watch/ondemand) is focused
  57. zakim-robot
    18:45
    [jane, a11y] however, the thing that's actually focused is <a> not <li>
  58. zakim-robot
    18:45
    [jane, a11y] also bot..?
  59. brunopulis
    18:47
    hmm i think you need to use a bit of javascript to fix this.
  60. zakim-robot
    18:51
    [Marcy Sutton, a11y] @janecakemaster: also agreed you’re probably going to need JS for that, so you can set a context for opening the menu when that anchor is focused.
  61. zakim-robot
    18:52
    [Marcy Sutton, a11y] the bots are from a pipe between this Slack channel and Gitter https://gitter.im/w3c/a11ySlackers
  62. zakim-robot
    18:52
    [jane, a11y] oh got it
  63. zakim-robot
    18:53
    [jane, a11y] so when you say adding JS, like listeners for the focus event to toggle the menus?
  64. zakim-robot
    18:53
    [Marcy Sutton, a11y] correct. then you can add/remove CSS classes on user interaction
  65. brunopulis
    18:53
    @janecakemaster for example, in the attribute aria-hidden="true" when focused you should change the state for aria-hidden="false" something like that.
  66. brunopulis
    18:54
    @janecakemaster: check this http://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html maybe fix your issue :)
  67. zakim-robot
    18:55
    [jane, a11y] ah i've seen this one
  68. zakim-robot
    18:55
    [jane, a11y] this is what happens when a11y isn't addressed from the beginning -__-
  69. brunopulis
    18:56
    I know what your passing
  70. zakim-robot
    18:56
    [Jesse Beach, a11y] aria-menu.png
  71. brunopulis
    18:56
    Here in Brazil the reality of a11y is so sad :(
  72. zakim-robot
    18:57
    [Jesse Beach, a11y] Some suggestions for the ARIA roles and props
  73. brunopulis
    18:57
    Great :)
  74. zakim-robot
    18:58
    [Jesse Beach, a11y] @janecakemaster: here's the whole thing in a codepen: http://codepen.io/jessebeach/pen/BoNWoJ
  75. zakim-robot
    19:01
    [jane, a11y] @jessebeach: thanks!
  76. Tigt
    19:03
    hey slackers, I have a question about how I should fundamentally tackle the ARIA for a comic made out of markup
  77. Tigt
    19:04
    http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ goes a long way with helping, but there are a few finer points that I'm unsure about
  78. Tigt
    19:05
    For starters, I'm not sure about the ramifications of some of the possible role choices; does setting role="img" on the root <svg> prevent "drilling down" into the individual pieces?
  79. zakim-robot
    19:07
    [Jesse Beach, a11y] @janecakemaster: no problem. Feel free to copy/paste and use that code. Suggest improvements as well :simple_smile:
  80. zakim-robot
    19:07
    [jane, a11y] i think irght now i have to basically strip everything down and start over
  81. Tigt
    19:08
    the SVG accessibility working group has proposed a "graphicaldoc" role but I'm not sure what current ARIA role to specify as a fallback for that, if/when it goes live
  82. zakim-robot
    19:09
    [jane, a11y] @brunopulis: any reason why the aria-attributes have to be added dynamically in http://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html example?
  83. zakim-robot
    19:10
    [jane, a11y] we have translations that are rendered serverside
  84. zakim-robot
    19:11
    [Winston Hearn, a11y] i have a coworker wondering if anyone has seen work done around accessible ads? I think it’s a pretty open ended question, she’s just curious if anyone else is thinking about the topic.
  85. zakim-robot
    19:15
    [aarongustafson, a11y] @winston: I haven’t seen anything, but I can poke some people if you’d like.
  86. brunopulis
    19:16
    @janecakemaster I think he using this to change the states of the attributes.
  87. zakim-robot
    19:17
    [Winston Hearn, a11y] One thing we’re thinking about: ensuring ads are skimmable for those on screen readers, perhaps by having a “skip ad” button after some description text.
  88. zakim-robot
    19:18
    [Winston Hearn, a11y] we have a lot of custom ad properties where we can control the markup so we have the ability to ensure things are working well
  89. zakim-robot
    19:23
    [aarongustafson, a11y] The main thing is being able to deliver an alternative to the Flash banner (since that’s what most are). If the ad creator makes it accessible, there’s no reason you should need to do anything. Same goes with SVG-based ads.
  90. zakim-robot
    19:26
    [Winston Hearn, a11y] none of our custom ad products are flash! all flash ads are in iframes and we’re figuring that out on its own
  91. zakim-robot
    19:28
    [aarongustafson, a11y] @janecakemaster: If you are using JavaScript to turn a traditional interface into a different one (i.e. progressive enhancement), it makes sense to dynamically-assign aria roles, states, etc. as they may not make sense in the default state. A good example is linear content being converted into a tabbed interface or accordion. JS is needed for tabs (or trees, etc.), so adding role=“tablist” etc. via JavaScript makes the most sense.
  92. zakim-robot
    20:16
    [jane, a11y] so then i actually don't need to dynamically assign any of it except for aria-hidden, right?
  93. zakim-robot
    20:46
    [Joe Watkins, a11y] Experimenting with using <button> for toggling state with progressive enhancement & accessibility in mind.. anyone have any feelings about how much markup we can have inside a <button> ? thoughts? http://codepen.io/joe-watkins/pen/dYGVRR/
  94. zakim-robot
    21:01
    [Jesse Beach, a11y] Has anyone experience this aria-labelledby bug in Safari? http://codepen.io/jessebeach/pen/xwZQRp
  95. zakim-robot
    21:02
    [Jesse Beach, a11y] Links are not being included in the label calculation
  96. zakim-robot
    21:03
    [Jesse Beach, a11y] I tried adding title, and aria-label to the links, but they're completely ignored in the calculation of the label using aria-labelledby. Works fine on Chrome with VO and JAWS.
  97. zakim-robot
    21:16
    [Jesse Beach, a11y] Anyone want to give this a try in Safari? ^
  98. zakim-robot
    21:39
    [Marcy Sutton, a11y] @jessebeach: in VO it says “Ned Stark and..group"
  99. zakim-robot
    21:39
    [Marcy Sutton, a11y] (in Safari)
  100. zakim-robot
    21:40
    [Jesse Beach, a11y] Cool, that's what I'm getting as well
  101. zakim-robot
    21:50
    [Marcy Sutton, a11y] @joe-watkins: reminds me of the tiles I did for Target a few years ago, here are some variations http://codepen.io/marcysutton/pen/brvnl
  102. zakim-robot
    21:50
    [Marcy Sutton, a11y] Focus management for the front and the back will alert SR users that a change happened, otherwise they have no way of knowing
  103. zakim-robot
    22:15
    [dsturley, a11y] Safari/VoiceOver seems to be getting worse, my skip links, modals are broken now and everything is Clickable...
  104. zakim-robot
    23:50
    [Joe Watkins, a11y] Tnx! @marcysutton :simple_smile: Those are great. Are you freaked out by markup inside the <button> element at all? I feel like it's just as freaky as a meaningless <a href="#"> but gives me more 'off-the-shelf' bells and whistles.
  105. zakim-robot
    23:51
    [Marcy Sutton, a11y] I’m pretty desensitized to it now :confused:
  106. zakim-robot
    23:51
    [Joe Watkins, a11y] ha!