Archive index

A11y Slackers Gitter Channel Archive 28th of January 2016

What fresh hell is THIS now? - Patrick Lauke
  1. MichielBijl
    09:16
    @stevefaulkner yeah that is pretty much what I figured, thanks for the confirmation :)
  2. MichielBijl
    09:21
    @MarcoZehe thank you for recommending IRCCloud, have only used it for three days now, but already really like it :+1:
  3. MichielBijl
    09:22
    @MarcoZehe: did you by any chance test the iOS/Android app too?
  4. jkva
    09:39
    Anyone here going to FOSDEM?
  5. MichielBijl
    09:39
    I think @StommePoes is going ;)
  6. jkva @jkva groans
  7. MichielBijl
    09:40
    ^^
  8. jkva
    09:40
    I hope I can evade her. We used to date so it's always awkward
  9. jkva
    09:40
    Whines to me about not using <center> tags, gaaaah
  10. MichielBijl
    09:40
    Ha!
  11. MichielBijl
    09:42
    Woohoo, totally forgot I added an aria-describedby to a page. Love it when it does what I expect when I test it after a while =D
  12. MichielBijl
    09:43
    It was rather unexpected as I had forgotten, but it's cool to use it after a while and have it make more sense that way.
  13. zakim-robot
    10:08
    [robinwhittleton] Any up-to-date research on the autofocus form attribute and AT? Do screenreaders ignore it?
  14. MichielBijl
    10:17
    @robinwhittleton: If you setup a test page we can do some testing =)
  15. zakim-robot
    10:17
    [robinwhittleton] Yep, read that, but it’s 7 years old now :simple_smile:
  16. zakim-robot
    10:17
    [robinwhittleton] Just reading Drupal’s work in this area: https://www.drupal.org/node/2096347
  17. stevefaulkner
    10:18
    @robinwhittleton SR'
  18. zakim-robot
    10:19
    [robinwhittleton] >Mike suggested that using HTML 5 autofocus attribute AT can be configured to not use it.
    Offering a pleasant user experience to AT users is responsibility of a website, not of a screen reader. Not to mention the fact that there are certain situations where you could find autofocus useful, even if you use a screen reader. And I could easily suppose that enabling/disabling autofocus support from the screen reader configuration could just be a global flag, so you couldn't fine-tune autofocus support to your needs. Long story short, from a screen reader user point of view let's close this issue as won't fix...
  19. zakim-robot
    10:19
    [robinwhittleton] Good quote. I’ll suggest not implementing it then :simple_smile:
  20. MichielBijl
    10:22
    I haven't done much research on this, but I imagine it could be very handy on some pages and save a user a couple of keystrokes.
  21. MichielBijl
    10:22
    Login page for example “Rawr.eu login page. Username, edit text, has focus” (or something to that effect).
  22. LjWatson
    10:25
    Unless the primary purpose of the page is to search, I find (as a screen reader user) that having my focus forced to any point on the page is a serious PITA.
  23. MichielBijl
    10:27
    So you'd rather navigate to a login form manually?
  24. LjWatson
    10:41
    Yes, I would. Unless you can be absolutely sure what someone wants to do when they reach a page, making assumptions on their behalf is generally not a good thing.
  25. MichielBijl
    10:42
    Good point. And good to know =)
  26. LjWatson
    10:42
    If the primary purpose of the page was a login, that wouldn't be too bad, but if there were other things you could do on the page then it's less good.
  27. LjWatson
    10:42
    So I don't mind that Google uses autofocus because it's a reasonable assumption that I'm there to search.
  28. MichielBijl
    10:43
    Most login pages have stuff like “forgot password” or a navigation bar.
  29. MichielBijl
    10:43
    Would that count as “other stuff you can do”?
  30. zakim-robot
    11:01
    [callumacrae] Would a hidden link in the header of the page saying "Skip to login form" be good? Similar to skip to content
  31. MichielBijl
    11:01
    Multiple skip links are good =)
  32. MichielBijl
    11:02
    I see that pretty often in any case.
  33. MichielBijl
    11:02
    Skip to navigation/search/login/content
  34. MichielBijl
    11:02
    But you don't want to add to many; that would defeat the purpose…
  35. MichielBijl
    11:03
    I would try to limit it to 3-4 (random number that seems acceptable to me).
  36. zakim-robot
    11:06
    [callumacrae] Is it convention to make the skip to content link skip to the role="main" element? Could it focus the input on a login page?
  37. MichielBijl
    11:07
    Well, the input is not the main content.
  38. MichielBijl
    11:07
    Content would consist of username input, password, submit button, maybe a forgot password links, link to sign up form etc. So don't think that would be the expected behaviour.
  39. stevefaulkner
    11:40
    A skip link to bypass the block of skip links
  40. zakim-robot
    11:44
    [callumacrae] "Skip to logo"
  41. MichielBijl
    11:50
    I read a blog post last week that suggested putting the nav after the main content.
  42. iandevlin
    12:21
    Is using <del> to display a previous price a good idea? I see it used a lot, but I often wonder if it's semantic enough.
  43. iandevlin
    12:23
    Should <s> be used instead?
  44. zakim-robot
    12:29

    [karlgroves] > I read a blog post last week that suggested putting the nav after the main content.

    Well now you’ve created two problems. Sighted keyboard users will then have to tab their way through main content and the visual focus order won’t match the source order. And you still need a skip link only now you’re skipping to the navigation

  45. MichielBijl
    12:35
    @iandevlin I think StommePoes and Léonie said <del> was semantic. I agree regardless; it's old information.
  46. MichielBijl
    12:35
    @karlgroves yeah, I don't agree with it either, but it was an interesting thought.
  47. MichielBijl
    12:36
    As in: you can of course add a skip link to navigation
  48. zakim-robot
    12:36
    [karlgroves] That concept is a relic of a time when people regarded accessibility as being only for blind people. Because it completely ignores sighted keyboard-only users which is a far larger population than people who are blind
  49. iandevlin
    12:54
    @MichielBijl Hmm, really? The examples in the spec actually use <s> for marking up "old prices"
  50. MichielBijl
    12:55
    Pretty sure.
  51. MichielBijl
    12:55
    Do you have a link to the example?
  52. MichielBijl @MichielBijl gets some tea while the spec loads
  53. MichielBijl
    13:03
    <dd><del>£10·99</del><span>£8·99</span></dd>
  54. MichielBijl
    13:03
    ```
  55. MichielBijl
    13:03
    ```
  56. MichielBijl
    13:03
    ah, could depend on the content. I think <del> would work in a case where it's just the price:
  57. MichielBijl
    13:03
    <dt>Prive</dt>
  58. MichielBijl
    13:04
    Or something like that.
  59. MichielBijl
    13:04
    Thanks gitter for messing up the message order…
  60. MichielBijl
    13:04
    <dt>Price:</dt> <dd><del>£10·99</del><span>£8·99</span></dd>
    
  61. LjWatson
    13:05
    @MichielBijl try the multi-page version of the spec? http://w3c.github.io/html/
  62. MichielBijl
    13:06
    @LjWatson yeah actually ended up using that :)
  63. iandevlin
    13:14
    Yeah sorry, I should've linked to the multi-page version.
  64. iandevlin
    13:14
    I dunno still, <del> means something is deleted from the document which in this case is not really true as you are just pointing out a reduced price, which is why <s> seems to make more sense to me now.
  65. MichielBijl
    13:17
    “The del element represents a removal from the document.”
  66. MichielBijl
    13:17
    The old price isn't really relevant if you ask me.
  67. MichielBijl
    13:18
    But I'm not here to convince you to go either way :)
  68. iandevlin
    13:22
    I am just looking for other opinions! <del> is currently being used and I am just wondering if <s> is better is all :D
  69. MichielBijl
    13:22
    “The s element represents contents that are no longer accurate or no longer relevant.”
  70. MichielBijl
    13:23
    Looking back at my own words, the s-element actually makes more sense :P
  71. MichielBijl
    13:23
    doh
  72. MichielBijl
    13:24
    Shows that I know absolutely nothing…
  73. iandevlin
    13:33
    Opinions on Twitter are differing also!
  74. iandevlin
    13:33
    Such fun.
  75. MichielBijl
    13:36
    Well, going by the wording in the spec I'd say the s-element is better.
  76. MichielBijl
    13:36
    It could be del if it was a log of all previous prices or something.
  77. iandevlin
    13:50
    It is a bit confusing though!
  78. zakim-robot
    13:55
    [i-like-robots] Does anybody here have an opinion on focus styles for non-interactive elements? We have an expanding widget that loads content (via a sort of 'read more' button at the bottom of the section) and when it's loaded we're shifting focus up to the content element (or is this bad?)
  79. zakim-robot
    13:55
    [i-like-robots] So the element we're shifting focus to does not exist in tab order or anything, it's just a container
  80. MichielBijl
    14:01
    So the focus was on the load more button?
  81. MichielBijl
    14:01
    And the new content is directly after that?
  82. zakim-robot
    14:11
    [i-like-robots] No, it loads above - so there is an introduction paragraph and a button below. When the button is clicked the full content is being loaded and the introductory paragraph replaced.
  83. zakim-robot
    15:55
    [johnbhartley] are there any good resources for learning more about accessibility in native applications? So apps on Android and iOS that aren't in-browser apps. Been learning a lot about in-browser accessibility, but there doesn't seem to be as much on mobile accessibility
  84. deborahgu
    15:58
    have you read the bbc guidelines, @johnbhartley?
  85. zakim-robot
    15:58
    [kevinchao89] @johnbhartley: you may want to have a look at the @native-mobile channel. Great resources on mobile a11y.
  86. zakim-robot
    16:00
    [johnbhartley] @deborahgu oh cool, had not seen that one before. thanks @kevinchao89 didn't realize that was a channel (guess I need to peruse those a bit more)
  87. jnurthen
    16:52
    About putting focus in fields automatically - I just had a dev ask me that question - this was my reply. Any comments.... it is one of these hard problems where you have to balance the needs of screen reader users with the needs of keyboard only users which may be completely opposite.
  88. jnurthen
    16:53
    This message was deleted
  89. jnurthen
    16:53
    oops - lost my formatting - I'll try again
  90. jnurthen
    16:54
    ok - how do i do nested lists in markdown?
  91. jnurthen
    16:57

    There are a lot of subtle errors that can come from this behaviour. My general thought is that it is ok if all of the following are true:

    • You have a 90+% certainty that the user wants to interact with the control you have focused
      • I select a menu option to do a task - I probably want to do that
      • I open a dialog - I obviously want to interact with that dialog
      • I am in a wizard flow and go to next step - I probably want to keep in that flow
      • BUT if I load the home page of the site I have no idea what the user wants to do so should not move focus.
    • You are not skipping any error text or important instruction text
      • You must never skip error text unless you have provided another way for a screen reader to be read this text (for example using a live region correctly)
      • You must not skip important instruction text - but really only do this with extreme caution (or ensure the instruction text is available in another way to screen reader users)
    • Your page has good header usage and aria landmark region usage so a screen reader user can easily skip to other parts of the page if they desire.

    Note that there are a few places where you MUST move focus. For example when opening a modal dialog you MUST move focus to the dialog and then when you close the dialog you MUST move focus back to where it came from to open the dialog (if that element is still visible - otherwise to a logical place)

  92. MichielBijl
    17:03
    Any chance you have that as a html file somewhere :P
  93. jnurthen
    17:04
    is it a bit long ;)
  94. MichielBijl
    17:06
    Yeah and no markup :P
  95. deborahgu
    17:07
    @jnurthen, agreed. I have talked to so many devs about how there's a difference between google.com home page (0 content, a couple of links which are probably .00001% of use, and a single search box) and any site that has entry and content.
  96. deborahgu
    17:08
    it drives me nuts is a keyboard/voice user every time I go to a site, my content I want to see is below the fold (because for inexplicable reasons the weird flat unusable design trend has now added huge flipping banner images the size of a laptop screen as trendy design),
  97. deborahgu
    17:08
    and the page down key and the arrow keys don't work because the text field has captured my focus.
  98. deborahgu
    17:09
    And that's not even addressing the screenreader problems of missing all the essential content of what text field this actually is and what important pre-text field content wasn't read.
  99. deborahgu
    17:09
    but of course with modals. Where almost nobody captures focus grr argh it is complicated but not hard
  100. deborahgu
    17:10
    also soapbox why isn't modal dialog an HTML native control by now? Also drop down. Given their ubiquity. Then browsers could just do the correct things with focus capture, and they could also let us move them out of the way if they are blocking things they need to be not blocking. Eg. They could basically treat them as dialog boxes.
  101. deborahgu
    17:10
    </soapbox>
  102. jnurthen
    17:23
    @MichielBijl I used markdown - the lists were good wern't they?
  103. MichielBijl
    17:23
    I'm here via IRC, so that got lost, but it's readable :)
  104. jnurthen
    17:23
    ahhhh - I didn't know that you look the same as on gitter :)
  105. MichielBijl
    17:24
    As in, it's just plain text but every line has you name in front of it which makes it look odd.
  106. MichielBijl
    17:24
    It's the Gitter bridge thing.
  107. jnurthen
    17:24
    well - that is IRC for you..... you should be used to that by now being in W3C meetings
  108. jnurthen
    17:24
    talking of w3c meetings - ARIA call in 5..... need coffee before
  109. MichielBijl
    17:26
    Yeah, I'll be muted on my journey home—again…
  110. MichielBijl
    17:26
    Let Webex suck the life out of my phone…
  111. jnurthen
    17:26
    at least you don't have to scribe
  112. MichielBijl
    17:26
    Woohoo
  113. jnurthen
    17:27
    I'm guessing that is why the "gift" at TPAC this year was a battery pack you can use to recharge your phone
  114. MichielBijl
    17:27
    Seriously, I don't get how webex can turn my phone into a glowing piece of metal that has just been thrown out of the sky by some demi god.
  115. MichielBijl
    17:27
    Haha
  116. jnurthen
    17:28
    yeah - i always notice mine is a little warm after a webex call
  117. jnurthen
    17:28
    i guess you don't want to just call the number due to call charges
  118. jnurthen
    17:28
    why not get webex to call you instead?
  119. MichielBijl
    17:29
    Uhm, does that work for foreigners?
  120. jnurthen
    17:29
    i /think/ so.... try it
  121. MichielBijl
    17:31
    Uhm, I'll try that next week :)
  122. jnurthen
    17:31
    i think it does work - I can select Netherlands
  123. zakim-robot
    17:35
    [poorgeek] It does work. I’ve used it with clients in Singapore. There just has to be an in country option for your country
  124. garcialo @garcialo hugs @poorgeek
  125. zakim-robot
    17:39
    [poorgeek] :smile:
  126. MichielBijl
    17:49
    Cool. I'll try that next week if needed. It's just that I'm in a train for 15 minutes and the connection is pretty spotty. An Internet connection will reconnect, a phone call will just drop out.
  127. MichielBijl
    17:50
    It's more of a luxurious problem thing I guess.
  128. zakim-robot
    19:01

    [bmeunier] I’m buildling a Tree view with checkboxes: http://codepen.io/bmeunier/full/vLjXgM/

    The keyboard support is:

    Up: Select the previous visible tree item. Down: Select next visible tree item.
    Left: Collapse the currently selected parent node if it is expanded. Move to the previous parent node (if possible) when the current parent node is collapsed. Right: Expand the currently selected parent node and move to the first child list item.
    Enter: Toggle the expanded or collapsed state of the selected parent node. Home: Select the root parent node of the tree.
    End: Select the last visible node of the tree. Tab: Navigate away from tree.
    (asterisk on the numpad): Expand all group nodes.
    * Double-clicking on a parent node will toggle its expanded or collapsed state.

  129. zakim-robot
    19:01
    [bmeunier] But do you think that I chose use space to activate the checkboxe?
  130. zakim-robot
    19:03
    [bmeunier] Yes, but I little bit confused.
  131. MichielBijl
    19:03
    What are you confused about?
  132. MichielBijl
    19:03
    Or rather, which part did you find confusing?
  133. MichielBijl @MichielBijl starts taking notes
  134. jnurthen
    19:03
    do you have selection as well as the checkbox or is the selection denoted by the checkbox?
  135. zakim-robot
    19:04
    [bmeunier] Selection as well as the checkbox.
  136. zakim-robot
    19:04
    [bmeunier] That’s the confusing part.
  137. jnurthen
    19:04
    ugh..... really?
  138. jnurthen
    19:05
    <joke>
  139. jnurthen
    19:05
    i would say redesign the UI ;)
  140. jnurthen
    19:05
    (need to step away from the keyboard for a bit)
  141. zakim-robot
    19:05
    [bmeunier] :wink:
  142. zakim-robot
    19:06
    [bmeunier] iu-2.jpeg
  143. zakim-robot
    19:06
    [bmeunier] Windows Explorer have the pretty much the same behavior when you think of it.
  144. zakim-robot
    19:06
    [bmeunier] You have a tree view (not in the picture) with a checkboxes.
  145. zakim-robot
    19:06
    [bmeunier] What’s the keyboard behavior?
  146. zakim-robot
    19:07
    [bmeunier] Space?
  147. MichielBijl
    19:09
    space would normally select the checkbox.
  148. MichielBijl
    19:10
    Since spacebar isn't assigned to do anything special in the treeview it would be fine to use I guess?
  149. zakim-robot
    19:11
    [bmeunier] I think so.
  150. zakim-robot
    19:11
    [bmeunier] I wanted to be reassure.
  151. MichielBijl @MichielBijl reassures
  152. MichielBijl
    19:12
    Anyway, best way to find out is to test.
  153. MichielBijl
    19:13
    If it's the same as the Windows thing that would probably be fine. I don't think there is an equivalent in OS X; so can't test it.
  154. MichielBijl
    19:13
    APG looks at interaction on OS' too.
  155. zakim-robot
    19:13
    [bmeunier] «There, There» — @MichielBijl
  156. MichielBijl
    19:17
    :)
  157. zakim-robot
    19:20
    [bmeunier] But in w3.org, it said that: Enter key performs the default action on end nodes.
  158. MichielBijl
    19:21
    that is confusing, what happens on Windows?
  159. MichielBijl
    19:22
    How do you check the checkbox to select the folder/file and how do you open it?
  160. jnurthen
    19:24
    I'm confused - you said you had selection too.... how are you selecting a node using the keyboard if space checks the checkbox (and how would you do selection using a mouse?)
  161. zakim-robot
    19:25
    [bmeunier] It has everything I need.
  162. zakim-robot
    19:25
    [bmeunier] Select a node using the Enter key.
    Check / Uncheck a node using the Space key.
  163. jnurthen
    19:25
    but there is no multi-select here right?
  164. zakim-robot
    19:25
    [bmeunier] No, there’s multi-select.
  165. jnurthen
    19:26
    I can't multi-select
  166. jnurthen
    19:26
    what key do i use - and how do i do it using the mouse?
  167. jnurthen
    19:27
    and how would a "touch" user do it?
  168. zakim-robot
    19:27
  169. jnurthen
    19:27
    ok - so the checkbox is selecting then
  170. jnurthen
    19:28
    that is what i was asking before. Is there a select model AND a check model or are they the same thing
  171. jnurthen
    19:28
    then space for select (check the checkbox) is perfect
  172. zakim-robot
    19:29
    [bmeunier] So the https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView "Enter key performs the default action on end nodes” default action would be to select a node, not to check/uncheck a node. I see.
  173. zakim-robot
    19:31
  174. zakim-robot
    19:31
    [bmeunier] Great, tks.
  175. zakim-robot
    20:03
    [ryoia] got a combobox question, i have something like the following:
    <div role="application"> <div><input role="combobox" aria-autocomplete="list" aria-owns="users" /></div> <div id="users"> <div role="option">...</div> <div role="option">...</div> </div> </div>
  176. zakim-robot
    20:03
    [ryoia] but when i move the items using up/down arrow keys, it doesn't read the itemlist
  177. zakim-robot
    20:04
    [ryoia] any suggestions are appreciated :simple_smile:
  178. jnurthen
    20:14
    where is your focus?
  179. zakim-robot
    20:16
    [ryoia] input field
  180. jnurthen
    20:16
    do you have aria-activedescendent?
  181. zakim-robot
    20:17
    [ryoia] no
  182. jnurthen
    20:17
    i think you should
  183. zakim-robot
    20:17
    [ryoia] that's the auto selected field when the dropdown first created, right?
  184. jnurthen
    20:17
    whatever has the browser focus is going to need aria-activedescendent pointing to the thing which has the virtual focus in the option list
  185. zakim-robot
    20:20
    [ryoia] this will be a bit difficult, the way it's currently structured is like a loop, one div, binded to each name, title and all that
  186. zakim-robot
    20:21
    [ryoia] so if i put an id on one, all of them will have the same id
  187. zakim-robot
    20:21
    [ryoia] but i think that's the correct solution, i added it and now when i move up and down, it says 'blank' instead of nothing
  188. MichielBijl
    20:22
    Honestly it is the weirdest UI thing I've seen in a long time.
  189. MichielBijl
    20:22
    Who comes up with this stuff?
  190. MichielBijl
    20:22
    UI elements should have one purpose and one purpose only.
  191. jnurthen
    20:22
    @MichielBijl what is?
  192. MichielBijl
    20:23
    No weird checkbox and open thing things
  193. MichielBijl
    20:23
    @jnurthen the checkbox tree view.
  194. jnurthen
    20:23
    i've seen them before. Not so weird now they explained the checkbox IS select
  195. MichielBijl
    20:25
    sure, but clicking the thing opens it?
  196. jnurthen
    20:25
    @ryoia i think you will have to bite the bullet and add those IDs. I wish we could use selectors instead of idrefs but that is a pipe dream
  197. MichielBijl
    20:25
    So I have to click the measly 20 pixels to select the checkbox?
  198. jnurthen
    20:25
    @MichielBijl heh - yeah..... i've seen all sorts.... nothing suprises me now
  199. MichielBijl
    20:25
    Pretty sure you've been at it longer.
  200. zakim-robot
    20:25
    [ryoia] yeah i will think about how to re-structure the list. thanks jnurthen!
  201. MichielBijl
    20:26
    And maybe I just tend to ignore weird patterns and advice against it and never have to build it :P
  202. jnurthen
    20:26
    @MichielBijl and i get the "it has always worked this way" comments stating that their users are used to it and they would never even consider changing it
  203. jnurthen
    20:27
    although those can be valid. Once we reordered some buttons in a toolbar to a more logical order. Had to revert it for a customer as they said that their agents were trained to click the "4th button" and the retraining cost would be hundreds of thousands of dollars
  204. MichielBijl
    20:28
    I remember a story by Brian Kardell where the client asked to port some application to another language and where they ended up writing another application because nobody used the old one. They only found out when they went to the client's clients and asked them how they used the program (to understand how to port it).
  205. MichielBijl
    20:29
    E-mail to all clients: we've moved the fourth button to the sixth position; please click that. DONE
  206. MichielBijl
    20:29
    But I'm guessing that's not how it works…
  207. MichielBijl
    20:42
    Is it cruel to tell the people at Semantic UI that their website and examples need more semantics?
  208. jnurthen
    20:52
    No - not cruel
  209. jnurthen
    20:52
    did they decide that keyboard users didn't need to be able to play music or change the language?
  210. MichielBijl
    21:03
    a's for buttons and what not.
  211. jnurthen
    21:04
    yep
  212. MichielBijl
    21:04
    That site has more div's than w3schools.com
  213. zakim-robot
    21:04
    [ryoia] omg we are using semantic ui
  214. zakim-robot
    21:05
    [ryoia] it's not the greatest ui...
  215. MichielBijl
    21:05
    Semantic UI's name is just weird. It's not the semantics you normally think of when talking about HTML.
  216. MichielBijl
    21:05
    Guess it was written by designers for designers that write HTML?
  217. MichielBijl
    21:05
    Not to generalise, I'm a designer too in some sense.
  218. MichielBijl @MichielBijl should really put more work into Cool Semantic Styles
  219. deborahgu
    21:06
    Keyboard users don't exist. We're a conspiracy of cartographers.
  220. deborahgu
    21:07
    Accessibilographers?
  221. MichielBijl
    21:08
    I'm an a11y cat, not sure what an accessibilographer does ;)
  222. MichielBijl
    21:10
    I mean, come on, it's a logo for crying out loud…
  223. MichielBijl
    21:10
    They could've used inline SVG and take up less lines of code.
  224. MichielBijl
    21:11
    Hmm, alt text doesn't come trough on Gitter.
  225. MichielBijl
    21:11
    Alt for that image: Dev tools show divites on the Semantic UI website.
  226. zakim-robot
    21:15
    [ryoia] hmm i found a way to make id unique, but still not reading the item as i go up/down the list... :disappointed:
  227. zakim-robot
    21:15
    [ryoia] now it's like this:
  228. jnurthen
    21:16
    are you sure browser focus is where you think it is?
  229. zakim-robot
    21:16
    [ryoia] <div role="application"> <div><input role="combobox" aria-activedescendant="0" aria-autocomplete="list" aria-owns="users" /></div> <div id="users"> <div role="option" id="0">...</div> <div role="option" id="1">...</div> </div> </div>
  230. jnurthen
    21:16
    drop the role=application
  231. jnurthen
    21:16
    please
  232. zakim-robot
    21:16
    [ryoia] ok
  233. jnurthen
    21:17
    your div with id users needs a role on it too
  234. zakim-robot
    21:17
    [ryoia] oh i have a role="listbox"
  235. jnurthen
    21:18
    oh ok - that is what it should have - wasn't in the code you pasted
  236. zakim-robot
    21:18
    [ryoia] sorry i didn't see that when i was copying
  237. jnurthen
    21:18
    what browser/screen reader combo?
  238. zakim-robot
    21:19
    [ryoia] firefox + JAWS 17
  239. jnurthen
    21:19
    you start JAWS b4 or after starting FF?
  240. zakim-robot
    21:19
    [ryoia] after
  241. zakim-robot
    21:19
    [ryoia] i can try before
  242. jnurthen
    21:20
    try restaring FF with JAWS running... sometimes changes behaviour and is a much more realistic configuration for users
  243. MichielBijl
    21:20
    Screenshot of rawr.eu running in Chrome https://usercontent.irccloud-cdn.com/file/HLk8KIV1/rawr
  244. MichielBijl
    21:20
    Cool, that seems to get through to Gitter
  245. zakim-robot
    21:21
    [ryoia] hmm same thing
  246. zakim-robot
    21:21
    [ryoia] so i have several divs within that most inner div, not sure if that makes a different
  247. jnurthen
    21:21
    look to see what is different between that and http://www.oaa-accessibility.org/examplep/combobox6/
  248. jnurthen
    21:22
    take a look at the a11y tree too to make sure it is what you want
  249. zakim-robot
    21:22
    [ryoia] ok reading
  250. jnurthen
    21:23
    AViewer is what I use to look at the tree.... wish FF had an easier way
  251. jnurthen
    21:23
    do you have a url - maybe someone can spot something
  252. zakim-robot
    21:28
    [ryoia] i think the inner div's complication has something to do with it...it's like <div role="option" id="0"><img... /><div><div></div></div></div>
  253. zakim-robot
    21:29
    [ryoia] it now reads the typed words when i hit enter on one of the items
  254. zakim-robot
    21:29
    [ryoia] progress..
  255. jnurthen
    21:51
    ahhhh - the img is probably causing the problem. I think there are some known bugs in this area
  256. jnurthen
    21:52
    i know it sounds crazy but try adding aria-labelledby pointing to itself to the option
  257. jnurthen
    21:52
    I've worked round this bug by doing that before
  258. zakim-robot
    21:52
    [ryoia] so aria-labelledby="hi" id="hi" ?
  259. jnurthen
    21:52
    yeah
  260. zakim-robot
    21:54
    [ryoia] what about the existing id
  261. zakim-robot
    21:54
    [ryoia] oh nvmd
  262. zakim-robot
    21:54
    [ryoia] im dumb
  263. zakim-robot
    21:56
    [ryoia] hmm same
  264. zakim-robot
    21:56
    [ryoia] the other weird thing is, as i move up and down, the aria-activedescendent id didn't change with it
  265. zakim-robot
    21:56
    [ryoia] i thought it would
  266. jnurthen
    21:56
    well - you have to change that yourself.....
  267. jnurthen
    21:57
    your scripting needs to update it
  268. jnurthen
    21:57
    the change in activedescendent causes the browser to fire a focus change event in the a11y API which causes the AT to read the new value
  269. jnurthen
    21:58
    if you dont update activedescendent it wont work
  270. zakim-robot
    21:58
    [ryoia] ah doh.
  271. jnurthen
    21:59
    combo boxes are one of the hardest things to do in aria - second only to grids IMO
  272. zakim-robot
    22:00
    [ryoia] and maybe dropdown list
  273. zakim-robot
    22:00
    [ryoia] that's another one on my list to fix
  274. jnurthen
    22:00
    is this for a framework I know?
  275. zakim-robot
    22:01
    [ryoia] it's semantic-ui
  276. jnurthen
    22:01
    ah ok - never used it
  277. MichielBijl
    22:05
    How is it to work with?
  278. MichielBijl
    22:05
    I've never used it either, but have bitched about it before…
  279. zakim-robot
    22:05
    [ryoia] haha
  280. MichielBijl
    22:05
    Which I don't really have the right to do because I haven't used it, but I cannot bring myself to do so.
  281. zakim-robot
    22:05
    [ryoia] this is the second week i'm on this new team (they've been using it), so far just meh
  282. MichielBijl @MichielBijl dislikes classes
  283. MichielBijl
    22:06
    If they were implemented as was intended it'd probably be fine, but it isn't meant to be I guess.
  284. zakim-robot
    22:06
    [ryoia] i don't understand too much of it yet, just the general flow of the app. seems not that flexible and hard to manipulate built-in dropdown and all that. but it can be just for ada stuff
  285. jnurthen
    22:08
    You caught me on the right day.... I have a meeting to talk about the combo box in one of our tech stacks in 45 mins
  286. zakim-robot
    22:08
    [ryoia] good luck!
  287. zakim-robot
    22:08
    [ryoia] and thank you for your help jnurthen!
  288. jnurthen
    22:08
    i don't have to code it - just tell them what to do :)
  289. jnurthen
    22:09
    no problem - hope it was useful
  290. zakim-robot
    22:09
    [ryoia] yup definitely, put me on the right track.
  291. MichielBijl
    22:17
    i don't have to code it - just tell them what to do :)
  292. MichielBijl
    22:18
    Where do I sign up :P
  293. MichielBijl
    22:18
    Nah, I love writing code too much.
  294. MichielBijl
    22:31
    @LjWatson re setting focus on something on page load. I set focus to the main content if someone clicks on a link to an article on my blog—and actually do the same if I spread the link (just add #main to the url). Would you consider that bad practice?
  295. MichielBijl
    22:31
    I thought that was pretty clever, you're there to read the article, not to look at my navigation.
  296. jnurthen
    22:32
    with your articles maybe they really want to get out as quickly as possible ;)
  297. MichielBijl
    22:32
    So, this link for example will take you directly to the content: http://www.michielbijl.nl/2016/01/11/you-dont-want-to-hire-me/#main
  298. MichielBijl
    22:32
    Thank you for your confidence in my writing James :P
  299. jnurthen
    22:32
    that is why you have been made an editor :)
  300. MichielBijl
    22:33
    Very true :)
  301. MichielBijl
    22:35
    It gives me great confidence that even after reading that post people still want to hire me.
  302. MichielBijl
    22:36
    It's nice to know there are like minded people out there.
  303. MichielBijl
    22:38
  304. MichielBijl
    22:38
    It's all Level AAA stuff, but still.
  305. MichielBijl
    22:38
    Probably not…
  306. jnurthen
    22:39
    IMO in something about SASS yes - cause it is expected to be technical
  307. MichielBijl
    22:40
    Good point
  308. MichielBijl
    22:40
    My girlfriend bought Thing Explainer by Randall; very curious about it.
  309. stevefaulkner
    23:16
    J
  310. garcialo
    23:17
    how did your thing go?
  311. MichielBijl
    23:17
    Was about to ask, how was the big day?
  312. garcialo
    23:17
    @MichielBijl You obviously love @stevefaulkner 2nd most
  313. MichielBijl
    23:18
    prf
  314. stevefaulkner
    23:18
    Semantic-UI the oxomor
  315. MichielBijl
    23:18
    if that is behind his kid I'm totally fine with that ;)
  316. stevefaulkner
    23:19
    Semantic-UI the oxymoronic framework moniker
  317. MichielBijl
    23:20
    yeap
  318. stevefaulkner
    23:21
    @jnurthen you can use DOM inspector in Firefox to see the acc tree and acc properties
  319. jnurthen
    23:39
    oh yeah - i forget about that.... I have my own plugin which dumps the acc tree which I use anyway but DOM Inspector is a good idea. Better than that AViewer tool ;)
  320. jnurthen
    23:40
    don't know which bunch of cowboys created that ;)
  321. zakim-robot
    23:58
    [alice] Hey lazyslack, I was wondering if I could do a quick sanity check on the ARIA design patterns "tabpanel" keyboard instructions
  322. garcialo
    23:58
    Meh
  323. zakim-robot
    23:59
    [alice] It states that if a tab (as opposed to the tab panel it controls) is focused, left/right arrows should change the active tab
  324. jnurthen
    23:59
    yep - sounds correct right
  325. garcialo
    23:59
    Yup
  326. zakim-robot
    23:59
    [alice] Does that gibe with people's experience?