Archive index

A11y Slackers Gitter Channel Archive 15th of August 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Aug 15 07:56

    [morgan] Hi all, I have an issue with this code 

    <a href="#0">   <span class="o-category-item">     <img src="/sg-images/squares/760-B.png" alt="" class="o-category-item__image">     <span class="o-category-item__text">lorem</span>     </span> </a>

    When navigating with Voice Over, it tells the image name and the lorem text. The image here is for decoration only.

    How do I get screen readers to not care about it and just tell the text that follows?

    I believe it is a common pattern, I'm quite a beginner in a11y though

  2. zakim-robot
    @zakim-robot
    Aug 15 08:01
    [erik] What browser are you using? Could it be Chrome? VoiceOver works better in combination with Safari.
  3. [morgan] yes it is chrome
  4. zakim-robot
    @zakim-robot
    Aug 15 08:08

    [iandevlin] Hi, has anyone had issues with focus states on mobile? I have this dilemma at the moment that when a user focusses on an input field, and the keyboard opens, and then they move focus to a button which opens a calendar, the device scrolls down so that the selected day (which is where the focus automatically moves to when the calendar is opened) is visible.
    This would be fine, except that it does the scroll before the keyboard is closed, so that in effect it scrolls down way too far, so when the keyboard closes, there is a lot of empty space, and it is clear the the device didn't really need to scroll down so far.
    Personally, while annoying, I think that this is acceptable, but others do not.

    What do people here think?
    Should the focus move to the close button (first element in the opened calendar and visible as soon as it is opened, therefore no scrolling) instead?

  5. [morgan] I think I just need to take the image out of the anchor tag :p
  6. zakim-robot
    @zakim-robot
    Aug 15 08:32
    [erik] @morgan The way you did this is correct, to my knowledge, it's just chrome being weird. Try listening to it in Safari and it should be fine.
  7. zakim-robot
    @zakim-robot
    Aug 15 08:37
    [morgan] @erik Thank you for your feedback. You are right on Safari it behave as expected
  8. [morgan] do you know whether this is a edge case people using Voice Over with chrome?
  9. [morgan] Actually I figure out I can totally live with the img out of the anchor. Also seen that on google play the focus is on the text rather than on both the img and the text
  10. zakim-robot
    @zakim-robot
    Aug 15 08:46
    [erik] @morgan The combinations I focus on are VO+Safari, JAWS+IE and NVDA+Firefox. Those seem to be the most commonly advised combinations for desktop.
  11. [morgan] Oh very valuable information thank you :)
  12. zakim-robot
    @zakim-robot
    Aug 15 12:02
    [nilsel] Doing QA on some markup, <label> has been used here and there, but it’s not connected to any input elements (might be just to get styling).. is this a major issue?
  13. [nilsel] feels wrong
  14. zakim-robot
    @zakim-robot
    Aug 15 12:11
    [nilsel] Just realized I answered my own question. If it feels wrong it probably is.
  15. [scottohara] heh, yup
  16. [scottohara] labels should either explicitly be tied to a form element via for and id attributes, or they can be used to implicitly be tied to an element by wrapping it: 
    <label>   Name:   <input type="text" name="un"> </label>
  17. [scottohara] if a label is in the markup and not adhering to either of those situations, then it's likely being used incorrectly
  18. zakim-robot
    @zakim-robot
    Aug 15 14:53
    [quidkid] help so our wcag expert tells us to put “one page application” for our one page microsites in the site title but this is confusing for our client as when you search the site, it has Site Name - One page application. Is this really useful for accessibility reasons? And why not instead use a sr only hidden text?
  19. [karlgroves] Fire that “expert”
  20. zakim-robot
    @zakim-robot
    Aug 15 14:58
    [quidkid] lol thanks karl
  21. [karlgroves] Also, “Site Name - …” is a bad construct overall anyway.
  22. [quidkid] it should just be “Site Name” right?

  23. [karlgroves] No, it should uniquely identify the content first

    “Article Title, Site Name - SEO keyword stuffing shit”

  24. [cmegown] if you must have the site name in the title at least put it after, yase?
  25. zakim-robot
    @zakim-robot
    Aug 15 15:04
    [quidkid] it’s a microsite though? I mean i don’t know what to even put as the article title
  26. [karlgroves] It depends, but even on a SPA, I’d put the <h1> content in the title
  27. [karlgroves] As the view changes, so would the title (especially awesome if your SPA has URLs that are bookmarkable
  28. [quidkid] ah okeydokey. well there there is no other links really. navigation is all anchor links and there are tabbed panel widgets
  29. [tink] @quidkid believe you can use the HTML5 History API to update the <title> when a new root loads.
  30. [quidkid] “new root loads” what does that even mean?
  31. [quidkid] like when we reach a different section?
  32. zakim-robot
    @zakim-robot
    Aug 15 15:09
    [quidkid] after scrolling?
  33. [tink] With a Single Page Application you tend to load part of the DOM, and that part is usually identified by a fragment identifier like #view or #page or somesuch.
  34. [quidkid] it’s not a true single page application. I think it’s better termed as a single page microsite. When you load there is is no hash tag but anchor links with the # take you to different sections. so I’m sort of confused at our expert’s recommendation to label it as a single page application.
  35. [tink] Ah. Yes. That does seem a little strange.
  36. [tink] Are the different sections always visible, or do they only get displayed when someone selects the link?
  37. [quidkid] they are always visible
  38. [tink] If the latter, I can see why the confusion.
  39. [tink] Hmm. Ok. That's me beat then :)
  40. [quidkid] lol yeah
  41. [quidkid] so for <title> insert whatever is in h1 - Site name</title>
  42. [quidkid] ^ is that the best option
  43. [tink] Yes, that sounds like a reasonable approach to me.
  44. zakim-robot
    @zakim-robot
    Aug 15 15:15
    [quidkid] thank you all so much!!
  45. zakim-robot
    @zakim-robot
    Aug 15 15:25
    [quidkid] alrighty here’s another recommendation i’m confused about: “Determine if the image provides useful information or is decorative in nature. If decorative, remove the ALT text from the image then hide the image from AT users by applying the ARIA-presentation attribute to the image.”
  46. [quidkid] If the image is decorative, remove the ALT text and hide the image from AT using ARIA-presentation or ARIA-Hidden
  47. [johnbhartley] make the alt text alt="" that will generally work cross-AT (assistive technologies)
  48. [johnbhartley] the aria presentation and hidden is just doubling up to make sure it's never read by a screen reader

  49. [karlgroves] > ARIA-presentation attribute to the image

    fire that “expert”

  50. [karlgroves] WTH is “the aria-presentation”
  51. [quidkid] is that supposed to be role=“presentation”?
  52. [karlgroves] That makes more sense
  53. [tink] What @johnbhartley said. Just use alt="" to remove the image for all screen reders.
  54. [seankeegan] @karlgroves aria-presentation is a new attribute. I use it on myself regularly, as in aria-presentation=“make me look like Brad Pitt.” Does not seem to have any effect, though.
  55. [quidkid] roflol so you guys wouldn’t recommend adding aria-hidden or role=“presentation” on a null alt tag image?
  56. [tink] No, there's absolutely no point.
  57. zakim-robot
    @zakim-robot
    Aug 15 15:30
    [karlgroves] Sorry if my “fire that expert” stuff sounds rude. Its just scary that someone is getting paid to do that sort of work and giving such advice
  58. [clairebones] i personally tend towards adding role="presentation" - it doesn't do any harm afaik, and makes it clear if anyone else looks at the html that the alt tag isn't just accidentally blank
  59. [tink] +1 @KarlGroves.
  60. [karlgroves] alt="" is supported by all browsers, OSes, AT and all versions thereof
  61. [quidkid] and i’m also wondering if he’s giving this as backup for older screenreaders that i dunno maybe they don’t skip over images with null alt text
  62. [quidkid] oh
  63. [quidkid] then nevermind
  64. [quidkid] to be fair, he’s more of an expert than me so at least that gets us a bit more accessible
  65. [quidkid] but yeah i’m feeling the red flags.
  66. [tink] @clairebones it's worth noting that role="presentation" only removes the element semantics (role), it doesn't remove its content.
  67. [tink] So <img src="this.png" alt="This" role="presentation"> will result in a screen reader announcing "This" without identifying it as an image.
  68. [clairebones] yeah i would have both it and a null alt text, not just the role alone
  69. [tink] If the alt is null it isn't a problem, but people looking at the code may not realise this implication.
  70. [clairebones] yeah, i know it's duplication really, but since nobody else that I work with knows really any accessibility at all I prefer having both in to be explicit about what's happening
  71. zakim-robot
    @zakim-robot
    Aug 15 15:36
    [quidkid] alrighty i’ll do both just to at least satisfy the recommendations.
  72. [clairebones] in saying that i'm only relatively new to accessibility stuff myself so always happy to change my practices if people here recommend otherwise :)
  73. [tink] @clairebones it's good to help other developers working on the code :)
  74. [tink] But worth understanding that the two things do not do the same thing. The null alt strips out the image's accessible name, and role="presentation" strips out the image's role.
  75. [tink] If you want duplication, I'd suggest using alt="" and aria-hidden="true" instead, because they're much closer to duplication
  76. [quidkid] what’s the difference between aria-hidden true and role=presentation to the AT?
  77. [tink] If you have <p aria-hidden="true">Something</p> the entire element and its contents will be hidden from screen readers.
  78. [tink] If you have <p role="presentation">Something</p> the content will still be available to screen readers, but no semantic information will be available about it being a paragraph.
  79. [quidkid] i see
  80. [quidkid] ok i’ll do aria-hidden true then plus the null alt tag. I like what @clairebones said about using it to make sure you didn’t leave a null alt tag by accident
  81. [tink] A better example might be <h1 role="presentation">Something</h1> - where you'd lose the information about it being a level 1 heading, and only be left with the contents.
  82. zakim-robot
    @zakim-robot
    Aug 15 15:42
    [tink] The presentation role causes a lot of confusion. In ARIA 1.1 role="none" has been introduced to help make things less confusing. Those two roles do exactly the same thing, they just have different names.
  83. [tink] In time role="presentation" will be phased out - though for now, I don't think role="none" is as well supported by browsers.
  84. [quidkid] @tink thank you for your clear explanations!! now i also understand why email tables have to use role=“presentation”
  85. [tink] Right :)
  86. [cmegown] imo role="none" makes way more sense, especially if it's exactly what presentation was really doing
  87. [tink] Yes, agreed.
  88. zakim-robot
    @zakim-robot
    Aug 15 15:59
    [garcialo] Wow, you learn something new everyday! Thanks, @tink
  89. [tink] YW :)
  90. zakim-robot
    @zakim-robot
    Aug 15 16:22
    [tink] Yes, that'll happen with all screen readers.
  91. zakim-robot
    @zakim-robot
    Aug 15 16:29
    [ted_drake] We are having trouble with reCaptcha 2.0. The audio file is not playing on Safari or iOS Safari. We can get this to work if the desktop Safari gets a fresh install of Flash. Do you know if this is an outstanding issue? Have you seen this before?
  92. zakim-robot
    @zakim-robot
    Aug 15 16:35
    [jhetrick] blank alt should work in all browsers, but as shown by @morgan
  93. [jhetrick] I found that also adding role="presentation" does make Chrome skip the image with VO
  94. [jhetrick] shouldn’t need to, but there it is
  95. [tink] @jhetrick does alt="" on its own not cause the image to be skipped?
  96. zakim-robot
    @zakim-robot
    Aug 15 16:40
    [jhetrick] on Chrome+VO, my quick test showed:
    • src="filename123" alt="brief description" = VO reads “description”
    • src="filename123" alt="" = VO reads “filename123"
    • src="filename123" alt="" role="presentation" = VO skips the image
  97. [tink] Yes it will. I'm curious why you need role="presentation" though.
  98. [tink] Since the alt="" should do that on its own.
  99. [jhetrick] you got me, maybe it’s a Chrome bug. no idea if that’s how it always worked or not.
  100. [tink] You're finding that just alt="" isn't hiding the image from VO in Chrome?
  101. [jhetrick] aye
  102. [tink] That definitely sounds like a bug.
  103. [jhetrick] Chrome Version 60.0.3112.90 (Official Build) (64-bit), macOS 10.12.6
  104. [seankeegan] How does ChromeVox handle just alt="" in the above example?
  105. zakim-robot
    @zakim-robot
    Aug 15 16:47
    [jhetrick] just updated Chrome to the latest (60.0.3112.101), same thing
  106. [marcysutton] I thought that bug had been fixed...but sounds like not. cc @alice
  107. zakim-robot
    @zakim-robot
    Aug 15 16:53
    [tink] Confirmed it's stil there and/or back in Chrome 59.03 at least.
  108. LauraOU
    @LauraOU
    Aug 15 17:10
    @tink The accessibility validators also need to be updated to recognize role="none".
  109. zakim-robot
    @zakim-robot
    Aug 15 17:57
    [quidkid] i was just trying to screenreader test my site but after adding the recommended aria-describedby to the links with the same name (eg. More details) but Voiceover on Mac doesn’t pick up on it at all. Would doing a sr-only hidden text in the a tag be sufficient?
  110. [quidkid] and in that case, I should probably remove aria-describedby altogether then?
  111. zakim-robot
    @zakim-robot
    Aug 15 18:07
    [jiatyan] Hi all, here's an interesting observation.
  112. [jiatyan] which is easier to read?
  113. [jiatyan] Our team unanimously chose white-on-green. But it's the black-on-green that passes WCAG AA.
  114. [tyronem] the one on the right feels like it’s easier to read. After doing this for a while, they’re probably equally poor if we ran them through wave
  115. [tyronem] whoa
  116. [scottohara] it's brighter, but i personally wouldn't say easier
  117. zakim-robot
    @zakim-robot
    Aug 15 18:12
    [jiatyan] We ran it through 2 checkers, just in case one of the algorithms was wonky.
  118. zakim-robot
    @zakim-robot
    Aug 15 18:21
    [jiatyan] We have a similar issue with a yellow/orange colour. Visually, white looks sharper, but doesn't pass 4.5. :(
  119. [ghanek] How old are the members of your team?
    These old man eyes noticed the left (white text on green) first, but when I tried to read them, the black text on green was easier to read.
  120. [jiatyan] 25-60yo
  121. [jiatyan] interesting. What do you mean easier to read?
  122. [tyronem] more legible
  123. [tyronem] easier to discern the text without having to strain or stare as long
  124. zakim-robot
    @zakim-robot
    Aug 15 18:41
    [jiatyan] @alice Given your play with mathematical colours, do you have a guess at why we have this discrepancy?
  125. zakim-robot
    @zakim-robot
    Aug 15 18:49
    [scottohara] agreed. the darker text is easier on the eyes, thus easier to read. the white on green is more immediately noticeable, but it is uncomfortable to read
  126. zakim-robot
    @zakim-robot
    Aug 15 19:10
    [ghanek] easier = the letter forms and word forms are more readily discerned, with less effort.
    With the white text, there is more struggle to discern the letter forms, which makes it harder to see the word forms. That slows down reading speed. (even adjusting for ipsum text).
  127. zakim-robot
    @zakim-robot
    Aug 15 19:40
    [quidkid] i find it easier to read the black text. #twocents
  128. zakim-robot
    @zakim-robot
    Aug 15 19:46
    [quidkid] sticky situation: our client’s digital governance supposedly gave this website a pass already for accessibility so we could launch which is out of the ordinary because they are supposed to take around a week to get back but I know there is NO WAY this is WCAG AA compliant because we don’t even have a transcript with the video. so i’m worried maybe the client is skirting their own internal accessibility police. our own freelance WCAGG AA expert did not mention the missing transcript in the testing report either so there is also no internal incentive to fix that either.
  129. zakim-robot
    @zakim-robot
    Aug 15 20:12
    [jiatyan] @quidkid do they have a report?
  130. [quidkid] @jiatyan they usually give us one but we didn’t receive one
  131. [quidkid] but in the past they have not given us the report but at least told us us the score like 8/10 or whatever
  132. [jiatyan] Video might not need a transcript/caption if the video is ancillary.
  133. [quidkid] what do you mean if video is ancillary?
  134. [jiatyan] If there is already text on the page and the video is just more of the same content presented in another medium.
  135. [quidkid] i see! I didn’t think of that. well it’s a commercial
  136. [jiatyan] SC 1.2.2 ... except when the media is a media alternative for text.
  137. [quidkid] it’s not exact but basically everything is promotion so i suppose it falls under that?
  138. [jiatyan] is the commercial the key message?
  139. zakim-robot
    @zakim-robot
    Aug 15 20:18
    [quidkid] i guess the key message is in the headlines basically being helpful
  140. [quidkid] which is described a bit in the video but also in the rest of the site
  141. [jiatyan] lol. Then that depends on your client's success metrics, since there is no legal pressure to make it accessible. Would the client consider the project a success if they reach 70% of their target audience, or do they want 100%?
  142. [quidkid] no idea.
  143. [jiatyan] Does the client have a legal obligation to be accessible?
  144. [quidkid] yes
  145. [quidkid] they have to be WCAG AA compliant
  146. [jiatyan] legally? for a commercial?
  147. [quidkid] it’s a healthcare company so they take government funds so all their digital assets have to be accessible
  148. [jiatyan] Yes, to be able to serve their users, to achieve the tasks the users need to do. But to entice users to sign up, I don't know.
  149. zakim-robot
    @zakim-robot
    Aug 15 20:24
    [jiatyan] If their digital governance is signing off non-captioned instructional video on how to use their product, then I'd raise a point.
  150. [quidkid] good point lol well then i’ll just not push it. unless someone else tells me otherwise. thank you so much!! very insightful.
  151. zakim-robot
    @zakim-robot
    Aug 15 20:29
    [ghanek] Also possible that the PM and other execs at higher salaries have negotiated an exception to permit the more timely site rollout, and do have a timeline in place for implementing the transcript.
  152. zakim-robot
    @zakim-robot
    Aug 15 21:29
    [quidkid] ^no, that’s definitely not the case. But i do appreciate that perspective as it absolves me of guilt. You know @ghanek I’ll roll with that to keep my my stress levels in check
  153. zakim-robot
    @zakim-robot
    Aug 15 22:00
    [quidkid] has anyone done IAAP certification here?
  154. [tyronem] yes
  155. [quidkid] @tyronem i’ll dm you!
  156. zakim-robot
    @zakim-robot
    Aug 15 22:19
    [ugi] yes, CPACC