Archive index

A11y Slackers Gitter Channel Archive 18th of May 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Job van Achterberg
    @jkva
    May 18 08:57
    Has anyone here used aria trees with VoiceOver?
  2. Michiel Bijl
    @MichielBijl
    May 18 09:32
    What?
  3. Job van Achterberg
    @jkva
    May 18 09:33
    @MichielBijl https://www.w3.org/TR/2015/WD-wai-aria-practices-1.1-20150514/#TreeView
  4. Michiel Bijl
    @MichielBijl
    May 18 09:34
    Ah, no.
  5. sophieschoice
    @sophieschoice
    May 18 13:21
    Howdy!
  6. sophieschoice
    @sophieschoice
    May 18 13:22
    A month till role=drinks!
  7. sophieschoice
    @sophieschoice
    May 18 13:22
    \0/
  8. zakim-robot
    @zakim-robot
    May 18 13:33
    [dean] I’m looking forward to it!
  9. Michiel Bijl
    @MichielBijl
    May 18 13:38
    Right, it's the 18th =D
  10. Michiel Bijl
    @MichielBijl
    May 18 13:38
    I've added some background info: http://www.roledrinks.nl/#shtick
  11. Michiel Bijl
    @MichielBijl
    May 18 13:38
    Will flesh out at some point I guess.
  12. Michiel Bijl
    @MichielBijl
    May 18 13:38
    First, work!
  13. Michiel Bijl
    @MichielBijl
    May 18 13:39
    And preparing for my ID24 talk tomorrow :O
  14. powrsurg
    @powrsurg
    May 18 15:18
    So I am watching the videos the W3C just put out today on accessibility. In the demo on controls they showed radio buttons actually getting bigger. How does one actually do that?
  15. powrsurg
    @powrsurg
    May 18 15:19
    What are good, accessible ways to actually style radio buttons and check boxes. I've seen it done a ton of ways with background images and some are good for managing the state, but this really does seem like an area where people are hacking around quite a bit to get something done that should be easier.
  16. James Jackson-South
    @JimBobSquarePants
    May 18 15:29

    @powrsurg I knocked out some a couple of months back. No images required and they are to the best of my knowledge accessible.

    https://jsfiddle.net/jamessouth/btv113dw/

  17. powrsurg
    @powrsurg
    May 18 15:31
    I can see that working
  18. powrsurg
    @powrsurg
    May 18 15:32
    tested in High Contrast Mode?
  19. powrsurg
    @powrsurg
    May 18 15:32
    It should ...
  20. James Jackson-South
    @JimBobSquarePants
    May 18 15:33
    I haven't tested it in High contrast but it should be ok.
  21. James Jackson-South
    @JimBobSquarePants
    May 18 15:35
    Just tested now with Chromes extension. Looks good to me.
  22. zakim-robot
    @zakim-robot
    May 18 15:40
    [marcysutton] You could check out eBay’s pattern library http://ianmcburnie.github.io/mindpatterns/
  23. zakim-robot
    @zakim-robot
    May 18 15:40
    [marcysutton] for custom radio button examples
  24. powrsurg
    @powrsurg
    May 18 15:42
    Useful. Thanks :)
  25. zakim-robot
    @zakim-robot
    May 18 15:43
    [marcysutton] Think I’ll add that to a11ywins today =D
  26. zakim-robot
    @zakim-robot
    May 18 15:43
    [marcysutton] I ran that pattern library through axe-webdriverjs, the blog post about it went up today http://www.deque.com/blog/accessibility-testing-axe-webdriverjs/
  27. powrsurg
    @powrsurg
    May 18 15:46
    Also, I'd love to know how the Voice Recognition video is actually possible
  28. zakim-robot
    @zakim-robot
    May 18 15:49
    [deborah_kaplan] I only watched about half of that one -- what seemed impossible to you about that one? @powrsurg
  29. zakim-robot
    @zakim-robot
    May 18 15:51
    [ccwilcox] @powrsurg: for larger controls, do you mean this one? https://jsfiddle.net/jamessouth/btv113dw/
  30. zakim-robot
    @zakim-robot
    May 18 15:51
    [ccwilcox] oops
  31. zakim-robot
    @zakim-robot
    May 18 15:51
    [ccwilcox] I meant this http://www.w3.org/WAI/perspectives/controls.html
  32. powrsurg
    @powrsurg
    May 18 15:52
    The one on Voice Recognition where the user just speaks "Place Order" to his laptop and it completes the form
  33. zakim-robot
    @zakim-robot
    May 18 15:52
    [ccwilcox] I meant the first one you referenced, "showed radio buttons actually getting bigger"
  34. powrsurg
    @powrsurg
    May 18 15:52
    Chrome desktop is the only browser I'm aware of that supports text to speech, and even that is imperfect. But at least with that it would be sort of possible
  35. powrsurg
    @powrsurg
    May 18 15:53
    oh, sorry. Yeah, I see that as possible for the controls. But it does feel to me like we're hacking things to create our own that uses things like border-radius, box-shadow, etc to do what we want.
  36. powrsurg
    @powrsurg
    May 18 15:54
    I guess I just feel that this should be something we can do more elegantly. The code to do it is very specific
  37. zakim-robot
    @zakim-robot
    May 18 15:54
    [ccwilcox] Dragon NaturallySpeaking can be used to control a browser also.
  38. zakim-robot
    @zakim-robot
    May 18 15:55
    [deborah_kaplan] @powrsurg, I have all kinds of dragon and vocola spoken macros that do things like that.
  39. zakim-robot
    @zakim-robot
    May 18 15:55
    [deborah_kaplan] dragon macro to tell last pass to use its auto-form fill, for example.
  40. zakim-robot
    @zakim-robot
    May 18 15:56
    [deborah_kaplan] there's lots of git commands and gnu screen commands which I've forgotten because I have voice macros to set them off
  41. powrsurg
    @powrsurg
    May 18 15:56
    So in that example would it work because the button is labelled "place order"
  42. zakim-robot
    @zakim-robot
    May 18 15:56
    [deborah_kaplan] it would work if "place order" was a preset spoken macro
  43. zakim-robot
    @zakim-robot
    May 18 15:58
    [deborah_kaplan] oh, yeah, re-watching the video, I see what you mean.
  44. powrsurg
    @powrsurg
    May 18 15:58
    right, so how does the web site account for that
  45. zakim-robot
    @zakim-robot
    May 18 15:58
    [deborah_kaplan] In that case it would work if the button is labeled "Place order", yes.
  46. zakim-robot
    @zakim-robot
    May 18 15:58
    [deborah_kaplan] They really should have done that visually, because it looks like the button was just labeled a normal submit or something.
  47. zakim-robot
    @zakim-robot
    May 18 15:59
    [deborah_kaplan] For a website to account for things like voice macros, it just has to be well coded, with identified form fields, real submit buttons, real buttons, etc. Usual best practice.
  48. zakim-robot
    @zakim-robot
    May 18 16:00
    [ccwilcox] @deborah_kaplan: so you wouldn't have to say "click place order," Dragon would just know that if you say the name of an HTML button that you mean to click it?
  49. zakim-robot
    @zakim-robot
    May 18 16:00
    [deborah_kaplan] I've been having a lot of difficulties these last couple of years because instead of using form fields a lot of divs with role textarea, which has been causing issues with both voice and speech in my experience. I haven't dug down into why yet.
  50. zakim-robot
    @zakim-robot
    May 18 16:01
    [deborah_kaplan] @ccwilcox, yes, depending on how you have Dragon configured.
  51. powrsurg
    @powrsurg
    May 18 16:01
    Would it be the label for the button, or the button text?
  52. zakim-robot
    @zakim-robot
    May 18 16:02
    [ccwilcox] I think your div trouble from sites using the attribute contenteditable=true in place of a textarea attribute
  53. zakim-robot
    @zakim-robot
    May 18 16:02
    [deborah_kaplan] in fact, one of the aggravating Easter eggs of bad design, is that you can say the name of a hidden button, so if there's a label for a webfont or image icon, you can actually speak the name of it. If you happen to know how to inspect the code to find out what the name of it IS.
  54. powrsurg
    @powrsurg
    May 18 16:02
    The actual submit buttons are the ones that I've always found weird to create a label. Usually to be compliant I just wrap the button/input inside a label
  55. zakim-robot
    @zakim-robot
    May 18 16:02
    [deborah_kaplan] oh, I bet you are right about content editable true!
  56. zakim-robot
    @zakim-robot
    May 18 16:02
    [ccwilcox] It gave us trouble in a WYSIWYG editor with NVDA (Jaws could cope)
  57. zakim-robot
    @zakim-robot
    May 18 16:02
    [deborah_kaplan] @powrsurg, I think you might be able to speak the name of both, but hang on, let me create a proof of concept and try it out. Give me 5 minutes.
  58. zakim-robot
    @zakim-robot
    May 18 16:03
    [ccwilcox] I think it can also work with NVDA but needs extra aria attributes
  59. powrsurg
    @powrsurg
    May 18 16:04
    I spent 8 years working with WYSIWYG editors before my current job (built our own and then switched to TinyMCE). It doesn't surprise me that users with AT had trouble
  60. zakim-robot
    @zakim-robot
    May 18 16:04
    [deborah_kaplan] @powrsurg, I just tested with
  61. zakim-robot
    @zakim-robot
    May 18 16:04
    [deborah_kaplan] <button aria-label="close this funky dialogue">proof of concept</button>
  62. zakim-robot
    @zakim-robot
    May 18 16:04
    [deborah_kaplan] and I could activate the button by using both the label and the text.
  63. powrsurg
    @powrsurg
    May 18 16:04
    browsers themselves tended to have a great deal of trouble. I once had Firefox actually create "<br>Text here</br>".
  64. powrsurg
    @powrsurg
    May 18 16:05
    ooh, nice!
  65. powrsurg
    @powrsurg
    May 18 16:05
    good to know
  66. zakim-robot
    @zakim-robot
    May 18 16:05
    [ccwilcox] Referring back to the custom radio buttons in the Controls video that animate to get larger and had a green dot to indicate selection, I think multiple colors requires reinventing the wheel but getting larger could be possible with native buttons and CSS alone by using :focus and :hover to increase the font-size and CSS transition to animate it
  67. powrsurg
    @powrsurg
    May 18 16:07
    Right. I just mean, but all of this is built off of hiding the controls and using :before on the labels (or something like that). I feel like we should be able to just style the controls better.
  68. zakim-robot
    @zakim-robot
    May 18 16:09
    [ccwilcox] maybe. I feel like design people would never be satisfied and would continue to avoid the native "chrome" of each browsers form controls
  69. zakim-robot
    @zakim-robot
    May 18 16:13
    [ccwilcox] Just to be clear who I'm disparaging, I mean people who are obsessed with everything being pixel perfect and identical in all browsers
  70. powrsurg
    @powrsurg
    May 18 16:13
    But wouldn't a better situation be to allow them to replace it with their own, rather than disabling it all together? I know you can sort of do this in at least some browsers
  71. powrsurg
    @powrsurg
    May 18 16:15
    I guess I'm just being purist. We can do it now. It just feels like a hack that I know would confuse devs/designers if I was to train people on it.
  72. zakim-robot
    @zakim-robot
    May 18 16:15
    [ccwilcox] Isn't that what JimBob's jsfiddle example is doing, replacing native controls with his own?
  73. Job van Achterberg
    @jkva
    May 18 16:16
    Modern User Interface Design: "Users still need to magically know what our icons represent"
  74. powrsurg
    @powrsurg
    May 18 16:16
    It is. I am saying we should be able to style the elements themselves, not hiding and then styling the before state for labels.
  75. zakim-robot
    @zakim-robot
    May 18 16:18
    [ccwilcox] We can style the form elements a bit but there definitely mixed support across various browsers
  76. powrsurg
    @powrsurg
    May 18 16:36
    But why is that? We seem to be trying to unify things so much lately, but actually styling form controls is something that gets a pass.
  77. zakim-robot
    @zakim-robot
    May 18 16:40
    [ccwilcox] Not enough people clamoring for it for browser makers to put effort into it? The bigger issue in web practices is people creating custom controls and not including the real controls in the HTML and hiding them. "Native radio buttons are small, ugly, and look different in Chrome vs. IE, I'll just make some nice ones in Photoshop and add click events to the images."
  78. powrsurg
    @powrsurg
    May 18 16:46
    I can see that being the case. But I don't see how a browser could handle that. That is literally a developer/designer being ignorant of things.
  79. James Nurthen
    @jnurthen
    May 18 17:02
    @jkva I seem to recall trees are broken on iOS with VO but are fine on OSX (but that is just from memory)
  80. James Nurthen
    @jnurthen
    May 18 17:03
    for iOS works ok so long as your treeitems have a fallback role which can be activated
  81. James Nurthen
    @jnurthen
    May 18 17:03
    i.e. links
  82. James Nurthen
    @jnurthen
    May 18 17:03
    but it doesn't get read as a tree item
  83. Job van Achterberg
    @jkva
    May 18 17:03
    I wonder if I should not just use nested lists with some JS. Will have to test.
  84. James Nurthen
    @jnurthen
    May 18 17:04
    if you base it on nested lists and add the tree stuff on top you should be good everywhere
  85. Job van Achterberg
    @jkva
    May 18 17:09
    That's the current approach, yeah
  86. Job van Achterberg
    @jkva
    May 18 17:10
    Thanks @jnurthen :)
  87. Michiel Bijl
    @MichielBijl
    May 18 17:15
    Sounds good indeed.
  88. Michiel Bijl
    @MichielBijl
    May 18 17:16
    Back in Dutchyland.
  89. Job van Achterberg
    @jkva
    May 18 17:19
    Welcome, stranger from a far away land!
  90. Michiel Bijl
    @MichielBijl
    May 18 17:30
    o/
  91. Michiel Bijl
    @MichielBijl
    May 18 17:31
    I bring good news: TR APG 1.0 will be retired in favour of APG 1.1 WD!
  92. James Nurthen
    @jnurthen
    May 18 17:32
    shouldn't you wait for the CfC to pass :)
  93. Michiel Bijl
    @MichielBijl
    May 18 17:32
    Ssssh
  94. Michiel Bijl
    @MichielBijl
    May 18 17:32
    :P
  95. zakim-robot
    @zakim-robot
    May 18 18:00
    [jiatyan] May I get some feedback on the accessibility of this filtering interface? https://uit.stanford.edu/software
  96. zakim-robot
    @zakim-robot
    May 18 18:01
    [jiatyan] It's the first time the developers are using aria and sr-only.
  97. zakim-robot
    @zakim-robot
    May 18 18:24
    [jitendra] has anyone here built resume in accessible PDF?
  98. James Nurthen
    @jnurthen
    May 18 18:54
    @jiatyan looks okish. first thing i would do is change role="list region" to role="list". I'm pretty sure everything supports list so the region is meaningless anyway
  99. James Nurthen
    @jnurthen
    May 18 18:54
    that will make checkers happier
  100. James Nurthen
    @jnurthen
    May 18 18:55
    then I would add an exmplicit aria-label or aria-labelledby on the listitems.
  101. James Nurthen
    @jnurthen
    May 18 18:55
    JAWS currently only reads the first child of a listitem so what is getting read is pretty useless
  102. James Nurthen
    @jnurthen
    May 18 18:55
    don't really have time to look at too much more
  103. Michiel Bijl
    @MichielBijl
    May 18 19:15
    jitendra: I would go for an accessible webpage resume. See mine: http://www.michielbijl.nl/cv/
  104. James Nurthen
    @jnurthen
    May 18 19:16
    if anyone has an accessible PDF resume it would be @metzessible
  105. Michiel Bijl
    @MichielBijl
    May 18 19:16
    Haha
  106. powrsurg
    @powrsurg
    May 18 20:08
    I donated to that gofundme campaign for Molly that was supposed to get me the slides from 2 years worth of a conference, but I never received that. It was a good cause so that was fine, but I was a little interested in the content. One of the presentations was supposed to be on accessible PDFs.
  107. zakim-robot
    @zakim-robot
    May 18 20:34
    [jiatyan] Thanks, @jnuthen !
  108. zakim-robot
    @zakim-robot
    May 18 20:34
    [jiatyan] Thanks, @jnurthen!
  109. Michiel Bijl
    @MichielBijl
    May 18 20:49
    powrsurg: you can always ask her.
  110. powrsurg
    @powrsurg
    May 18 21:21
    I tweeted her about it once. She was likely going through stuff at the time
  111. powrsurg
    @powrsurg
    May 18 21:21
    just moved on
  112. zakim-robot
    @zakim-robot
    May 18 23:36
    [karlgroves] Everyone joining ID24?
    http://www.inclusivedesign24.org