Archive index

A11y Slackers Gitter Channel Archive 1st of September 2017

What fresh hell is THIS now? - Patrick Lauke
  1. Jonathan Neal
    @jonathantneal
    Sep 01 01:40
    I’m working on an accessible media player. It handles the roles, ARIA, keyboard controls, LTR/RTL with a tiny footprint (2kb) so developers can easily style, shape, and extend it as needed. If anyone has interest in testing it with their AT of choice, feedback is always welcome and appreciated. https://jonathantneal.github.io/media-player/
  2. LauraOU
    @LauraOU
    Sep 01 12:07
    were you aware of Able Player, @jonathantneal ?
  3. Jonathan Neal
    @jonathantneal
    Sep 01 12:08
    Yes
  4. Chris O'Brien
    @a11ycob
    Sep 01 12:12
    @jonathantneal Nice job Jonathan - quick suggestion based on what I have seen so far. For your playlist treatment - when a user activates one of the PL selections the focus should be moved back to the player controls, play / pause particularly.
  5. Also, exposing the button labels visually on hover/focus might also be a nice enhancement
  6. Jonathan Neal
    @jonathantneal
    Sep 01 12:17
    @a11ycob, yes, and thank you. For visual labels, would you mean via title or some customized overlay?
  7. Chris O'Brien
    @a11ycob
    Sep 01 12:21
    In our player we have the them as a separate tooltip span: http://www.ami.ca/category/employable-me/media/jennifer-and-simon
  8. Jonathan Neal
    @jonathantneal
    Sep 01 12:22
    @a11ycob, the playlist demo is simple. Maybe too simple? You tell me. It does just two things. First, when you click a link, that link becomes the new media source, and the player changes because it detects these things. Second, the player is given instructions to move to the next item in the playlist once a track is finished.
  9. Nice, @a11ycob! Let me take a look.
  10. @a11ycob, what was the motivation behind making the tooltip an element (tooltip vs title or aria-label attribute)? Higher readability? Style-ability? Better exposure to ATs? All of the above / something else?
  11. Hmm, btw, the fullscreen tooltip does not appear above the fullscreen button for some reason. It shows up over the transcript.
  12. Chris O'Brien
    @a11ycob
    Sep 01 12:28
    yes, true - however when you activate the control you see the label which is the most important thing
  13. Jonathan Neal
    @jonathantneal
    Sep 01 12:29
    Yes. Trying to see if I can debug this; it’s telling me I need to leave fullscreen and I’m not fullscreen. Is it on GitHub and I could make a PR if I find out why?
  14. Happy to contribute :D I’ll PM you.
  15. Chris O'Brien
    @a11ycob
    Sep 01 12:31
    The overall motivation for implementing tooltips in this manner was definitively control over the styling
  16. Jonathan Neal
    @jonathantneal
    Sep 01 12:59
    Yes. I see that in some other players, too. Hmm, I wonder how much of this should be “out of the box” and how much of this should just be a demo and instructions. Based on my experience, “deciders” like to see demos with the functionality they want (like, say, tooltips), while “implementors” like the control to easily add, remove, change, and extend functionality.
  17. zakim-robot
    @zakim-robot
    Sep 01 13:29
    [sshaar08] I’m looking to integrate the axe-webdriverjs into my http://webdriver.io/ testing frame work but im having a little bit of trouble

  18. [sshaar08] i understand the process for `\var AxeBuilder = require('axe-webdriverjs');
    var WebDriver = require('selenium-webdriver');

    var driver = new WebDriver.Builder()
    .forBrowser('firefox')
    .build();

    driver
    .get('https://dequeuniversity.com/demo/mars/')
    .then(function () {
    AxeBuilder(driver)
    .analyze(function (results) {
    console.log(results);
    });
    });`\

  19. [sshaar08] but i need it to use it within this context: \`var expect = require\('chai'\).expect; describe\('[webdriver.io](http://webdriver.io) api page', function\(\) { it\('should be able to filter for commands', function \(\) { browser.url\('[http://webdriver.io/api.html](http://webdriver.io/api.html)'\); // filtering property commands $\('.searchbar input'\).setValue\('getT'\); // get all results that are displayed var results = $$\('.commands.property a'\).filter\(function \(link\) { return link.isVisible\(\); }\); // assert number of results expect\(results.length\).to.be.equal\(3\); // check out second result results\[1\].click\(\); expect\($\('.doc h1'\).getText\(\)\).to.be.equal\('GETTEXT'\); }\); }\);`
  20. [sshaar08] can anyone help?
  21. [sshaar08] i can move this over to #automated-testing if need be as well, this is my first day in this slack
  22. zakim-robot
    @zakim-robot
    Sep 01 14:00
    [tink] Welcome @sshaar08
  23. [tink] Ping @marcysutton to help with ^^ query.
  24. zakim-robot
    @zakim-robot
    Sep 01 14:06
    [sshaar08] thanks so much will do
  25. zakim-robot
    @zakim-robot
    Sep 01 16:53
    [garcialo] @sshaar08 There is a gitter specifically for axe-core. That might be a good place to ask. https://gitter.im/dequelabs/axe-core
  26. zakim-robot
    @zakim-robot
    Sep 01 21:40

    [juryjowns] I always assumed that tabindex="-1"‘s “programmatically focusable” meant it had to be focused with JavaScript, but elements with tabindex="-1" are focusable via a click by default (no JS) in both Chrome and Firefox (and likely others). Is this normal?

    Test page: http://jeremyjon.es/tabindexTest.html

  27. zakim-robot
    @zakim-robot
    Sep 01 21:49
    [cameron] @juryjowns in that context focusable means keyboard focusable
  28. [cameron] if you use tab navigation on that page, it behaves as expected: focus skips tabindex -1
  29. [cameron] oh, I see what you mean
  30. [cameron] the focus ring shows on click
  31. [juryjowns] Right, it does skip it via keyboard tabbing.
  32. [cameron] (thinking face emoji)
  33. [karlgroves] @juryjowns follow-up question: why does it matter? Wondering about the use case you’re concerned with.
  34. [ugi] IE and Edge doesn’t show the focus ring.
  35. [karlgroves] IOW, you can bind events to something regardless of whether or not it has tabindex n it
  36. [cameron] @juryjowns are you seeing focus ring where you don’t want it?
  37. [cameron] I mean, in a production app
  38. zakim-robot
    @zakim-robot
    Sep 01 21:54
    [cameron] I’m asking because there a couple of prollyfills for click focus removal you might look at
  39. [cameron] https://github.com/WICG/focus-ring
  40. [cameron] depending on what you need

  41. [juryjowns] @karlgroves Fair question. It’s very much in beta, but here’s the project it’s related to: http://enptree.wpengine.com/example.php

    To get to the part that I’m considering an issue, click “Start” then click the little icon with four boxes (I know it’s unclear what it means, that’s to be fixed still) and you’ll get taken to an overview mode.

  42. [juryjowns] The desired result is that clicking on the options (“yes” or “no”) will set focus to the corresponding destination.
  43. [karlgroves] OK. So your issue is the focus ring?
  44. [juryjowns] By allowing a click on the question to give itself focus, I feel like it’s a little confusing because they already know that’s what they clicked on (and it likely was an unintended click). It also would suggest that clicking on the question DOES something.
  45. zakim-robot
    @zakim-robot
    Sep 01 22:01
    [juryjowns] @karlgroves Yes, I’d rather not give an element with tabindex="-1" a focus ring on click.
  46. [ugi] @juryjowns https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

  47. [karlgroves] I’m not seeing any non-focusable thing get a focus rectangle on your example: http://enptree.wpengine.com/example.php

    But, you could use CSS to take the focus indicator off

  48. zakim-robot
    @zakim-robot
    Sep 01 22:07
    [juryjowns] @karlgroves I used CSS to remove the focus indicator when it’s in the “Question” or “End” states, but in the “Overview” state, I need to show the focus ring on a question when an option (“yes” or “no”) is clicked, but not when a question is clicked.
  49. [karlgroves] http://jsbin.com/hukihod/edit?html,css,js,console,output
  50. [karlgroves] *[tabindex="-1"]:focus{ outline:none; }
  51. zakim-robot
    @zakim-robot
    Sep 01 23:17
    [ayashi] In the case of an auto playing ambient video bg, my understanding is that if it lasts longer than 5 sec it needs to be able to be paused. Is a "reduce motion" link in the header that stops the autoplaying video (among any other animating things on the page) sufficient for wcag compliance? or does it have to be nearby the video?
  52. [ayashi] I'm also interested in the "best for the user" answer but I know clients will want to know the "required for compliance" answer