Archive index

A11y Slackers Gitter Channel Archive 22nd of November 2016

What fresh hell is THIS now? - Patrick Lauke
  1. Peter Krautzberger
    @pkra
    Nov 22 08:59
    Morning slackers.
  2. Peter Krautzberger
    @pkra
    Nov 22 11:08
    @stevefaulkner I was looking at https://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html again and was wondering if there's been any effort to standardize a method for visually hiding content while exposing it for non-visual users. With CSS hacks I keep running into edge cases with browsers and/or AT having issues.
  3. oh nevermind. https://discourse.wicg.io/t/a-way-to-hide-text-visually-but-not-from-screen-readers/510
  4. Muhannad
    @Muhnad_a_twitter
    Nov 22 14:05
    Good morning guys :smile:

  5. I have question is the form element should add role="form" OR not?
    because when I tested it without role=form the SR doesn't say form I tested it in NVDA and ChromeVox extention and both the same result.

    but when I add the role=form or search however the SR say From or Search in final.

    and when I make some searching I found some links doesn't recommends add role=form to form tag.

  6. https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/#tablex
  7. http://a11yproject.com/posts/getting-started-aria/
  8. Muhannad
    @Muhnad_a_twitter
    Nov 22 14:11
    a11yproject: For example, <form role="form"> is redundant.
  9. if I transgress the chat rules please tell me.
    thanks.
  10. zakim-robot
    @zakim-robot
    Nov 22 14:34
    [karlgroves] Hi. No need to add the explicit role
  11. Muhannad
    @Muhnad_a_twitter
    Nov 22 16:04
    @zakim-robot even if the SR doesn't read it?
  12. zakim-robot
    @zakim-robot
    Nov 22 16:10
    [karlgroves] Correct
  13. Muhannad
    @Muhnad_a_twitter
    Nov 22 16:11
    @zakim-robot Thanks :gift_heart:
  14. zakim-robot
    @zakim-robot
    Nov 22 16:11
    [conley] Agreed, you should hear the SR automatically switch form browse mode to forms mode
  15. James Nurthen
    @jnurthen
    Nov 22 18:07
    @conley - with <form> or role="form"? I've never had that happen. I get forms mode when I land in "widget" fields (with a few exceptions) either inside or outside a form
  16. Mallory
    @StommePoes
    Nov 22 18:50
    most SRs make a beep or click when they go into forms mode
  17. James Nurthen
    @jnurthen
    Nov 22 18:50
    yeah - but that doesn't happen when you enter a <form> or region with role=form - it happens on a widget level right?
  18. Mallory
    @StommePoes
    Nov 22 18:50
    this because so-many years ago they went from users needing to manually doing this, to heuristically guesstimating that "this control needs forms mode" and switching into it automatically (unless you turn it off).
  19. with NVDA I hear it every time I even manually switch modes
  20. Orca too
  21. zakim-robot
    @zakim-robot
    Nov 22 18:51
    [cameron.fawcett] I hear it every time for NVDA as well
  22. Mallory
    @StommePoes
    Nov 22 18:51
    and yeah an input not in a form would do it because I would go into forms mode
  23. not whether there's per se a form, but a form control.
  24. I also hear it on things with role=application
  25. James Nurthen
    @jnurthen
    Nov 22 18:52
    yeah - application is a widget so that is right
  26. Mallory
    @StommePoes
    Nov 22 18:54
    I wonder if role=form would do that tho
  27. even tho forms should have that role natively
  28. James Nurthen
    @jnurthen
    Nov 22 18:54
    i really dont think it does
  29. i'm pretty certain it does very little :)
  30. Mallory
    @StommePoes
    Nov 22 18:55
    if it did what I expect it to as a developer, I could have a div filled with divvy spanny aria-ised up the wazzoo fake form and the form role would, for example, let me use F to jump to it
  31. which isn't the same as aria changing behaviour, because it's the sr's behaviour, but it would be informing the sr "this div is actually a form"
  32. I dunno if it actually does that, but I would expect it to until tested.
  33. James Nurthen
    @jnurthen
    Nov 22 18:56
    F goes to form controls not the form element right? Ie anything that appears in INS+F5 list
  34. Mallory
    @StommePoes
    Nov 22 18:56
    no e
  35. e wouold go to an edit box
  36. James Nurthen
    @jnurthen
    Nov 22 18:57
    E goes to edit fields only
  37. Mallory
    @StommePoes
    Nov 22 18:57
    x to a checkbox, etc
  38. f should bring me to the actual begin of the form
  39. whichever control was first
  40. James Nurthen
    @jnurthen
    Nov 22 18:57
    testing now
  41. Mallory
    @StommePoes
    Nov 22 18:57
    if you have a URL I can test Orca quick
  42. all my forms pages are only forms
  43. James Nurthen
    @jnurthen
    Nov 22 18:59
    just testing on internal pages
  44. F goes to every input, checkbox, radio button etc. on the page
  45. it does not go to the first form field
  46. i think the only way to go to a "form" is via landmarks
  47. Mallory
    @StommePoes
    Nov 22 19:02
    ah, orca doesn't go to forms, just has a modified way of using tab with the orca key and it does the same: any control in a form
  48. James Nurthen
    @jnurthen
    Nov 22 19:03
    so probably the conclusion for <form> vs role=form is - it really doesn't matter cause they don't really do very much :)
  49. Mallory
    @StommePoes
    Nov 22 19:03
    in today's world of random fields all over the place who are not in actual form tags, this makes practical sense
  50. ooh I forgot regexes actually do something here instead of typing
  51. Muhannad said though he actually got some sort of names when he manually added the role.
  52. James Nurthen
    @jnurthen
    Nov 22 19:07
    yeah - i have a feeling that <form> actually doesn't always get mapped - and no accessible always gets created for it. Adding the role makes the accessbile get created
  53. ... but that is obviously implementation dependent.... it is one of those things that I would not be losing sleep over
  54. zakim-robot
    @zakim-robot
    Nov 22 19:09
    [conley] Actually, I take back my agreement that role="form" is redundant. Add a role creates a region which in turn is discoverable via R hotkey.
  55. [conley] As per W3 https://www.w3.org/TR/wai-aria/roles#form
  56. James Nurthen
    @jnurthen
    Nov 22 19:12
    <form> should do that too according to https://www.w3.org/TR/html-aria/#docconformance but i question whether it really does. I also question the utility of adding more landmarks. On most pages the form is probably already contained in another logical landmark structure
  57. I don't think developers should be adding role=form to all form elements just to get a region created. IMO that would normally decrease usability of landmarks as forms often don't tie 1:1 with the logical strcuture
  58. zakim-robot
    @zakim-robot
    Nov 22 19:15
    [conley] key word here is should ;)
  59. James Nurthen
    @jnurthen
    Nov 22 19:15
    yep
  60. zakim-robot
    @zakim-robot
    Nov 22 19:15
    [conley] imo its about providing as much context as possble
  61. James Nurthen
    @jnurthen
    Nov 22 19:15
    disagree. About providing as much context as is useful
  62. if we provide everything that is possible it becomes useless
  63. zakim-robot
    @zakim-robot
    Nov 22 19:18
    [conley] Given that not all SR's coupled with respective browsers behave in a similar fashion, I'll agree to disagree
  64. James Nurthen
    @jnurthen
    Nov 22 19:18
    fair enough - I can agree to disagree :)
  65. zakim-robot
    @zakim-robot
    Nov 22 21:02
    [quidkid] right now i’m doing screenreader testing and i realize that NVDA skips over daggers so the user would miss those footnotes. I googled about it and realized all the screenreaders treat symbols differently so its not like I could use a hidden span saying say dagger because another screenreader might end up saying dagger dagger. what do i do?
  66. James Nurthen
    @jnurthen
    Nov 22 21:03
    role="img" aria-label="footnote"?
  67. zakim-robot
    @zakim-robot
    Nov 22 21:05
    [quidkid] do i need to do that for all the footnotes or just the ones with the dagger? NVDA reads the asterisk
  68. [quidkid] oh but i guess other screenreaders might not
  69. James Nurthen
    @jnurthen
    Nov 22 21:06
    i think asterisk is pretty universally read
  70. zakim-robot
    @zakim-robot
    Nov 22 21:06
    [quidkid] okeydokey so i’ll just do it for the daggers?
  71. [quidkid] or should i still aria label the asterisk as a footnote?
  72. James Nurthen
    @jnurthen
    Nov 22 21:06
    i also don't think it is the screen reader that does this but the speech synthesizer - so even if it works in 1 voice it may not work in another
  73. zakim-robot
    @zakim-robot
    Nov 22 21:07
    [quidkid] dang -__-"
  74. James Nurthen
    @jnurthen
    Nov 22 21:08
    but <span role="img" aria-label="footnote">&#8224;</span> should be good i think
  75. .. but test!
  76. zakim-robot
    @zakim-robot
    Nov 22 21:09
    [quidkid] okeydokey thank you so much @jnurthen !
  77. zakim-robot
    @zakim-robot
    Nov 22 21:20
    [quidkid] quick question so when adding a span hidden (PDF) to indicate a link is a PDF, do i put it within or after the a tag
  78. zakim-robot
    @zakim-robot
    Nov 22 21:34
    [michiel] Within, but I wouldn’t hide it :)
  79. [michiel] Still valuable information, also for sighted users.
  80. [michiel] <a href="peedeeef.pdf">Government Document (PDF, 300 MB)</a> or something like that :)
  81. zakim-robot
    @zakim-robot
    Nov 22 21:40
    [michiel] Or even better: <a href="thingy.pdf" download>Government Document (PDF, 192 KB)</a>
  82. [michiel] Or even better: <a href="thingy.pdf" download="A filename that doesn’t suck.pdf">Government Document (PDF, 192 KB)</a>
  83. [michiel] Or even better: <a href="thingy.html">Government Document as a webpage</a> :P
  84. Mallory
    @StommePoes
    Nov 22 22:16
    Something As A Service, Government Document As A Webpage...
  85. I recall way back in the days where not everyone read out asterisks, and this was where people were using them to denote required fields. Upping the verbosity fixed that, but a user would have to know to do that. Not sure who that was, and this was when I was starting with screen readers. JAWS did always read them out, but it's naturally verbose.
  86. zakim-robot
    @zakim-robot
    Nov 22 22:33
    [quidkid] @michiel thank you so much! is the file size necessary? also, would including download attribute prevent the file from being opened in the in browser pdf reader in a new tab/
  87. zakim-robot
    @zakim-robot
    Nov 22 22:39
    [michiel] quidkid: that’s a good question. I’m not quite sure how browsers handle that, but my guess would be that it doesn’t open them in the browsers but downloads them. That is what should happen according to the spec anyway.
  88. [quidkid] isn’t it better to open in a new tab though? than to force download?
  89. [michiel] As for file size, it makes sense to include. Especially for larger files. Users might have a data bundle or something.
  90. [michiel] Depends on the file I suppose.
  91. [michiel] I don’t have any data on how people prefer to handle PDFs.
  92. [quidkid] yeah personally i think it’s better to avoid download because that requires the user to store it. idk.
  93. [michiel] We wouldn’t have this problem if people didn’t use PDFs in the first place :P
  94. [michiel] But yeah, maybe force download isn’t the right way to go for PDFs.
  95. [michiel] Would be interested to know what other people here think.
  96. zakim-robot
    @zakim-robot
    Nov 22 22:44
    [michiel] StommePoes: you always have a clear-cut opinion about these sorta things.
  97. zakim-robot
    @zakim-robot
    Nov 22 22:53
    [garcialo] you could let the user decide instead of making the decision for them
  98. [michiel] garcialo making the decision for them
  99. zakim-robot
    @zakim-robot
    Nov 22 22:58
    [michiel] That’s very kind of you.
  100. [garcialo] I’ve decided that they should decide.
  101. [michiel] When are you coming to Europe BTW?
  102. [garcialo] tomorrow
  103. [michiel] Cool
  104. [michiel] Where abouts?
  105. [garcialo] San Mateo
  106. [garcialo] wait…is that in Europe?
  107. [garcialo] oh…sorry, that’s in California
  108. [michiel] I was thinking Philippines.
  109. [michiel] But sure, neither of those are in Europe.
  110. [michiel] You still owe me a drink…
  111. [michiel] I’ll just remember for four years and visit CSUN in 2020.
  112. [garcialo] sounds good
  113. [michiel] Do a little impersonation.
  114. [garcialo] who knows…in a year or so, I might end up living in Europe for a few months
  115. [michiel] How come?
  116. [garcialo] for fun
  117. [michiel] So, Amsterdam?
  118. [garcialo] probably London or Cardiff or something
  119. zakim-robot
    @zakim-robot
    Nov 22 23:03
    [michiel] Also nice.
  120. [michiel] You’re free to take the couch at my place ;)
  121. zakim-robot
    @zakim-robot
    Nov 22 23:09
    [garcialo] sweet!
  122. [garcialo] will you also cook for me?
  123. zakim-robot
    @zakim-robot
    Nov 22 23:15
    [quidkid] is ARIA mandatory for wcag 2.0 compliance
  124. [garcialo] no
  125. [garcialo] You could be WCAG 2.0 with plain HTML
  126. zakim-robot
    @zakim-robot
    Nov 22 23:20
    [garcialo] There is also Javascripty stuff you can do without needing to use ARIA…wouldn’t be able to tell you exactly what that would be without checking though
  127. [quidkid] @garcialo thank you so much for responding! so i’ve been tasked with getting this website remediated. and finally i got the tab working on the accordion Q&A section working very nicely… except i dunno whether i need to put aria tags on this stuff
  128. [michiel] quidkid: you might be interested in this: http://w3c.github.io/aria-practices/
  129. [garcialo] ah, well for an accoridion, I’m pretty sure there is ARIA you’ll need to add
  130. [michiel] Or to be more precise: http://w3c.github.io/aria-practices/#accordion
  131. [michiel] You can make it with mostly native HTML, you’ll need aria-expanded and aria-controls though.
  132. [quidkid] so it is mandatory for wcag 2.0
  133. zakim-robot
    @zakim-robot
    Nov 22 23:25
    [michiel] 3.2 for keyboard support
  134. [michiel] 2.1*
  135. [quidkid] i dunno why i say 2.0 i mean AA
  136. [quidkid] is that AA or AAA
  137. [michiel] But 2.1 isn’t necessarily ARIA
  138. [michiel] I would say 4.1.2
  139. [michiel] You can’t communicate the state of your accordion without ARIA.
  140. [garcialo] @quidkid ARIA isn’t required in all cases to meet WCAG 2.0 AA
  141. [garcialo] for instance, if you weren’t using an accordion to display that information, you could have it all as plain text…as long as it’s all marked up properly, it could be WCAG 2.0 AA
  142. [michiel] <h1> Garcialo is lovely</h1> is perfectly valid in most cases.
  143. [garcialo] but since you’re using a custom component, you’re going to need ARIA to fill in some of the gaps
  144. [quidkid] i feel like right now even without aria, and it’s an accordion, screenreader wise, i think it’s still understandable. For example, when you first tab, you are only hitting the questions which the screenreader announces as clickable. naturally you would hit enter on the question you’d want answers to since it says it’s clickable. and then you are able to see the answer.
  145. [quidkid] if anything, i think aria tags might be unnecessary extra fluff the screenreader has to say before they get to the information.
  146. [michiel] I don’t think that’s true. How does a user know whether a panel is visible or not?
  147. zakim-robot
    @zakim-robot
    Nov 22 23:31
    [quidkid] i almost think it doesn’t matter whether they know it’s an accordion or a panel style or not. Because it announces that each of these questions are clickable.
  148. [michiel] Also, some screen readers, such as JAWS, support aria-controls to move from the accordion title to the controlled element (in this case the accordion panel).
  149. [quidkid] perhaps what is different in my accordion is that it still remains open before it goes to the next question
  150. [michiel] So in essence it’s a bunch of details/summaries?
  151. [michiel] Also, please have a look at http://w3c.github.io/aria-practices/#accordion
  152. [michiel] It has some solid advice on what users expect.
  153. [karlgroves] steps away slowly from the inevitable discussion on accordions & tab panels
  154. [michiel] taps Karl on his shoulder and starts playing his accordion.
  155. [quidkid] I guess the accordion is currently following that. it’s collapsible but if something else is expanded the previous closes. only one can be expanded at once..
  156. zakim-robot
    @zakim-robot
    Nov 22 23:36
    [quidkid] it expands on enter, not space. so i’ll need to add space
  157. [michiel] So this isn’t true: 23:31:50 <quidkid> perhaps what is different in my accordion is that it still remains open before it goes to the next question
  158. [michiel] Or am I misunderstanding?
  159. [quidkid] sort of..
  160. [quidkid] it remains open for as long as you have not opened another question
  161. [quidkid] so you could go back shift-tab
  162. [quidkid] and go up the answer for that question
  163. [quidkid] so technically it is true XD
  164. [michiel] Aha :)
  165. [quidkid] i think that fits the guidelines as collapsible but also fulfills the When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
  166. [quidkid] i think anyways.
  167. zakim-robot
    @zakim-robot
    Nov 22 23:43
    [michiel] I still think you should add aria-expanded.
  168. [michiel] If you think that it might be too verbose, ask some people that actually use it :)
  169. [quidkid] okeydokey i’ll add the aria-expanded but what about the region stuff?
  170. [michiel] They might not be awake at the moment, but we have MarcoZehe and ljwatson in the room.
  171. [michiel] What do you mean by region stuff?
  172. [quidkid] aria-role: ‘region”, labeling r1.. im not quite sure i understand which is probably why im unfairly biased towards not implementing it
  173. [quidkid] labeling subsections within the accordion.. using aria-controls
  174. zakim-robot
    @zakim-robot
    Nov 22 23:49
    [michiel] I’m not seeing that?
  175. [michiel] An accordion could be as simple as: <h2><button aria-controls="panel-1" aria-expanded="false">Item 1</button></h2><div id="panel-1" hidden><p>Some content</p></div>
  176. zakim-robot
    @zakim-robot
    Nov 22 23:54
    [quidkid] i was following off some tutorial video on ssbartgroup but so i guess do i need to do it for every panel, give a unique aria-controls? and div id?
  177. [michiel] Yes.
  178. [quidkid] i am assuming the phrase “panel-1” is arbitrary since they were using “r1” or is there some sort of standard for that?
  179. [quidkid] now does it restart or do I have to make sure for any other section to never use “panel-#” or “r#” ever again?
  180. [michiel] You can call it michiel-is-a-jerk-1 if you want ;)
  181. [michiel] The idea behind the id attribute is that you have unique id’s.
  182. [quidkid] lol but that gets read out to the screenreader yes?
  183. [michiel] So you can’t repeat panel-1 multiple times.
  184. [michiel] You could do panel-1, panel-2,…panel-9001
  185. [michiel] The ID does not get read out.
  186. [michiel] What gets read out is the label text of the button.
  187. [michiel] Which in my example is “Item 1”
  188. [michiel] If a user were to land on that they’d hear something like “Item 1, button, collapsed”
  189. [quidkid] so the aria controls doesn’t get read out?
  190. [michiel] So they know it’s a button—so that they can press enter/space to activate—, they know it’s collapsed and thus that they can expand it.
  191. [quidkid] right now those headings are divs. i used to make it a button but i didn’t want it to open on tab
  192. zakim-robot
    @zakim-robot
    Nov 22 23:59
    [michiel] If aria-controls is implemented and the screen reader supports it, it might add something to the end like “Item 1, button, collapsed. Press alt+m to move to controlled element.”