Archive index

A11y Slackers Gitter Channel Archive 8th of April 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Apr 08 06:06
    [estelle] I created what i think is a new way of coding the infamous carousel. For sited users it should appear like a carousel, where you can view the options (4 in this case) and hit enter to submit.. For screen reader users, it should appear as a list of options as well, with the 4 options read and submittable. This draft version uses about 45 lines of JS. The keyboard should work. for sited users there is a left and right arrow to change the option selected as well, but those arrows intentionally don’t get keyboard focus. Can anyone tell me what they think? http://estelle.github.io/simplyaccessible/carousel.html
  2. zakim-robot
    Apr 08 06:08
    [estelle] Listening to voiceover, it seems to work fine, but is it too oddly coded to be considered accessible? I am grouping the labels and then the radio buttons, which i thought could work based on the spec, but not sure if it’s to whacky of a read.
  3. garcialo
    Apr 08 06:10
    Seems the hidden content isn't properly hidden. I can access it when it's not visible.
  4. garcialo
    Apr 08 06:11
    As a tester, I'd also want the previous and next to be buttons to be keyboard accessible.
  5. zakim-robot
    Apr 08 06:11
    [estelle] The only content hidden from the screen reader is only the left and right arrow, which has no content, so shouldn’t be read anyhow.
  6. zakim-robot
    Apr 08 06:12
    [estelle] so you would want to be able to tab onto them?
  7. garcialo
    Apr 08 06:12
    Yeah, I would expect to access the content for a "slide" after selecting a specific slide.
  8. garcialo
    Apr 08 06:13
    What if there is a good bit of content, but I want to hear just one more bit of it again
  9. zakim-robot
    Apr 08 06:13
    [estelle] when you select slide 2 with the radio buttons, the second slide show on the carousel and should be read by the screen reader.
  10. zakim-robot
    Apr 08 06:13
    [estelle] each “slide” is a label.
  11. garcialo
    Apr 08 06:14
    It does, but if I wanted to go back and just get the twitter handle, I'd have to go to another slide and then back listen to the entire thing again...and that's assuming it's not a weird twitter handle the user wouldn't want to have announced letter by letter
  12. garcialo
    Apr 08 06:15
    Sorry, my grammar is a little off; a bit late here
  13. zakim-robot
    Apr 08 06:16
    [estelle] how would the user normally do that that is not available now. I understand what you are saying, I am just wondering how I would fix it, and why it would be “broken” now. Is it because I am using paragraphs within a label?
  14. garcialo
    Apr 08 06:16
    ah, I haven't looked at the code yet; mostly just seeing what it's doing on the page
  15. zakim-robot
    Apr 08 06:17
    [estelle] a carousel item reads
  16. zakim-robot
    Apr 08 06:17
    [estelle] <label for="address4">
    <p>last item</p>
    <p>Create & Associates</p>
    <p>www.createcr.com</p>
    <p>Createcr</p>
    <p>Westchester County Design Firm</p>
    </label>
  17. zakim-robot
    Apr 08 06:17
    [estelle] i just filled it with text to give it some content.
  18. garcialo
    Apr 08 06:18
    Ah, I see..and I see what you mean by the labels now.
  19. garcialo
    Apr 08 06:19
    I think it's because of the radio used as the navigation
  20. garcialo
    Apr 08 06:19
    And kind of leaning on the label as the primary way of delivering the content
  21. zakim-robot
    Apr 08 06:21
    [estelle] yes.
  22. zakim-robot
    Apr 08 06:22
    [estelle] sorry for the delay. Computer crash
  23. garcialo
    Apr 08 06:22
    np
  24. zakim-robot
    Apr 08 06:22
    [estelle] the idea is that most devs use libraries and frameworks for carousels, recreating the keystrokes and forgetting to add any accessibility back in
  25. garcialo
    Apr 08 06:22
    I might not be the best user tester since I mostly just test and amn't really a non-sighter user
  26. zakim-robot
    Apr 08 06:23
    [estelle] my idea is to create an accessible carousel with under 50 lines of JS
  27. garcialo
    Apr 08 06:23
    ah, a noble goal
  28. zakim-robot
    Apr 08 06:24
    [estelle] if it weren’t for the right / left arrows, it would actually be about 8 lines of JS. All it’s doing is changing the class of the parent on radio button change.
  29. zakim-robot
    Apr 08 06:25
    [estelle] i think it’s likely more accessible than 90% of the carousels out there, but want to be sure, and make it actually accessible. Need to work on touch after i get this down.
  30. zakim-robot
    Apr 08 06:25
    [estelle] but need to get this down first.
  31. garcialo
    Apr 08 06:27
    Well, you should display:none the non-current slides
  32. garcialo
    Apr 08 06:28
  33. garcialo
    Apr 08 06:29
    Are you only checking it on iOS?
  34. garcialo
    Apr 08 06:29
    iOS/VoiceOver, that is
  35. zakim-robot
    Apr 08 06:31
    [estelle] MacOS with voiceover
  36. garcialo
    Apr 08 06:31
    ah, okay
  37. garcialo
    Apr 08 06:31
    would also suggest checking with Firefox/NVDA if you have it; if you don't, I wouldn't mind helping with that
  38. zakim-robot
    Apr 08 06:31
    [estelle] i don’t want to display none the non current slides because I want them to be read. To the sited user they’re not seen and they don’t get focus
  39. garcialo
    Apr 08 06:32
    Correct, but for non-sighted users, they can be read when they shouldn't be on the page.
  40. zakim-robot
    Apr 08 06:33
    [estelle] They should be readable. The whole point of this carousel is to provide the user with the information.
  41. zakim-robot
    Apr 08 06:33
    [estelle] It’s basically a list of 4 options the user can select from.
  42. zakim-robot
    Apr 08 06:34
    [estelle] The sited user is unlucky in that they have to navigate thru the carousel to find the info they are looking for.
  43. garcialo
    Apr 08 06:34
    ah, I think I see what you're going for
  44. zakim-robot
    Apr 08 06:34
    [estelle] I hate carousels. This is a way of making them at least less miserable for some users.
  45. zakim-robot
    Apr 08 06:35
    [estelle] my thought is this version actually meets are the reqs of https://www.w3.org/WAI/tutorials/carousels/
  46. garcialo
    Apr 08 06:35
    so for non-sighted users, you want it to not really be a carousel
  47. zakim-robot
    Apr 08 06:36
    [estelle] to me a carousel is a way of visually hiding some content so it takes up less room
  48. garcialo
    Apr 08 06:36
    gotcha
  49. zakim-robot
    Apr 08 06:36
    [estelle] but it should still be available
  50. zakim-robot
    Apr 08 06:37
    [estelle] and this version, no ARIA is required as all the info is available and accessible, or at least that’s what if feels like to me a sited user.
  51. garcialo
    Apr 08 06:37
    yeah
  52. garcialo
    Apr 08 06:38
    it is all there for both users
  53. garcialo
    Apr 08 06:39
    but I can see there being confusion if non-sighted users experience the content as one structure and sighted users experience it as another
  54. garcialo
    Apr 08 06:40
    and sighted keyboard only users might want to use the prev/next buttons
  55. garcialo
    Apr 08 06:43
    enlarging the text also creates issues
  56. garcialo
    Apr 08 06:43
    ...but I figure that's not as big of a deal for the core concept of this
  57. zakim-robot
    Apr 08 06:43
    [estelle] i think i need to make the radio buttons obviously focusable. That way the next/prev don’t seem necessary for the sited keyboard user.
  58. zakim-robot
    Apr 08 06:44
    [estelle] i can totally work on the CSS to make it growable. It’s the accessibility of the way the screen reader reads the order that i want to ensure is OK
  59. garcialo
    Apr 08 06:44
    yeah, that makes sense
  60. zakim-robot
    Apr 08 06:45
    [estelle] i’ll make a prettier version of it with kitten pictures before going public ;)
  61. zakim-robot
    Apr 08 06:45
    [estelle] or unicorns
  62. garcialo
    Apr 08 06:45
    kittens would probably be best
  63. zakim-robot
    Apr 08 06:46
    [estelle] haha
  64. zakim-robot
    Apr 08 06:46
    [estelle] thanks for your help.
  65. garcialo
    Apr 08 06:46
    best practice is to always use kitties
  66. garcialo
    Apr 08 06:46
    np
  67. zakim-robot
    Apr 08 06:47
    [estelle] I’ll fix the radio button focii and the layout a little in the morning
  68. zakim-robot
    Apr 08 06:47
    [estelle] this was my first prototype
  69. garcialo
    Apr 08 06:47
    of course
  70. garcialo
    Apr 08 06:48
    maybe put some other content around it to give an idea of how it might interact in a context
  71. zakim-robot
    Apr 08 06:48
    [estelle] ok. thanks for all the feedback. ‘gnight
  72. garcialo
    Apr 08 06:48
    night
  73. StommePoes
    Apr 08 09:10
    You cannot have any clickables in hidden panels tho
  74. StommePoes
    Apr 08 09:10
    if they're not display: none, they must be text/img only then
  75. StommePoes
    Apr 08 09:10
    Because when I tab, I should never tab into stuff I can't see
  76. StommePoes
    Apr 08 09:10
    that's my hugest problem on lots and lots of sites
  77. StommePoes
    Apr 08 09:10
    Tabbing on shit I can't see
  78. StommePoes
    Apr 08 09:11
    So you'd better be doing a bunch of tab management. I had to do similar with a "show three things at once" carousel, constantly looping through all focusables and adding or removing tabindex from them.
  79. StommePoes
    Apr 08 09:12
    @jNurthen I believe my convo with the creator of Hammer (who has since left the company where it was born) was purely on twitter, and at the time he couldn't think of a way to make it work. So I didn't file it as a bug, as it was explicit in the instructions that you had to disable zoom. The creator explained that if you didn't, Hammer could work somewhat but not very accurately because it wouldn't be able to assume where stuff was.
  80. StommePoes
    Apr 08 09:19
    Looking around... it seems it still needs to disable user zoom.
  81. StommePoes
    Apr 08 09:19
    and I don't see anyone making an issue... instead, issues are raised when someone forces allowing zoom.
  82. StommePoes
    Apr 08 09:19
    meh
  83. @stevefaulkner thanks for all the twitter noise on my MathML blog post. I had to write up a friggin response yesterday -- which will only make things worse, I'm sure. sigh. trolls.
  84. Oh, on re-read, my irony seems not very present. The thank you was meant quite seriously, @stevefaulkner :-)
    Also, it's quiet around here today.
  85. MichielBijl
    Apr 08 10:24
    Guess everyone has work to do :)
  86. @MichielBijl thanks!
  87. Ah, I'm not subscribed to the newer list.
  88. sophieschoice
    Apr 08 11:11
    Question: is there a way to make images from Getty Images that you can embed on your own site more accessible?
  89. sophieschoice
    Apr 08 11:14
    Hm, it seems that NVDA can read an embedded image (latest Google Chrome on Windows 8.1) from Getty. Anyone who wants to test with Jaws?
  90. @MichielBijl there's no way to subscribe to the public aria list (just for reading)?
  91. mmm cup of tea with stroopwafel
  92. @jkva not fair! now I want one, too.
  93. @pkra Sorry for tempting you :P @MichielBijl told me that the aria-wg list is card-carrying elite members only
  94. I've tried subscribing twice, no luck
  95. Yeah, figured that out when it led me to the members page -- I refrained from trying to join the group ;-) -- I can actually relate to that approach (public but not easily so); reduces much pain.
  96. That reminds me, gotta see if I can attend an outreach wg meeting today
  97. Only 325 days until CSUN'17!
  98. MichielBijl
    Apr 08 11:57
    @pkra it's read/post only, no subscribe for non members.
  99. @MichielBijl thanks, I figured and @jkva had communicated the same.
  100. powrsurg
    Apr 08 13:37
    Just wondered what people thought of the first option in http://kyusuf.com/post/a-couple-of-alternatives-to-the-hamburger-menu ?
  101. MichielBijl
    Apr 08 13:40
    Hate the second option, but first seems good. If you take the BBC approach.
  102. MichielBijl
    Apr 08 13:40
    Replacing it with three dots is not going to help anyone.
  103. powrsurg
    Apr 08 13:41
    The first one has some implementation issues -- you can tab to the things that are expanded when they aren't expanded, and you tab to them before the ellipsis, which should be a button and not an <a>
  104. powrsurg
    Apr 08 13:44
    Yeah, the BBC approach is much better
  105. MichielBijl
    Apr 08 13:50
    Sorry, didn't look at the code. Am on the bus, so internet is a bit shoddy.
  106. powrsurg
    Apr 08 13:53
    Completely understandable
  107. powrsurg
    Apr 08 13:53
    I am just so tired of hamburgers
  108. Don't let McDonald's hear you, you'll have to go to re-education camp
  109. cr2a-graphique
    Apr 08 13:54
    hi there
  110. MichielBijl
    Apr 08 13:54
    Hi cr2a-graphique
  111. MichielBijl
    Apr 08 13:55
    Quel est votre nom?
  112. cr2a-graphique
    Apr 08 13:56
    that question so tired :
    Is there an error if my HTML5 outline say :
    [nav] Untitled (no head element)
  113. sophieschoice
    Apr 08 13:56
    Gerry McGovern on hamburgers (the navigation kind, not the food-kind: http://www.gerrymcgovern.com/new-thinking/hamburger-menu-and-zombie-apocalypse
  114. MichielBijl
    Apr 08 13:57
    @cr2a-graphique, sorry for asking, just prefer to know peoples names :)
  115. MichielBijl
    Apr 08 13:57
    s/peoples/people's/
  116. sophieschoice
    Apr 08 13:58
    @cr2a-graphique it is not wrong if your nav doesn’t have a head-element. But it depends on the rest of the html-code of the navigation to be 100% sure
  117. cr2a-graphique
    Apr 08 13:59
  118. MichielBijl
    Apr 08 13:59
    And I figured you're French, so I tried to ask you in my best french :P
  119. cr2a-graphique
    Apr 08 13:59
    yes i am
  120. Où se trouvent les toilettes?
  121. MichielBijl
    Apr 08 13:59
    That's why I asked Quel est votre nom?
  122. cr2a-graphique
    Apr 08 14:00
    my name is mikael Ruzafa look that curiculum bro :) www.cr2a-graphique.com
  123. cr2a-graphique
    Apr 08 14:01
    that not A11Y operational so see my work on A11y here -> https://github.com/cr2a-graphique
  124. MichielBijl
    Apr 08 14:01
    Nice to meet you Mikael
  125. cr2a-graphique
    Apr 08 14:02
    be back in 5min group work time
  126. cr2a-graphique
    Apr 08 14:16
    back me too Michieel but im here from a long time :)
  127. MichielBijl
    Apr 08 14:22
    I know, I just didn't know your name ;)
  128. sophieschoice
    Apr 08 14:24
    I am using my Mac now and testing with Voice Over. There are two weird things: if I add <span lang=“en"></span> to something so that it get’s spoken in the proper language, Voice Over doesn’t pick up the chance when I reload the webpage. Hopefully that is something do to with caching?
  129. sophieschoice
    Apr 08 14:25
    Other weird thing: When Voice Over is reading “Daniel Chatto” it says (in Dutch) Daniel verkeerd gespeld Chatto.
  130. sophieschoice
    Apr 08 14:26
    I figure that last error will go away if I add <span lang=“en”> ?
  131. MichielBijl
    Apr 08 14:32
    As far as I know, VoiceOver doesn't support language change on the fly stuff :(
  132. MichielBijl
    Apr 08 14:32
    Which is a shame, because they have a lot of excellent voices.
  133. zakim-robot
    Apr 08 14:33
    [karlgroves] Yeah, Alex is dreamy. ;)
  134. MichielBijl
    Apr 08 14:33
    Try Lee
  135. MichielBijl
    Apr 08 14:34
    It's like listening to Steve all day.
  136. sophieschoice
    Apr 08 14:36
    argh no :( so the lang trick doesn’t work with VoiceOver? @MichielBijl ? That’s a shame.
  137. zakim-robot
    Apr 08 14:36
    [karlgroves] I have my Waze voice set to English Female. Its like being told where to go by Léonie Watson.
  138. sophieschoice
    Apr 08 14:36
    well, at least it will work for people with other screenreaders
  139. MichielBijl
    Apr 08 14:36
    Nope, does with other SR's though.
  140. MichielBijl
    Apr 08 14:36
    Yeap
  141. MichielBijl
    Apr 08 14:36
    @Karl haha
  142. MichielBijl
    Apr 08 14:37
    I am yet to find a SR voice that sounds like LJWatson
  143. LjWatson
    Apr 08 14:38
    @michielbijl you're the second person to say that to me recently... I sound like a munchkin, so frankly you're both crazy :)
  144. MichielBijl
    Apr 08 14:39
    Haha
  145. MichielBijl
    Apr 08 14:39
    You have a lovely voice Léonie.
  146. sophieschoice
    Apr 08 14:39
    and that Daniel verkeerd gespeld Chatto thing when reading Daniel Chatto, @MichielBijl ? Is that because VoiceOver things Daniel should be spelled differtenly (with and accent, as is common in Dutch?)
  147. MichielBijl
    Apr 08 14:40
    Hmm, no clue sophieschoice :(
  148. MichielBijl
    Apr 08 14:55
    Can somebody post a comment here: MichielBijl/split-test#5
  149. MichielBijl
    Apr 08 14:55
    Trying something out.
  150. MichielBijl
    Apr 08 14:56
    Thanks
  151. MichielBijl
    Apr 08 14:57
    @jkva did you get a mention?
  152. @MichielBijl where?
  153. MichielBijl
    Apr 08 14:58
    GitHub/e-mail
  154. By E-mail, yes
  155. MichielBijl
    Apr 08 14:58
    Of the new issue? Here: MichielBijl/split-target#2
  156. Yes.
  157. MichielBijl
    Apr 08 14:59
    Nice :)
  158. StommePoes
    Apr 08 18:15
    Got a question via Zersiax: "anyone aware of a problem in Chrome where role=tree is not properly supported? "
  159. jnurthen
    Apr 08 18:15
    chrome on which OS?
  160. StommePoes
    Apr 08 18:17
    I'll ask him
  161. StommePoes
    Apr 08 18:17
    well he has an HP laptop so I'm guessing Windows
  162. zakim-robot
    Apr 08 18:41
    [miwayha] I’ve been hearing some complaints about my org’s forms, especially on radio buttons / checkboxes. We’re on Drupal, and the devs are balking at trying to correct the markup coming out of the Webform module. Has anyone else successfully tackled this?
  163. jnurthen
    Apr 08 18:46
    paging @jessebeach for drupal question
  164. zakim-robot
    Apr 08 20:03
    [sethkane] Does anyone know how I can do a screen recording with Quicktime on a Mac and capture the Voice Over speaking?
  165. zakim-robot
    Apr 08 20:07
    [cordelia] @sethkane, what I do is turn my volume up, make sure my headphones are unplugged so sound comes out of my speakers, and do a Screen Recording using my computer’s internal microphone. We had a discussion a week or two ago in this Slack channel about screen recording techniques, unfortunately I don’t know of a QuickTime way to record VoiceOver’s audio output without just having the microphone pick up on VoiceOver’s speaker output.
  166. metzessible
    Apr 08 20:10
    @sethkane, you can capture the audio from your computer with soundflower. It's free, and does a magical job. To capture your voice over, you can buy a tool called audio hijack pro that let's you do it at the same time. It's cheap and it's one one of the most useful apps I've come across for trainings.
  167. MichielBijl
    Apr 08 20:12
    That metzessible is specialised in pretty darn fancy accessibility :D
  168. metzessible
    Apr 08 20:12
    @sethkane alternatively, if you're working on a video, it might also be easier to simply record a voice over via QuickTime by reading a script after you finish recording VO. Bring it into imovie and just attach the audio track, where you'll be able to alter the VO volume fairly easily when you need to.
  169. metzessible
    Apr 08 20:13
    The last option being the cheaper method.
  170. metzessible
    Apr 08 20:14
    Clearly that's what PDF accessibility is all about @MichielBijl!
  171. zakim-robot
    Apr 08 20:27
    [sethkane] Awesome thank you!
  172. metzessible
    Apr 08 20:31
    No problem. BTW, you can find tutes on YouTube on all these things so you don't have to reinvent the wheel. Call me out on here if you can't find it and I'll scour my YouTube history for them for you.
  173. zakim-robot
    Apr 08 20:38
    [jdan] haha pipe feedback?
  174. zakim-robot
    Apr 08 20:40
    [marcysutton] I think we need to kick the Zakim bot
  175. zakim-robot
    Apr 08 20:40
    [marcysutton] We need to boot whatever/whomever that is
  176. metzessible
    Apr 08 20:44
    It was me.
  177. metzessible
    Apr 08 20:45
    I was using the mobile app, and Gitter just exploded. Force quit the app, uninstalled it, reopened, same thing happened.
  178. metzessible
    Apr 08 20:45
    Then my phone battery completely drained. No clue what happened.
  179. metzessible
    Apr 08 20:46
    Sorry. :worried:
  180. jnurthen
    Apr 08 20:47
    aaarggghhh - what haoppened?
  181. metzessible
    Apr 08 20:49
    I have no clue.
  182. powrsurg
    Apr 08 20:49
    I would say this should be edited from the archive, but then this conversation would be weird
  183. metzessible
    Apr 08 20:50
    I updated my apps for the first time in like 4 months, then only had Gitter, twitter, and Firefox open on iOS.
  184. metzessible
    Apr 08 20:50
    Poor iphone went from 45% down to 1% in seconds. No clue what I did.
  185. metzessible
    Apr 08 20:51
    I'll sum it up for the archives: Jon was lazy again. Broke Gitter. Everyone confused. Jon is sorry.
  186. metzessible
    Apr 08 20:52
    Randomly doing that session on plain language really helped!
  187. MichielBijl
    Apr 08 21:01
    I can edit it from the archive
  188. MichielBijl
    Apr 08 21:01
    And the conversation would just be funny.
  189. metzessible
    Apr 08 21:12
    Achievement: Unlocked!
  190. MichielBijl
    Apr 08 21:13
    +1
  191. woah
  192. I can't even go drink with friends
  193. MichielBijl
    Apr 08 21:13
    Now we just need to wait for the Ian bot to push the log
  194. It's classic "let's deploy on friday afternoon" stuff tho :P
  195. MichielBijl
    Apr 08 21:14
    Haha
  196. garcialo
    Apr 08 21:34
    Oh wow...what was that?
  197. jnurthen
    Apr 08 21:34
    what was what?
  198. garcialo
    Apr 08 21:36
    All the unknown stuff. =p
  199. jnurthen
    Apr 08 21:37
    it is unknown
  200. garcialo
    Apr 08 21:37
    =)
  201. MichielBijl
    Apr 08 21:40
    No one knows.
  202. metzessible
    Apr 08 21:41
    Knowing is half the battle.
  203. jnurthen
    Apr 08 21:44
    [unknown]
  204. metzessible
    Apr 08 21:46
    There's a lot from college I wish I could unknow.
  205. jnurthen
    Apr 08 21:46
    There are drugs for that
  206. metzessible
    Apr 08 21:47
    Part of what I wish I could unknow.
  207. metzessible
    Apr 08 21:47
    ALL LEGAL if anybody's asking.
  208. Heh ;)
  209. metzessible
    Apr 08 21:48
    Though it would make sense why I got into this field...
  210. MichielBijl
    Apr 08 21:52
    Why are you in a field? It's almost midnight…
  211. garcialo
    Apr 08 21:53
    uhm, you mean it's about 5pm
  212. garcialo
    Apr 08 21:53
    a perfectly normal time to be in a field
  213. MichielBijl
    Apr 08 21:53
    Sure, you say that now
  214. garcialo
    Apr 08 21:54
    I'm practically in a field myself
  215. MichielBijl
    Apr 08 21:54
    But when I invited you to come to my field couple weeks back you denied my invitation.
  216. garcialo
    Apr 08 21:54
    not fieldy enough
  217. garcialo
    Apr 08 21:54
    and when you invited me it was about 5pm, but by the time I would have gotten there it wouldn't have been the appropriate time to be in a field
  218. MichielBijl
    Apr 08 21:55
    Yeah I guess.
  219. metzessible
    Apr 08 22:06
    Obviously I'm in it because it's really hard to get out of this force field when you're in it.
  220. metzessible
    Apr 08 22:06
    Tho at this point I'm curious why I'm not yet a field scholar.
  221. stevefaulkner
    Apr 08 22:33
    First @MichielBijl now @metzessible TPG is going to 💩 Lucky I am on 🚽
  222. stevefaulkner
    Apr 08 22:33
    And hello from kingston
  223. stevefaulkner
    Apr 08 22:35
    @pkra 👍🖖