Archive index

A11y Slackers Gitter Channel Archive 28th of April 2016

What fresh hell is THIS now? - Patrick Lauke
  1. mikaelR
    @cr2a-graphique
    Apr 28 08:02
    morning
  2. Michiel Bijl
    @MichielBijl
    Apr 28 08:45
    Morning!
  3. zakim-robot
    @zakim-robot
    Apr 28 08:46
    [hhillen] Morning
  4. Michiel Bijl
    @MichielBijl
    Apr 28 08:46
    @jonathantneal, I don't think the outline algorithm has impact on their usefulness. I think it's the other way around.
  5. Peter Krautzberger
    @pkra
    Apr 28 11:19
    hey slackers, could you please build a service like saucelabs, browserstack, browsertesting etc but with AT pre-installed?
    kthx.
  6. Peter Krautzberger
    @pkra
    Apr 28 11:22
    This great startup idea was brought to you by: douchier-than-application-cache pkra.
  7. Job van Achterberg
    @jkva
    Apr 28 11:56
    "The icons don't need labels, the user can figure out what they do." Yeah, let's make the interface a fucking puzzle.
  8. jkva @jkva sighs
  9. zakim-robot
    @zakim-robot
    Apr 28 11:56
    [jitendra] who said that?
  10. Michiel Bijl
    @MichielBijl
    Apr 28 11:57
    Probably one of jkva's bestest friends.
  11. Job van Achterberg
    @jkva
    Apr 28 11:57
    Haha
  12. Job van Achterberg
    @jkva
    Apr 28 11:58
    Perhaps I'm too dogmatic. Obviously, the currency symbol means "shop", not "bank"
  13. zakim-robot
    @zakim-robot
    Apr 28 11:58
    [jitendra] In mobile view sometime space is a problem and text label are big
  14. zakim-robot
    @zakim-robot
    Apr 28 11:59
    [jitendra] what to do in that condition?
  15. Michiel Bijl
    @MichielBijl
    Apr 28 11:59
    pkra: that is quite an interesting idea.
  16. Job van Achterberg
    @jkva
    Apr 28 11:59
    That's the whole discussion at the moment
  17. Job van Achterberg
    @jkva
    Apr 28 12:00
    Currently aesthetics are trumping usability
  18. Job van Achterberg
    @jkva
    Apr 28 12:00
    If space is a problem on mobile view - that's an interface problem
  19. Job van Achterberg
    @jkva
    Apr 28 12:00
    If you have no room for labels, that says something about your UI
  20. Job van Achterberg
    @jkva
    Apr 28 12:01
    I argue we should improve UI, instead of placing the comprehension responsibility with the user
  21. Job van Achterberg
    @jkva
    Apr 28 12:02
    Currently the consensus is "We'll A/B test with diverse users" - but that just pushes the problem elsewhere
  22. Job van Achterberg
    @jkva
    Apr 28 12:03
    On the other hand, we see "standard icons" in real life, without labels, all the time. Usually that's local to a culture or context - icon meaning doesn't always translate across cultures
  23. zakim-robot
    @zakim-robot
    Apr 28 12:04
    [jitendra] @jkva mobile websites started with vertical menu to solve this problems in starting
  24. Job van Achterberg
    @jkva
    Apr 28 12:05
    Some do. And often still use the text-justify / hamburger "icon" to indicate menu
  25. zakim-robot
    @zakim-robot
    Apr 28 12:05
  26. Job van Achterberg
    @jkva
    Apr 28 12:05
    Designers don't generally like vertical list menus because they're functional, not pretty
  27. Michiel Bijl
    @MichielBijl
    Apr 28 12:05
    alt=iOS Phone.app shows labels underneath icons. https://usercontent.irccloud-cdn.com/file/K008EKK0/IMG_0181.PNG
  28. Michiel Bijl
    @MichielBijl
    Apr 28 12:06
    Tell them iOS hasses labels.
  29. Job van Achterberg
    @jkva
    Apr 28 12:06
    Believe me I've tried. Even brought up culture differences, and label internationalisation... no luck
  30. Job van Achterberg
    @jkva
    Apr 28 12:07
    I'm just gonna try to make stuff as accessible as possible
  31. zakim-robot
    @zakim-robot
    Apr 28 12:07
    [jitendra] What if you have more items in menu?
  32. Michiel Bijl
    @MichielBijl
    Apr 28 12:07
    :clap:
  33. Job van Achterberg
    @jkva
    Apr 28 12:07
    Scroll
  34. Job van Achterberg
    @jkva
    Apr 28 12:08
    Even in that iOS interface - battery icon meaning is assumed, bluetooth is assumed (which I sorta understand), signal strength... (is that a radio signal? Well technically it is)
  35. Job van Achterberg
    @jkva
    Apr 28 12:09
    Interesting how iOS "Voicemail" is a tape spool
  36. Michiel Bijl
    @MichielBijl
    Apr 28 12:09
    I Hipster and stuff
  37. Michiel Bijl
    @MichielBijl
    Apr 28 12:10
    But I think there is a difference between app interface and OS interface.
  38. Job van Achterberg
    @jkva
    Apr 28 12:10
    Is it? How would you visualise voicemail?
  39. Job van Achterberg
    @jkva
    Apr 28 12:10
    speaking-face-envelope?
  40. Michiel Bijl
    @MichielBijl
    Apr 28 12:10
    That sounds pretty good.
  41. Michiel Bijl
    @MichielBijl
    Apr 28 12:11
  42. Michiel Bijl
    @MichielBijl
    Apr 28 12:11
    These don't have labels, but I learn them through usage. I can click on them and get a vague idea of what they are.
  43. Job van Achterberg
    @jkva
    Apr 28 12:11
    Shaka, when the walls fell. Kadir beneath Mo Moteh.
  44. Job van Achterberg
    @jkva
    Apr 28 12:12
    Right - and that's a puzzle
  45. Michiel Bijl
    @MichielBijl
    Apr 28 12:12
    Not saying that is a good excuse, but it's at the OS level in a space where labels aren't expected I'd say.
  46. Michiel Bijl
    @MichielBijl
    Apr 28 12:12
    I'd agree to the puzzel part.
  47. Job van Achterberg
    @jkva
    Apr 28 12:12
    I mean what the hell is that? a flower pot?
  48. Michiel Bijl
    @MichielBijl
    Apr 28 12:12
    TunnelBear ;)
  49. Job van Achterberg
    @jkva
    Apr 28 12:12
    No idea what the thing to the right of dropbox is
  50. Job van Achterberg
    @jkva
    Apr 28 12:13
    Skype, a baseball, a magnifying glass (most-left)
  51. Job van Achterberg
    @jkva
    Apr 28 12:13
    What would Steve Krug do
  52. Michiel Bijl
    @MichielBijl
    Apr 28 12:13
    Sip - Flux - Skype - Caffeine - TunnelBear - 1Password - PassLocker - Dropbox (paused) - VPN - WiFi - Battery status - Day/Time - Spotlight - Notification Centre.
  53. Job van Achterberg
    @jkva
    Apr 28 12:14
    Steve Krug would probably user-test ;)
  54. Job van Achterberg
    @jkva
    Apr 28 12:15
    What's Sip @MichielBijl?
  55. Michiel Bijl
    @MichielBijl
    Apr 28 12:15
    Colour picker
  56. Job van Achterberg
    @jkva
    Apr 28 12:15
    Aaah
  57. Job van Achterberg
    @jkva
    Apr 28 12:15
    I would've expected a pipet
  58. Michiel Bijl
    @MichielBijl
    Apr 28 12:15
    It's the best I've found.
  59. Michiel Bijl
    @MichielBijl
    Apr 28 12:16
    But open to suggestions.
  60. Michiel Bijl
    @MichielBijl
    Apr 28 12:16
    As this one has started to push “Pro” features.
  61. Job van Achterberg
    @jkva
    Apr 28 12:16
    I thought it was a fold-out lens. I had one as a kid that looked just like it
  62. Michiel Bijl
    @MichielBijl
    Apr 28 12:16
    I DON'T WANT YOUR PRO(PAGANDA) FEATURES!
  63. Job van Achterberg
    @jkva
    Apr 28 12:17
    alt=fold-out lens
  64. Michiel Bijl
    @MichielBijl
    Apr 28 12:17
    alt=Sip UI shows list of colours I've picked in the past and option for syntax. https://usercontent.irccloud-cdn.com/file/WcYkxLeZ/Screen%20Shot%202016-04-28%20at%2014.16.56%201.png
  65. Michiel Bijl
    @MichielBijl
    Apr 28 12:17
    That UI is a mess.
  66. Job van Achterberg
    @jkva
    Apr 28 12:18
    Interesting
  67. Michiel Bijl
    @MichielBijl
    Apr 28 12:19
    I huesed to use hues.app, but that got discontinued.
  68. Michiel Bijl
    @MichielBijl
    Apr 28 12:19
    And the company was called Big Comet or something =D
  69. Michiel Bijl
    @MichielBijl
    Apr 28 12:20
    Giant Comet*
  70. Michiel Bijl
    @MichielBijl
    Apr 28 12:20
  71. Job van Achterberg
    @jkva
    Apr 28 12:22
    alt=screenshot of mobile viewport, browser game "Torn" https://usercontent.irccloud-cdn.com/file/EJL9kaLq/
  72. Job van Achterberg
    @jkva
    Apr 28 12:22
    Apparently I'm supposed to know what all those icons mean
  73. Michiel Bijl
    @MichielBijl
    Apr 28 12:22
  74. zakim-robot
    @zakim-robot
    Apr 28 12:43
    [hhillen] Shaka indeed
  75. Michiel Bijl
    @MichielBijl
    Apr 28 12:48
    Shakira?
  76. Jonathan Neal
    @jonathantneal
    Apr 28 13:07
    @MichielBijl, I’m trying to understand what you mean by “the other way around”. Do you mean that their usefulness makes the outline algorithm more useless?
  77. Michiel Bijl
    @MichielBijl
    Apr 28 13:23
    jkva: aha.
  78. Michiel Bijl
    @MichielBijl
    Apr 28 13:24
    jonathantneal: I meant, sectioning elements make the outline algorithm more useful. But that might be stating the obvious.
  79. powrsurg
    @powrsurg
    Apr 28 13:50
    it's a bad UI when I start thinking "I need to turn on NVDA to see what is going on", right?
  80. powrsurg
    @powrsurg
    Apr 28 13:56
    didn't help, but it was worth a shot
  81. powrsurg
    @powrsurg
    Apr 28 13:58
    tortoisegit decided to warn me with a non-resizable dialog box that went off screen and I couldn't tab to the okay button
  82. zakim-robot
    @zakim-robot
    Apr 28 14:02
    [karlgroves] Ouch
  83. Jonathan Neal
    @jonathantneal
    Apr 28 14:35
    Have there been suggestions for a better way to hide content visually while preserving it for screen readers? Right now, the best method tends to involve clip: rect(0, 0, 0, 0); position: absolute;. Have there been other suggested syntaxes (for the future), like visibility: visually-hidden?
  84. zakim-robot
    @zakim-robot
    Apr 28 14:40
    [hhillen] the clip approach is the way to go
  85. powrsurg
    @powrsurg
    Apr 28 14:40
    it's funny that different aspects of the web industry seem to have different suggestions for keeping stuff off screen but still available. When I was doing SEO a lot of people recommended absolutely positioning the text off the screen
  86. zakim-robot
    @zakim-robot
    Apr 28 14:40
    [hhillen] Basically what Bootsrap uses for its .sr-only class
  87. zakim-robot
    @zakim-robot
    Apr 28 14:40
    [hhillen] We used to do that do
  88. Jonathan Neal
    @jonathantneal
    Apr 28 14:41
    @powrsurg, before the discovery of clip, that was a good one, until you had to build a site that had RTL content.
  89. zakim-robot
    @zakim-robot
    Apr 28 14:41
    [hhillen] but there are negative side effects to that
  90. Jonathan Neal
    @jonathantneal
    Apr 28 14:41
    I’m looking through threads about @media (screenreader: none) now. Glad @stevefaulkner visited this years ago. I figured this was an old issue, but I was surprised I didn’t know the resolution, or if there was one, or if we’re still waiting.
  91. powrsurg
    @powrsurg
    Apr 28 14:41
    why would "left: -9999px" matter in regards to RTL?
  92. zakim-robot
    @zakim-robot
    Apr 28 14:41
    [hhillen] also certain outlines, bleeding off screen, screen magnifiers scrolling up and to the left in certain cases, and so on
  93. powrsurg
    @powrsurg
    Apr 28 14:42
    The SEO industry rarely cared about a11y stuff, so outlines, tabbing, etc were never thought about
  94. Jonathan Neal
    @jonathantneal
    Apr 28 14:43
    @powrsurg, depending on the container and the alignment of the page, -9999px might end up having long text sneak in from the left side of the screen.
  95. zakim-robot
    @zakim-robot
    Apr 28 14:43
    [hhillen] the advantage of the clip approach is that the content, although hidden, is still positioned at the same location as where it appears in the DOM
  96. powrsurg
    @powrsurg
    Apr 28 14:43
    heck, they were scared about Google thinking you were cloaking
  97. zakim-robot
    @zakim-robot
    Apr 28 14:44
    [hhillen] yeah I remember the good old keyword stuffing days
  98. zakim-robot
    @zakim-robot
    Apr 28 14:46
    [hhillen] visibility: visually-hidden would be great though
  99. Jonathan Neal
    @jonathantneal
    Apr 28 14:48
    After reviewing the @media (screenreader: none) concept, it seems riddled with issues; firstly, it confuses me as to whether its styles are applied to the screen reader only or to the visual page when a screen reader is active. It seems like the later, and that would be a different use case than what I’m targeting. Also, it seems like yet another vector to track people.
  100. zakim-robot
    @zakim-robot
    Apr 28 14:53
    [hhillen] Yeah there has always been resistance to tracking AT
  101. zakim-robot
    @zakim-robot
    Apr 28 14:57
    [elisa] Could anyone point me to a way to successfully navigate an iOS 'picker'/dropdown menu with VO? I can't seem to figure out how I can actually get to select something in the menu
  102. zakim-robot
    @zakim-robot
    Apr 28 14:59
    [hhillen] swipe up and down
  103. zakim-robot
    @zakim-robot
    Apr 28 14:59
    [hhillen] then double tap to confirm your selection
  104. zakim-robot
    @zakim-robot
    Apr 28 15:03
    [elisa] I'll chalk that issue up to 'fat fingers' then, thank you, that worked
  105. zakim-robot
    @zakim-robot
    Apr 28 15:03
    [elisa] ")
  106. zakim-robot
    @zakim-robot
    Apr 28 15:04
    [hhillen] it’s all about speed with those swipes
  107. zakim-robot
    @zakim-robot
    Apr 28 15:49
    [jitendra] Is making native app accessible easier than web?
  108. zakim-robot
    @zakim-robot
    Apr 28 15:49
    [jitendra] And same for testing too?
  109. zakim-robot
    @zakim-robot
    Apr 28 16:00
    [siva] hey everyone, are there best practices/tutorials on how to let users know that content is still loading in more than one part of ui? like couple of widgets still loading data
  110. Mallory
    @StommePoes
    Apr 28 16:17
    I can say the aria-busy attribute was created as a way to let non-visual users know something was not finished yet.
  111. Mallory
    @StommePoes
    Apr 28 16:18
    However I can't comment on support.. NVDA says "busy" often on our own sites that use it, but haven't tested more SRs.
  112. zakim-robot
    @zakim-robot
    Apr 28 16:22
    [siva] thanks!
  113. Michiel Bijl
    @MichielBijl
    Apr 28 16:49
    LOL - a website I order sushi from has changed their website to allow only 20 characters for the password field. I was unable to login because mine is longer… Dev Tools to the rescue!
  114. zakim-robot
    @zakim-robot
    Apr 28 16:53
    [marcysutton] @michiel does that mean you’re going to have to hack at the devtools every time you use their site?
  115. zakim-robot
    @zakim-robot
    Apr 28 16:59

    [maya] Hello! Does anybody have recommendations for what font size we should set web pages to?

    See this issue: 18F/frontend#118

  116. James Nurthen
    @jnurthen
    Apr 28 17:10
    @marcysutton I'm guessing changing password to something shorter is probably more efficient.
  117. zakim-robot
    @zakim-robot
    Apr 28 17:11
    [marcysutton] Hah, yeah I thought about that after I wrote the message. Some people like doing things the hard way though… :)
  118. James Nurthen
    @jnurthen
    Apr 28 17:12
    I think we need a term for a git PR which is unmergeable for some reason.
  119. James Nurthen
    @jnurthen
    Apr 28 17:12
    anyone have one?
  120. Michiel Bijl
    @MichielBijl
    Apr 28 17:15
    marcysutton: yeap, but I'll send them an e-mail asking them to change it.
  121. Michiel Bijl
    @MichielBijl
    Apr 28 17:15
    Or change my password…
  122. James Nurthen
    @jnurthen
    Apr 28 17:15
    does your sushi ordering really need to be that secure ;)
  123. Michiel Bijl
    @MichielBijl
    Apr 28 17:16
    jnurthen: I think PR-zilla was pretty good…
  124. James Nurthen
    @jnurthen
    Apr 28 17:16
    are you embarrassed about your order history?
  125. James Nurthen
    @jnurthen
    Apr 28 17:16
    too many rolls, not enough nigiri?
  126. James Nurthen
    @jnurthen
    Apr 28 17:17
    i've got it - you always ask for extra wasabi... you are right to want to hide that.
  127. Michiel Bijl
    @MichielBijl
    Apr 28 17:17
    Haha, nah, I just want stuff I can remember.
  128. Michiel Bijl
    @MichielBijl
    Apr 28 17:17
    And then all put in 1Password anyway…
  129. Michiel Bijl
    @MichielBijl
    Apr 28 17:18
    So for sushi, I might choose something like: sleeping with the fishes
  130. James Nurthen
    @jnurthen
    Apr 28 17:18
    yeah.... 1Password rocks
  131. James Nurthen
    @jnurthen
    Apr 28 17:18
    but if you use 1password why do you care?
  132. Michiel Bijl
    @MichielBijl
    Apr 28 17:19
    I don't really.
  133. Michiel Bijl
    @MichielBijl
    Apr 28 17:19
    Most of my accounts are pretty secure anyway.
  134. Michiel Bijl
    @MichielBijl
    Apr 28 17:19
  135. Michiel Bijl
    @MichielBijl
    Apr 28 17:19
    and then a password to match
  136. Michiel Bijl
    @MichielBijl
    Apr 28 17:21
    I like how they optimistica11y send two sets of chopsticks with the order…
  137. James Nurthen
    @jnurthen
    Apr 28 17:22
    :)
  138. zakim-robot
    @zakim-robot
    Apr 28 17:25
    [maya] Hey! I'm pretty new to this slack, is there another channel I should be asking in for my question about how to do fonts sizing accessibly?
  139. zakim-robot
    @zakim-robot
    Apr 28 17:25
    [maya] If there is I'd really appreciate it!
  140. James Nurthen
    @jnurthen
    Apr 28 17:25
    @maya you are in the right place
  141. Michiel Bijl
    @MichielBijl
    Apr 28 17:26
    Also: #general is the only one that is linked to the Gitter room.
  142. James Nurthen
    @jnurthen
    Apr 28 17:27
    Wish @patrickhlauke hung out here to answer this one
  143. zakim-robot
    @zakim-robot
    Apr 28 17:27

    [maya] It sounds clear that setting html to 100% is the most accessible, to deal with browser sizing defaults people have set themselves.

    BUT a lot of developers like to set their pixels to 10px or 62.5% in order to get a 1rem = 10px.

  144. Michiel Bijl
    @MichielBijl
    Apr 28 17:28
    html { font-size: 62.5% } could work.
  145. zakim-robot
    @zakim-robot
    Apr 28 17:28
    [maya] (bc most browsers have their base font-size at 16px)
  146. Michiel Bijl
    @MichielBijl
    Apr 28 17:28
    But then you have to set all your fonts back to 16px.
  147. Michiel Bijl
    @MichielBijl
    Apr 28 17:29
    And x/y=b, where x is width in pixels you need, y is 16, and b is your pixel width in em's.
  148. Michiel Bijl
    @MichielBijl
    Apr 28 17:29
    Seems easy enough.
  149. Michiel Bijl
    @MichielBijl
    Apr 28 17:30
    That is what I do anyway.
  150. Michiel Bijl
    @MichielBijl
    Apr 28 17:30
    Has some easy to remember states too.
  151. zakim-robot
    @zakim-robot
    Apr 28 17:30
    [maya] I think what I've heard is setting your base font size to 62.5% is not good bc it would mess with what people have set as their browsers default font size
  152. Michiel Bijl
    @MichielBijl
    Apr 28 17:30
    60em = 960px
  153. Michiel Bijl
    @MichielBijl
    Apr 28 17:30
    50em = 800px
  154. Michiel Bijl
    @MichielBijl
    Apr 28 17:30
    etc
  155. zakim-robot
    @zakim-robot
    Apr 28 17:31
    [sillero] I would keep the base font-size (user prefs) and adjust specific elements when needed
  156. zakim-robot
    @zakim-robot
    Apr 28 17:31
    [maya] this one article says that 100% should be used for when people set their font-size in their browser settings: http://terrillthompson.com/blog/589.
  157. zakim-robot
    @zakim-robot
    Apr 28 17:32
    [sillero] text visibility is affected not only by size, but by constrast and weight + font style
  158. zakim-robot
    @zakim-robot
    Apr 28 17:33
    [maya] There's also potential problems with the setting to 10px rule as talked about here: https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html.
  159. zakim-robot
    @zakim-robot
    Apr 28 17:33
    [sillero] so I would take that into consideration too, there are tools to measure contrast, and with a small font-size it’s easier to end up not being compliant
  160. zakim-robot
    @zakim-robot
    Apr 28 17:35
    [maya] the issue with going from a 62.5% to a 100% for font-size is the ease for the developer
  161. James Nurthen
    @jnurthen
    Apr 28 17:35
    you have to go pretty big to qualify to be "large font" though.
  162. zakim-robot
    @zakim-robot
    Apr 28 17:36
    [sillero] what ease is there for using 62.5% ?
  163. zakim-robot
    @zakim-robot
    Apr 28 17:36
    [maya] 1em = 10px
  164. Michiel Bijl
    @MichielBijl
    Apr 28 17:36
    18,666px is pretty big :(
  165. James Nurthen
    @jnurthen
    Apr 28 17:36
    not as big at 24px :)
  166. zakim-robot
    @zakim-robot
    Apr 28 17:36
    [sillero] so you can can work in decimals?
  167. zakim-robot
    @zakim-robot
    Apr 28 17:37
    [maya] right
  168. zakim-robot
    @zakim-robot
    Apr 28 17:37
    [maya] all of our spacing would go from neat 2rem to 1.2993798798rem
  169. Michiel Bijl
    @MichielBijl
    Apr 28 17:37
    sillero: hmm, well, if you have a 3x screen 8)
  170. zakim-robot
    @zakim-robot
    Apr 28 17:38
    [maya] so is this sacrifice worth it?
  171. Michiel Bijl
    @MichielBijl
    Apr 28 17:38
    Hmm
  172. Michiel Bijl
    @MichielBijl
    Apr 28 17:39
    Maybe you need a design based on the font-size :P
  173. zakim-robot
    @zakim-robot
    Apr 28 17:39
    [sillero] well, I think that depends on your use case
  174. Michiel Bijl
    @MichielBijl
    Apr 28 17:39
    In all seriousness, I'd need to read up on what the impact of it all is.
  175. zakim-robot
    @zakim-robot
    Apr 28 17:40
    [sillero] as long as your text content is readable, whatever design system you use is your choice
  176. zakim-robot
    @zakim-robot
    Apr 28 17:41
    [sillero] IMO
  177. Michiel Bijl
    @MichielBijl
    Apr 28 17:41
    Yeah, I don't really see the issue right now.
  178. Michiel Bijl
    @MichielBijl
    Apr 28 17:41
    Browsers zoom text just fine.
  179. Michiel Bijl
    @MichielBijl
    Apr 28 17:42
    And personal styles will just overwrite your HTML font-size (I assume)
  180. zakim-robot
    @zakim-robot
    Apr 28 17:43
    [sillero] btw, from experience, be careful with rem when using transitions
  181. zakim-robot
    @zakim-robot
    Apr 28 17:43
    [sillero] I had some bad experiences with browsers crashing
  182. zakim-robot
    @zakim-robot
    Apr 28 17:44
    [sillero] had to switch back some stuff to pixels
  183. zakim-robot
    @zakim-robot
    Apr 28 17:45
    [maya] I'm curious if @cordelia has any thoughts around this as well, so tagging her :)
  184. Michiel Bijl
    @MichielBijl
    Apr 28 17:45
    Is rem scoped to html or body?
  185. zakim-robot
    @zakim-robot
    Apr 28 17:48
    [sillero] root = html
  186. Michiel Bijl
    @MichielBijl
    Apr 28 18:19
    Makes sense.
  187. Jonathan Neal
    @jonathantneal
    Apr 28 18:20
    I’m asking Tab about recommendations on setting font-size, color, or background-color on html or :root, because I seem to remember him once saying that I should not do that. https://twitter.com/jon_neal/status/725751310889394176
  188. Jonathan Neal
    @jonathantneal
    Apr 28 18:21
    I must have misunderstood him.
  189. Jonathan Neal
    @jonathantneal
    Apr 28 18:22
    It’s always good to ask. :)
  190. powrsurg
    @powrsurg
    Apr 28 19:05
    it shouldn't be a problem setting it on them, but I always defined those things on body
  191. powrsurg
    @powrsurg
    Apr 28 19:06
    I never used rem because of browser support issues. I never knew how a browser would handle receiving a unit it didn't understand and I care about older IE users.
  192. James Nurthen
    @jnurthen
    Apr 28 19:11
    you could always polyfill for IE8 users if you really care about them :)
  193. David Hund
    @davidhund
    Apr 28 19:13
    polyfill rem? Why not simply define the property twice: .foo { font-size: 16px; font-size: 1rem; } — works fine this way...
  194. James Nurthen
    @jnurthen
    Apr 28 19:15
    could do - just means you have to double define all your font sizes
  195. David Hund
    @davidhund
    Apr 28 19:17
    yup. Better than throwing JS at it IMO ;-)
  196. James Nurthen
    @jnurthen
    Apr 28 19:18
    depends how many of your users you expect to need it.
  197. powrsurg
    @powrsurg
    Apr 28 19:19
    why double define though? you already know what the font size should be so the rem becomes useless
  198. Patrick H. Lauke
    @patrickhlauke
    Apr 28 20:08
    @jnurthen eh?
  199. zakim-robot
    @zakim-robot
    Apr 28 20:21
    [alice] Anyone about for an ARIA design patterns question? =D
  200. zakim-robot
    @zakim-robot
    Apr 28 20:22
    [marcysutton] Sure =D
  201. zakim-robot
    @zakim-robot
    Apr 28 20:23
    [alice] https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/#radiobutton "Space selects the radio button with focus and de-selects other radio buttons in the group."
  202. zakim-robot
    @zakim-robot
    Apr 28 20:23
    [alice] That is ... not how native radio buttons work. Feature or bug?
  203. zakim-robot
    @zakim-robot
    Apr 28 20:28
    [marcysutton] I don’t even know how you get onto a radio button without selecting it.
  204. zakim-robot
    @zakim-robot
    Apr 28 20:30
    [marcysutton] Ahh, it happens if none are checked by default. You have to check one with SPACE.
  205. zakim-robot
    @zakim-robot
    Apr 28 20:30
  206. zakim-robot
    @zakim-robot
    Apr 28 20:30
    [marcysutton] Tab onto the group, hit SPACE or an arrow key to select one.
  207. Michiel Bijl
    @MichielBijl
    Apr 28 20:32
    Alice: if none are selected—as Marcy said—you can activate with space.
  208. Michiel Bijl
    @MichielBijl
    Apr 28 20:33
    But yeah, seems weird to say other radio buttons should be de-selected :/
  209. Michiel Bijl
    @MichielBijl
    Apr 28 20:33
  210. zakim-robot
    @zakim-robot
    Apr 28 20:33
    [marcysutton] I mean, it’s what happens when you select a radio button…the others are deselected.
  211. zakim-robot
    @zakim-robot
    Apr 28 20:33
    [marcysutton] It makes sense to me
  212. Michiel Bijl
    @MichielBijl
    Apr 28 20:34
    You can only tab to a radio button that isn't selected if none of them are.
  213. Michiel Bijl
    @MichielBijl
    Apr 28 20:34
    AFAIK anyway.
  214. Michiel Bijl
    @MichielBijl
    Apr 28 20:35
    So, the “deselects all others” part doesn't make sense.
  215. Michiel Bijl
    @MichielBijl
    Apr 28 20:35
    As in, that's not what happens right?
  216. Michiel Bijl
    @MichielBijl
    Apr 28 20:35
    Or am I drunk again?
  217. zakim-robot
    @zakim-robot
    Apr 28 20:35
    [marcysutton] But only one can be selected at a time…? It acts as a single tab stop.
  218. Mark Sadecki
    @cptvitamin
    Apr 28 20:36
    marking up “program cards” which would be collection of the following bits of info: program title, host school, summary of progress (you’ve completed 2 out of 3 of the courses in this program”), followed by a link to the program home page. You may be enrolled in multiple “programs” so there would be multiple “cards” on the listing page. I’m trying to consider the proper markup for the card container. Wondering if this thinking is sound: div with role of group, labelled by the program name, describedby the progress summary. thoughts?
  219. zakim-robot
    @zakim-robot
    Apr 28 20:36
    [alice] http://output.jsbin.com/tevizutuna (quick and dirty without <label>s)
  220. zakim-robot
    @zakim-robot
    Apr 28 20:36
    [alice] you can tab to first or last radio button without selecting
  221. zakim-robot
    @zakim-robot
    Apr 28 20:36
    [alice] arrow keys always select
  222. Michiel Bijl
    @MichielBijl
    Apr 28 20:37
    Marcy: true. But you can't get to a non selected radio button to activate it (and thus de-activate the other ones).
  223. zakim-robot
    @zakim-robot
    Apr 28 20:37
    [marcysutton] not from tab, but from the arrow keys, yes.
  224. Michiel Bijl
    @MichielBijl
    Apr 28 20:37
    Yeah, but if you make a selected, go someplace else, and tab into radio group again; you set focus to the selected one.
  225. Michiel Bijl
    @MichielBijl
    Apr 28 20:38
    Wait, maybe it's to do with screen readers.
  226. Michiel Bijl
    @MichielBijl
    Apr 28 20:38
    You can move to a radio button—that is not selected—with a screen reader.
  227. Michiel Bijl
    @MichielBijl
    Apr 28 20:38
    In that case it makes sense.
  228. zakim-robot
    @zakim-robot
    Apr 28 20:38
    [marcysutton] I guess i’m missing the problem :)
  229. Michiel Bijl
    @MichielBijl
    Apr 28 20:39
    Doesn't make sense in keyboard only mode without SR, but does with SR running.
  230. zakim-robot
    @zakim-robot
    Apr 28 20:39
    [alice] but if the SR is running... aren't the custom keyboard events more or less moot, unless you pass them through?
  231. Michiel Bijl
    @MichielBijl
    Apr 28 20:39
    Problem to me is that there is no way (without a screen reader) to set focus to a radio button that is not selected if there is one selected in the group.
  232. zakim-robot
    @zakim-robot
    Apr 28 20:40
    [alice] yes, exactly (other than the method @marcysutton mentioned)
  233. zakim-robot
    @zakim-robot
    Apr 28 20:40
    [marcysutton] I’m not sure how you would solve that while keeping them as one tab stop.
  234. Michiel Bijl
    @MichielBijl
    Apr 28 20:40
    I feel we're not talking about the same thing =P
  235. Michiel Bijl
    @MichielBijl
    Apr 28 20:41
    "Space selects the radio button with focus and de-selects other radio buttons in the group."
  236. Michiel Bijl
    @MichielBijl
    Apr 28 20:41
    This makes sense.
  237. zakim-robot
    @zakim-robot
    Apr 28 20:41
    [alice] The design pattern as written right now makes no mention of the arrow key changing the selection
  238. zakim-robot
    @zakim-robot
    Apr 28 20:41
    [alice] typically, the radio button with focus is already selected
  239. Michiel Bijl
    @MichielBijl
    Apr 28 20:41
    …if you were able to select a non-selected radio button in a group that has a selected radio button.
  240. zakim-robot
    @zakim-robot
    Apr 28 20:41
    [alice] except for the edge case where you move focus to a radio group with nothing yet selected
  241. Michiel Bijl
    @MichielBijl
    Apr 28 20:42
    Only way to do that is via scripting, or, more likely, a screen reader.
  242. zakim-robot
    @zakim-robot
    Apr 28 20:42
    [marcysutton] Ah, yes. The arrow keys making the selection seem like the problem. But changing that interaction would be a bigger problem. =D
  243. Michiel Bijl
    @MichielBijl
    Apr 28 20:43
    Alice: hmm, I see the arrow interaction specified here: http://w3c.github.io/aria/practices/aria-practices.html#radiobutton
  244. Michiel Bijl
    @MichielBijl
    Apr 28 20:43
    Up Arrow and Left Arrow moves focus to the previous radio button in the group, and selects that button. If focus is on the first item, then focus wraps to last item.
  245. Michiel Bijl
    @MichielBijl
    Apr 28 20:44
    Should be in the latest working draft too.
  246. zakim-robot
    @zakim-robot
    Apr 28 20:44
    [alice] Oh so it does
  247. zakim-robot
    @zakim-robot
    Apr 28 20:44
    [alice] duh
  248. Michiel Bijl
    @MichielBijl
    Apr 28 20:44
    =)
  249. zakim-robot
    @zakim-robot
    Apr 28 20:45
    [alice] So ok the world makes sense
  250. zakim-robot
    @zakim-robot
    Apr 28 20:45
    [alice] Assuming you don't implicitly select each radio button when you move focus to it
  251. Michiel Bijl
    @MichielBijl
    Apr 28 20:46
    …or if you use a screen reader.
  252. zakim-robot
    @zakim-robot
    Apr 28 20:46
    [alice] ok!
  253. zakim-robot
    @zakim-robot
    Apr 28 20:46
    [alice] Thanks for talking me through this :)
  254. Michiel Bijl
    @MichielBijl
    Apr 28 20:46
    :+1:
  255. Mark Sadecki
    @cptvitamin
    Apr 28 21:09

    Can anyone sanity check this for me?

    marking up “program cards” which would be collection of the following bits of info: program title, host school, summary of progress (you’ve completed 2 out of 3 of the courses in this program”), followed by a link to the program home page. You may be enrolled in multiple “programs” so there would be multiple “cards” on the listing page. I’m trying to consider the proper markup for the card container. Wondering if this thinking is sound: div with role of group, labelled by the program name, describedby the progress summary. thoughts?

  256. James Nurthen
    @jnurthen
    Apr 28 21:10
    just to add to the radio button confusion the behaviour in different browsers is different.
  257. James Nurthen
    @jnurthen
    Apr 28 21:11
    in FF if none is selected you can tab to each of the radio buttons, In Chrome and IE you tab to the first (or shift+tab to the last)
  258. James Nurthen
    @jnurthen
    Apr 28 21:12
    the design pattern went with the majority and attempts to decribe the chrome/ie behaviour
  259. zakim-robot
    @zakim-robot
    Apr 28 21:31
    [marcysutton] @cptvitamin do you have a wireframe or design? Sort of hard to visualize in text format
  260. James Nurthen
    @jnurthen
    Apr 28 21:35
    @cptvitamin how many might you have as max/min numbers
  261. James Nurthen
    @jnurthen
    Apr 28 21:36
    if not too many i might make them sections with a label to make them landmarks
  262. James Nurthen
    @jnurthen
    Apr 28 21:36
    the question to answer - is do you want them to be landmarks
  263. Michiel Bijl
    @MichielBijl
    Apr 28 21:36
    jnurthen: Safari has the same behaviour.
  264. James Nurthen
    @jnurthen
    Apr 28 21:37
    as chrome and IE i assume
  265. Michiel Bijl
    @MichielBijl
    Apr 28 21:37
    Yes.
  266. zakim-robot
    @zakim-robot
    Apr 28 21:42
    [dpogue] So I've written a polyfill for the <dialog> element in Angular, and I'm trying to ensure that it's properly accessible... I have very little experience with screen-readers, but what I'm hearing from VoiceOver doesn't sound all that helpful. Any recommendations for figuring out what I should be expecting as output from VoiceOver?
  267. zakim-robot
    @zakim-robot
    Apr 28 22:01
    [hhillen] when the dialog opens, ensure keyboard focus is moved into the role=“dialog” container. Also ensure that the role=“dialog” container is labeled, i.e. through the aria-label,aria-labelledby or title attribute. The best approach is for each dialog to have a heading at the start and used that heading as a target for the dialog’s aria-labelledby attribute. If the dialog only contains a simple message, have the role=“dialog” element target that with aria-describedby. When you do all this, when the dialog opens VO should announce "<dialog name>, dialog, <dialog description>, <focused element>"
  268. James Nurthen
    @jnurthen
    Apr 28 22:13
    I wish we had the APG dialog pattern updated - then we could just point people there
  269. zakim-robot
    @zakim-robot
    Apr 28 22:29
    [dpogue] In my case it seems to read "<description paragraph> <buttons>, dialog, <focused element>" which is weird because the focused element is in between the opening paragraph and the buttons :\
  270. zakim-robot
    @zakim-robot
    Apr 28 22:30
    [alansouzati] hello experts! i’m working on adding clickable paths inside my SVG chart. I’m wondering which role I should use in case the path is clickable? Right now the role of my inner path is “img”.
  271. zakim-robot
    @zakim-robot
    Apr 28 22:31
    [karlgroves] What happens when you click it?
  272. James Nurthen
    @jnurthen
    Apr 28 22:31
    I would probably wait to change it until the aria graphics module has moved along a little more
  273. zakim-robot
    @zakim-robot
    Apr 28 22:32
    [alansouzati] thanks for the quick follow up @karlgroves. I have a library, so what happens depends on the caller. right now I just invoke their callback function.
  274. zakim-robot
    @zakim-robot
    Apr 28 22:32
    [karlgroves] Then let the cb define the role
  275. zakim-robot
    @zakim-robot
    Apr 28 22:33
    [alansouzati] in case they don’t define, is there a good recommendation for a fallback role ?
  276. zakim-robot
    @zakim-robot
    Apr 28 22:34
    [alansouzati] i just want to make sure, regardless of the caller, I will inform the A11y tool that this path is clickable
  277. zakim-robot
    @zakim-robot
    Apr 28 22:34
    [alansouzati] sorry if this is a silly question
  278. zakim-robot
    @zakim-robot
    Apr 28 22:35

    [karlgroves] at a high level: if it performs an action in the current context then it would be a button. If it changes context it is a link.

    Silly questions are OK. Nobody here started off an accessibility expert

  279. zakim-robot
    @zakim-robot
    Apr 28 22:36
    [alansouzati] thanks for the kind words :) i think i have an idea what I should do for now. appreciate the insights
  280. James Nurthen
    @jnurthen
    Apr 28 22:36
    and roles in charts and graphs are hard. you wouldn't believe the arguments i have had with our charting folks over whether something in a chart is a checkbox or just an image
  281. zakim-robot
    @zakim-robot
    Apr 28 22:38
    [hhillen] @dpogue do you have a demo we can look ast
  282. James Nurthen
    @jnurthen
    Apr 28 22:38
    aria-roledescription should help a lot for things like this when it has similar behaviour to a control but isn't really it
  283. zakim-robot
    @zakim-robot
    Apr 28 22:39
    [dpogue] yeah, demo is at http://share.dpogue.ca/modal/
  284. zakim-robot
    @zakim-robot
    Apr 28 22:52
    [hhillen] That’s marked up and announced correctly
  285. zakim-robot
    @zakim-robot
    Apr 28 22:52
    [hhillen] for me
  286. zakim-robot
    @zakim-robot
    Apr 28 22:56
    [dpogue] Okay, what I was hearing from VoiceOver in Safari didn't make much sense to me, but maybe that's the correct output anyhow
  287. zakim-robot
    @zakim-robot
    Apr 28 22:56
    [dpogue] thanks for checking!
  288. zakim-robot
    @zakim-robot
    Apr 28 22:59
    [hhillen] For me it said “dialog title, dialog, dialog body, search edit"
  289. zakim-robot
    @zakim-robot
    Apr 28 23:00
    [hhillen] Oh and it also said how many items there were in the dialog
  290. zakim-robot
    @zakim-robot
    Apr 28 23:01
    [hhillen] Of course now when I do it again it just says “Search: search field"
  291. zakim-robot
    @zakim-robot
    Apr 28 23:01
    [hhillen] So it’s a bit inconsistent. But the markup is correct
  292. zakim-robot
    @zakim-robot
    Apr 28 23:02
    [alansouzati] thanks jnurthen for the tip on role description, I will give it a try
  293. David Storey
    @dstorey
    Apr 28 23:52
    ha, the above is good timing. We’re looking at guidance for our internal and external (e.g. dev.microsoftedge.com) charting needs, and I was wondering if there is a charting library that people recommend that does a better job at a11y. Currently we just use the canvas sub-DOM and put a table in there.