Archive index

A11y Slackers Gitter Channel Archive 17th of May 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    May 17 05:52
    [chris__pearce] Hey guys, when doing inline form validation, is it best practice to put aria-describedby on the invalid control which points to it’s error message?
  2. zakim-robot
    @zakim-robot
    May 17 06:03

    [chris__pearce] Just wondering what’s the best practice in terms of ARIA and setting focus when doing inline form validation, the validation is triggered on Submit and the errors are positioned directly under the form control. An example:

    ```<input type="email" id="email-address” name="email-address" aria-describedby="error-msg-1" aria-invalid="true">

    <p id="error-msg-1">Please enter a valid email address</p>```

  3. zakim-robot
    @zakim-robot
    May 17 06:04
    [chris__pearce] To make the first error in the form known to the screen reader user should I set focus to it?
  4. zakim-robot
    @zakim-robot
    May 17 06:07
    [chris__pearce] Also all form fields are required, so the form submit button will be disabled until all fields are no longer empty.
  5. Job van Achterberg
    @jkva
    May 17 07:22
    Mornin slackers!
  6. Michiel Bijl
    @MichielBijl
    May 17 07:39
    o/
  7. Mallory
    @StommePoes
    May 17 09:26
    One best practice for inline form validation is, NO ERRORS until the user has blur()'d the input. Then if you want a user to hear that they've just flubbed an input before they go on, a live region stating that an input has an error can show up (separate from your aria-describedby, since in practice I make sure I leave that <p id=error-msg-1/> empty until there's an error, then I fill. Or, you can leave it there but display: none it and only display: block it and add the id to the (should start empty) aria-describedby attr in the input.
  8. Mallory
    @StommePoes
    May 17 09:27
    Everyone hates being told they've messed up before they've even started (as the IndieGoGo email input does :( but additionally, the errors can keep repeating as an SR user is trying to type into the input. Super-extra-fagiliciously annoying.
  9. Fiona Holder
    @FionaHolder
    May 17 11:37
    @jasonday Sure, I'll probably run it for a good while to get a decent number of responses and then I can summarise here
  10. Jason Day
    @jasonday
    May 17 13:00
    is aria-flowto dead?
  11. Jason Day
    @jasonday
    May 17 13:00
    officially?
  12. Mallory
    @StommePoes
    May 17 13:06
    I thought it was just not implemented
  13. Mallory
    @StommePoes
    May 17 13:06
    and actually I thought JAWS had some weird support
  14. Jason Day
    @jasonday
    May 17 13:07
    https://www.w3.org/WAI/GL/wiki/Using_aria-flowto - WG feedback: postpone work on this until there is more UA support and we have more compelling use cases (2013ish)
  15. Jason Day
    @jasonday
    May 17 13:07
    and I have a compelling use case, but alas it is not to be
  16. Mallory
    @StommePoes
    May 17 13:17
    If it's compelling, don't see why not send it their way
  17. Mallory
    @StommePoes
    May 17 13:17
    Maybe something else will replace it to feed that use case
  18. Jason Day
    @jasonday
    May 17 13:22
    I think it's more applicable than trying to manage tabindexes. I have a page structure that I am unable to rework, so the code order doesn't have the same relationship as the visual order
  19. Mallory
    @StommePoes
    May 17 13:27
    Ah, also flexboxers have similar issues. Sounds not uncommon.
  20. Jason Day
    @jasonday
    May 17 13:28
    Exactly. I'll try and write something up - as we move into advanced responsive techniques, such as flexbox, the ability to set the flow order becomes more important
  21. powrsurg
    @powrsurg
    May 17 13:30
    As a bonus maybe then you can work around VOs problems with non-linear reading of DOM elements.
  22. Jason Day
    @jasonday
    May 17 13:30
    @powrsurg - i'm not familiar - care to expand?
  23. powrsurg
    @powrsurg
    May 17 13:46
    I've had times where VoiceOver would not properly read elements in the right order. I set the focus on a DOM element. One would think that VO would read its children in the order that they existed in the DOM, but it does not always do so.
  24. powrsurg
    @powrsurg
    May 17 13:47
    we have a wizard thing that is sort of like a power point presentation. There is a header element, then a giant image, then maybe a message after that. It would read the alt text for the giant image before it would read the header element
  25. Jason Day
    @jasonday
    May 17 13:47
    Anyone know of a mechanism to submit to the ARIA working group without being a member of the ARIA working group?
  26. powrsurg
    @powrsurg
    May 17 13:48
    Unfortunately every time I try to create a simple test case for that to show off it ends up working :(
  27. powrsurg
    @powrsurg
    May 17 13:48
    btw, that was iOS VO to be specific
  28. powrsurg
    @powrsurg
    May 17 13:49
    You could bug members :p
  29. Jason Day
    @jasonday
    May 17 13:49
    lol...I wonder if it has anything to do with mobile and scroll - I've run into weird issues with the state of where an object is versus where it's presented, due to scroll position and how iOS handles scrolling
  30. powrsurg
    @powrsurg
    May 17 13:53
    I almost got desperate enough to add role="button" on it so that I could make it believe the header was a label for it. I wouldn't add any of the states to it because it was really just an image that didn't do anything. I chose against it because I felt that was potentially creating too many issues just to try to fix what I consider to be a bug in one AT.
  31. Jason Day
    @jasonday
    May 17 14:16
    I'm at An Event Apart, and I want to give the conference a shout out, as almost every presenter has mentioned a11y in a meaningful way
  32. powrsurg
    @powrsurg
    May 17 14:17
    nice!
  33. Jason Day
    @jasonday
    May 17 14:22
    yeah - it's been really great.
  34. Job van Achterberg
    @jkva
    May 17 14:22
    j
  35. Job van Achterberg
    @jkva
    May 17 14:22
    jealous =)
  36. Jason Day
    @jasonday
    May 17 14:23
    All the presentations are here: http://aneventapart.com/event/boston-2016 and in the past they've sent out the videos post conference
  37. Jason Day
    @jasonday
    May 17 14:23
    I'll update if I receive them
  38. Jason Day
    @jasonday
    May 17 14:57
    anyone have suggestions for strikethrough text?
  39. Jason Day
    @jasonday
    May 17 14:57
    I'm not seeing anything confidently viable
  40. zakim-robot
    @zakim-robot
    May 17 15:05
    [murphy] Morning, friends! A couple of (hopefully) basic questions: 1. I'm working on a widget right now that includes a table of editable data. Each row in the table has inputs for the user to change the data in that row. Is this an accessible way to approach the problem? Or would it be better to treat the data as a list of forms? That would make sense, but the customers want the table to be sortable, as well.
  41. zakim-robot
    @zakim-robot
    May 17 15:07
    [murphy] 2. Each of the aforementioned rows should have buttons that either allow that row to be deleted, or to navigate to another page to edit another table full of children belonging to that row. What's the most accessible way to represent this? Make a table column for the buttons? What's the best way to indicate the actions that each button will perform?
  42. zakim-robot
    @zakim-robot
    May 17 15:17
    [miwayha] @murphy: WebAIM has written some things related to this problem: http://webaim.org/techniques/forms/advanced. As for the buttons: a screen reader user would understand that they were within a row, so a “Delete this row” value for the button would make sense.
  43. Michiel Bijl
    @MichielBijl
    May 17 15:25
    jasonday: what is your question? How to make that accessible?
  44. Mallory
    @StommePoes
    May 17 15:27
    @jasonday you mean like <span class="sr-only blah blah">Struck: </span><s>This stuff has been crossed out</s><span class="sr-only blah blah">end struck</span> ?
  45. Mallory
    @StommePoes
    May 17 15:28
    Because I always add at least some offscreen text before, like when old prices are shown I add "was: " in front for instance (don't need to end that since with a price context it's obvious)
  46. Mallory
    @StommePoes
    May 17 15:29
    @murphy you can label the form controls and buttons also by point them to the th's in their column headers if applicable. And no hocus-focus if a row with something focussed inside gets removed.
  47. James Nurthen
    @jnurthen
    May 17 15:42
    @jasonday the doc you pointed to about flowto is a WCAG wiki not an ARIA doc. WCAG couldn't come up with something that would be useful but if you can please submit it to the WCAG working group. I can help you with that if you want.
  48. James Nurthen
    @jnurthen
    May 17 15:44
    if you have something for the ARIA docs I can also help with that. Best way for ARIA docs is to submit a github issue. Sounds like use cases for flowto in the aria docs may fit somewhere in the APG. If that is the case you have a few editors of that doc in this channel.
  49. zakim-robot
    @zakim-robot
    May 17 15:48
    [murphy] miwayha and StommePoes, thanks for the tips!
  50. zakim-robot
    @zakim-robot
    May 17 16:17
    [jhausler] what do folks use for an accessible slack client?
  51. zakim-robot
    @zakim-robot
    May 17 16:18
    [jhausler] i see many people are logged in with external clients, so i’m guessing one of them is accessible.
  52. James Nurthen
    @jnurthen
    May 17 16:19
    @jhausler I use gitter but don't need accessibility. I think many people use an IRC bridge but probably best to wait for someone who uses accessibility features to confirm
  53. zakim-robot
    @zakim-robot
    May 17 16:20
    [jhausler] makes sense. thanks James.
  54. zakim-robot
    @zakim-robot
    May 17 16:20
    [michiel] I believe marcozehe
  55. zakim-robot
    @zakim-robot
    May 17 16:20
    [michiel] I believe marcozehe is here via IRCCloud.
  56. zakim-robot
    @zakim-robot
    May 17 16:20
    [michiel] (which is accessible)
  57. zakim-robot
    @zakim-robot
    May 17 16:23
    [marcozehe] Yes.
  58. Job van Achterberg
    @jkva
    May 17 16:23
    Hey @marcozehe!
  59. James Nurthen
    @jnurthen
    May 17 16:23
    not sure what @LjWatson uses to access the channel
  60. Job van Achterberg
    @jkva
    May 17 16:24
    irccloud++
  61. zakim-robot
    @zakim-robot
    May 17 16:25
    [jhausler] k, i’ll look into that. i appreciate the help.
  62. zakim-robot
    @zakim-robot
    May 17 16:26
    [marcozehe] Hi! Well it actually depends what I use. Am on my phone atm and use Slack iOS. But on the desktop it's IRCCloud with the Gitter IRC bridge.
  63. zakim-robot
    @zakim-robot
    May 17 16:26
    [michiel] jnurthen, Léonie uses the Gitter IRC bridge as far as I know.
  64. zakim-robot
    @zakim-robot
    May 17 16:26
    [michiel] Yeah I've heard Léonie say the Slack IRC bridge has too much noise.
  65. zakim-robot
    @zakim-robot
    May 17 16:27
    [marcozehe] And she uses ChatZilla iirc.
  66. zakim-robot
    @zakim-robot
    May 17 16:27
    [michiel] Which you can sort of filter a bit with IRCCloud I suppose.
  67. zakim-robot
    @zakim-robot
    May 17 16:27
    [michiel] Marco: Yeap.
  68. zakim-robot
    @zakim-robot
    May 17 16:28
    [marcozehe] Some also use Miranda NG and the Slack XMPP/Jabber bridge.
  69. zakim-robot
    @zakim-robot
    May 17 16:30
    [michiel] I like IRCCloud because it's always connected.
  70. zakim-robot
    @zakim-robot
    May 17 16:30
    [michiel] Can just jump in and out whenever; don't have to think about it.
  71. James Nurthen
    @jnurthen
    May 17 16:31
    @MichielBijl People think you are in meetings when you are not though :)
  72. zakim-robot
    @zakim-robot
    May 17 16:31
    [michiel] I would like a dedicated IRCCloud client, but I guess that is a bit silly :P
  73. James Nurthen
    @jnurthen
    May 17 16:31
    or is that a benefit?
  74. zakim-robot
    @zakim-robot
    May 17 16:31
    [michiel] Meh, I tend to send regrets when I'm not there.
  75. zakim-robot
    @zakim-robot
    May 17 16:31
    [michiel] So shouldn't really be a problem.
  76. James Nurthen
    @jnurthen
    May 17 16:32
    that assumes people read their email
  77. zakim-robot
    @zakim-robot
    May 17 16:33
    [michiel] I occasionally drop in and type regrets+ MichielBijl :P
  78. James Nurthen
    @jnurthen
    May 17 16:33
    @MichielBijl has it warmed up over there yet. My wife was telling me it is freezing
  79. zakim-robot
    @zakim-robot
    May 17 16:34
    [michiel] I'm in sunny Oxford ;)
  80. James Nurthen
    @jnurthen
    May 17 16:34
    ah fair enough
  81. zakim-robot
    @zakim-robot
    May 17 16:34
    [michiel] Possibly my new garden. https://usercontent.irccloud-cdn.com/file/wk3w95Ry/IMG_0533.JPG
  82. zakim-robot
    @zakim-robot
    May 17 16:35
    [michiel] alt=wide yellow steps in between grass and some shrubs.
  83. James Nurthen
    @jnurthen
    May 17 16:36
    would need to switch that umbrella to orange so you feel at home
  84. zakim-robot
    @zakim-robot
    May 17 16:36
    [michiel] (house and terrace in background)
  85. zakim-robot
    @zakim-robot
    May 17 16:36
    [michiel] Haha
  86. zakim-robot
    @zakim-robot
    May 17 16:36
    [michiel] Will suggest that :P
  87. zakim-robot
    @zakim-robot
    May 17 17:13
    [nathanhammond] Ember.js is participating in GAAD: http://emberjs.com/blog/2016/05/17/global-accessibility-awareness-day.html
  88. zakim-robot
    @zakim-robot
    May 17 17:35
    [dean] Nice @michiel - oh the joys of finding a house. I had a little bit of Funda addiction before buying my place.
  89. powrsurg
    @powrsurg
    May 17 18:34
    https://events.google.com/io2016/ this count down is crazy
  90. powrsurg
    @powrsurg
    May 17 18:36
    <div role="timer" id="aria-countdown" class="style-scope io-home-page">0 days, 22 hours, 26 minutes, 33 seconds until Google I/O</div>
  91. powrsurg
    @powrsurg
    May 17 18:36
    good thing that count down is changing
  92. zakim-robot
    @zakim-robot
    May 17 19:35
    [michiel] dean: thanks! It's quite a nice place. And yeah it's nice to look for place, but it's harder if you have pets…
  93. zakim-robot
    @zakim-robot
    May 17 19:36
    [michiel] https://usercontent.irccloud-cdn.com/file/5N34JkvI/IMG_0544.JPG
  94. zakim-robot
    @zakim-robot
    May 17 19:36
    [michiel] alt=Front of the house, directly at a small brick road (a close, so no traffic), blue door, five windows.
  95. Jonathan Neal
    @jonathantneal
    May 17 19:41
    Michiel, a new house you’re moving to? Is it just me or the camera, or do those lanes seem very thin?
  96. zakim-robot
    @zakim-robot
    May 17 19:42
    [karlgroves] Just the right size for Mitch’s razor scooter
  97. zakim-robot
    @zakim-robot
    May 17 19:45
    [michiel] Ha, no, the house is huge!
  98. zakim-robot
    @zakim-robot
    May 17 19:45
    [michiel] jonathantneal: possibly, we're looking at it :)
  99. zakim-robot
    @zakim-robot
    May 17 19:46
    [michiel] And the lanes are not really lanes. The whole road thingy is about a car and a half in width.
  100. zakim-robot
    @zakim-robot
    May 17 19:46
    [michiel] But we won't have any trouble with that, because our private parking is right at the beginning of it thumbsup emoji:skin-tone-2:
  101. zakim-robot
    @zakim-robot
    May 17 19:46
    [michiel] Now all we need is a car and a driving license :P
  102. James Nurthen
    @jnurthen
    May 17 19:56
    yeah - that looks like the burbs...probably will need a car there
  103. James Nurthen
    @jnurthen
    May 17 19:59
    thumbsup emoji:skin-tone-2: to you too :)
  104. zakim-robot
    @zakim-robot
    May 17 20:07
    [alice] Come on, it's not michiel's fault most platforms have racist emoji
  105. Jason Day
    @jasonday
    May 17 20:32
    @jnurthen - I'll look at posting an issue to github - thanks for the info!
  106. James Nurthen
    @jnurthen
    May 17 20:39
    the APG repos is not in the main ARIA repository any more so if you believe it is an APG issue then please log at https://github.com/w3c/aria-practices
  107. zakim-robot
    @zakim-robot
    May 17 21:42
    [marcysutton] Has anyone successfully gotten the OSX Caps Lock key to map to the PC Insert key for VM use?
  108. zakim-robot
    @zakim-robot
    May 17 21:42
    [marcysutton] I followed @marcozehe’s awesome instructions but still no luck...
  109. zakim-robot
    @zakim-robot
    May 17 21:43
    [marcysutton] https://www.marcozehe.de/2015/06/07/how-to-map-your-macs-capslock-key-to-a-nvda-or-jaws-key-in-a-windows-virtual-machine/
  110. zakim-robot
    @zakim-robot
    May 17 22:42
    [cameron] @marcysutton: I used SharpKeys to do this https://sharpkeys.codeplex.com
  111. zakim-robot
    @zakim-robot
    May 17 22:43
    [cameron] In a windows VM on OS X
  112. zakim-robot
    @zakim-robot
    May 17 22:44
    [cameron] this showed up in the accessibility channel in our work slack https://www.smashingmagazine.com/2016/05/designing-a-dementia-friendly-website/
  113. zakim-robot
    @zakim-robot
    May 17 22:45
    [cameron] It was exciting to see an exploration of design for cognitive disability
  114. zakim-robot
    @zakim-robot
    May 17 22:47
    [cameron] a reminder also that accessibility for one disability often can overlap with others
  115. zakim-robot
    @zakim-robot
    May 17 22:47
    [marcysutton] I used SharpKeys first but it didn't do the job. Maybe I need to test it differently...
  116. zakim-robot
    @zakim-robot
    May 17 22:49
    [cameron] hm, that’s frustrating Marcy, sorry
  117. zakim-robot
    @zakim-robot
    May 17 23:00
    [karlgroves] @marcysutton: Check TPG blog. I think Hans Hillen has a post up about that.
  118. zakim-robot
    @zakim-robot
    May 17 23:02
    [karlgroves] If you can’t find it I can dig it up - probably tomorrow though.
  119. zakim-robot
    @zakim-robot
    May 17 23:15
    [marcysutton] @karlgroves: I did see this one, I’m going through it again just to be sure I didn’t miss anything. https://www.paciellogroup.com/blog/2013/08/insert-key-usage-in-windows-on-a-mac/ Thanks!
  120. zakim-robot
    @zakim-robot
    May 17 23:25
    [michiel] marcysutton: in VMWare Fusion there is a setting that allows you to remap, no fuss about it.
  121. zakim-robot
    @zakim-robot
    May 17 23:26
    [michiel] jnurthen: it's not my fault they make you choose a colour… And it isn't my fault your platform doesn't support them ;)
  122. zakim-robot
    @zakim-robot
    May 17 23:27
    [michiel] thumbsup emoji:skin-tone-2:thumbsup emoji:skin-tone-3:thumbsup emoji:skin-tone-4:thumbsup emoji:skin-tone-5:thumbsup emoji:skin-tone-6:
  123. Michiel Bijl
    @MichielBijl
    May 17 23:35
    Oh, I see, that is just sameroom.io not translating that.
  124. Michiel Bijl
    @MichielBijl
    May 17 23:36
    Or Slack messing up the emoji stuff.
  125. Michiel Bijl
    @MichielBijl
    May 17 23:36
    Thanks Slack 👍🏿
  126. zakim-robot
    @zakim-robot
    May 17 23:36
    [michiel] > 00:36 <MichielBijl> Thanks Slack BAD+91BAD+8DBAD+8FBAD+BF
  127. zakim-robot
    @zakim-robot
    May 17 23:36
    [michiel] -.-
  128. James Nurthen
    @jnurthen
    May 17 23:41
    :thumbsup: