Archive index

A11y Slackers Gitter Channel Archive 11th of August 2015

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    Aug 11 07:37

    :point_up: August 10, 2015 3:35 PM

    A bug in Safari that has been fixed, still working its way into release version https://lists.w3.org/Archives/Public/public-pfwg/2015Aug/0024.html

  2. StommePoes
    Aug 11 07:59
    @alice Boxhall: the issue with placeholders-- when used correctly to give hints, indeed we don't want them to be so contrasty that they suggest some default, pre-filled value the user may skip (which usability research shows).
  3. StommePoes
    Aug 11 07:59
    however as many developers who are forced to have placeholders in-place-of labels are getting around some of those issues by, for example, positioning and styling real labels to look like placeholders but then darkening them and moving them above/next to the inputs when those inputs are focussed or have values... I think a similar demand could be made of developers when it comes to placeholder hints-- that maybe they should remain low-contrast at first, but gain readable contrast as users interact with them.
  4. StommePoes
    Aug 11 08:01
    The difference/problem here being, actual placeholders are hard to style, ::somebrowser-placeholder-styles not being sufficient, which would mean abandoning placeholder attributes entirely and using something else for hints. Which then kinda defeats the whole point of adding placeholder attributes to texty inputs in the first place, I guess.
  5. MichielBijl
    Aug 11 08:06
    @stevefaulkner we'll probably see it in Safari 10…
  6. MichielBijl
    Aug 11 08:19
    @alice @StommePoes this should help with future placeholder implementations: http://www.w3.org/TR/selectors4/#placeholder
  7. StommePoes
    Aug 11 08:21
    that matches the input, though
  8. StommePoes
    Aug 11 08:22
    does it let us better style (and move?) the placeholders themselves?
  9. StommePoes
    Aug 11 08:23
    anyway, for hints today, I'm more inclined to have an absolutely-placed p with aria-describedby positioned over the input... problem is, unlike labels, other elements can't be clicked-through (pointer-events aside)
  10. ahmednuaman
    Aug 11 08:24
    @MichielBijl thanks
  11. MichielBijl
    Aug 11 08:43
    @StommePoes yes, matches the input, so you can style according to whether the placeholder is shown. It does not allow you to move it, but better handle styles for say a label.
  12. MichielBijl
    Aug 11 08:43
    Implemented in WebKit nightlies
  13. StommePoes
    Aug 11 08:47
    The point is the placeholder though
  14. StommePoes
    Aug 11 08:47
    it's lighjt
  15. StommePoes
    Aug 11 08:48
    you can style it, with like ::-webkit-placeholder-somethingsomething
  16. StommePoes
    Aug 11 08:48
    and a few others
  17. StommePoes
    Aug 11 08:48
    that don't match all browsers
  18. StommePoes
    Aug 11 08:48
    setting the colour of the input does not always allow the placeholder to become darker
  19. StommePoes
    Aug 11 08:48
    so if I'm using placeholder to show an input hint
  20. StommePoes
    Aug 11 08:49
    and I want it to move out of the way and become readable when the input is focussed or filled
  21. StommePoes
    Aug 11 08:49
    then I cannot even really use a placeholder.
  22. MichielBijl
    Aug 11 08:49
    Hmm, not aware of any issues with ::placeholder
  23. MichielBijl
    Aug 11 08:50
    But I see what you're getting at
  24. StommePoes
    Aug 11 08:50
    I forgot, I'm the only one living in the world of enterprise
  25. MichielBijl
    Aug 11 08:51
    Link it through aria-describedby and use the linked element as placeholder?
  26. MichielBijl
    Aug 11 08:51
    Same result + it's moveable
  27. StommePoes
    Aug 11 08:52
    that's what I said earlier
  28. MichielBijl
    Aug 11 08:52
    Oh, my bad
  29. StommePoes
    Aug 11 08:52
    The problem is that then I have to rely on pointer events
  30. MichielBijl @MichielBijl needs more coffee
  31. StommePoes
    Aug 11 08:52
    my p (or whatever) would be covering the input. Unless it's somethign I stick into the label... that's an option.
  32. MichielBijl
    Aug 11 08:53
    I usually use a label for this stuff, yes
  33. MichielBijl
    Aug 11 08:53
    Then it is linked to the input
  34. StommePoes
    Aug 11 08:53
    and not necessarily a bad idea form-wise either... it's verbose, but if I'm bothering to tell someone in a hint HOW to type in the date, then they ought to get it in the label.
  35. StommePoes
    Aug 11 08:53
    but some hints are damn long
  36. StommePoes
    Aug 11 08:53
    or aanvullende information
  37. MichielBijl
    Aug 11 08:54
    Hmm, yeah, that could still be put in a described by and placed underneath or something
  38. StommePoes
    Aug 11 08:54
    like, "label==delivery date. hint=="deliveries are between blah and blah, not including sundays weekends bank holidays and blue moons" etc
  39. StommePoes
    Aug 11 08:54
    yeah
  40. StommePoes
    Aug 11 08:54
    That's what I'd rather. What fonq has now is that the "hint" appears if you mess the input up
  41. StommePoes
    Aug 11 08:54
    like, you got it wrong, so we'll add it under the input next to the error.
  42. StommePoes
    Aug 11 08:55
    I didn't decide it, but maybe it works, they've had it like that for years.
  43. StommePoes
    Aug 11 08:56
    [quote=brothercake]"The variation in colon syntax is because webkit and mozilla have different ideas about what the placeholder text actually is.Mozilla considers it to be merely a different interactive state, so it defines a pseudo-class that address that difference; hence the single-colon syntax.Webkit consider it to be a separate pseudo-element, so it defines a pseudo-element to address a different piece of text; hence the double-colon syntax."
  44. StommePoes
    Aug 11 08:56
    I wonder if this is different nopw. This was in 2010.
  45. MichielBijl
    Aug 11 09:19
    Hmm, pseudo-element would allow you to move it…
  46. StommePoes
    Aug 11 09:20
    yeah
  47. StommePoes
    Aug 11 09:20
    and more styling options
  48. StommePoes
    Aug 11 09:20
    and as part of the input, it would/should not interfere with clicking by any UA
  49. MichielBijl
    Aug 11 09:21
    I prefer WebKit's interpretation
  50. stevefaulkner
    Aug 11 09:35

    A11ySlackers chat log 10th of August 2015 http://w3c.github.io/a11ySlackers/archives/100815.html

  51. MichielBijl
    Aug 11 09:37
    Here we see Steve's unusually large links in its native habitat. We should try not to disturb it while we take a closer look.
  52. StommePoes
    Aug 11 09:39
    ga maar, Freek
  53. StommePoes
    Aug 11 09:40
    or, since it's Steve, it should be sir david attenborough
  54. stevefaulkner
    Aug 11 09:41

    it's all in the hash # ;-)

  55. LukyVj
    Aug 11 09:42
    Hi fellows
  56. LukyVj
    Aug 11 09:43
    Glad to see there is a gitter room for A11Y :)
  57. MichielBijl
    Aug 11 09:52
    Hi @LukyVj :)
  58. MichielBijl
    Aug 11 09:52
    @StommePoes who is Freek? Freek de Jonge?
  59. MichielBijl
    Aug 11 09:53
    If anything, it should Steve Irwin as narrator.
  60. StommePoes
    Aug 11 09:54
    Irwin's dead, he can't narrate
  61. MichielBijl
    Aug 11 09:55
    An Irwin imitator will have to do
  62. StommePoes
    Aug 11 09:56
    Well... that would be... @stevefaulkner. He's an ozzie. He can say crikey.
  63. StommePoes
    Aug 11 09:56
    and 'drop bear'.
  64. stevefaulkner
    Aug 11 09:56
    hi @LukyVj
  65. LukyVj
    Aug 11 09:57
    Hey Steve! I'm here because I saw your tweet about it ! :)
  66. stevefaulkner
    Aug 11 09:57
    cool!
  67. StommePoes
    Aug 11 09:58
    "The Steve lures in his prey with the use of his twitters"
  68. StommePoes
    Aug 11 09:58
    "The LukyVj is unsuspecting"
  69. LukyVj
    Aug 11 09:59
    Hehe
  70. MichielBijl
    Aug 11 10:00
    “Everyone in the fields scatter as a wild @patrickhlauke approaches”
  71. StommePoes
    Aug 11 10:00
    "A wild Boolean appears"
  72. MichielBijl
    Aug 11 10:00
    I wonder what I was thinking when I made this: http://codepen.io/Michiel/pen/fHqsk/
  73. MichielBijl
    Aug 11 10:00
    It's not even a menu, it's a listbox / select thingy
  74. LukyVj
    Aug 11 10:01
    Maybe a dumb question but
  75. LukyVj
    Aug 11 10:01
    Why don't you simply change the root font setting ?
  76. MichielBijl
    Aug 11 10:01
    In that codepen thingy?
  77. LukyVj
    Aug 11 10:01
    Yup
  78. StommePoes
    Aug 11 10:01
    looks like he'd have to set a family then
  79. MichielBijl
    Aug 11 10:01
    My todo says I have to find a better example for its usage ;)
  80. MichielBijl
    Aug 11 10:02
    Functionality wise it's very close to both a menu and a listbox.
  81. MichielBijl
    Aug 11 10:02
    It makes sense when you use VO, so that is something
  82. LukyVj
    Aug 11 10:03
    Okay, I just ask because when I zoom the font, the render is a bit "blurry"
  83. LukyVj
    Aug 11 10:03
  84. MichielBijl
    Aug 11 10:03
    Design wise it's very much a listbox, not a menu
  85. MichielBijl
    Aug 11 10:03
    Ah, that's no good
  86. StommePoes
    Aug 11 10:04
    because it's scaled as a transform?
  87. MichielBijl
    Aug 11 10:04
    I want it to change something that is not only visual
  88. MichielBijl
    Aug 11 10:04
    Just haven't thought of anything good
  89. StommePoes
    Aug 11 10:04
    what about, Show Developer View/Show Author View?
  90. MichielBijl
    Aug 11 10:04
    And I need to rewrite it to use proper roles, and vanilla JS
  91. MichielBijl
    Aug 11 10:05
    It should be something with more than 4 options
  92. StommePoes
    Aug 11 10:05
    in any case, I don't see why this isn't a button. I click it, and it Does Stuff.
  93. MichielBijl
    Aug 11 10:05
    It is a button?
  94. StommePoes
    Aug 11 10:05
    it's there for my clicking pleasure
  95. StommePoes
    Aug 11 10:05
    isn't it?
  96. MichielBijl
    Aug 11 10:05
    It is :)
  97. stevefaulkner
    Aug 11 10:05

    Maybe a dumb question but

    no dumb questions here, only dumb answers 😜

  98. StommePoes
    Aug 11 10:05
    that it happens to display a value doesn't stop that.
  99. MichielBijl
    Aug 11 10:06
    The menu that unfolds should be a listbox as far as I'm concerned now
  100. LukyVj
    Aug 11 10:06
    If you guys are willing to share your codepen accounts, that would be awesome for me, to follow you :) I'm not into A11Y that much, but I'm really interested in.
  101. MichielBijl
    Aug 11 10:06
    http://codepen.io/Michiel http://codepen.io/stevef
  102. LukyVj
    Aug 11 10:06
    Ah it seems I already follow you, Michiel
  103. StommePoes
    Aug 11 10:06
    hm, probably. Only because the menu inside doesn't have actual controls, but I wonder actually if the menuitems alonw count actually... cause they would in a right-click context menu.
  104. stevefaulkner
    Aug 11 10:07
    @LukyVj i use mine mainly as a scratchpad for tests and ideas so not a lot of interest there
  105. StommePoes
    Aug 11 10:07
    I dunno, Michiel, you read Marco's thing about listboxes? He lists all these things they do (or don't do) for him
  106. MichielBijl
    Aug 11 10:07
    Hmm, no, have a link?
  107. MichielBijl
    Aug 11 10:08
    The only real difference between this being a menu and a listbox atm is the design.
  108. StommePoes
    Aug 11 10:08
    he's talking about autocomplete, which other than the fact that what you select acts like alink, sounds similar https://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/
  109. MichielBijl
    Aug 11 10:08
    And the fact that the button to open it shows the value
  110. LukyVj
    Aug 11 10:08
    @stevefaulkner Np, it's still cool to explore :)
  111. MichielBijl
    Aug 11 10:08
    That makes it a listbox by default
  112. StommePoes
    Aug 11 10:09
    what's a context menu then?
  113. StommePoes
    Aug 11 10:09
    that it's called by a right click or whether you click on something, should that matter?
  114. StommePoes
    Aug 11 10:09
    context menus are often listed as examples of menu/menuitem/blah menus
  115. stevefaulkner
    Aug 11 10:09
    @LukyVj the TPG blog is good for info (me thinks) ;-)
  116. stevefaulkner
    Aug 11 10:09
    http://www.paciellogroup.com/blog/
  117. MichielBijl @MichielBijl agrees, TPG blog is good ;)
  118. StommePoes
    Aug 11 10:10
    @luky you may also want to see @heydonworks' codepens in addition to these guys
  119. stevefaulkner
    Aug 11 10:11
    yeah @Heydon is great, apart from his breath
  120. MichielBijl
    Aug 11 10:11
    @StommePoes I scanned the article, seems listbox is the right choice here.
  121. StommePoes
    Aug 11 10:11
    "The roles menubar, menu, and menuitem plus related menuitemcheckbox and menuitemradio roles should be reserved for real menu bar/dropdown menu, or context menu scenarios. "
  122. MichielBijl
    Aug 11 10:11
    Is it a menubar though?
  123. MichielBijl
    Aug 11 10:11
    I marked it up as a toolbar
  124. MichielBijl
    Aug 11 10:12
    Menu bar would be stuff like File, Edit, etc, right?
  125. StommePoes
    Aug 11 10:12
    but I'm still not certain, based at least on the fact that you're changing an existing element underneath, that this isn't a menu.
  126. StommePoes
    Aug 11 10:12
    Menus are menus which are lists of actions or controls that Do Stuff.
  127. MichielBijl
    Aug 11 10:12
    True.
  128. MichielBijl
    Aug 11 10:13
    But, then, shouldn't the button read “Font Size”
  129. StommePoes
    Aug 11 10:13
    but I think particularly, since they're kinda assumed to be working with Some Application, that if the choices affect some Already-Existing thing near/under/next to it, that it could indeed be a menu.
  130. MichielBijl
    Aug 11 10:13
    Or “Set font size”
  131. StommePoes
    Aug 11 10:13
    sure.
  132. StommePoes
    Aug 11 10:13
    But there's no good reason for it not also to state the current value as well
  133. StommePoes
    Aug 11 10:13
    Like, in Opera, the zoomy button
  134. StommePoes
    Aug 11 10:14
    oh, Opera has multiple ways of doing that, a slider and a button. the button just has an arrow
  135. StommePoes
    Aug 11 10:14
    and the popup simply highlights the current setting
  136. StommePoes
    Aug 11 10:14
    but that means to know the current setting I have to activate the button. I see no reason to force that.
  137. StommePoes
    Aug 11 10:14
    <button>Set font size: 100%</button>
  138. StommePoes
    Aug 11 10:15
    or similar. Ought to have no regards on what the thingie underneath it is.
  139. StommePoes
    Aug 11 10:15
    What Marco warns about is, if you use menu/menuitem/etc, you need to get every little thing correct or Windows takes a poop
  140. MichielBijl
    Aug 11 10:15
    Hmm, now I'm even more confused :p The visual representation is that of a listbox.
  141. MichielBijl
    Aug 11 10:16
    The function is very similar.
  142. MichielBijl
    Aug 11 10:16
    Keyboard interaction is very similar
  143. StommePoes
    Aug 11 10:16
    the function is indeed very similar.
  144. MichielBijl
    Aug 11 10:16
    listbox' on Windows suck
  145. MichielBijl
    Aug 11 10:16
    Just tried it on Win7 in IE11, keyboard interaction seems broken on a native <select>
  146. StommePoes
    Aug 11 10:16
    Yeah. One argument Marco is making is, with autocomplete the order of operations might be whatever. However here, you have a set list of options that don't change. You can ensure the correct order of events/operations.
  147. MichielBijl
    Aug 11 10:17
    Indeed, no autocomplete here.
  148. StommePoes
    Aug 11 10:17
    I don't think you use list boxes with selects? I thought you used them to add menus/options to texts
  149. StommePoes
    Aug 11 10:17
    like what the html5 control was supposed to do cross browser
  150. MichielBijl
    Aug 11 10:17
    listbox = select
  151. StommePoes
    Aug 11 10:17
    what was that... you had a <datalist>
  152. StommePoes
    Aug 11 10:17
    with an id, and then you'd have like a list=that id as an attribute for the input
  153. MichielBijl
    Aug 11 10:17
    Or I totally misinterpreted the design pattern: https://rawgit.com/w3c/aria/master/practices/aria-practices.html#Listbox
  154. StommePoes
    Aug 11 10:17
    worked in Opera 12
  155. StommePoes
    Aug 11 10:18
    Honestly I believe if people think Joe Developer is going to read those kinds of descriptions and be able to choose the correct thing, they're soup-nutsies.
  156. MichielBijl
    Aug 11 10:18
    listbox is not reserved for autocomplete right?
  157. StommePoes
    Aug 11 10:19
    not that I know of
  158. MichielBijl
    Aug 11 10:19
    Who are you calling a soup nutsy?
  159. StommePoes
    Aug 11 10:19
    I think Marco was just writing about something he saw
  160. stevefaulkner
    Aug 11 10:19
    @MichielBijl select can be a listbox http://thepaciellogroup.github.io/AT-browser-tests/test-files/select-option.html
  161. MichielBijl
    Aug 11 10:20
    Thanks Steve, just not really sure what the thingy in my codepen really is.
  162. StommePoes
    Aug 11 10:20
    The reason there are navigation mega-menus out there with menu and menuitem roles is precisely due to this "text description with no examples of what it should do".
  163. StommePoes
    Aug 11 10:20
    I think steve was really answering me, I didn't think you'd listbox a select
  164. MichielBijl
    Aug 11 10:20
    It looks like a select, functions as a menu, and resides in a toolbar :p
  165. MichielBijl
    Aug 11 10:21
    @StommePoes we're working on examples :)
  166. MichielBijl
    Aug 11 10:21
    https://github.com/w3c/aria/wiki/Aria-Authoring-Practices-Patterns-Status
  167. MichielBijl
    Aug 11 10:21
    Long way to go though
  168. StommePoes
    Aug 11 10:22
    That's great, because actually I still never got straight who got aria-expands: the thingie doing the expanding or the thingie you click to make the other thingie expand... the text (at the time I read it anyway) was soooooo non-commital, I thought it was trying not to piss of an angry ex-lover
  169. MichielBijl
    Aug 11 10:22
    Haha
  170. StommePoes
    Aug 11 10:22
    And instead did what testers on the WebAIM list said: JAWS didn't like one compbination, I forget which one, so I only ever used the other
  171. MichielBijl
    Aug 11 10:23
    Lunch time, back in a bit
  172. StommePoes
    Aug 11 10:23
    which means we'd be coding to a bug or coding to some behaviour
  173. stevefaulkner
    Aug 11 10:23
    @MichielBijl looks like a menu to me :-)
  174. stevefaulkner
    Aug 11 10:34
    or a select box...
  175. StommePoes
    Aug 11 10:35
    Yeah. But making a select box look all purdy like that... :P
  176. MichielBijl
    Aug 11 11:23
    Haha Steve, that helps :p
  177. MichielBijl
    Aug 11 11:43
    Does anyone have any statistics on aria-pressed support in browsers / AT's?
  178. MichielBijl
    Aug 11 11:56
    It's for this issue: https://github.com/Selz/plyr/issues/103#issuecomment-129846655
  179. MichielBijl
    Aug 11 11:57
    It's a media player, it used a checkbox for a mute audio toggle. I advised to use aria-pressed. Someone else stated aria-pressed lacked support.
  180. stevefaulkner
    Aug 11 12:09
    @MichielBijl there is this by Paul J adam the browser/AT coverage is limited http://pauljadam.com/demos/ariasupport.html
  181. MichielBijl
    Aug 11 12:12
    Thank you
  182. MichielBijl
    Aug 11 12:13
    Doesn't help my case for aria-pressed I see :p
  183. StommePoes
    Aug 11 12:13
    I only see mobile there
  184. MichielBijl
    Aug 11 12:14
    OS X too
  185. StommePoes
    Aug 11 12:14
    this guy says JAWS but not which browser. He may also simply be saying that it's what he expects, rather than what happens
  186. StommePoes
    Aug 11 12:14
    Mobile safari on everything
  187. StommePoes
    Aug 11 12:14
    I must be missing another part of the page or something
  188. StommePoes
    Aug 11 12:15
    er this guy == http://websiteaccessibility.donaldevans.com/2011/06/28/aria-button/
  189. MichielBijl
    Aug 11 12:15
    He is right about Safari 8, just tested it
  190. MichielBijl
    Aug 11 12:15
    OS X 10.10.3
  191. LjWatson
    Aug 11 12:15
    @MichielBijl aria-pressed is a good recommendation - but bear in mind if the label of the button changes when pressed, it's no longer a toggle button.
  192. StommePoes
    Aug 11 12:15
    oh wait he does say browsers
  193. MichielBijl
    Aug 11 12:19
    @LjWatson good suggestion. So it's good to implement it now, even though Safari doesn't support it?
  194. MichielBijl
    Aug 11 12:19
    The buttons do have labels (that don't change).
  195. StommePoes
    Aug 11 12:19
    I thought they were suggesting they should change
  196. StommePoes
    Aug 11 12:19
    play->pause
  197. StommePoes
    Aug 11 12:19
    mute->unmute
  198. MichielBijl
    Aug 11 12:19
    That's what the other dude said, yes.
  199. MichielBijl
    Aug 11 12:19
    But then it's no longer a toggle button, as Léonie said
  200. StommePoes
    Aug 11 12:19
    I'd rather text/names changed
  201. LjWatson
    Aug 11 12:19
    @StommePoes if the labels changed then aria-pressed can't be used - because the button would never be "pressed" based on its current label.
  202. StommePoes
    Aug 11 12:20
    but that's me
  203. LjWatson
    Aug 11 12:20
    @MichielBijl Yes, I'd say it's worth using aria-pressed anyway and checking for a bug filed against Safari. It's a fairly basic ARIA attribute afterall.
  204. MichielBijl
    Aug 11 12:20
    Agreed.
  205. MichielBijl @MichielBijl looks for a bugreport
  206. MichielBijl
    Aug 11 12:21
    Here it is
  207. MichielBijl
    Aug 11 12:21
    https://bugs.webkit.org/show_bug.cgi?id=146682
  208. MichielBijl
    Aug 11 12:22
    Seems I filed it myself :p
  209. MichielBijl @MichielBijl is a bit forgetful at times
  210. LjWatson
    Aug 11 12:26
    :D
  211. zakim-robot
    Aug 11 12:55
    [jitendra, a11y] is there anything in A11y guidelines about paragraph length?
  212. zakim-robot
    Aug 11 12:55
    [jitendra, a11y] in a article or in a e-book?
  213. LjWatson
    Aug 11 12:57
    @Jitendra not that I know of. General rule of thumb is to follow guidelines for good writing, grammar etc.
  214. Veyfeyken
    Aug 11 12:58
    Hi, the "other dude" here :smile:
    Regarding plyr, Jaws automatically goes to forms mode when it hits the progress bar <input type="range">. Should that be filed as a bug as-well, seems rather disorienting?
  215. zakim-robot
    Aug 11 12:58
    [jitendra, a11y] ok
  216. MichielBijl
    Aug 11 12:59
    A quick search in the DPUB TR didn't give any result/advice on length
  217. LjWatson
    Aug 11 13:01
    @veyfeyken that's expected behaviour.
  218. stevefaulkner
    Aug 11 13:02
    @Veyfeyken in order to allow keystrokes to pass through to the browser (and operate the slider) is why it happens
  219. MichielBijl
    Aug 11 13:03
    Does JAWS use the arrow keys to navigate (without modifier keys)?
  220. LjWatson
    Aug 11 13:04
    It's just standard forms mode interaction. When you tab into the progress bar Jaws switches into forms mode and passes the keys back through to the browser - where left/right will change the progress bar value.
  221. LjWatson
    Aug 11 13:04
    If you use the up/down keys to move focus to the form the switch into forms mode doesn't happen.
  222. LjWatson
    Aug 11 13:05
    s/form/progress bar/
  223. stevefaulkner
    Aug 11 13:05
    @MichielBijl JAWS Keystrokes http://doccenter.freedomscientific.com/doccenter/archives/training/jawskeystrokes.htm
  224. MichielBijl
    Aug 11 13:06
    Thanks
  225. StommePoes
    Aug 11 13:07
    Orca now has sticky-focus, which is a user-changeable setting
  226. MichielBijl
    Aug 11 13:07
    Ah, next/previous character
  227. LjWatson
    Aug 11 13:08
    @MichaielBijl not quite. The left/right cursor keys to move to prev/next character is a virtual mode command.
  228. LjWatson
    Aug 11 13:09
    When in forms mode the key commands revert to whatever they'd be without a s/reader running - in this case manipulating the progress bar.
  229. LjWatson
    Aug 11 13:10
    This might help http://tink.uk/understanding-screen-reader-interaction-modes/
  230. MichielBijl
    Aug 11 13:10
    @LjWatson Yeah, that's what I meant, without forms mode it would do the character thing
  231. LjWatson
    Aug 11 13:10
    @MichielBijl yup :)
  232. MichielBijl @MichielBijl doesn't read many books, lot's of articles though…
  233. MichielBijl
    15:31
    Client asks if we can remove the buttons on a slider widget.
  234. MichielBijl
    15:31
    At least no one will suspect it's a slider now, so that's a positive thing
  235. zakim-robot
    15:45
    [Alice Boxhall, a11y] @StommePoes thanks for the extra nuance on placeholder! Yeah, I have definitely seen the use case of using "placeholders" as labels - though I think calling these "placeholders" conflates actual placeholders with "labels inside the thing they're labelling" which, are you note, are two different things.
  236. zakim-robot
    15:46
    [Alice Boxhall, a11y] I like the idea of somehow combining :placeholder-showing and :focus to make placeholders more usable - perhaps the placeholder could slide to the right, or something?
  237. zakim-robot
    15:47
    [Alice Boxhall, a11y] (or left, depending on your text direction)
  238. zakim-robot
    15:48
    [Alice Boxhall, a11y] Since it's always been annoying that the placeholder completely disappears once you start typing - "Oh crap, was this date meant to be dd/mm/yy or mm/dd/yyyy or ...?"
  239. zakim-robot
    15:49
    [Alice Boxhall, a11y] (and yes, I know, <input type=date> - but my point still stands :simple_smile:
  240. rodneyrehm
    15:50
    not quite “placeholder”, but along the same line of though: http://tympanus.net/Development/TextInputEffects/
  241. stevefaulkner
    15:51
    suggest that placeholder as label is common rather than occasional usage, have a look at examples http://www.html5accessibility.com/HTML5data/placeholder-usage.html (warning big file)
  242. zakim-robot
    15:54
    [Alice Boxhall, a11y] @rodneyrehm Not a fan of that - too much motion for me
  243. zakim-robot
    15:54
    [Alice Boxhall, a11y] I don't think I have any vestibular issues but I do notice feeling mildly queasy when any horizon-like lines start moving around
  244. zakim-robot
    15:55
    [Alice Boxhall, a11y] @stevefaulkner Yeah, it would be cool if there were actual support for the "floating label" pattern
  245. zakim-robot
    15:55
    [Alice Boxhall, a11y] Material design uses this as a general pattern
  246. zakim-robot
    15:59
    [Alice Boxhall, a11y] I believe it's mostly from the "mobile first" philosophy where getting as much on the screen at once as possible is an important goal
  247. rodneyrehm
    16:01
    @alice are you running OSX? how do you feel about the focus transition in native apps?
  248. zakim-robot
    16:03
    [Alice Boxhall, a11y] @rodneyrehm I am - and it's fine because it's typically small, a light color, and convergent
  249. rodneyrehm
    16:03
    I was thinking about adding exactly that subtle transition to my web app…
  250. powrsurg
    16:17
    Just an FYI, it looks like Zeldman was tweeting a lot of screen reader stuff on Twitter earlier today from whatever AEA is going on. Looks like they talked about using lists for forms as a part of 508 compliance
  251. MichielBijl
    16:20
    Like here: https://24ways.org/2009/have-a-field-day-with-html5-forms/
  252. MichielBijl
    16:20
    Hard to believe that is now 6 years old :x
  253. zakim-robot
    16:23
    [Alice Boxhall, a11y] @rodneyrehm That subtle would be fine with me, but as noted I don't have a vestibular disorder so you'd still probably want to check with someone who does :simple_smile:
  254. powrsurg
    16:24
    @MichielBijl I always thought a definition list would be more appropriate if you were to use it as such
  255. MichielBijl
    16:37
    @powrsurg how come? It's not like you split the label and input.
  256. zakim-robot
    17:02
    [monastic.panic, a11y] hi ya'll what should my expectation be for SR behavior with a js modal component?
  257. zakim-robot
    17:02
    [monastic.panic, a11y] have focus scoping and returning focus done...but where and what roles to use is proving to be more tricky
  258. powrsurg
    17:11
    @MichielBijl Depends on how you like to do things. I know devs that like them all to be block divs for the row and inline-block divs that surround the label and the input (and anything else that goes besides it).
  259. powrsurg
    17:11
    If one was to use a definition list you would use dt for the label and dd for the stuff on the right.
  260. zakim-robot
    17:13
    [monastic.panic, a11y] ok doing something like <div role='dialog'><div role='document'>...</div></div> doesn't seem to announce anything when the dialog opens
  261. MichielBijl
    17:15
    @powrsurg but then you'd need a separate dl for every input/label set in order to make the rows thing work?
  262. powrsurg
    17:18
    Depends on how you define things
  263. zakim-robot
    17:31
    [monastic.panic, a11y] anyone know if there is a reasonable way of scoping a SR's virtual focus aside from adding aria-hidden to everything else?
  264. stevefaulkner
    17:46
    @monastic.panic no not that I know of, the key is to make the dialog a sibling of the rest of the document content
  265. zakim-robot
    17:47
    [monastic.panic, a11y] thanks stevefaulkner, followup question, is it ok to just omit the dialog from a modal, if I take care of everything else?
  266. zakim-robot
    17:55
    [jitendra, a11y] at first glance I thought it’s something related to JAWS
  267. zakim-robot
    17:55
    [jitendra, a11y] https://github.com/jaws-stack/JAWS
  268. zakim-robot
    18:31
    [Marcy Sutton, a11y] @monastic.panic: are you sending focus into the modal when it opens?
  269. zakim-robot
    18:31
    [monastic.panic, a11y] ya
  270. zakim-robot
    18:31
    [monastic.panic, a11y] @marcysutton:
  271. zakim-robot
    18:32
    [Marcy Sutton, a11y] Which screen reader/browser are you testing?
  272. zakim-robot
    18:32
    [monastic.panic, a11y] NVDA at the moment, on windows in chrome
  273. zakim-robot
    18:32
    [monastic.panic, a11y] and FF
  274. zakim-robot
    18:35
    [Marcy Sutton, a11y] Which item are you sending focus to, and do you have a demo somewhere?
  275. stevefaulkner
    18:35

    is it ok to just omit the dialog from a modal, if I take care of everything else?

    don't understand the question

  276. zakim-robot
    18:36
    [monastic.panic, a11y] sorry dialog role
  277. zakim-robot
    18:37
    [monastic.panic, a11y] example! http://react-bootstrap.github.io/react-overlays/examples/#modals
  278. zakim-robot
    18:37
    [Marcy Sutton, a11y] Why would you omit the role…can you even use a modal without being some kind of dialog?
  279. zakim-robot
    18:37
    [monastic.panic, a11y] because the SR jumping into a different focus mode and any non focusable elements in it are invisible
  280. zakim-robot
    18:38
    [Marcy Sutton, a11y] That dialog demo announces as such in VO and Safari
  281. zakim-robot
    18:38
    [Marcy Sutton, a11y] does it behave differently in NVDA?
  282. zakim-robot
    18:38
    [monastic.panic, a11y] sorry, yes it annouces but I can't navigate
  283. zakim-robot
    18:38
    [monastic.panic, a11y] if I remove the dialog role i can navigate, but it doesn't announce
  284. zakim-robot
    18:39
    [monastic.panic, a11y] also it doesn't read labels if I provide them :confused: even with the dialog role
  285. zakim-robot
    18:40
    [monastic.panic, a11y] that may be a different issue tho
  286. zakim-robot
    18:40
    [Marcy Sutton, a11y] I can navigate behind the modal using a screen reader, which is one problem..it should be properly disabled using aria-hidden=“true"
  287. zakim-robot
    18:41
    [monastic.panic, a11y] yes, that I have in another branch
  288. zakim-robot
    18:41
    [monastic.panic, a11y] (working on it right now actually)
  289. zakim-robot
    18:42
    [Marcy Sutton, a11y] I’ll have to fire up a windows box after lunch, but I can navigate to everything in VO. will check NVDA a bit later
  290. zakim-robot
    18:42
    [monastic.panic, a11y] :simple_smile: thanks
  291. zakim-robot
    18:42
    [Marcy Sutton, a11y] No prob! :smile:
  292. zakim-robot
    19:02
    [Marcy Sutton, a11y] I can navigate around your dialog in NVDA/FF but only after clicking to focus it. Otherwise it says “Blank"
  293. zakim-robot
    19:46
    [monastic.panic, a11y] hmm I beleive I changed that
  294. zakim-robot
    19:47
    [monastic.panic, a11y] you can get the virtual cursor on the headings and what not?
  295. zakim-robot
    19:48
    [monastic.panic, a11y] hmm whats interesting is that if I explicitly focus the content element when it opens it seems to not allow navigation then
  296. zakim-robot
    19:48
    [monastic.panic, a11y] maybe I am just doing it wrong (not far fetched)
  297. zakim-robot
    20:20
    [Marcy Sutton, a11y] @monastic.panic: yep, I can get to the heading and the text after tabbing to the button and hitting the up/down arrow keys
  298. zakim-robot
    20:40
    [estelle, a11y] is it aria-invalid that is boolean: if the attribute is present, AT will read it as "invalid", even if set to aria-invalid="false"?
  299. zakim-robot
    21:07
    [Marcy Sutton, a11y] When you find a11y regressions in a project you worked on for almost a year…. sigh
  300. zakim-robot
    21:08
    [Marcy Sutton, a11y] wonders if more test coverage would have prevented regressions
  301. zakim-robot
    21:27
    [Jesse Beach, a11y] @marcysutton: not even a year!
  302. zakim-robot
    21:27
    [Jesse Beach, a11y] like a week
  303. zakim-robot
    21:28
    [Marcy Sutton, a11y] :rage:
  304. zakim-robot
    21:28
    [Jesse Beach, a11y] someone decided to update icons and blamo, my labels disappeared
  305. zakim-robot
    21:30
    [Marcy Sutton, a11y] I dream of a day when breaking a build for accessibility will result in automatic embarrassment at one’s desk.
  306. zakim-robot
    21:30
    [Marcy Sutton, a11y] The Angular team has a huge monitor in their office showing who broke the build
  307. zakim-robot
    21:31
    [Marcy Sutton, a11y] But if people disable/delete your tests, stuff can break without warning :disappointed:
  308. stevefaulkner
    21:31
    This message was deleted
  309. stevefaulkner
    21:32

    [estelle, a11y] is it aria-invalid that is boolean: if the attribute is present, AT will read it as "invalid", even if set to aria-invalid="false"?

    no should not be

  310. stevefaulkner
    21:36
    @estelle note that HTML5 controls with required attribute set are exposed with required and invalid state until their constraints are satisfied
  311. zakim-robot
    22:14
    [Sam Ogami, a11y] @estelle @stevef I have also experienced aria-invalid="false" still reading the field as invalid. http://html.cita.illinois.edu/nav/form/aria/index.php?example=3 NVDA and FF
  312. zakim-robot
    22:16
    [estelle, a11y] My understanding was that if the attribute is present at all, it is true, no matter the value. Unlike aria-hidden which can be set to true or false.
  313. zakim-robot
    22:47
    [Sam Ogami, a11y] I thought that aria-invalid="false" does work... If you look at the link in my previous post the first time you focus on the textfield it dose not read invalid but aria-invalid="false" attribute is in the input element
  314. zakim-robot
    22:55
    [Sam Ogami, a11y] On http://samogami.github.io/form-error.html aria-invalid="false" works as expected with NVDA and FF. Not sure what the difference is.