Archive index

A11y Slackers Gitter Channel Archive 13th of April 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Apr 13 04:08
    [herin] Hi,
  2. [herin] Does any one have an example for Accessible Accordion menu?
  3. [caesar] https://ebay.gitbooks.io/mindpatterns/content/disclosure/accordion.html
  4. [caesar] In before @garcialo
  5. [caesar] Damn
  6. [caesar] Nothing there. Hahaha...
  7. [caesar] https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion1.html
  8. [caesar] This is the one that the APG refers to
  9. [garcialo] Funnily enough, I saw it and was like "meh, I'll let @caesar get this one"
  10. [herin] Ha Ha
  11. [herin] Thanks!
  12. [herin] Looks like the ebay one is very similar to the one I am after
  13. [herin] I will share something on my behalf too...
  14. [herin] http://a11y-style-guide.com/style-guide/
  15. [herin] Found this very useful
  16. [herin] They have both HTML and ARIA way for the elements
  17. zakim-robot
    @zakim-robot
    Apr 13 04:13
    [herin] No complex components yet
  18. zakim-robot
    @zakim-robot
    Apr 13 04:27
    [caesar] Nice
  19. zakim-robot
    @zakim-robot
    Apr 13 14:16
    [michiel] This is the updated one for the APG: http://w3c.github.io/aria-practices/examples/accordion/accordion.html
  20. zakim-robot
    @zakim-robot
    Apr 13 14:48
    [bethra] Anyone interested in a Technical Accessibility Lead position at JP Morgan Chase? I'm not interested, but will pass along job details if someone here is.
  21. [bethra] It's in Chicago.
  22. zakim-robot
    @zakim-robot
    Apr 13 15:58
    [quidkid] hey guys so i need to embed a youtube video and customize the player controls. what would be the best way? can I change youtube video controls or should I use something like video js with the plugin for youtube? what would be the better option for the most built in accessibility options?
  23. [marcysutton] AblePlayer maybe? https://ableplayer.github.io/ableplayer/
  24. zakim-robot
    @zakim-robot
    Apr 13 16:17
    [quidkid] @marcysutton hey Marcy! thank you for replying. i’ll look into it!
  25. zakim-robot
    @zakim-robot
    Apr 13 16:39
    [seankeegan] @quidkid two out-of-the-box accessible players I know of are Oz Player and Able Player. Looked at video.js about 6 months ago and had some issues (need to find notes).
  26. zakim-robot
    @zakim-robot
    Apr 13 16:46
    [karlgroves] @seankeegan did you log issues for video.js in Github?
  27. [seankeegan] @karlgroves No - didn’t think about it at the time (deadlines, etc.). Thanks for reminder.
  28. zakim-robot
    @zakim-robot
    Apr 13 16:52
    [karlgroves] I know the feeling. Greg Kraus and I both did some stuff on video.js but that was a long time ago. Would like to know if you’ve found anything new, because if I find the time I’ll fix it
  29. zakim-robot
    @zakim-robot
    Apr 13 17:00
    [quidkid] would you recommend using the youtube iframe player and customizing the controls? my coworker who is more experienced is cautioning me against using these plugins for load time reasons because we have a very heavy video site
  30. [quidkid] and thanks @seankeegan
  31. powrsurg
    @powrsurg
    Apr 13 17:03
    Honestly, video.js had the best accessibility of the not-specificially-built-for-accessibility video players I found about a year ago. Also supported pretty good keyboard controls (required a plugin). The controls to access/toggle some of the caption stuff had a few a11y issues, but beyond that it was pretty solid.
  32. Those issues were logged in github for the project
  33. zakim-robot
    @zakim-robot
    Apr 13 17:09
    [quidkid] guys i’m honestly quite lost on this topic. html5 vs iframe video player, load times and best practices all while keeping accessibility in mind.
  34. zakim-robot
    @zakim-robot
    Apr 13 17:15
    [quidkid] if anyone has any good resources to point to, I’d greatly appreciate it.
  35. zakim-robot
    @zakim-robot
    Apr 13 17:38
    [lli] @garcialo Thanks for your reply to my question. So, is grouping checkboxes in a fieldset the right approach, or is there a better way to build it?
  36. [garcialo] That’s a great way of grouping up and providing a group label for checkboxes.
  37. [garcialo] Also, apologies, but I don’t remember what question you had asked specifically.
  38. [tink] +1 on fieldset for grouping checkboxes.
  39. zakim-robot
    @zakim-robot
    Apr 13 17:44
    [scottohara] + another 1 on fieldset grouping
  40. zakim-robot
    @zakim-robot
    Apr 13 18:12

    [elliottregan] I’ve got a question around some irregularities when removing the activeElement from the DOM.

    • In our app (and AngularJS app), when a user clicks a link, obviously whatever the user was focused on is removed.
    • In all browsers except for Firefox, when the new pages renders, pressing tab will focus the first focusable element on the page.
    • In Firefox, the focus gets moved to the next focusable element after the element that was removed.

    I’ve been testing it using this little test area: https://allyjs.io/tutorials/mutating-active-element.html#running-tests, but I’m not seeing the same results. The focus will be moved to the next focusable element. I even forked that test to more closely mirror our scenario (removing the several focusable elements), and I’m seeing the expected behavior.

  41. [elliottregan] Does anyone know why Firefox would move the focus to the next element AFTER the focused element is removed, while other browsers move it to the top of the document?
  42. zakim-robot
    @zakim-robot
    Apr 13 20:29
    [lli] @garcialo my original questions is NVDA doesn’t announce the legend of a fieldset that groups a list of checkboxes, but it announces the legend if it’s a list of radio buttons. I’m not sure whether it’s a bug in NVDA or something should be done from my side to make it more accessible.
  43. [garcialo] Ah; that’s right. Thanks for the reminder. :)
  44. [garcialo] Yeah, just use the fieldset/legend
  45. [lli] Alright. Thanks!
  46. zakim-robot
    @zakim-robot
    Apr 13 20:54
    [car] @lli This NVDA github issue might describe the problem you are seeing? If so, it looks like they are planning to fix it soon. nvaccess/nvda#3321
  47. [lli] the issue was opened in 2013, but I’m hopeful! Thanks @car
  48. zakim-robot
    @zakim-robot
    Apr 13 22:15
    [emplums] hey all! I have a quick question: I’m debugging a weird a11y issue in part of our app that uses a textarea (from draft-js) - When I enter the textarea with VoiceOver, I have to press tab 3 times to get out of it, but nothing is read by VoiceOver on those three tabs (thinking face emoji) The black focus ring remains on the textarea and nothing happens… I’ve inspected the elements in this section and none of them should be focusable… really stumped here! Has anyone else run into this? Is this just some weird thing with textareas that I am unaware of?
  49. zakim-robot
    @zakim-robot
    Apr 13 22:21
    [marcysutton] are there extra tabindex attributes or an aria-hidden somewhere?
  50. zakim-robot
    @zakim-robot
    Apr 13 22:27
    [higley] @emplums can you add this in the JS somewhere on the page? It should tell you where the focus moves when you tab: 
    document.addEventListener('keydown', (event) => {     if (event.which === 9) {         console.log(document.activeElement);     } });
  51. [higley] or even just paste it in the console, then tab
  52. [emplums] oooh thank you @higley I’m going to try this!
  53. [emplums] @marcysutton I’m not sure.. I’m not seeing them anywhere!
  54. [emplums] aha! i found it! worked like a charm :)
  55. [higley] awesome +1
  56. [marcysutton] what was it?
  57. [emplums] We have these tooltips in the DOM that are hidden which are used to shorten/unshorten links within the text editor when you hover over them… which reminds me that whole flow probably isn’t great anyway
  58. zakim-robot
    @zakim-robot
    Apr 13 22:37
    [marcysutton] ah–sounds a little messy from an interaction perspective!