Archive index

A11y Slackers Gitter Channel Archive 9th of August 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Aug 09 07:09
    [karlfreeman] @jason: Thanks for the kind words. As a developer I'm not discouraged by the development side of it (and doing a lot of the ground work already) but I do worry that as I build this product (a SPA) that I might be making poor UX choices for maximum A11Y. For instance I'm unsure what is best practices for a faceted search interface with regards to tab order. Or given a list of elements that can be sorted, what are alternatives to "drag and drop" (as I've assumed that this is a poor A11Y UX decision?).
  2. Ian Devlin
    @iandevlin
    Aug 09 07:24
    Hello hello
  3. Job van Achterberg
    @jkva
    Aug 09 07:32
    Morning
  4. zakim-robot
    @zakim-robot
    Aug 09 10:01
    [michiel] Godmorgen
  5. Mallory
    @StommePoes
    Aug 09 10:50
    https://blog.lukaszolejnik.com/battery-status-readout-as-a-privacy-risk/ woo w3c APIs
  6. @karlfreeman probably not exactly what you're looking for but, at least for UX-wise decisions, you might like the blog of Baymard Institute. http://baymard.com/blog
  7. they do e-commerce research in two sections, "desktop" and mobile/touch. They write long, non-free reports but freely write blog posts with some of this information. Such as about search results and filters.
  8. Of course it's very commerce-oriented, which may not match your situation.
  9. zakim-robot
    @zakim-robot
    Aug 09 10:58
    [karlfreeman] @StommePoes: Thanks so much, I'll be sure to read through some of that material as it looks dead handy! thumbsup emoji
  10. [michiel] StommePoes: yeah battery status is risky. As are soooo many other things :(
  11. zakim-robot
    @zakim-robot
    Aug 09 15:32
    [marcysutton] @karlfreeman: accessible reordering is really tricky, especially if the mouse action differs from the keyboard. It is possible to do simple reordering with the keyboard but you might need to play around with Windows screen readers to avoid role="application"
  12. [marcysutton] here is one library that works, it is tough to achieve in Angular though due to a bug in Voiceover https://github.com/schne324/dragon-drop
  13. zakim-robot
    @zakim-robot
    Aug 09 15:39
    [jason] @marcysutton: Mind explaining this sentence a bit more? 'play around with Windows screen readers to avoid `role=“application”'
  14. [marcysutton] JAWS in particular masks events–if you bind a keydown listener and a click listener on a button JAWS will fire the click event unless you have role="application". So trying to do different things / designs depending on the events is not really feasible
  15. [marcysutton] In my case the design had different behavior for mouse users vs. keyboard users and we had to make an exception for using role="application". It sucked.
  16. [jason] ah gotcha. thanks.
  17. [marcysutton] Within an application region a screen reader user can't utilize screen reader functions. It is a bad way to go generally
  18. [marcysutton] So if you can push for a simpler design that works with the keyboard, DO IT
  19. zakim-robot
    @zakim-robot
    Aug 09 17:15
    [emplums] :waves
  20. [emplums] :wave:
  21. JP DeVries
    @jpdevries
    Aug 09 17:37

    @zakim-robot thanks for the link! Sort of, I’m more looking for how open source projects have governed accessibility mandates. Like Wordpress for example

    All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.
    https://medium.com/@jpdevries/let-us-learn-from-wordpress-28b0803530d8#.oxdfr57q7

  22. zakim-robot
    @zakim-robot
    Aug 09 18:12
    [shawn.henning] Has anyone heard of a requirement that radio buttons be 28px? I was just asked if this was a standard and I have never heard of it before.
  23. [marcysutton] Never heard that before, I have heard 48px for mobile touch targets (and wish more designers would follow it)
  24. [jkup] Did you all see digitalocean launched a re-design today with a ton of a11y fixes? (I do not work for digitalocean) https://twitter.com/Una/status/763048277625430016/photo/1
  25. zakim-robot
    @zakim-robot
    Aug 09 18:18
    [marcysutton] But no alt text on the image :(
  26. [jkup] which image? The tweet?
  27. [marcysutton] Yeah. An image of a list. I hate being that person....but it's sort of ironic
  28. [jkup] I think the “image of a list” is bc of Twitter’s 140char limit
  29. [jkup] but I hear you
  30. [marcysutton] But there are image descriptions now!
  31. [shawn.henning] Thank you Marci.I did several web searches and did not find anything either.
  32. [jkup] Twitter has alt text now for all platforms but they are hidden behind a setting
  33. [marcysutton] I wish they'd friggin enable them by default already.
  34. [marcysutton] Mine actually got reset with a software update
  35. [jkup] same, also no more web a11y people at the tweet factory right now
  36. [marcysutton] :\
  37. zakim-robot
    @zakim-robot
    Aug 09 18:23
    [marcysutton] I guess we should be happy such a needed feature made it in before folks left, even if it's behind a setting!
  38. [marcysutton] I use it all the time!
  39. [marcysutton] Tweet descriptions aside, it is really cool to see Digital Ocean prioritize accessibility fixes. I think a tweet I made about their color contrast decisions ruffled a few feathers.
  40. eagsalazar
    @eagsalazar
    Aug 09 18:25
    I read that for navigation it is valuable to use links as they are semantically clear but that also links should be recognizable as links (have an underline, be selectable, be text, etc). Am I understanding that correctly? Specifically I'm thinking about navigation where links typically aren't just normal text link but an entire block element (still <a> but with display= set) so it provides a larger click target and so you can do things like hover on highlight, etc. Similarly I'm wondering about, for example, a portfolio grid where a user can click anywhere on a large block that has an image, descriptive text, etc but may not have a clear "link" anywhere even though it is all a big <a> tag displayed as a block within a <ul><li>. What are some good guidelines on how to think about this? Or are there any good articles that discuss this question?
  41. zakim-robot
    @zakim-robot
    Aug 09 19:03
    [emplums] weeeee I’m working on a feature for Buffer to allow users to add alt text to their images within the platform
  42. [emplums] it’s been kind of hard to get it added to the roadmap so i’m just going to go rouge and do it in my free time
  43. zakim-robot
    @zakim-robot
    Aug 09 19:29
    [karlfreeman] @marcysutton: Thanks so much for the advice. I'm in the process of re-building the list to have up and down arrows (e.g keyboard support) ditching the drag and drop.
  44. Mallory
    @StommePoes
    Aug 09 20:14
    @eagsalazar for large clickable areas, such as the whole product box in an e-commerce list of products, I've had links inside those with the clear text and teh underlines and used Javascript to make a larger, finger-friendlier click area.
  45. I've made a Thingie act like a modal.
  46. It trap the keyboard.
  47. Now I want to unit test this.
  48. In javascript.
  49. Is it possible, with karma and Phantom and expect.js to unit-test that you do (or do not) have a keyboard trap?
  50. I basically need some way to fire "tab()" and "shiftTab()" events.
  51. and then check who has focus.
  52. Or is this just something I should dump on the Selenium guys at work?
  53. zakim-robot
    @zakim-robot
    Aug 09 21:18
    [michiel] alt=W3C TPAC Registration page has a “Send us a message” text input under more options. I filled in “Hi there :)” https://usercontent.irccloud-cdn.com/file/2jWhSlU4/Screen%20Shot%202016-08-09%20at%2022.17.26.png
  54. [michiel] Am I doing this right?