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:16
    Related: http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
  15. MichielBijl
    10:17
    @robinwhittleton: If you setup a test page we can do some testing =)
  16. zakim-robot
    10:17
    [robinwhittleton] Yep, read that, but it’s 7 years old now :simple_smile:
  17. zakim-robot
    10:17
    [robinwhittleton] Just reading Drupal’s work in this area: https://www.drupal.org/node/2096347
  18. stevefaulkner
    10:18
    @robinwhittleton SR'
  19. 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...
  20. zakim-robot
    10:19
    [robinwhittleton] Good quote. I’ll suggest not implementing it then :simple_smile:
  21. 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.
  22. MichielBijl
    10:22
    Login page for example “Rawr.eu login page. Username, edit text, has focus” (or something to that effect).
  23. 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.
  24. MichielBijl
    10:27
    So you'd rather navigate to a login form manually?
  25. 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.
  26. MichielBijl
    10:42
    Good point. And good to know =)
  27. 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.
  28. LjWatson
    10:42
    So I don't mind that Google uses autofocus because it's a reasonable assumption that I'm there to search.
  29. MichielBijl
    10:43
    Most login pages have stuff like “forgot password” or a navigation bar.
  30. MichielBijl
    10:43
    Would that count as “other stuff you can do”?
  31. 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
  32. MichielBijl
    11:01
    Multiple skip links are good =)
  33. MichielBijl
    11:02
    I see that pretty often in any case.
  34. MichielBijl
    11:02
    Skip to navigation/search/login/content
  35. MichielBijl
    11:02
    But you don't want to add to many; that would defeat the purpose…
  36. MichielBijl
    11:03
    I would try to limit it to 3-4 (random number that seems acceptable to me).
  37. 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?
  38. MichielBijl
    11:07
    Well, the input is not the main content.
  39. 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.
  40. MichielBijl
    11:12
    http://webaim.org/techniques/skipnav/#multiple
  41. stevefaulkner
    11:40
    A skip link to bypass the block of skip links
  42. zakim-robot
    11:44
    [callumacrae] "Skip to logo"
  43. MichielBijl
    11:50
    I read a blog post last week that suggested putting the nav after the main content.
  44. 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.
  45. iandevlin
    12:23
    Should <s> be used instead?
  46. 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

  47. MichielBijl
    12:35
    @iandevlin I think StommePoes and Léonie said <del> was semantic. I agree regardless; it's old information.
  48. MichielBijl
    12:35
    @karlgroves yeah, I don't agree with it either, but it was an interesting thought.
  49. MichielBijl
    12:36
    As in: you can of course add a skip link to navigation
  50. 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
  51. iandevlin
    12:54
    @MichielBijl Hmm, really? The examples in the spec actually use <s> for marking up "old prices"
  52. MichielBijl
    12:55
    Pretty sure.
  53. MichielBijl
    12:55
    Do you have a link to the example?
  54. iandevlin
    12:55
    https://www.w3.org/html/wg/drafts/html/master/single-page.html#the-s-element in the spec
  55. MichielBijl @MichielBijl gets some tea while the spec loads
  56. MichielBijl
    13:03
    <dd><del>£10·99</del><span>£8·99</span></dd>
  57. MichielBijl
    13:03
    ```
  58. MichielBijl
    13:03
    ```
  59. MichielBijl
    13:03
    ah, could depend on the content. I think <del> would work in a case where it's just the price:
  60. MichielBijl
    13:03
    <dt>Prive</dt>
  61. MichielBijl
    13:04
    Or something like that.
  62. MichielBijl
    13:04
    Thanks gitter for messing up the message order…
  63. MichielBijl
    13:04 
    <dt>Price:</dt> <dd><del>£10·99</del><span>£8·99</span></dd>
  64. LjWatson
    13:05
    @MichielBijl try the multi-page version of the spec? http://w3c.github.io/html/
  65. MichielBijl
    13:06
    @LjWatson yeah actually ended up using that :)
  66. iandevlin
    13:14
    Yeah sorry, I should've linked to the multi-page version.
  67. 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.
  68. MichielBijl
    13:17
    “The del element represents a removal from the document.”
  69. MichielBijl
    13:17
    The old price isn't really relevant if you ask me.
  70. MichielBijl
    13:18
    But I'm not here to convince you to go either way :)
  71. 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
  72. MichielBijl
    13:22
    “The s element represents contents that are no longer accurate or no longer relevant.”
  73. MichielBijl
    13:23
    Looking back at my own words, the s-element actually makes more sense :P
  74. MichielBijl
    13:23
    doh
  75. MichielBijl
    13:24
    Shows that I know absolutely nothing…
  76. iandevlin
    13:33
    Opinions on Twitter are differing also!
  77. iandevlin
    13:33
    Such fun.
  78. MichielBijl
    13:36
    Well, going by the wording in the spec I'd say the s-element is better.
  79. MichielBijl
    13:36
    It could be del if it was a log of all previous prices or something.
  80. iandevlin
    13:50
    It is a bit confusing though!
  81. 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?)
  82. 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
  83. MichielBijl
    14:01
    So the focus was on the load more button?
  84. MichielBijl
    14:01
    And the new content is directly after that?
  85. 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.
  86. 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
  87. deborahgu
    15:58
    have you read the bbc guidelines, @johnbhartley?
  88. deborahgu
    15:58
    http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml
  89. zakim-robot
    15:58
    [kevinchao89] @johnbhartley: you may want to have a look at the @native-mobile channel. Great resources on mobile a11y.
  90. 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)
  91. 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.
  92. jnurthen
    16:53
    This message was deleted
  93. jnurthen
    16:53
    oops - lost my formatting - I'll try again
  94. jnurthen
    16:54
    ok - how do i do nested lists in markdown?
  95. 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)

  96. MichielBijl
    17:03
    Any chance you have that as a html file somewhere :P
  97. jnurthen
    17:04
    is it a bit long ;)
  98. MichielBijl
    17:06
    Yeah and no markup :P
  99. 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.
  100. 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),
  101. deborahgu
    17:08
    and the page down key and the arrow keys don't work because the text field has captured my focus.
  102. 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.
  103. deborahgu
    17:09
    but of course with modals. Where almost nobody captures focus grr argh it is complicated but not hard
  104. 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.
  105. deborahgu
    17:10
    </soapbox>
  106. jnurthen
    17:23
    @MichielBijl I used markdown - the lists were good wern't they?
  107. MichielBijl
    17:23
    I'm here via IRC, so that got lost, but it's readable :)
  108. jnurthen
    17:23
    ahhhh - I didn't know that you look the same as on gitter :)
  109. 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.
  110. MichielBijl
    17:24
    It's the Gitter bridge thing.
  111. jnurthen
    17:24
    well - that is IRC for you..... you should be used to that by now being in W3C meetings
  112. jnurthen
    17:24
    talking of w3c meetings - ARIA call in 5..... need coffee before
  113. MichielBijl
    17:26
    Yeah, I'll be muted on my journey home—again…
  114. MichielBijl
    17:26
    Let Webex suck the life out of my phone…
  115. jnurthen
    17:26
    at least you don't have to scribe
  116. MichielBijl
    17:26
    Woohoo
  117. 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
  118. 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.
  119. MichielBijl
    17:27
    Haha
  120. jnurthen
    17:28
    yeah - i always notice mine is a little warm after a webex call
  121. jnurthen
    17:28
    i guess you don't want to just call the number due to call charges
  122. jnurthen
    17:28
    why not get webex to call you instead?
  123. MichielBijl
    17:29
    Uhm, does that work for foreigners?
  124. jnurthen
    17:29
    i /think/ so.... try it
  125. MichielBijl
    17:31
    Uhm, I'll try that next week :)
  126. jnurthen
    17:31
    i think it does work - I can select Netherlands
  127. 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
  128. garcialo @garcialo hugs @poorgeek
  129. zakim-robot
    17:39
    [poorgeek] :smile:
  130. 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.
  131. MichielBijl
    17:50
    It's more of a luxurious problem thing I guess.
  132. 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.

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