Archive index

A11y Slackers Gitter Channel Archive 11th of January 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Jan 11 01:44
    [jessebeach] @MichielBijl @callumacrae indeed, that was not me :simple_smile:
  2. zakim-robot
    Jan 11 01:45
    [jessebeach] But I have raised the issue of accessibility of Slack itself. Maybe I can convince folks at FB to write about the work we're doing for Messenger to make it accessible. It seems that Slack has analogous interaction.
  3. zakim-robot
    Jan 11 02:00
    [jitendra] Is this accessible? https://www.dropbox.com/plans?trigger=wahexp
    https://scrnshot.s3.amazonaws.com/Plans_-_Dropbox_e1iau.jpg
  4. zakim-robot
    02:02
    [jitendra] This is surely not
    https://scrnshot.s3.amazonaws.com/Plans_-_Dropbox_mh0i3.jpg
  5. zakim-robot
    02:03
    [jitendra] This is bit surprising to me from a very popular service
  6. garcialo
    02:05
    How is it surprising? They've existed for years not really care much about accessibility and only hired an a11y person in 2015. Give 'em time. ;)
  7. garcialo
    02:05
    To be fair, I don't know that they didn't care about a11y. I'm just assuming.
  8. zakim-robot
    02:08
    [jitendra] I’m surprising because because I have worked with many developers which didn’t know the term “Accessibility” but even they would have used Any heading tag for page tittle.
  9. zakim-robot
    02:11
    [jitendra] I also checked some recent code on the website, written in react is also has basis mistakes.
  10. zakim-robot
    02:53
    [karlgroves] Never underestimate the common developers’ ability to do non-intuitive and illogical things that result in semantically sub-optimal markup
  11. jkva
    09:09
    On that subject
  12. jkva
    09:09
    I have a bunch of data on a subject. Mainly key-value.
  13. jkva
    09:10
    My intuition is to use definitions lists; however those are a bitch to style
  14. jkva
    09:10
    I could also use a table, with ["Property", "Value"] columns. However that seems a bit hackish
  15. jkva
    09:10
    But semantically a <dl> is more correct. Any thoughts?
  16. iandevlin
    09:14
    One of these days I'll remember to log in here on a regular basis.
  17. jkva
    09:14
    Good localtime(), @iandevlin
  18. jkva
    09:21
    Hmm, http://snook.ca/archives/html_and_css/definition-lists-v-tables is very insightful. I wonder how up to date it still is.
  19. iandevlin
    09:22
    Hello @jkva !
  20. iandevlin
    09:23
    Well if <dt> et al are what fits, then I would say use it, regardless of how difficult they are too style. Semantics and all that.
  21. jkva
    09:23
    Yes, I'm inclined to follow that approach
  22. jkva
    09:24
    I'd have to run some tests w/ voiceover and Jaws to see how they interpret dls
  23. iandevlin
    09:24
    I, and others too I am sure, would be interested to hear the results.
  24. stevefaulkner
    10:03
    @StommePoes FYI html5 doc outline implemnted as XSLT in ePub https://code.google.com/p/daisy-pipeline/wiki/EPUB3NavUtils#px:epub3-nav-create-toc (i recall you sniffing after it)
  25. stevefaulkner
    10:04
    hey @iandevlin (thought I had muted you) ;-)
  26. iandevlin
    10:11
    @stevefaulkner :-p
  27. StommePoes
    11:03
    @jkva NVDA misreads DLs (announces the total of dts and dd's instead of number of pairs, which JAWS does do right) but use the right element for the job anyway.
  28. StommePoes
    11:03
    dt's won't mean anything though
  29. StommePoes
    11:04
    @stevefaulkner thanks, yeah all our books were apparently coded using the outline. Dangerous what a bit of half-truths can do
  30. stevefaulkner
    11:10

    Dangerous what a bit of half-truths can do

    ?

  31. MichielBijl
    11:17

    @jkva NVDA misreads DLs (announces the total of dts and dd's instead of number of pairs, which JAWS does do right) but use the right element for the job anyway.

    The damn things have been around for 25 years…

  32. jkva
    11:18
    /shrug
  33. jkva
    11:18
    I'm gonna see if I can file that somewhere after confirmation
  34. stevefaulkner
    11:21

    NVDA misreads DLs (announces the total of dts and dd's instead of number of pairs

    browser(s)?

  35. jkva
    11:22
    Possible, given what Snook said in http://snook.ca/archives/html_and_css/definition-lists-v-tables
  36. jkva
    11:23
    Thanks for the article, just a quick note: Chome isn't the best choice as the browser itself is largely inaccessible. The browser decides what he gives to the Accessibility API, and that's where chrome fails with th elements, it seems.
  37. jkva
    11:23
    But I'm fairly new to this stuff
  38. MichielBijl
    11:25
    Safari + VoiceOver does the same thing (announce all items instead of pairs)
  39. jkva
    11:25
    Bah
  40. MichielBijl
    11:28
    ChromeVox + Chrome doesn't even do dl's
  41. MichielBijl
    11:29
    cvox+n>o doesn't recognise definition lists as lists…
  42. jkva
    11:29
    Hm. I hope I've not been writing dl's for squat
  43. stevefaulkner
    11:30
    @jkva chrome th related bug https://code.google.com/p/chromium/issues/detail?id=435081
  44. MichielBijl
    11:33
    Test file: http://dir.rawr.eu/definition-list.html
  45. StommePoes
    11:34
    fixed and closed in 2015, is it out in normal chrome yet?
  46. StommePoes
    11:35
    @stevefaulkner the guidelines for the code framework used for epub books use all h1s everywhere, because they believed in the html5 document outline, that is what I meant
  47. StommePoes
    11:35
    NVDA does this in at least FF and IE, prolly others too
  48. StommePoes
    11:36
    it's a known bug, already filed
  49. StommePoes
    11:36
    and it's hit us at work, we just ignore it
  50. stevefaulkner
    11:37
    @StommePoes re chrome and th, yes fixed in current chrome just tested with http://thepaciellogroup.github.io/AT-browser-tests/test-files/table-caption-thead-tbody-tfoot-tr-th-td.html
  51. StommePoes
    11:37
    So in Michiel's test, JAWS would say there are two lists, each with 2 items. NVDA would say there are 2 lists, each with 4 items.
  52. MichielBijl
    11:38
    VoiceOver the same. ChromeVox ignores them as lists.
  53. StommePoes
    11:38
    ChromeVox, FireEyes, whatever
  54. StommePoes
    11:38
    Hm, later today I should test what Narrator does.
  55. MichielBijl
    11:38
    Probably narrate some stuff…
  56. MichielBijl
    11:43
    @jkva wouldn't this work for your dl: 
    <table>   <thead>     <tr>       <th scope="col">Name</th>       <th scope="col">Description</th>       <th scope="col">Status</th>     </tr>   </thead>   <tbody>     <tr>       <th scope="row">Denmark</th>       <td>A lovely little country with lots of bikes.</td>       <td>Drinking beer (probably)</td>     </tr>     <tr>       <th scope="row">Netherlands</th>       <td>A lovely little country full of dutch fuckers.</td>       <td>Pissing off Steve</td>     </tr>   </tbody> </table>
  57. jkva
    11:43
    Sometimes. Status isn't always applicable
  58. MichielBijl
    11:44
    Could be an empty cell
  59. jkva
    11:44
    And I just spent a good amount of hours creating definition lists >_<
  60. MichielBijl
    11:44
    s/<dt/<th scope="row"/ =P
  61. StommePoes
    11:44
    They're hard to style because no wrapping element is allowed inside the dl, so no way to easily say "this dt and dd(s) are a single unit)
  62. jkva
    11:44
    Yeah true
  63. StommePoes
    11:45
    so another possibility is just a list, where the li has a heading (dt) and a p (dd)
  64. MichielBijl
    11:45
    @StommePoes that is only a problem if there are multiple dd's to a dt
  65. MichielBijl
    11:46
    dt + dd { content: "What a lovely fucking couple" }
  66. StommePoes
    11:53
    It's a problem any time you have more than a 1-1 relationship, and a problem is either side could be way larger/longer than the other
  67. StommePoes
    11:54
    and I've used every hack known to man to make DLs look like lists with borders making lines underneath, and there's always been a case where it failed
  68. StommePoes
    11:55
    And yeah, there can be multiple dd's to a dt. Heck, in dictionaries (which most people aren't even writing DLs for), it's very common.
  69. MichielBijl
    11:57
    HTML spec uses a dictionary as example: http://www.w3.org/TR/html5/grouping-content.html#the-dd-element
  70. MichielBijl
    12:05
    If a browser doesn't support @supports it should ignore the entire block right?
  71. StommePoes
    12:08
    @MichielBijl yes, and they do not style it in any of the ways we tend to be asked to style. Styling (rather than semantics) tends to be the reason people switch over to ul>li's or 2-column tables. Because doing a DL and then having an underline break because some browser wraps someone to a new line means someone higher up will be talking to you about fixing it. You'll spend several hours trying out several solutions with CSS and finally you will switch to something else (if you have such an employer who demands these things).
  72. StommePoes
    12:09
    styling like this http://www.quantorexpress.nl/verkooppunten/noordhuis/52/
  73. StommePoes
    12:10
    was only doable because I made the font smaller for IE
  74. StommePoes
    12:10
    bleh
  75. MichielBijl
    12:10
    Nowadays you can probably flexbox that shit
  76. MichielBijl
    12:10
    Or use floats and calc()
  77. StommePoes
    12:11
    flexbox plus a polyfill
  78. MichielBijl
    12:11
    Don't tell my girlfriend, but I love calc()
  79. StommePoes
    12:11
    What's less hassle for developers, users, and browsers? Avoiding the extra request for the polyfill and using another element
  80. StommePoes
    12:11
    Yeah I loved it back when Opera was the only supporter
  81. StommePoes
    12:11
    And floats are not cool
  82. StommePoes
    12:11
    because, again, we have no wrapping element we can rely on
  83. MichielBijl
    12:11
    Unless your ship is sinking…
  84. StommePoes
    12:12
    sometimes the dt should clear everything before it, but sometimes not
  85. StommePoes
    12:12
    and it all depends on how many lines each side takes up
  86. StommePoes
    12:13
    which, if the page is responsive, is you have no idea how many lines it takes up. The URL above isn't responsive so it didn't matter there, but sometimes the data for opening times wasn't a short bit of times, but some stores would type in this whole paragraph about when the office closes for lunch and when it reopens, except on these certain holidays etc etc.
  87. StommePoes
    12:13
    Stores who do that I think are still broken actually, not sure...
  88. MichielBijl
    12:14
    In your ul/ol example, wouldn't it be possible to link the title/dt to a dfn element?
  89. MichielBijl
    12:15
    Not sure if that improves anything
  90. StommePoes
    12:16
    no idea, I've never used the dfn element
  91. StommePoes
    12:16
    plus, I see dl's as key-value pairs, but dfn is... an actual definition, I thought?
  92. MichielBijl
    12:17
    Yes
  93. StommePoes
    12:17
    Actually, looks like I could fill a lot of crap in mine and they were still mostly ok http://www.quantorexpress.nl/verkooppunten/noordhuis/52/
  94. StommePoes
    12:17
    whoops
  95. MichielBijl
    12:17
    definition title/data, so dfn seemed appropriate
  96. StommePoes
    12:17
    http://stommepoes.nl/work/dl.png
  97. MichielBijl
    12:18
    Those would be cool values for that list though =P
  98. MichielBijl
    12:18
    I'd be much more inclined to buy stuff from them
  99. StommePoes
    12:18
    Lawlz. It died in IE
  100. StommePoes
    12:18
    even after I made sure the HTML didn't ahve any spaces in it
  101. StommePoes
    12:19
    since you know, IE doesn't add spaces between inline-block elements but other browsers do if it's in the markup
  102. MichielBijl
    12:19
    Chrome does to no?
  103. MichielBijl
    12:19
    Uhm, sorry
  104. StommePoes
    12:19

    so the markup's all like </dd

    <dt>blah</dt

    <dd> etc </dd

  105. StommePoes
    12:19
    Just IE
  106. MichielBijl
    12:19
    Safari doesn't do that I thought
  107. MichielBijl
    12:19
    Can't remember /lazy
  108. StommePoes
    12:20
    hm gitter removes my >
  109. StommePoes
    12:20
    It's because the spec didn't insist either way
  110. MichielBijl
    12:20
    You need to use ticks
  111. StommePoes
    12:20
    IE's not wrong, except it's the only one who does it
  112. StommePoes
    12:20
    which makes it wrong in our book
  113. MichielBijl
    12:20
    `````
  114. stevefaulkner
    12:35
    recent definition list thread on webaim http://webaim.org/discussion/mail_thread?thread=7089
  115. MichielBijl
    14:03
    SPAM: on working in tech, accessibility, and why you shouldn't hire me: http://www.michielbijl.nl/2016/01/11/you-dont-want-to-hire-me/#main
  116. StommePoes
    14:30
    lawlz, charset fail --> Léonie.
  117. StommePoes
    14:34
    I always gag when I see an email list and then realise some of those posts are mine. Ug.
  118. garcialo
    15:25
    Are display: none, visibility: hidden, and aria-hidden="true" the only ways of "hiding" something programmatically?
  119. MichielBijl
    15:27
    <del>?
  120. MichielBijl
    15:28
    And everything after <summary>
  121. LjWatson
    15:28
    @garcialo the HTML hidden attrib also.
  122. garcialo
    15:29
    Ah yeah, @LjWatson I tend to forget about that one.
  123. garcialo
    15:29
    @MichielBijl I didn't realize <del> would hide it; but I guess that makes sense
  124. MichielBijl
    15:30
    The del element represents a removal from the document.
  125. MichielBijl
    15:30
    So, yeah =P
  126. LjWatson
    15:31
    <del> doesn't hide it AFAIK.
  127. LjWatson
    15:31
    It just represents a chunk of content that has been deleted from a document. Like track changes in Word.
  128. LjWatson
    15:32
    Visually it is displayed as having a strikethrough I believe.
  129. MichielBijl
    15:32
    Crap, you're right @LjWatson, it just puts trike through on it.
  130. MichielBijl
    15:32
    Could've sworn it would hide it.
  131. MichielBijl
    15:33
    My bad @garcialo
  132. garcialo
    15:33
    Does AT communicate anything for <del>?
  133. LjWatson
    15:35
    No. Doesn't look like it's mapped in any of the accessibility APIs, and I don't think any AT goes to the DOM to support it either.
  134. MichielBijl
    15:41
    It's not on html5accessibility.com
  135. LjWatson
    15:42
    No it isn't, but it's in the HTML AAM
  136. stevefaulkner
    15:56
    Only newish HTML features are on Html5acc site
  137. jnurthen
    16:04
    @LjWatson Isn't there a "document editing" mode in jaws which will read text styling. Obviously would need some way to flag to users that del and ins and such like we're there so the user knew to turn on the mode.
  138. garcialo
    16:07
    That would be neat to include on an a11y page. "Here are some patterns that we use, test drive them with your AT. Did you know you can configure your AT to be more verbose?"
  139. garcialo
    16:07
    I mean, I figure that content would be ignored anyway, but still. =p
  140. LjWatson
    16:10
    @JNurthen yes, in most screen readers AFAIK. Like you mention the problem is knowing that you need to query the text though.
  141. MichielBijl
    16:10
    VoiceOver+Safari announces the text no different than other text.
  142. MichielBijl
    16:10
    You can do VO+T to hear the styling, but that doesn't work if you use <del> inside a paragraph
  143. MarcoZehe
    17:12
    I found VO+T falls over in a lot of situations lately, especially on El Capitan where things in Webkit quite dramatically regressed in a lot of places. Among them rich text editing.
  144. MarcoZehe
    17:13
    I know for sure we map text attributes for the <del> element in Firefox, and NVDA and Orca etc. can query it (NVDA+F, for example), but you have to know that this text is in some way interesting.
  145. StommePoes
    17:42
    I always prefixed my <del>s with hidden text, so they made sense
  146. StommePoes
    17:42
    Because they were just ordinary text in SR and ZT
  147. StommePoes
    17:43
    ```<span offscreen>Was </span><del>old price</del> <span offscreen> Now </span><ins>new price</ins>
  148. StommePoes
    17:43
    Otherwise there would just be two prices sitting around like ducks.
  149. MichielBijl
    17:44
    Is that proper use of del/ins?
  150. MichielBijl
    17:44
    Let me rephrase, is mention of a previous price really a deletion?
  151. StommePoes
    17:45
    it's the same as legal
  152. StommePoes
    17:45
    legal isn't real deletion either
  153. StommePoes
    17:45
    it means something was replaced
  154. StommePoes
    17:45
    <del>3 score ago</del> <ins>4 score and 7 years ago</ins>
  155. LjWatson
    17:45
    Yes, a previous price would be an acceptable use of <del>.
  156. LjWatson
    17:45
    At least semantically. Not accessibly so much.
  157. MichielBijl
    17:45
    Good to know
  158. MichielBijl
    17:46
    @StommePoes's code seems pretty accessible.
  159. StommePoes
    17:46
    It's when you want/need to user to know there was previously some other value/text, and it has been replaced... I mean otherwise, a pure update, you'd just... actually delete the old stuff and add the new stuff, no ins/del tags either way.
  160. jkva
    17:46
    Ha, I imagine that speech with crossed-out words and doodles now
  161. StommePoes
    17:46
    kinda like the BBS hackers using ^H^H^H to represent a fake misstep :)
  162. MichielBijl
    18:20
    Question, should the buttons under “Translation” output be toggle buttons or radio buttons? http://rawr.eu/translate.html
  163. MichielBijl
    18:20
    You can only have one selected.
  164. MichielBijl
    18:20
    But the button does an action (change the output language) so I'm guessing toggle buttons.
  165. zakim-robot
    18:22
    [jitendra] Poll by @smashingmag https://twitter.com/smashingmag/status/686534719794724866
  166. cptvitamin
    19:32
    strictly speaking, WCAG 2 contrast req are for text and images of text. if someone wants to have a low contrast twitter icon that links to their twitter page, its not a WCAG fail, right?
  167. garcialo
    19:33
    Correct.
  168. garcialo
    19:33
    WCAG contrast doesn't apply to not text.
  169. cptvitamin
    19:33
    thanks @garcialo for the sanity check
  170. garcialo
    19:33
    np
  171. zakim-robot
    21:13
    [cryberg] My understanding is that aria-haspopup only provides information if it is put on a button or a link. Is there any other aria property like aria-haspopup that will work on a regular div?
    I'm working with a generic div with tabindex=0 that contains a box with lot of information, and I want to convey to a screen reader user that a menu appears when the box is clicked anywhere and/or the enter key is pressed when it has focus
  172. MichielBijl
    21:18
    Yeah there is
  173. MichielBijl
    21:18
    If you replace the div with a button
  174. MichielBijl
    21:18
    It's a button after all
  175. MichielBijl
    21:18
    =)
  176. MichielBijl
    21:19
    Do the scripts behind that div catch enter/spacebar activation?
  177. MichielBijl
    21:21
    May I ask why you're not using a button?
  178. MichielBijl @MichielBijl note to self: ask questions before you make stupid comments
  179. zakim-robot
    21:24
    [cryberg] The scripts do catch spacebar and enter, it all functions correctly, it's just not obvious to a screen reader user that the functionality is there.
    We're not using a button because it's a rather large div that contains a lot of information, and just happens to be clickable. It didn't seem like something someone would expect to be a button? But I can see the argument both ways
  180. jnurthen
    21:25
    where do you get the impression that haspopup only provides info on buttons or links?
  181. zakim-robot
    21:25
    [cryberg] http://www.ssbbartgroup.com/blog/expanding-the-use-of-the-aria-haspopup-property/
  182. zakim-robot
    21:26
    [cryberg] and putting aria-haspopup on the div didn't announce anything when I ran it through JAWS
  183. zakim-robot
    21:26
    [cryberg] it was ignored
  184. jnurthen
    21:27
    I see that as a JAWS bug - there is nothing in the spec to indicate that it is restricted to certain role types
  185. jnurthen
    21:27
    indeed one of the primary uses is combo boxes
  186. MichielBijl
    21:28
    You can use role=button
  187. jnurthen
    21:28
    but buttons can't have children
  188. jnurthen
    21:28
    you'd have to linearise all of that sub-content
  189. MichielBijl
    21:28
    You could argue that buttons with a lot of content aren't very nice to users
  190. jnurthen
    21:29
    personally I would make it all clickable and then pick one thing to be the keyboard/screen reader thing which actually takes focus and make that thing launch the popup for screen reader/keyboard users
  191. MichielBijl
    21:30
    Yeah that might be best.
  192. MichielBijl
    21:30
    But it all depends on the content of the div really.
  193. jnurthen
    21:30
    yeah
  194. jnurthen
    21:31
    this sounds a bit like a "tile" interface
  195. zakim-robot
    21:31
    [cryberg] Yeah
  196. zakim-robot
    21:31
    [cryberg] "tile" would be a close analogy
  197. jnurthen
    21:31
    i've been working on those recently - they are hard
  198. jnurthen
    21:31
    :)
  199. zakim-robot
    21:31
    [cryberg] haha, good to have some solidarity. Any good tile-accessibility-tips you've discovered?
  200. MichielBijl
    21:32
    @jnurthen you should add a “tile” design pattern to the guide ;)
  201. jnurthen
    21:32
    i wish i had time :)
  202. MichielBijl @MichielBijl is off to bed
  203. MichielBijl @MichielBijl waves
  204. jnurthen
    21:33
    some of it depends how you are envisioning your keyboard interface wokring
  205. zakim-robot
    21:33
    [cryberg] Thanks for the input @michiel
  206. jnurthen
    21:33
    are you thinking of arrow keys to the different "tiles" or tab key to the tile?
  207. jnurthen
    21:33
    what about when the tile might contain interactive content?
  208. zakim-robot
    21:33
    [cryberg] The design is for the tab key to put focus around the whole tile
  209. zakim-robot
    21:34
    [cryberg] and enter key will open the popover menu
  210. jnurthen
    21:34
    so do they possibly contain interactive content or are they limited
  211. jnurthen
    21:34
    (ours have interactive content too)... boo
  212. zakim-robot
    21:35
    [cryberg] The only current options are (only one is ever on a particular tile):
    • enter key to open a small popover table with static data
    • enter key to open a popover menu of buttons
    • enter key to expand a collapsed panel
  213. zakim-robot
    21:35
    [cryberg] oh, but then also the tiles are drag and droppable
  214. jkva
    21:35
    Huh. OSX VoiceOver keeps going into "Chrome Busy" when trying to read "μ".
  215. zakim-robot
    21:35
    [cryberg] (headdesk)
  216. jnurthen
    21:36
    drag/drop is easy - just add it to the menu
  217. zakim-robot
    21:38
    [cryberg] Ah! That would be simple, wouldn't it
  218. jnurthen
    21:38
    i would suggest just making a small portion of the tile a real button (for example the tile's header). The rest of the content could then be accessed using a screen reader's virtual buffer. You can still have mopuse handlers on the entire tile
  219. jnurthen
    21:38
    that is what i'm doing anyway....
  220. jnurthen
    21:39
    (or more accurately - asking our developers to do ;) )
  221. jnurthen
    21:40
    In my experience once you have a working keyboard model drag and drop is rarely very difficult to implement for keyboard users
  222. zakim-robot
    21:40
    [cryberg] I'll run that by the designers, thanks! In the event that they don't want tab focus to be anywhere other than surrounding the entire tile, instead of an inner button, do you think it could suffice to have some screen reader only text explaining that there is functionality there?
  223. zakim-robot
    21:43
    [cryberg] I want to do a seminar or something the the designers to explain why what they are asking of us developers is not very accessible...
  224. zakim-robot
    21:46
    [cryberg] I will look into the drag and drop too, but I think you are right, we have a good keyboard model already
  225. jnurthen
    21:49
    you could do. But what do the designers care. You could still draw an outline around the entire button. To a keyboard user and mouse user it would be the same.
  226. zakim-robot
    21:55
    [cryberg] I will look into that, thank you!!