Archive index

A11y Slackers Gitter Channel Archive 19th of July 2016

What fresh hell is THIS now? - Patrick Lauke
  1. fstorr
    @fstorr
    Jul 19 05:20
    This message was deleted
  2. @alice Ha! I saw that article and had the exact same thought about the job role splitting. Super useful stuff.
  3. zakim-robot
    @zakim-robot
    Jul 19 08:36
    [michiel] Lovely weather to move all my furniture -.-
  4. [michiel] 33°
  5. Job van Achterberg
    @jkva
    Jul 19 08:37
    Haha
  6. Poor bastard
  7. Job van Achterberg
    @jkva
    Jul 19 12:29
    https://usercontent.irccloud-cdn.com/file/XQDLvhJw/
  8. alt="Insecure Web Developer, the magazine"
  9. powrsurg
    @powrsurg
    Jul 19 13:40
    I like that I just shared an article with my team on Gulp and came in here to see that image posted
  10. Mallory
    @StommePoes
    Jul 19 14:05
    Hm, lemme guess... setting aria-hidden on a div inside a role=gridcell doesn't hide something because gridcells are considered to be interactive elements?
  11. Initially I only had Orca stating a :before element's "circle bullet" text, had the dev add in aria-hidden and now FF/JAWS is also reading out circle-bullet.
  12. Michael Fairchild
    @mfairchild365
    Jul 19 14:18
    I ran into a situation where I need to make a 'css only' hack accessible. It would be better to replace the hack with a simple <button>, but I'm limited in what I can do at the moment. Would some folks mind giving me some feedback? Some details of the issue are outlined in the fiddle. (link removed)
  13. Sorry, a better link https://jsfiddle.net/mfairchild365/yn29e3cj/5/
  14. Mallory
    @StommePoes
    Jul 19 14:20
    On first glance it looks like you did the things
  15. It's hard to test JS fiddle with any thing keyboard :(
  16. But while I get a click-me button in nVDA
  17. clicking it doesn't let me know anything happened... I think the focus didn't get moved
  18. Michael Fairchild
    @mfairchild365
    Jul 19 14:25
    Yeah, the first link to the fiddle didn't work
  19. The second one should actually move focus
  20. Mallory
    @StommePoes
    Jul 19 14:26
    "out of frame blank"
  21. I think it ought to be looked at on a normal, non-framed page for certain.
  22. Then it would be cool to also check with Dragon.
  23. Michael Fairchild
    @mfairchild365
    Jul 19 14:27
    I will see if I can throw something together
  24. I appreciate your feedback @StommePoes :)
  25. Mallory
    @StommePoes
    Jul 19 14:28
    I happened to be struggling right now this moment with JAWS and NVDA on a grid thingie
  26. so testing stuff is all open and ready
  27. tho for dragon I have to switch OSes on this box
  28. Michael Fairchild
    @mfairchild365
    Jul 19 14:47
    @StommePoes here is a standalone page https://mfairchild365.github.io/a11y-checkbox-hack/
  29. Mallory
    @StommePoes
    Jul 19 14:51
    still not being moved to the control-me box, I have to manually move down after clicking. button part seems to work ok tho. Lemme reboot for dragon
  30. Michael Fairchild
    @mfairchild365
    Jul 19 15:01
    I pushed a few more changes which might fix it. Turns out I was using a js constant which was not defined in all browsers.
  31. What browser are you using to test?
  32. Mallory
    @StommePoes
    Jul 19 15:02
    I was testing in FF and IE
  33. I noticed IE shows a large black ring on focussed tings
  34. if I click the label to "uncheck" the green box, I get hocus-focus
  35. focus should probably remain on the label if I've clicked it to make something disappear.
  36. I did though in the last test see a ring around the green box in the end
  37. But in Firefox with NVDA focus is not moving to the green box
  38. I have to do that myself.
  39. same for NVDA and IE
  40. Lawlz, but it works on Linux with FF and Orca.
  41. Control me read out there.
  42. I wonder if my other machine is stuck with a cache
  43. Mallory
    @StommePoes
    Jul 19 15:08
    Firefox ignoring my aria-hidden... grrr
  44. Michael Fairchild
    @mfairchild365
    Jul 19 15:15
    Interesting. I added the large black ring to emphasize focus for the demo (that wouldn't go to production).
  45. Mallory
    @StommePoes
    Jul 19 15:16
    yeah although when tabbing I do need to see when I'm on the label (you could hide that from mousers)
  46. Lemme try refreshing your page again, I'm using ctrl+f5 but some caches may be stubborn...
  47. hm nope. I'm only getting focus moved in FF on Linux with Orca.
  48. and not FF on Win.
  49. Win7.
  50. stevefaulkner
    @stevefaulkner
    Jul 19 15:29
    @mfairchild365 note role=presentation not allowed on a checkbox https://www.w3.org/TR/html-aria/#input-checkbox or any interactive element (and doesn't work as expected)
  51. i.e. does not suppress the elements role semantics
  52. Michael Fairchild
    @mfairchild365
    Jul 19 15:32
    Thanks for pointing that out @stevefaulkner
  53. Would the better solution be adding 'display: none' to it?
  54. I also noticed that safari doesn't place the label in the tab order of the page (even though it has tabindex=0)
  55. stevefaulkner
    @stevefaulkner
    Jul 19 15:36
    @mfairchild365 have you got focus tabbing switched on in safari? :-)

  56. Would the better solution be adding 'display: none' to it?

    if there is no user interaction i think yes

  57. Michael Fairchild
    @mfairchild365
    Jul 19 15:40
    Yep, 'Press Tab to highlight each item on a webpage' is switched on in safari
  58. stevefaulkner
    @stevefaulkner
    Jul 19 15:43
    dunno if this is helpful but tossing it over anyway http://codepen.io/stevef/pen/ojuLr
  59. Mallory
    @StommePoes
    Jul 19 15:47
    at the Fronteers spring conference a guy who works at an interactive mailing company demo'd how he uses labels and checkboxes/radios for all the interaction due to what email clients strip out
  60. There's very little he can do for accessibility though he's looking at how to be creative
  61. you can't even keep id's for association, yahoo and gmail strips em
  62. @mfairchild you could keep the checkbox as normal, maybe hide it with opacity (that's still available to AT), and say *:checked+div {change display state}
  63. that way "control me" doesn't have to be a checkbox who is not a checkbox
  64. ...so, it appears this FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=1147359 may not have been entirely fixed
  65. I think I'm hitting it, anyway. An interactive (though not a button) with a pseudo element has that element's content read out
  66. in Orca and NVDA, not JAWS.
  67. Michael Fairchild
    @mfairchild365
    Jul 19 16:00
    @StommePoes wouldn't hiding the checkbox with opacity and keeping in the tab order create a game of 'where is my focus?' for sighted keyboard only users?
  68. Michael Fairchild
    @mfairchild365
    Jul 19 16:22
    safari label tabindex issue: https://bugs.webkit.org/show_bug.cgi?id=102780
  69. Mallory
    @StommePoes
    Jul 19 16:27
    If you still need to move the users to the thingie that appeared, in this case it would be the div who is after the checked checkbox... it could also have a tabindex=-1
  70. jeez it leaked into blink as well
  71. zakim-robot
    @zakim-robot
    Jul 19 17:22
    [ted_drake] What is a good book for people that are involved in accessibility, but are not engineers? I’m looking for something that is a good read and triggers new ideas and actions. These books are thank you gifts for product managers, customer service, and our employee network leaders that have made an impact over the last year for our customers. Book giving is a great idea from @goodwitch
  72. Léonie Watson
    @LJWatson
    Jul 19 17:23
    A Web For All by Sarah and Whitney?
  73. A Web for Everyone, sorry. http://rosenfeldmedia.com/books/a-web-for-everyone/
  74. Job van Achterberg
    @jkva
    Jul 19 17:26
    Seconded. Great book.
  75. zakim-robot
    @zakim-robot
    Jul 19 17:26
    [ted_drake] I just bought a dozen for engineers. I’m looking for something that is less about the web and more about our customers’ lives.
  76. Job van Achterberg
    @jkva
    Jul 19 17:34
    @ted_drake Right. Steve Krug's books are good for the customer's perspective I'd say, even though they're somewhat engineer oriented
  77. @ted_drake David Platt's "The Joy of UX" was a great read as well, but more geared towards UX designers
  78. But focuses a lot on "you are not the user, so make sure your stuff us usable".
  79. James Nurthen
    @jnurthen
    Jul 19 18:52
    @mfairchild365 if you have to put JS on it for keyboard support how is it a "css only"solution?
  80. Michael Fairchild
    @mfairchild365
    Jul 19 18:54
    @jnurthen correct. This is a workaround for a situation where I am not able to replace the underlaying markup (input and labels).
  81. James Nurthen
    @jnurthen
    Jul 19 18:55
    personally I would focus on the (offscreen or otherwise hidden) checkbox and just draw the focus ring on the visible "button"in this situation
  82. but its all a cheesy hack
  83. Michael Fairchild
    @mfairchild365
    Jul 19 18:56
    very true
  84. James Nurthen
    @jnurthen
    Jul 19 18:56
    but i guess that applies to web development in general
  85. it is just the level of stink of the cheese that varies
  86. stevefaulkner
    @stevefaulkner
    Jul 19 21:34
    An acquired taste 🧀
  87. zakim-robot
    @zakim-robot
    Jul 19 21:46
    [jiatyan] @stevefaulkner, I'm in awe with your geekiness. Would you break that down for me? :)
  88. [alice] @jiatyan It's a cheese emoji - he's typing in https://gitter.im/w3c/a11ySlackers
  89. [jiatyan] @alice. lol thanks. I thinking too much.
  90. zakim-robot
    @zakim-robot
    Jul 19 21:51
    [alice] @jiatyan: Yeah it seems to be a weird sameroom.io issue! Kind of hilarious, everyone stumbles over it when they first encounter it :p
  91. James Nurthen
    @jnurthen
    Jul 19 21:57
    I like the fact that emoji seem to have accessibility problems for everyone in these rooms :warning:
  92. zakim-robot
    @zakim-robot
    Jul 19 21:59
    [alice] Somehow that emoji makes it through the pipe unscathed :o
  93. James Nurthen
    @jnurthen
    Jul 19 21:59
    Did i see correctly on twitter that @todd is at Slack now too?
  94. zakim-robot
    @zakim-robot
    Jul 19 22:00
    [alice] Oh huh, so I see
  95. James Nurthen
    @jnurthen
    Jul 19 22:02
    good for them..... i still can't use slack though - damn firewall rules
  96. JP DeVries
    @jpdevries
    Jul 19 23:45

    I’ve been getting into formaction and formmethod attributes lately which I find fascinating how they can be used to do things like send form data to different syncronous endpoints without javascript, but when I go to do my progressive enhancement (using form onSubmit event instead of click listeners on buttons) I’ve been running into a snag.

    TL;DR
    I wish the form onSubmit event would tell you which button triggered the event.

    Anyone else run into anything like this?