Archive index

A11y Slackers
Gitter Channel Archive 22nd of July 2015

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    Jul 22 08:42
    @alice @ljwatson heading is not an allowed role for <button> according to http://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html
    Note: ARIA in HTML is authoring conformance requirements ONLY, not implementation (other than for HTML conformance checkers). relevant bit about how browsers must implement is defined in ARIA spec here http://www.w3.org/TR/wai-aria-1.1/#host_general_conflict
  2. stevefaulkner
    09:50

    A11ySlackers chat archive 21st Jyly 2015 http://w3c.github.io/a11ySlackers/archives/210715.html

  3. zakim-robot
    09:54
    [zakim robot, a11y] Note: All discussion is logged and publicly archived daily http://w3c.github.io/a11ySlackers/archives/index.html
  4. SteveALee
    10:42
    zakim lives on? ;)
  5. zakim-robot
    10:47
    [zakim robot, a11y] @stevelee affirmative http://www.w3.org/2015/05/zakim
  6. zakim-robot
    11:19
    [Michiel Bijl, a11y] Not sure whether to be happy I’m doing iOS testing for once, or be sad that the whole damn app isn’t accessible.
  7. dylandgeorge
    13:55
    This is an amazing chat room
  8. stevefaulkner
    13:57
    @dylandgeorge glad you like it :-)
  9. powrsurg
    14:09
    does anyone have an stats/knowledge/anything on accessibility support for proxy mobile browsers like Opera Mini, UC, Silk?
  10. stevefaulkner
    14:14
    @powrsurg I believe that Opera mini is not usable with AT as it does not expose any content to acc APIs
  11. powrsurg
    14:17
    I didn't assume so. I mean, I think they only support click events. I just wasn't sure if anything was ever done or reported. I typically only see browser support for desktop browsers, but occasionally see something for Safari on iOS and the default Android browser ...
  12. powrsurg
    14:19
    I've been pushing the devs here at work to focus more on accessibility (and that's going well), and had been suggesting we try to also focus on proxy browsers and knew one of them would ask about it soon enough
  13. jonathantneal
    14:19
    Finally, a living chat room devoted to accessibility!
  14. stevefaulkner
    14:20

    don't know about others

    @powrsurg actually quick test of opera mini on iOS with VO proves my previous statement wrong, it does expose content, seems usable, but I am not a user (that requires VO, that is)

  15. powrsurg
    14:21
    interesting :)
  16. stevefaulkner
    14:21
    @powrsurg it is probably due to all browsers on iOS having to use webkit engine, which supports acc
  17. stevefaulkner
    14:22
    Hey @jonathantneal
  18. powrsurg
    14:23
    @stevefaulkner Opera Mini renders the page on Opera's servers and then sends a specially formatted, compressed binary to the user back. It actually still uses the Presto rendering engine
  19. dylandgeorge
    14:23
    @stevefaulkner Is it possible to get a copy of the code for this chat room, but integrate it for sign in with twitter instead? I would really love to implement a chat interface like this one on my website.
  20. jonathantneal
    14:23
    This is a BIG deal to me. I’ve been lingering in freenode #accessibility, #a11y, and #a11y_meetings for, I feel like, a year. Waiting. Then I open HTML5 Weekly and I see this.
  21. dylandgeorge
    14:23
    Yes, I found this through HTML5 Weekly as well.
  22. powrsurg
    14:24
    @jonathantneal this has been very helpful ... though is the web interface for this room actually accessible? :p
  23. powrsurg @powrsurg just follows @stevefaulkner on Twitter to find this room
  24. stevefaulkner
    14:25
    @dylandgeorge we use gitter, unsure about whether the code is available ask in https://gitter.im/gitterHQ/developers
  25. stevefaulkner
    14:26
    @powrsurg the web UI has issues, which is part of reason why am using it to find and file bugs on the UI, but Gitter has advantages over Slack which also sucks web UI wise
  26. zakim-robot
    14:30
    [Katy Moe, a11y] @powrsurg the Slack version of a11y chat (which this room is piped to) has other channels, including one for giving feedback to the Slack team on a11y
  27. MichielBijl
    14:39
    @jonathantneal: I use IRC :) Lots of choice client wise
  28. brunopulis
    14:46
    Hi folks! :)
  29. MichielBijl @MichielBijl waves at brunopulis
  30. jonathantneal @jonathantneal is very happy to see everybody
  31. MichielBijl
    14:47
    We're very happy too see you ;)
  32. ckundo
    14:48
    @stevefaulkner did you see that a11ySlackers chat was featured in HTML5 Weekly today? http://html5weekly.com/issues/198
  33. stevefaulkner @stevefaulkner hi @brunopulis
  34. stevefaulkner
    14:48
    @ckundo yeah am subscribed :-)
  35. ckundo
    14:48
    brace yourselves...
  36. garcialo
    14:49
    We've already begun seeing the results. =)
  37. stevefaulkner
    14:49
    well we want people to engage...
  38. ckundo
    14:49
    yes!
  39. jonathantneal
    14:49
    So, we all have an interest in this. How were the rest of you connecting before?
  40. ckundo
    14:50
    @stevefaulkner totally agree
  41. ckundo
    14:50
    reflecting on how it might be an adjustment
  42. brunopulis
    14:51
    I found this channel because of HTML5 Weekly ;)
  43. ckundo
    14:51
    @jonathantneal I practice accessibility as part of my job, and joined because Steve
  44. gtarnoff
    14:51
    I jumped in due to HTML5 Weekly despite seeing all @stevefaulkner tweets and ignoring them (how many chat channels can I actually use at once?)
  45. zakim-robot
    14:52
    [Greg Tarnoff, a11y] And now totally seeing the cross over tot he Slack channel. No wonder I ignored it.
  46. ckundo
    14:52
    worth noting, the chat gets cross-posted to/from a slack chat
  47. zakim-robot
    14:52
    [Katy Moe, a11y] I’d recommend people join the Slack chat (either directly or though IRC) as having only one Gitter channel is going to get difficult with the number of people we have
  48. zakim-robot
    14:53
    [Katy Moe, a11y] we need several channels (we have #angular, #react, #focus-management, etc…)
  49. zakim-robot
    14:53
    [Winston Hearn, a11y] did someone explain the connection and sources? because they just showed up over the weekend and I’m still a bit confused
  50. zakim-robot
    14:53
    [Greg Tarnoff, a11y] I second that. Can Gitter have a message recommending that?
  51. zakim-robot
    14:53
    [Katy Moe, a11y] @stevefaulkner ^
  52. zakim-robot
    14:57
    [Katy Moe, a11y] Also the Slack chat has been sponsored by Slack themselves so we have a full message history.
  53. jonathantneal
    14:57
    @ckundo Fantastic!
  54. stevefaulkner
    14:57
    @kmoe at this point I don't want to recommend people use one over other as use of gitter has advantages
  55. jonathantneal
    14:59
    @kmoe it might be hard sell to get me on another chat platform. I have HipChat for work and IRCCloud for development chat, now Gitter because of PostCSS (and it’s kind of replacing IRCCloud for me).
  56. jonathantneal
    15:00
    But I’m really excited to see what gets shared here, and to read and contribute to discussions. With all the people joining, today might end up more like orientation day though :)
  57. zakim-robot
    15:02
    [Katy Moe, a11y] okay, hopefully we can make the other Slack channels available to people using Gitter somehow, as it would be a shame for you to miss out on those discussions.
  58. rodneyrehm
    15:02
    @jonathantneal maybe https://sameroom.io/blog/connecting-a-room-in-hipchat-to-a-room-in-gitter/ can help to bridge HipChat <-> Gitter?
  59. stevefaulkner
    15:02
    @kmoe the bridging of the 2 rooms (slack general and gitter a11yslackers) is an experiment, if people find it problematic then we can unbridge. I have chosen to use gitter for a few reasons: 1. its publicly viewable without login. 2. its IRC bridge works better for screen reader folks 3. gitter is starting to be used by w3c groups and so it needs to work for user with disabilities and i want to make sure it does, the best way i can do that is by using it myself and filing bugs. 4. it has an easier path to public logging of chat archives which is a must for w3c use.
  60. rodneyrehm
    15:03
    @stevefaulkner how exactly are you bridging the two systems? via sameroom? https://sameroom.io/open-a-tube
  61. brunopulis
    15:03
    Awesome @stevefaulkner :clap:
  62. deborahgu
    15:05
    Is all the usual zakim functionality here?
  63. stevefaulkner
    15:05
    @rodneyrehm yes, i got a free unlimited tube from sameroom after saying nice things about the service http://www.paciellogroup.com/blog/2015/07/anybody-can-be-an-a11y-slacker/#sameroom
  64. cptvitamin
    15:05
    has anyone had any success connecting via IRC using XChat Azure on Mac?
  65. rodneyrehm
    15:05
    ah, must’ve missed that paragraph, sorry
  66. cptvitamin
    15:05
    I’m getting certificate not trusted
  67. cptvitamin
    15:06
    despite “Accept invalid SSL certificate” checkbox checked
  68. stevefaulkner
    15:06
    @deborahgu no :-( i have just co-opted zakim personality to use for bridging rooms
  69. cptvitamin
    15:06
    long live zakim
  70. garcialo
    15:06
    @cptvitamin You're an invalid SSL certificate!
  71. cptvitamin
    15:06
    i know you are but what am I @garcialo
  72. zakim-robot
    15:06
    [Katy Moe, a11y] @stevefaulkner Thanks, that makes sense. I just want to make sure everyone can participate as easily as possible and not miss out or have an unusably busy room.
  73. garcialo
    15:07
    Touché
  74. deborahgu
    15:07
    aw. as long as zakim has a place to hang out with its friends, @stevefaulkner!
  75. powrsurg
    15:07
    What should one hide table headers so that they are not seen visually, but are read to screen readers?
  76. zakim-robot
    15:07
    [Katy Moe, a11y] @powrsurg may I ask what the use case is?
  77. stevefaulkner
    15:08
    @cptvitamin no but if you do, can you document? would be appreciated https://github.com/w3c/a11ySlackers#a11y-slackers
  78. cptvitamin
    15:08
    wil do @stevefaulkner
  79. mgifford
    15:08
    I don't know if there has been an accessibility review of this CKEditor plugin http://ckeditor.com/addon/scayt
  80. deborahgu
    15:09
    @stvefaulkner I connected via Pidgin; do you want me to document that? And if so, is that via pull requests or some such?
  81. stevefaulkner
    15:09
    @deborahgu yeah please do! PR's more than welcome
  82. deborahgu
    15:10
    okay will do. :D
  83. powrsurg
    15:11
    got a table where we want each entry to really be split across two rows. Image in the first row that has a rowspan=2, a title that has a colspan=2 in the first row, then in the second row has a date and lesson status in their own cells. Was using the headers attribute on the <td>s to point them to the right headers. Now we're looking to just hide the headers because visually it seems weird, but semantically it would make sense to list it off
  84. powrsurg
    15:11
    image in the first column I meant
  85. brunopulis
    15:11
    @deborahgu who to connect gitter with pidgin ?
  86. stevefaulkner
    15:11

    [Katy Moe, a11y] @stevefaulkner Thanks, that makes sense. I just want to make sure everyone can participate as easily as possible and not miss out or have an unusably busy room.

    Yeah understood, need documentation, its been a busy week, only started this channel a few days

  87. deborahgu
    15:12
    @brunopulis I'll write it up now and at-message you when I have.
  88. powrsurg
    15:12
    I mean, we could put spans in the headers and do an oft-left thing, but I wasn't sure if there was a better way
  89. brunopulis
    15:12
    @deborahgu Thanks! :)
  90. stevefaulkner
    15:13
    @powrsurg i always find a code example easier to grok ;-)
  91. powrsurg
    15:14
    Okay, I'll throw something together in a few ..
  92. zakim-robot
    15:14
    [Katy Moe, a11y] that would be great - can’t quite visualise why you wouldn’t want to put the headers in at the moment
  93. stevefaulkner
    15:15
    @kmoe a possibility is to have mirror rooms for the other web-a11y slack rooms...
  94. stevefaulkner
    15:17
    @brucelawson lurker
  95. MichielBijl @MichielBijl seduces @brucelawson with a cookie
  96. zakim-robot
    15:19
    [nexii, a11y] I think he sent a do not track header
  97. zakim-robot
    15:19
    [Katy Moe, a11y] @stevefaulkner that sounds ideal - is that possible in Gitter? do you have to have separate repos or something?
  98. stevefaulkner
    15:20
    If anybody has input on providing landmark/heading keyboard navigation in browsers head over to the WICG discourse topic http://discourse.wicg.io/t/nascent-proposal-keyboard-navigation-of-headings-and-html5-landmark-elements/948?u=stevef
  99. stevefaulkner
    15:21
    @kmoe no, setting up rooms is dead easy, you don't need an associated repo, i just set one up for this room
  100. powrsurg
    15:53
    https://gist.github.com/powrsurg/8443a7a86bc79204e527
  101. powrsurg
    15:56
    ... that actually is a bad example, let me clean that up some
  102. powrsurg
    16:00
    http://codepen.io/anon/pen/jPvpvj (now with the ability to view) the markup
  103. deborahgu
    16:02
    @brunopulis https://github.com/w3c/a11ySlackers#user-content-pidgin
  104. MichielBijl
    16:02
    th { color: #fff } ;)
  105. MichielBijl
    16:03
    @powrsurg you could leave out the headers and use aria-describedby
  106. MichielBijl
    16:04
    Not saying that is the best way to do it, just an alternative.
  107. powrsurg
    16:05
    well, then we need to add the mark up visible in some sense (though couldn't we use aria-describe then, or is support for that bad ... and isn't that announced after the element in NVDA or Jaws?)
  108. stevefaulkner
    16:06
    @deborahgu thanks! :clap:
  109. brunopulis
    16:10
    @deborahgu thanks so much :+1:
  110. stevefaulkner
    16:11
    aria-describedby not work well on td's etc (well it works but in general AT don't announce on non interactive elements) http://w3c.github.io/aria-in-html/#practical-support
  111. brunopulis
    16:14
    Folks, I created a list of #a11y who can contribute by adding links,talks, tutorials will be very welcome! :) https://github.com/brunopulis/awesome-a11y
  112. zakim-robot
    16:18
    [Nadav Spiegelman, a11y] nice!
  113. stevefaulkner
    16:26
    @powrsurg how about http://codepen.io/stevef/pen/zGJJON
  114. powrsurg
    16:49
    @stevefaulkner that works for the most part, but even if you fix the fact that I had typos that it should say headers="course_date" I am finding that "Course Date" is never read off in NVDA, but "Course Title" and "Course Status" are read
  115. stevefaulkner
    17:06
    @powrsurg I simplified the table a little and NVDA does announce the course date header, but not when it first moves to it (as it announces start of row). PS. added borders so i could see cells :-)
  116. powrsurg
    17:10
    so when does it announce it?
  117. powrsurg
    17:10
    I tried using the arrow keys but could never get to it ...
  118. stevefaulkner
    17:11
    @powrsurg if you navigate back to the cell from cell to right using arrow keys
  119. stevefaulkner
    17:11
    @powrsurg but seems like a bug in NVDA, not in the code
  120. powrsurg
    17:12
    oh yeah, just caught that. I hit down to navigate and didn't think to go back up ... should have
  121. zakim-robot
    18:27
    [Haley Smith, a11y] where are all these bots coming in from?
  122. zakim-robot
    18:27
    [Haley Smith, a11y] i mean clearly its people but is there a third party program that is piping their chat in here?
  123. powrsurg
    18:31
    I tried to register for an account on NVDA's site to file a bug report, but it's been a while now and still no email.
  124. stevefaulkner
    18:32
    @haley there is a pipe between #a11yslackers gitter room and web-a11y slack #general channel @zakim is the user that enables the pipe - (message sent from https://gitter.im/w3c/a11ySlackers)
    further details http://www.paciellogroup.com/blog/2015/07/anybody-can-be-an-a11y-slacker/#sameroom
  125. stevefaulkner
    18:32
    @powrsurg how long is a while?
  126. zakim-robot
    18:35
    [Haley Smith, a11y] @Steve Faulkner:
  127. zakim-robot
    18:56
    [Haley Smith, a11y] does anyone in here use android and have any recommendations for apps that are like, paragons of accessibility?
  128. zakim-robot
    18:57
    [Haley Smith, a11y] i’m working on a talk about android specifically and would love to have some examples to hold up and also to reference while i’m improving the slack app
  129. garcialo
    19:22
    Android isn't the best for a11y, unfortunately
  130. zakim-robot
    19:35
    [Marcy Sutton, a11y] We can do better than that, come on! I’ll ask around @Haley Smith
  131. zakim-robot
    19:39
    [Marcy Sutton, a11y] Here’s a list from 2013: http://www.afb.org/afbpress/pub.asp?DocID=aw140303
  132. zakim-robot
    19:44
    [Haley Smith, a11y] thanks @Marcy Sutton !
  133. garcialo
    19:47
    Here are some references for Android a11y
  134. garcialo
    19:47
    https://support.google.com/accessibility/android/#topic=6007234
  135. garcialo
    19:47
    https://support.google.com/accessibility/android/answer/6006598?hl=en&ref_topic=6005000
  136. garcialo
    19:47
    https://support.google.com/accessibility/android/answer/6007066?hl=en&ref_topic=3529932
  137. zakim-robot
    19:48
    [victor tsaran, a11y] Of coarse, there are a great examples: Google Plus, Hangouts, google Keep, etc. I'd start with http://inclusiveandroid.com|inclusiveandroid.com
  138. zakim-robot
    19:49
    [victor tsaran, a11y] Good use of APIs is the key!
  139. zakim-robot
    19:51
    [victor tsaran, a11y] Thanks @Haley Smith for looking into android side of things!
  140. zakim-robot
    19:51
    [Haley Smith, a11y] ooo thats a good site
  141. zakim-robot
    19:51
    [Haley Smith, a11y] thanks for the rec vtsaran16 !
  142. MichielBijl
    20:06
    Markup Question: this popup is activated when you click the image, I'm thinking the image should be a button that opens the popup. http://agosto.nl/dir/dump/Screen%20Shot%202015-07-22%20at%2020.57.20.png
    MichielBijl
    20:06
    Markup could look something like this:
  143. MichielBijl
    20:06
    ```
    MichielBijl
    20:06
    <div>
    MichielBijl
    20:06
    <li>
    MichielBijl
    20:06 
    <h3>Malmö Politi</h3>
    MichielBijl
    20:06 
    <p>Saga Norén</p>
    MichielBijl
    20:07 
    <blockquote>
    MichielBijl
    20:07 
        <a href="">Profil</a>
    MichielBijl
    20:07 
      Nej, jeg vil ikke have en drink
    MichielBijl
    20:07 
    <ul>
    MichielBijl
    20:07 
    </blockquote>
    MichielBijl
    20:07 
      <li>
    MichielBijl
    20:07 
      </li>
    MichielBijl
    20:07 
      <li>
    MichielBijl
    20:07
    </div>
    MichielBijl
    20:07 
      </li>
    MichielBijl
    20:07 
    </ul>
    MichielBijl
    20:07 
        <a href="">Kontakt</a>
    MichielBijl
    20:07
    <input type="image" src="profiles/saga-noren.jpg" alt="" role="presentation">
    MichielBijl
    20:07
    ```
    MichielBijl
    20:07
    </li>
    MichielBijl
    20:07
    Yeah thanks for the nice markup IRC -.-
  144. zakim-robot
    20:07
    [Michiel Bijl, a11y] I meant:
      <div>
    <h3>Malmö Politi</h3>
    <p>Saga Norén</p>
    <blockquote>
      Nej, jeg vil ikke have en drink
    </blockquote>
    <ul>
      <li>
        <a href="">Profil</a>
      </li>
      <li>
        <a href="">Kontakt</a>
      </li>
    </ul>
  </div>
  <input type="image" src="profiles/saga-noren.jpg" alt="" role="presentation">
</li>
  145. zakim-robot
    20:08
    [Michiel Bijl, a11y] Alt for image: list of TV program characters, one has a popup over it with extra details about that character.
  146. zakim-robot
    20:10
    [Michiel Bijl, a11y] Any thoughts?
  147. zakim-robot
    20:12
    [Michiel Bijl, a11y] Input should be on top (for tabindex).
  148. deborahgu
    20:24
    as keyboard user, yeah, I would totally expect that image to be the activator opening the pop up, assuming it's not already a link.
  149. zakim-robot
    20:25
    [Michiel Bijl, a11y] I didn’t design it…
  150. zakim-robot
    20:27
    [Michiel Bijl, a11y] Anyhow, it could also be a link, but since there is no description/text for the input (or would be anchor); I’m thinking button.
  151. deborahgu
    20:37
    so the image of all of the people would be a button? Or would there be an invisible button over one of the people?
  152. zakim-robot
    20:41
    [Michiel Bijl, a11y] Every image would be a separate button.
  153. zakim-robot
    20:42
    [Michiel Bijl, a11y] Since the image is decorative; it’s pointless to make it an actual img
  154. deborahgu
    20:49
    I'm not sure if it is what I would call a purely decorative image, based on what you linked above.
  155. deborahgu
    20:49
    I mean I wouldn't call it a decorative image at all. If I'm understanding your link correctly, it's a picture of a TV program character.
  156. stevefaulkner
    21:16

    I'm not sure if it is what I would call a purely decorative image, based on what you linked above.

    agreed

  157. zakim-robot
    21:45
    [Michiel Bijl, a11y] So should it be something like <img src=“” alt=“Photo of Sofia Helin portraying as Saga Norén”> with a button laid over it?
  158. aardrian
    21:46
    @MichielBijl As in, the image will be inside the button? That would be my approach.
  159. aardrian
    21:46
    Is it safe to assume this doesn't need to work on focus?
  160. zakim-robot
    21:46
    [Michiel Bijl, a11y] Is that allowed?
  161. aardrian
    21:47
    <button>As far as I know you can put whatever you want in here.</button>
  162. zakim-robot
    21:47
    [Michiel Bijl, a11y] So: <button><img src=“” alt=“Photo of Sofia Helin portraying as Saga Norén”></button>
  163. zakim-robot
    21:47
    [Michiel Bijl, a11y] Okay
  164. aardrian
    21:48
    Granted — I'd still test and validate, as I tend to be wrong a lot.
  165. zakim-robot
    21:48
    [Michiel Bijl, a11y] I still want to give the button a role of presentation; as it doesn’t do anything for visually impaired people. Although some sighted SR users might miss the connection.
  166. zakim-robot
    21:48
    [Michiel Bijl, a11y] Dilemma Wednesday…
  167. aardrian
    21:49
    If it activates a an element that shows the actor's name along with a link to see a profile, then I'd say it's not presentation. It's more like a collapso-widget.
  168. aardrian
    21:49
    Now I am thinking about the :target approach...
  169. zakim-robot
    21:50
    [Michiel Bijl, a11y] Make it an anchor?
  170. aardrian
    21:50
    <a href="#foo"><img></a> <div id="foo">stuff</div>
  171. aardrian
    21:51
    Hide the #foo, display when it's #foo:target...?
  172. deborahgu
    21:51
    I agree, that's not a a presentation.
  173. deborahgu
    21:51
    It's a correlation between an image of an actor and more information about that actor. That is absolutely interesting to visually impaired people.
  174. MichielBijl
    21:51
    Could do that. Should the anchor have an aria-label too? Something like “Show character information”
  175. deborahgu
    21:52
    Not to mention, many, many, many screenreader users are partially sighted. But even aside from that, it sounds like it's completely of interest to people who can't see it.
  176. aardrian
    21:52
    Yeah, I'd have an aria-label in there, and maybe a bit more to announce that something has changed. I struggle here as a non-SR user.
  177. MichielBijl
    21:52
    I agree @deborahgu
  178. aardrian
    21:53
    Ditto, @deborahgu
  179. MichielBijl
    21:53
    Thank you for your insight :)
  180. deborahgu
    21:53
    :)
  181. cptvitamin
    21:53
    Granted — I'd still test and validate, as I tend to be wrong a lot. @aardrian there you go being all self-deprecating again...
  182. aardrian
    21:54
    @cptvitamin It's not self-deprecating if it's true. It's just ego-free realism. Or something…
  183. cptvitamin
    21:55
    @aardrian is two for two with “ego-free realism” and “collapse-widget"
  184. cptvitamin
    21:55
    collapso-widget
  185. aardrian
    21:55
    @cptvitamin Thanks?
  186. deborahgu
    21:56
    pretty much anyone who doesn't think they should test and validate because they tend to be wrong a lot is someone who is wrong a LOT. It's like the "only somebody not qualified to be in charge would ever want to be in charge" rule.
  187. aardrian
    21:57
    @deborahgu Lulz and truth.
  188. aardrian
    21:58
    Hey Americans, our government has created an accessibility guide: https://18f.github.io/accessibility/keyboard/
  189. aardrian
    21:58
    It could use some help/corrections. It's all hosted on GitHub: https://github.com/18F/accessibility
  190. cptvitamin @cptvitamin mind blown….
  191. aardrian
    21:59
    Maybe if it gets good it can be used to help fix http://section508.gov/ (which really needs it).
  192. deborahgu
    21:59
    oooh
  193. aardrian
    21:59
    Also, I have nothing to do with it. Nothing at all. Except I think I annoy them.
  194. zakim-robot
    22:00
    [Michiel Bijl, a11y] Mockup of markup we just discussed: http://codepen.io/Michiel/pen/213fd2bd7d5074c3c2bab41f58394599?editors=110
  195. aardrian
    22:02
    @MichielBijl I think it just needs an easy way to collapse it now (which will happen as soon as the :target it no longer true anyway).
  196. zakim-robot
    22:02
    [Michiel Bijl, a11y] I was thinking of a button inside the popup div
  197. zakim-robot
    22:02
    [Michiel Bijl, a11y] Simple close button to catch the target
  198. zakim-robot
    22:03
    [Michiel Bijl, a11y] Or doesn’t it work that way?
  199. zakim-robot
    22:03
    [Michiel Bijl, a11y] Never tried :target before to be honest.
  200. zakim-robot
    22:03
    [Michiel Bijl, a11y] That doesn’t work…
  201. aardrian
    22:03
    A link that moves the focus back to the image, which would have its own ID.
  202. zakim-robot
    22:03
    [Michiel Bijl, a11y] Good thinking
  203. zakim-robot
    22:04
    [Michiel Bijl, a11y] Updated
  204. zakim-robot
    22:04
    [Michiel Bijl, a11y] Shouldn’t it move back to the link though?
  205. aardrian
    22:04
    Just tested in your codepen. ID on <img>, href to that ID, and you are good to go.
  206. aardrian
    22:05
    Oh, er. Yeah, good thought.
  207. aardrian
    22:05
    Returning keyboard to where user was is best.
  208. zakim-robot
    22:05
    [Michiel Bijl, a11y] :simple_smile:
  209. zakim-robot
    22:06
    [Michiel Bijl, a11y] Fixed / updated
  210. aardrian
    22:07
    Only issue I can think of is managing keyboard focus. Making sure on expand that the keyboard focus is where you want, and then deciding if the close thinger should be at the top or bottom (in tab order).
  211. zakim-robot
    22:08
    [Michiel Bijl, a11y] I’ve put it on the end, it’s only two links in there.
  212. aardrian
    22:08
    Keen.
  213. zakim-robot
    22:08
    [Michiel Bijl, a11y] If it were more I’d probably put it higher up.
  214. zakim-robot
    22:10
    [Michiel Bijl, a11y] Thank you so much @aardrian and @deborahgu
  215. aardrian
    22:11
    I look forward to hearing how it works in context (production).
  216. stevefaulkner
    22:47
    @MichielBijl why not use a disclosure pattern? http://codepen.io/stevef/pen/PqdXpv?editors=110
  217. zakim-robot
    23:07
    [Michiel Bijl, a11y] @stevefaulkner: I guess that would be more explicit than the :target solution. Would require JavaScript, but that isn’t really an issue.