Archive index

A11y Slackers Gitter Channel Archive 17th of November 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Nov 17 11:01
    [lefthandev] Morning all. Does anyone know if there's a VoiceOver setting to order items in the rotor alphabetically, as opposed to the order they appear in the document?
  2. Job van Achterberg
    @jkva
    Nov 17 11:15
    Not that I know of @lefthandev, seems to always be source order
  3. zakim-robot
    @zakim-robot
    Nov 17 11:19
    [lefthandev] @jkva I've never seen a feature to do this personally... so just double checking to see I'm not missing something obvious.
  4. [alastc] Do you mean the order of items in the rotor as you rotate it, or the order of the items as you go through the document?
  5. [alastc] If the later, I doubt it, I can't think of an obvious use-case as you'd be skipping around the page in a random order.
  6. [alastc] (later, latter?)
  7. zakim-robot
    @zakim-robot
    Nov 17 11:26
    [lefthandev] @alastc I mean the order of the items presented in the rotor in one grouping - eg: a list of links
  8. [lefthandev] @alastc but not for a list of headings of course ( for document outline reasons of-course it'd be undesirable to mess this order up ) - more long lists of hyperlinks...
  9. [alastc] I can't say there isn't, but my mental model of that feature is that it works at the page level, so wouldn't restrict itself to a list, therefore the links would seem random in alphabetical.
  10. zakim-robot
    @zakim-robot
    Nov 17 11:35
    [lefthandev] I guess in the rotor, a list of links will be taken out of the context of the document. So it might be a case that the completion time to navigate the information would be shorter as the content is organised alphabetically - especially in long long pages... I'll investigate further.
  11. luis garcia
    @garcialo
    Nov 17 12:34
    @alastc it's "latter"
  12. powrsurg
    @powrsurg
    Nov 17 15:28
    Welp, looks like any a11y contributions from Opera are likely done now
  13. zakim-robot
    @zakim-robot
    Nov 17 15:36
    [michiel] lefthandev: VoiceOver documentation doesn’t’ve anything on that.
  14. luis garcia
    @garcialo
    Nov 17 15:37
    @michiel Excellent contraction, btw
  15. zakim-robot
    @zakim-robot
    Nov 17 15:49
    [michiel] Learned it from the best.
  16. zakim-robot
    @zakim-robot
    Nov 17 18:08
    [quidkid] Hi all! I'm trying to remediate a website to make it accessible. I know the tab order needs to be fixed. Right now, since I have two different menus, one for mobile, and one for desktop(they get hidden respectively), the tabbing goes through the order of the DOM meaning you're left hitting the tab a bunch of times and not seeing any element being focused on like 6 tabs later. any ideas how to fix this? also I'm not even sure what would be the proper tabbing order period. just links? I've read a lot of stuff online but still confused.
  17. luis garcia
    @garcialo
    Nov 17 18:10
    Display: none the menu that isn't visible until it should be visible.
  18. zakim-robot
    @zakim-robot
    Nov 17 18:27
    [sylvia] @quidkid Basically, yes. If a menu is visually hidden, it should be marked as hidden as well, semantically.
  19. [michiel] Or use inert :)
  20. [michiel] Which has a pollyfill.
  21. [michiel] Polyfill (or how ever one writes that)
  22. [sylvia] Here is some good advice on how to use the hidden and aria-hidden attributes: https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
  23. zakim-robot
    @zakim-robot
    Nov 17 19:04
    [marcysutton] I am so excited about my next big talk: The Links vs. Buttons Showdown. Thanks for the inspiration, WWE (bicep emoji)
  24. [marcysutton] based on this article: https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
  25. [ted_drake] Does your company use JIRA for issue tracking? If so, do you have any favorite filter queries to find the number of outstanding accessibility issues, recently closed issues, and even better: time to complete issues? I’m still a novice at creating search filters and dashboards. I think everyone that uses JIRA could benefit from your ideas. We use “accessibility” as a label to help find tickets
  26. [marcysutton] all of our issues are accessibility issues...
  27. zakim-robot
    @zakim-robot
    Nov 17 19:10
    [quidkid] @garcialo, @sylvia @michiel thank you so much for your response!!
  28. Mallory
    @StommePoes
    Nov 17 19:49
    I hate finding anythign i jira
  29. zakim-robot
    @zakim-robot
    Nov 17 19:52
    [shawn.henning] I wonder if they have fixed the bug I reported that j and k did not move voice over focus to the next issue... I've not needed to use Jira in a long time.
  30. Mallory
    @StommePoes
    Nov 17 20:02
    um, does VO let j and k through to the browser?
  31. Most sites that have that kind of thing, like duckDuckGo, don't work when I have a screen reader running. K is links in NVDA for example, orca too
  32. so those keystrokes don't even get passed on to the browser.
  33. James Nurthen
    @jnurthen
    Nov 17 20:02
    passthrough keys work with win screen readers
  34. Mallory
    @StommePoes
    Nov 17 20:04
    You have to manually do that though?
  35. Like in NVDA if I want J to do what DDG has programmed in, I would have to hit a passthru key then J
  36. and do it each adn every time
  37. right?
  38. James Nurthen
    @jnurthen
    Nov 17 20:05
    yep - or turn off virtual cursor first
  39. Mallory
    @StommePoes
    Nov 17 20:06
    What, focus mode the whole thing?
  40. Ive actually never tried that
  41. zakim-robot
    @zakim-robot
    Nov 17 20:06
    [quidkid] okeydokey so i finally figured that part out but i’m not sure what should be the proper tab order of a slide right menu. there is a separate close button. Currently there is an event handler on click that closes it. however when i tab through, the menu doesn’t close and the slide actually stretches out left. I need to to be able to close menu and have the focus return to next content on the page. Any tips, hints, pointers?
  42. Mallory
    @StommePoes
    Nov 17 20:08
    Oh
  43. You have like multiple "layers" in a menu that slides from the side
  44. ?
  45. I just redid some code for something like that
  46. It's on github so I think I can even share it, everything we put on github is "public" and everything on bitbucket is private.
  47. So we have this thing called a Drawer. You click a button somewhere (maybe in the header, maybe on the page) and it slides out from the side. Focus needs to go to its close button and we made it only cycle around in that drawer until the user closes it. Focus then goes back to whatever they clicked to open it
  48. but inside the drawer there are links you can click and those slide over another "layer" in the drawer
  49. now focus has to cycle only inside that visible part
  50. until either the user closes the drawer, or clicks "back to topics" to the other layer
  51. Sound similar?
  52. zakim-robot
    @zakim-robot
    Nov 17 20:11
    [quidkid] yeah that sounds like what im trying to do!
  53. [quidkid] drawer is a great analogy
  54. Mallory
    @StommePoes
    Nov 17 20:11
    Well, can you run node?
  55. zakim-robot
    @zakim-robot
    Nov 17 20:12
    [quidkid] this site doesn’t use node but i’m personally have used node before
  56. Mallory
    @StommePoes
    Nov 17 20:13
    well it's only if you want to run the thing locally and see how it works. You don't need node to read the code, but it's multiple layers of differnent people writing at differnet times
  57. https://github.com/Pearson-Higher-Ed/drawer and https://github.com/Pearson-Higher-Ed/contextual-help
  58. The drawer is like the shell, the help has the layers. So the one calls the other
  59. the drawer has its own focus management, I chose to do it a bit like modals however the customers differed on whether they wanted people to still be able to access the rest of the page or not. So it's not the best UX.
  60. But so as far as keyboard, if the keyboarder is using tab/shift tab, the focus cycles, but other navigation methods won't get caught, and screen reader users can arrow right out of the thing.
  61. but it's the best I could do with the customer demands.
  62. zakim-robot
    @zakim-robot
    Nov 17 20:23
    [quidkid] wow that’s exactly what im trying to do! that’s awesome that focus is restricted to the menu and it loops
  63. [quidkid] aw dang but it’s not compatible with IE 10 =(.
  64. Mallory
    @StommePoes
    Nov 17 20:26
    Well, it wasn't tested in IE10, but I can't think of any reason why it wouldn't work down to 9
  65. There's a polyfill for the customEvent stuff
  66. that's the only special thing for IE in there
  67. it does use the newer class name functions so under 9 wouldn't work
  68. zakim-robot
    @zakim-robot
    Nov 17 20:29
    [quidkid] i’m not familiar with polyfills so I’ll google it up. also to be completely honest StommePoes, I’m still unsure what to do in terms of how to use that. XD
  69. Mallory
    @StommePoes
    Nov 17 20:33
    You know, I think you can have the basic functionality of what this needs to do without it
  70. there's a lot of extra crap code in there
  71. customEvent allows you to create your own events like open() events, then you can set an event listener on open().
  72. But, that was so people could call open() via an API or whatever
  73. on a web page, that should never happen. People should click on a trigger to open it.
  74. So you don't even need the polyfill.
  75. if you make your own thing and just focus on what happens in the Drawer's open(), toggle and close functinos
  76. the other one, help, actually wants to use Drawer's focus management
  77. but it has to hijack it a little because there are layers inside. Meaning the "first focusable" has to be re-assigned as the user switches between layers
  78. oh, and finally: there's a big a11y-no-no in there. There is an invisible focusable with no name.
  79. I'm trying to get Design to give me a second, visible close button at the bottom of the drawer.
  80. but until they do I'm stuck with a hidden one, breaks like 3 WCAG rules as is.
  81. zakim-robot
    @zakim-robot
    Nov 17 20:36
    [quidkid] if this gives you a better sense of my background, I'm currently trying to remediate a website I didn’t code(I’m also rather new to development) and have been learning how to make it accessible off anything from google. XD
  82. Mallory
    @StommePoes
    Nov 17 20:36
    well so here's what I did
  83. when the whole thing isn't visible, it's visibility: hidden
  84. it was display: none but turns out that messes with repaints in the browser as I hide and show it
  85. both do the right thing: it's invisible to AT and keyboard can't focus in it
  86. that first step you need to do. I should not be able to tab into your menu if I can't see it on the screen.
  87. Second, there are things I can focus on, see, and click to open it
  88. zakim-robot
    @zakim-robot
    Nov 17 20:38
    [quidkid] dang i had to use display none because for me, the problem with visibillity hidden is that i have two different hamburger menu’s. one for mobile, one for desktop. and before i had the problem with tab going through the hidden menu
  89. Mallory
    @StommePoes
    Nov 17 20:38
    third, if I open it, my focus goes to the first focusable inside. Typically a close button. If there's no close button, the first focusble. If there were no focusables in there (if it were only text box) then you could make the thing itself focusable as a hack.
  90. Visibility: hidden should not let users be able to tab through anything
  91. however it does continue to take up room
  92. we pull ours offscreen with CSS and left
  93. negative left or negative right, depending on the direction
  94. The "taking up space" I needed because we have an animation. Turned out if I display: none'd them then I didn't get a smooth animation unless I added something like clientWidth() to force a repaint. That's a lot of extra work for a browser.
  95. zakim-robot
    @zakim-robot
    Nov 17 20:39
    [quidkid] ooh clever
  96. Mallory
    @StommePoes
    Nov 17 20:40
    Once your thingie is visible and you've moved focus to it (or even before you move focus to it), there's an expesive call you ought to do: get all the focusables inside
  97. in Drawer you'll see a call for all things that could be focusable, in an array
  98. that's the limit for the keyboard when the thing is open
  99. I actually am not using that array much now, but will later. I grab the first item [0] and make that my first Focusable, and keep track of that. Whenever the user reaches my bad non-accessible button at the bottom (the one that shoudl be visible and should have a name), they get sent abck to the first focusable if they are moving forward. If they are moving backwards, they need to be sent back to the last focusable
  100. Normally you'd not have the invisible trap button, you would use the last focusable from your array
  101. but in my case it turned out, random content could be added anywhere to the drawer, except never to the top.
  102. So do not do what I did with the invisible button called "trap" at the bottom. Instead, you can just put a listener on your last focusable.
  103. that's the right way to do it.
  104. users should be able to tab forward in a circle, or shift-tab backwards in a circle.
  105. Finally, whe n the user either hits ESC or clicks a close button, you need what originally opened the thing saved in a variable so you can move focus back to that element. That puts the user back where they were on the page.
  106. In my code, it's more complicated because multiple tihngs on a single page could open the thing. For a menu controlled by a hamburger or kebab, that's not likely.
  107. your code can be much, much, much simpler than the code I posted. You could toss out 90%.
  108. zakim-robot
    @zakim-robot
    Nov 17 20:46
    [quidkid] ah okeydokey so what happens when focus is returned back to the hamburger. how does it know to go to the next element and not reopen the menu? (sorry if this is a dumb question).
  109. Mallory
    @StommePoes
    Nov 17 20:46
    How are you opening the menu?
  110. I am only waiting for a click, not focus
  111. meaning, we have a help button in the top menu bar. Focussing on it won't open the drawer-- the user has to click the button
  112. if yours are opening on focus, you might need to change that. I've made menus where focus opens a submenu, but it does NOT move focus into that submenu, because the user didn't click, therefore I'm only showing there IS a submenu, but they have not chosen to go into the submenu.
  113. zakim-robot
    @zakim-robot
    Nov 17 20:48
    [cameron.fawcett] be careful with using visibility: hidden, it’s not hardware accelerated so can cause performance issues. (same as display: none)
  114. Mallory
    @StommePoes
    Nov 17 20:48
    so when I send the user back to whatever they clicked, they are just sitting, focussed on that element. If they hit Tab or Shift Tab after that, they simply move forward or backwards on the page like with any link or button.
  115. Cameron I could not find anything that was hardware accelerated that blocked AT and keyboard
  116. CSS is used to animate the thing onscreen so I had to first make it display: block
  117. zakim-robot
    @zakim-robot
    Nov 17 20:49
    [quidkid] normally you’d click on the hamburger. but i’m trying to test tab order and right now, for some weird reason, it jumps from one of the header links immediately to opening that side menu, stretching the screen, and it never closes. does this mean it’s opening on focus?
  118. Mallory
    @StommePoes
    Nov 17 20:49
    I think it means it's in the focus order and the browser is shifting it onscreen because it has focus
  119. if it were, for example, display: none, focus could never reach it and the browser would never show it. Your tabs would go down the page as if the menu part never existed.
  120. which is how it should be, of course.
  121. so this is how our drawer was before I got hired
  122. it was just offscreen
  123. zakim-robot
    @zakim-robot
    Nov 17 20:50
    [cameron.fawcett] Stomme I know :( that’s why the inert polyfill is the only option (or a manual implementation of what it does) right now
  124. Mallory
    @StommePoes
    Nov 17 20:50
    with like left: -100%
  125. I would love inert
  126. Though is that just for focusables or everything?
  127. zakim-robot
    @zakim-robot
    Nov 17 20:51
    [marcysutton] you could do a beast of a calculation and set tabindex="-1" on each focusable thing and aria-hidden on the wrapper, plus opacity which is hardware accelerated. But that's where inert would be fantastic
  128. Mallory
    @StommePoes
    Nov 17 20:51
    If it's everything, I like it. But then I would like it native. The few polyfills we have cause us untold grief.
  129. zakim-robot
    @zakim-robot
    Nov 17 20:52
    [marcysutton] inert handles the focusables and the accessibility tree, but not the display
  130. Mallory
    @StommePoes
    Nov 17 20:52
    I would swap the visibility: hidden for the inert
  131. we animate it coming out from the side of the page, I would remove inert then animate
  132. that might also get rid of my troublesome setTimeout which seems to make phantom puke
  133. ah thus the opacity
  134. I like
  135. the left: -100% would probably do just as well.
  136. Ok, I thought initially someone was canning inert, is it on track to be a Thing?
  137. I would love for it to be a Thing.
  138. zakim-robot
    @zakim-robot
    Nov 17 20:53
    [marcysutton] it is coming back!
  139. [quidkid] okeydokey i’m getting lost in this conversation now haha does anyone have any resources for focus? I actually watched that whole video series of yours @marcysutton which was super helpful! i still feel like a deer in the headlights with focus management though. i need something a bit more basic i guess haha
  140. Mallory
    @StommePoes
    Nov 17 20:53
    Without inert there's like two things people do with focusables
  141. to remove them
    1. display: none or visibility: hidden the box they're in
  143. or 2. find all the focusables and -1 tabindex them
  144. zakim-robot
    @zakim-robot
    Nov 17 20:54
    [marcysutton] oh awesome @quidkid. I was going to mention there's a video on hidden attributes / css in there
  145. Mallory
    @StommePoes
    Nov 17 20:54
    I didn't want to do 2
  146. for trapping focus there are also a couple of ways
  147. zakim-robot
    @zakim-robot
    Nov 17 20:54
    [marcysutton] i did a talk on focus management for mobile web around this time last year, it might help a little
  148. Mallory
    @StommePoes
    Nov 17 20:54
    1. find the first and last focusable and put event listeners on them to move the user to the other one, depending on whether they used Shift or not
  149. zakim-robot
    @zakim-robot
    Nov 17 20:55
    [marcysutton] https://www.youtube.com/watch?v=Jp6-9X-ZClk
  150. Mallory
    @StommePoes
    Nov 17 20:55
    1. instead, on document or whatever listen for focus() adn check the ancestor
  151. if the ancestor isn't your box, move focus to whatever focusable makes snese (first usually)
  152. Just in time Marc, I need more on mobile
  153. I am learning how mobile browsers are sometimes seemingly randomly throwing focus and blur and mouse events all over the place
  154. zakim-robot
    @zakim-robot
    Nov 17 20:56
    [marcysutton] for me the mobile tab order just clicked in my mind for things like dialogs, probably because there is only one column
  155. Mallory
    @StommePoes
    Nov 17 20:56
    even my beloved "only show fugly awesome focus styles on keydown" sucks on mobiles
  156. I also found out that bluetooth keyboards don't tab around focusables on mobile apple things
  157. they do a little bit when VO is on
  158. meh
  159. zakim-robot
    @zakim-robot
    Nov 17 20:57
    [marcysutton] i would love to do a v2 of mobile stuff, maybe that's where I'll head at the end of 2017. There is a lot more to cover there
  160. Mallory
    @StommePoes
    Nov 17 20:57
    My colleagues are constantly not being able to tab and I hjave to keep sending them the instructions to be able to tab all things. Why does Apple do this?
  161. zakim-robot
    @zakim-robot
    Nov 17 20:57
    [herin] Keydown....
  162. [herin] Oh.. I have a question
  163. Mallory
    @StommePoes
    Nov 17 20:58
    I do either keydown or up, never press
  164. zakim-robot
    @zakim-robot
    Nov 17 20:58
    [herin] I have an issue. Form fields that are made available when different options are selected in the drop down list. This form has multiple drop down lists inside this. Currently, there is an onChange event that triggers this. There is no need for a Go button to trigger this as the form is not refreshing or loading a different page. Neither the concept changes. OnChange event is triggered only on EnterKey press or when the focus moves to the next field.
    When a field is hidden and made available immediately next to the dropdown, the focus is not transferred to the newly available field. Instead to the already available one.
    I tried the OnKeydown option and this seems to give me the expected result of making the form field available as the user goes thru the options.
    My question is... Is there any cons to this approach?
  165. Mallory
    @StommePoes
    Nov 17 20:58
    onchange is horrible cross browser
  166. zomg
  167. it killed me
  168. check it:
  169. only blink let you see the whole popup, and only if you hit something like enter? first
  170. firefox won't show keyboarders the popup but will let you arrow around to see the options
  171. BUT
  172. when you blur, onchange is called
  173. IE is worstest
  174. you ahve to arrow aroudn to see your options
  175. but
  176. arrowing is onchange
  177. sucks
  178. boo
  179. so
  180. I set onchange to null
  181. on focus I set size of select to == number of options
  182. this makes teh thing get real big on the page but it's ok if you have like 10-20 options. More, and this is not good
  183. then when the user blurs (again, no worky on mobile as some browsers say "blur" when they don't), call a custom onchange
  184. what you would have done onchange
  185. zakim-robot
    @zakim-robot
    Nov 17 21:00
    [marcysutton] @quidkid the tab-order-behind-a-dialog problem I talk about in the youtube video above sets the scene for when you would use inert. Happy to help explain more about focus mgmt if needed!
  186. Mallory
    @StommePoes
    Nov 17 21:00
    this way, IE and FF users don't get their balls beaten
  187. zakim-robot
    @zakim-robot
    Nov 17 21:00
    [marcysutton] We have a whole channel for it: #focus-management
  188. [quidkid] @marcysutton thank you so much i’m in the middle of watching the video now!!
  189. Mallory
    @StommePoes
    Nov 17 21:01
    http://www.vanbeekdesign.nl/studio-materialen-lijm-en-tape-lijmen-flacons/10586/ hit tab until the skip link is called "inhoud" (content"), click it, then start tabbing from the breadcrumb to the select
  190. that is how I stopped onchange from setting children on fire and kicking puppies. It's not perfect but it kinda worked.
  191. zakim-robot
    @zakim-robot
    Nov 17 21:01
    [marcysutton] ok, back to detecting CSS background images with JavaScript I go...
  192. [herin] Thanks @marcysutton.
  193. Mallory
    @StommePoes
    Nov 17 21:02
    hm Herin showing the options as the user arrows through... could work if it's ok cross browser
  194. zakim-robot
    @zakim-robot
    Nov 17 21:02
    [herin] #focus-management
    I have an issue. Form fields that are made available when different options are selected in the drop down list. This form has multiple drop down lists inside this. Currently, there is an onChange event that triggers this. There is no need for a Go button to trigger this as the form is not refreshing or loading a different page. Neither the concept changes. OnChange event is triggered only on EnterKey press or when the focus moves to the next field.
    When a field is hidden and made available immediately next to the dropdown, the focus is not transferred to the newly available field. Instead to the already available one.
    I tried the OnKeydown option and this seems to give me the expected result of making the form field available as the user goes thru the options.
    My question is... Is there any cons to this approach?
  195. Mallory
    @StommePoes
    Nov 17 21:03
    like, if keydown on a select works on all of them, that could be an ok way to go in your case.
  196. Now their next focusable is based on their choice, as if they are moving then we assume they've made a choice.
  197. It sounds ok.
  198. zakim-robot
    @zakim-robot
    Nov 17 21:05
    [herin] Thanks @StommePoes. Will check on a earlier version of IE as well to make sure it's fine.
  199. Mallory
    @StommePoes
    Nov 17 21:05
    The versions I was testing at the time was 9 I believe
  200. 9 and maybe 8. If 10, 11 act differnetly, then they act better, because nothign is worse than onchange every down/up arrow.
  201. esp when you do it wrong like we did-- page refresh
  202. you don't so you have less risk.
  203. zakim-robot
    @zakim-robot
    Nov 17 21:06
    [herin] Ahh... I hate page refresh on Change
  204. [herin] We have got that every where... Getting rid of them from 10 year old systems now.
  205. Mallory
    @StommePoes
    Nov 17 21:08
    I didn't have access to the Python for that so all I could do is what I showed above in the link... make it as safe as I could for keyboard to see all the options and only select them on blur
  206. and if they did not make a change, nothing should happen. So if they arrow around but go back to the original selectedIndex, no change. Yay.
  207. zakim-robot
    @zakim-robot
    Nov 17 21:48
    [quidkid] @marcysutton great vid!! definitely gave me a better understanding of what I should be doing but still lost on the how. how do I trap focus? putting tabindex=“-1” on everything isn’t working.
  208. [marcysutton] if you have control over where the menu/dialog gets inserted into the DOM (like next to the body), you could toggle inert on the regions where you want to avoid the user focusing. It would be a lot simpler than changing tabindex for every element.
  209. [marcysutton] there is a polyfill for it here: https://github.com/GoogleChrome/inert-polyfill
  210. [marcysutton] that approach is more of an avoid-focus-on-everything-else than an actual trap inside the thing, which is really hard to do
  211. zakim-robot
    @zakim-robot
    Nov 17 21:54
    [marcysutton] in the Angular Material example, we didn't have control over where dialogs got inserted because of the framework API. So I had to walk the DOM and turn things off that way. It's a LOT easier if you can just toggle inert on sibling elements to the menu/dialog thingy.
  212. [marcysutton] knows what my next Egghead video will be now
  213. [quidkid] @marcysutton thanks! so i added inert.. onto the code of the menu that slides open. but now the menu is just stuck visible on my page instead of appearing in the upper right on click
  214. [quidkid] i don’t think i understand what I’m supposed to be doing XD
  215. zakim-robot
    @zakim-robot
    Nov 17 21:59
    [marcysutton] i think you might have it backwards...inert goes on the background. The menu would then sit on top of it
  216. [marcysutton] Putting inert on an element is as if you put tabindex="-1" on each control inside of a region and wrapped it with aria-hidden="true", except you can do it with a single attribute. It would prevent keyboard/screen reader interaction in that region, leaving non-inert areas to be interactive
  217. [marcysutton] where it gets tricky is if the menu is deep in the DOM tree.
  218. [quidkid] @marcysutton oh that’s the problem you were discussing in the video. I was trying to solve something that StommePoes was alluding to.. I was putting -1 on the menu links themselves. I need to disable automatic focus on the menu and i thought i was doing it with tabindex -1
  219. [quidkid] i’m not sure im making sense XD
  220. [quidkid] really appreciate your help though!!
  221. [marcysutton] ah ok! yeah inert is for disabling focus on stuff in the background.
  222. [marcysutton] how is automatic focus happening?
  223. [quidkid] how do i disable focus for stuff in the foreground? is it not tabindex -1?
  224. zakim-robot
    @zakim-robot
    Nov 17 22:04
    [marcysutton] yep that is one way to do it. would help to know the use case, sorry if you already went over that
  225. [quidkid] right now im tabbing through and it’s hitting all the links. so it automatically opening up the menu. i only want the menu to open if I clicked/entered on the hamburger. then i want to be able to loop through all the links and only on click/enter can i close back and return focus back to the menu button but the next time i tab, i should move on to the next element. right now it’s doing a weird thing where tab just expands the menu out of the screen and stretches it so when i do finally tab into the next element, that side menu doesn’t close and just stays stretched and open
  226. [quidkid] so first i need to disable the automatic focus on everything in the menu. i’m not sure why tabindex=-1 on each of those things isn’t stopping it
  227. [marcysutton] Sounds like it is opening on TAB, but it shouldn't
  228. zakim-robot
    @zakim-robot
    Nov 17 22:10
    [marcysutton] i always make things happen on click/keydown, lets the user stay in control instead of forcing things open on tab
  229. [quidkid] yeah unless im putting my tab index = -1 in the wrong places which actually could be a real possibility
  230. [marcysutton] tabindex="-1" has to go on the focusable element you're trying to remove from the tab order, it does not cascade from wrapping elements (unlike inert). But that sounds like a bit of the cart before the horse if the menu is opening on tab
  231. [quidkid] im putting it on all the a hrefs in the menu. do i need to put it in the container nav to? the close button is an image
  232. [quidkid] do i need to put it on the wrapper in addition to the focusable elements?
  233. [marcysutton] hmm
  234. [marcysutton] I'd only put tabindex="-1" on the wrapper if that element is taking focus with JavaScript when the thing opens.
  235. [quidkid] dumb question but does it matter where i put the tabindex? currently it’s between the a and href part
  236. [marcysutton] I'm having a hard time visualizing this thing, but it sounds like the menu is opening too early if you're trying to avoid focusing on things inside of it
  237. [marcysutton] attribute order doesn't matter! as long as it's on the right element.
  238. zakim-robot
    @zakim-robot
    Nov 17 22:15
    [quidkid] OH dang im so dumb! the reason the menu kept opening was because i missed the first element(it was the only one that was out line in the code) XD
  239. [quidkid] ok it’s not opening anymore whew
  240. [quidkid] so that means on click/keydown/keypresskeyup(what are the differences anyways? does it matter?) i need to revert the tabindex back to 0 right?
  241. [marcysutton] For a menu i'd actually recommend triggering it from a button element, which is focusable by default and fires a click event from both the mouse and keyboard ENTER. It does not need tabindex="0", nor does an anchor with an href.
  242. zakim-robot
    @zakim-robot
    Nov 17 22:20
    [marcysutton] The anchor element would work better for a modal dialog with a deep link–definitely getting more advanced here, but a link with server-side support would provide a non-JS fallback. A menu isn't usually deep-linked, hence the button element with scripting works well.
  243. [marcysutton] ^^ this stuff is in my next big talk by the way (the WWE-inspired one above)
  244. [quidkid] nice yeah i just tried swapping to button and dang so much easier! gotta fix the styling issues as a result though. thank you so much!! i’m excited to watch it
  245. zakim-robot
    @zakim-robot
    Nov 17 22:28
    [caesar] Hi all... question about "lazy load". If I understand correctly, screen readers draw the virtual buffer when the onLoad event is fired, right? So what happens if you have widgets that load content incrementally? How can you trigger a buffer refresh once the content is loaded?
  246. [marcysutton] You could put a link part way down the page that a screen reader user can use to a) notify them there is more content, b) load more content and c) scroll the page, that might do it. I know they had to do something similar on Target.com way back
  247. zakim-robot
    @zakim-robot
    Nov 17 22:33
    [caesar] Thanks Marcy. Incidentally, I was speaking to a colleague yesterday who spoke very highly of you having seen one of your talks and playing around with axe-core.
  248. [caesar] Although he jokingly mentioned the fact that he'd also created a tool called "axe" in the past and said that he
  249. [caesar] ... had an "axe to grind" with Deque. Hahah
  250. [caesar] Back on topic: does that mean the screen reader user would have to manually request a buffer refresh, once they have read the instruction?
  251. [caesar] And on c), scrolling triggers a buffer refresh?
  252. Mallory
    @StommePoes
    Nov 17 22:42
    if you manually move focus() to new content, that new content ought to be available to any sr user.
  253. I don't think they do those full buffer refreshes anymore like they used to.
  254. zakim-robot
    @zakim-robot
    Nov 17 22:45
    [caesar] So it will pick up new content dynamically?
  255. Mallory
    @StommePoes
    Nov 17 22:45
    it ought to, but if you're not messing with focus (and that may not be the right thing in your situation), they have to know there's more stuff to navigate to
  256. another solution I've seen was a live role and additions to the container... this was a lazy-loaded list of products.
  257. zakim-robot
    @zakim-robot
    Nov 17 22:46
    [caesar] Hmm... I'd love to learn more about how this all works. I don't suppose there's a recent article about screen reader buffers work?\
  258. Mallory
    @StommePoes
    Nov 17 22:46
    Since Baymard research showed for e-commerce a load-more type button made more sense, we would have been better off with the load-more button (its existence lets everyone know there's more to load), then after you load more if the button vanishes you have to do something with focus. If focussing on the next product makes sense, that ought to allow users to continue navigating down.
  259. the screen reader I use the most doesn't use a buffer
  260. zakim-robot
    @zakim-robot
    Nov 17 22:47
    [caesar] I've been working off this: http://tink.uk/understanding-screen-reader-interaction-modes/
  261. Mallory
    @StommePoes
    Nov 17 22:48
    since clicking a button is one of those interactions that generally changes a web page, the browser is supposed to update its accessibility tree, and an update in the tree is supposed to tell an sr if it uses a buffer to update its buffer.
  262. Apparently that doesn't work in homemade sliders though? That's the use case I saw for the Accessibility Object Model.
  263. James Nurthen
    @jnurthen
    Nov 17 23:02
    that isn't the issue with homemade sliders. The issue there is that there is no way to respond to the native "increase" or "decrease" event
  264. Mallory
    @StommePoes
    Nov 17 23:03
    yes
  265. the user does seomthing, the browsre updates... but not the tree, I thought that was the issue
  266. James Nurthen
    @jnurthen
    Nov 17 23:03
    no - the browser doesn't update - that is the issue
  267. Mallory
    @StommePoes
    Nov 17 23:03
    ah
  268. James Nurthen
    @jnurthen
    Nov 17 23:04
    for example on VO it will say swipe up or down to increase or decrease the value but that swipe does not generate an event that the widget can respond to
  269. Mallory
    @StommePoes
    Nov 17 23:04
    Ah. I hear a lot of things from JAWS that don't do anything. I'm never sure where JAWS gets those from.
  270. James Nurthen
    @jnurthen
    Nov 17 23:05
    what MSFT does no mobile on sliders is they just send up/down arrow when the slider increase/decrease event happens - and the widgets generally respond to that
  271. apple sees that as a cheesy hack (and i kind of agree with them) but that leaves sliders not working correctly on iOS as of today
  272. Mallory
    @StommePoes
    Nov 17 23:16
    wonder what linux does
  273. I'm off to bed tho
  274. James Nurthen
    @jnurthen
    Nov 17 23:17
    this has to be the most british world record ever - http://www.bbc.com/news/uk-england-south-yorkshire-38013241
  275. zakim-robot
    @zakim-robot
    Nov 17 23:19
    [michiel] Solid 5/7