Archive index

A11y Slackers Gitter Channel Archive 18th of August 2015

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    01:02
    [dylanb, a11y] @cameroncundiff: interesting for the purposes of something like React
  2. zakim-robot
    01:02
    [dylanb, a11y] I have thought about it in that specific context
  3. zakim-robot
    01:03
    [dylanb, a11y] would require abstracting the dom inspection portions from the rule logic
  4. LjWatson
    09:21
    Now I've figured out how to get Chatzilla (IRC extension for Firefox) to use custom sound notifications, I'm thinking of pulling a blog post of accessibility tips for Chatzilla users. If anyone else has any tips to share, let me know?
  5. StommePoes
    09:22
    post that on teh twitters as well, might be more chatzilla users there too
  6. LjWatson
    09:24
    Good idea @StommePoes - done.
  7. zakim-robot
    13:10
    [dylanb, a11y] @karlgroves: http://httpd.apache.org/docs/2.0/misc/custom_errordocs.html you can do it with Apache
  8. garcialo
    13:24
    Ah, thanks @dylanb I was looking for just that, but didn't find it. =)
  9. zakim-robot
    13:25
    [dylanb, a11y] @garcialo: I deleted the post because it is actually not the same as actually translating the HTTP message status, this is the body of the response
  10. garcialo
    13:26
    Yeah
  11. garcialo
    13:26
    Gitter kept it. I imagine, things deleted/edited on Gitter probably don't get deleted/edited on Slack as well. =p
  12. zakim-robot
    13:33
    [dylanb, a11y] yeah, anyway, in theory, you can translate that message because it is supposed to be ignored by the client https://tools.ietf.org/html/rfc7230#section-3.1.2 in practice, you might find some brain-dead clients that actually evaluate it. At any rate, it is not supposed to be shown to the user (that is what the body is for), so there is no reason to translate it
  13. stevefaulkner
    13:48

    A11ySlackers chat log 17th August 2015 w3c.github.io/a11ySlackers/archives/2015/08/2015-08-17.html

  14. powrsurg
    14:07
    I was checking out https://developer.yahoo.com/blogs/ydn/techniques-high-contrast-friendly-icons-153038779.html for changing our background image icons to use content to make them appear in high contrast mode
  15. powrsurg
    14:08
    we were using a css sprite like in the example
  16. powrsurg
    14:08
    before we had been using background position to move it around. I'm not following the logic of the negative margins in how they produce the desired result
  17. powrsurg
    14:09
    sadly the "here's the example" page is no longer active
  18. powrsurg
    14:27
    nm, had to end up with positioning and left/top to do it
  19. jonathantneal
    14:45
    I am creating a <figure> where the image (not the <figcaption>) has an attribution. Is there a markup pattern for this?
  20. LjWatson
    14:46
    @jonathantneal can you explain?
  21. LjWatson
    14:46
    Ordinarily the <figcaption> provides the attribution for whatever content is in the <figure>.
  22. LjWatson
    14:47
    @jonathantneal can you explain more?
  23. jonathantneal
    14:48
    @LjWatson Sure. We have a photo of a park. The photo is credited to Jane Smith. The photo has the caption "Children playing in the newly installed park.”
  24. LjWatson
    14:49
    Should think that something like <figure><img src="park.jpg" alt="Children playing in the park"><figcaption>Photo credit Jane Smith</figcaption></figure> might do it.
  25. jonathantneal
    14:49

    <image of the park>

    <citation for the image>

    <caption for the image>

    I have used <figcaption> for a citation or for a caption with a citation for the caption, but never a citation for the image separate from the caption.

  26. LjWatson
    14:50
    Unless the "Children playing in the park" bit also serves as the image's title - and needs to be visible?
  27. jonathantneal
    14:50
    If I follow that pattern, I’m afraid few outside screen readers will see the caption.
  28. jonathantneal
    14:50
    Exactly.
  29. LjWatson
    14:51
    In which case you could just make the accreditation part of the <figure> content along with the image, and use <figcaption> as the visible title/caption for the image.
  30. LjWatson
    14:51
    It's a good question though - not sure there is a common design pattern for this situation though.
  31. jonathantneal
    14:51
    The first thing that came to mind was: <figure><span><img/><cite/></span><figcaption/></figure> but I didn’t trust it.
  32. jonathantneal
    14:53
    The second thing that came to mind was fiception, where that <span> would be another <figure>. I would think I’m the millionth person to need to cite an image and provide it a caption.
  33. jonathantneal
    14:53
    And I was kind of embarrassed to not know how I would mark it up appropriately.
  34. dylanb
    14:55
    @LjWatson is figcaption supported by all screen readers? I have had problems with it.
  35. LjWatson
    14:57
    @jonathantneal using <cite> makes sense, I hadn't thought of that. Something like <figure><img><cite>Jane Smith></cite><figcaption>Children playing...</figcaption></figure>.
  36. LjWatson
    14:57
    @dylanb no, I don't think it is.
  37. LjWatson
    14:58
    Jaws supports it, but not NVDA. Not sure about VO - haven't checked in a while.
  38. zakim-robot
    14:59
    [dylanb, a11y] @ljwatson: VO does not support it - which version of JAWS does?
  39. LjWatson
    14:59
    Hmm. Not entirely sure. Certainly in 16, possibly as far back as 14.
  40. zakim-robot
    15:00
    [dylanb, a11y] I am currently in Windows 10 limbo so I cannot test JAWS right now :simple_smile:
  41. jonathantneal
    15:00
    Are there roles or aria attributes that would make a <figure> more accessible for NVDA?
  42. zakim-robot
    15:00
    [dylanb, a11y] aria-labelledby
  43. LjWatson
    15:00
    It announces <figure> as "Group start/Group end", and uses the <figcaption> as th eacc name for the <figure> - which is actually something I think needs looking at in the mappings.
  44. zakim-robot
    15:01
    [dylanb, a11y] pointing to the figcaption
  45. jonathantneal
    15:03
    dylanb, would the aria-labeledby be on the <figure> or the <span> ( that contains <img/><cite/> )?
  46. dylanb
    15:05
    on the img 
    <figure>     <img src="..." aria-labelledby="my-caption" />     <figcaption id="my-caption">Caption</figcaption> </figure>
  47. dylanb
    15:05
    @LjWatson are you able to see that source code?
  48. zakim-robot
    15:06
    [heidi valles, a11y] would it prevent the alt text from being read?
  49. jonathantneal
    15:06
    @dylanb I am able to see that source code formatted beautifully. :)
  50. zakim-robot
    15:06
    [heidi valles, a11y] sorry, that's describedby
  51. dylanb
    15:06
    yeah, I'm just wondering whether the formatting stuff I added had any negative effect for @LjWatson
  52. dylanb
    15:07
    btw - you can use GitHub markdown formatting in your messages to achieve what I just did
  53. dylanb
    15:08
    This message was deleted
  54. jonathantneal
    15:08
    @dylanb now, with the citation that would become: 
    <figure>     <span>         <img src="path/to/image" aria-labeledby="caption-x">         <cite>Photo by...</cite>     </span>     <figcaption id="caption-x">Children playing...</figcaption> </figure>
  55. jonathantneal
    15:10
    Or should that <span> be something else (like <p>, <blockquote>) in order for the citation to be appropriately linked?
  56. zakim-robot
    15:10
    [dylanb, a11y] @heidi: it will override the alt but that is ok
  57. zakim-robot
    15:11
    [heidi valles, a11y] but the alt shouldn't be "" as that would have be ignored by AT entirely?
  58. jonathantneal
    15:11
    @dylanb also, is it better to use a fallback alt="Children playing.." or a presentational alt=""?
  59. zakim-robot
    15:11
    [heidi valles, a11y] *that would be
  60. dylanb
    15:13
    @jonathantneal Adding a <span> around the <img> and <cite> does not add any semantic relationship. You would probably want to add an aria-describedby to point to the <cite> but you would have to test that to see whether it works in all screen readers. Technically the <figure> should relate all these things together but there is not enough support for that right now
  61. zakim-robot
    15:16
    [dylanb, a11y] @heidi: The name calculation algorithm specifies aria-labelledby taking precedence over aria-label, followed by alt, so having no alt or an empty alt would be fine
  62. zakim-robot
    15:16
    [dylanb, a11y] http://www.w3.org/TR/wai-aria/roles#textalternativecomputation
  63. zakim-robot
    15:18
    [heidi valles, a11y] that makes sense - thanks @dylanb
  64. jonathantneal
    15:21
    @dylanb awesome, so aria-labelledby for the <figcaption> and then aria-describedby for the <cite>?
  65. jonathantneal
    15:22
    ^ that seems a bit confusing at first pass, since those attribute names are fairly similar.
  66. zakim-robot
    15:25
    [dylanb, a11y] just make sure to spell aria-labelledby with two ls
  67. zakim-robot
    15:25
    [dylanb, a11y] :simple_smile:
  68. jonathantneal
    15:33
    All together now, is this it: 
    <figure>     <p>         <img src="path/to/image” alt=“” aria-labelledby="caption-x-citation" aria-describedby="caption-x-caption">         <cite id="caption-x-citation">Photo by...</cite>     </p>     <figcaption id="caption-x-caption">Children playing...</figcaption> </figure>
  69. dylanb
    15:34
    I think you should switch the pointers 
    <figure id="caption-x">     <p>         <img src="path/to/image" aria-labelledby="caption-x-caption" aria-describedby="caption-x-citation">         <cite id="caption-x-citation">Photo by...</cite>     </p>     <figcaption id="caption-x-caption">Children playing...</figcaption> </figure>
  70. LjWatson
    15:35
    @dylanb Sorry, was distracted briefly. Code was readable, although came through on spearate lines.
  71. dylanb
    15:35
    the reason is that the caption is the label and the citation is additional information (describedby)
  72. dylanb
    15:35
    @LjWatson thanks - nice to know that it works, somehow, I think separate lines is probably better - WDYT?
  73. LjWatson
    15:36
    @dylanb yes, easier to read that way.
  74. jonathantneal
    15:38
    @dylanb excellent, and the <p> and <cite> and empty alt=“” are all good?
  75. dylanb
    15:40
    yep
  76. zakim-robot
    15:41

    [Andrea Skeries, a11y] The web design trend now seems to be having large video that plays automatically with text over the top (Example: http://www.palmettohealth.org/).

    Do you think this falls into the WCAG 2.2.2 in that we should provide a way for users to stop/pause the video so they can read the content over top of it without distraction? It doesn't seem to exactly fit with this guideline but its very similar.

  77. zakim-robot
    15:42
    [heidi valles, a11y] @artisticabode: i vote yes
  78. garcialo
    15:45
    Andrea, I think I recall https://www.paypal.com/home being used as an example of how to do that well.
  79. garcialo
    15:45
    I think it was a blog post or brought up in a talk...I don't recall.
  80. zakim-robot
    15:47
    [Andrea Skeries, a11y] Thanks for the Paypal example. Looks like they just stop the video after a few seconds and it has minimal movement which I like.
  81. zakim-robot
    15:48
    [Andrea Skeries, a11y] I need solid proof to convince my colleagues this is a "rule". Would 2.2.2 be the best example? They are going to question me since I have yet to see a site that does have a pause button on these and they do not want to stop the video like the Paypal example. I don't think it would look that bad to have a small pause button in the corner just to help some people out but I may get push back.
  82. garcialo
    15:50
    Ah, gotcha.
  83. dylanb
    15:52

    @jonathantneal you could make it slightly more usable by adding some aria-hidden attributes 

            <figure id="caption-x">             <p>                 <img src="path/to/image" aria-labelledby="caption-x-caption" aria-describedby="caption-x-citation">                 <cite id="caption-x-citation" aria-hidden="true">Photo by...</cite>             </p>             <figcaption id="caption-x-caption" aria-hidden="true">Children playing...</figcaption>         </figure>

    I have tested support for this in VO, not sure about JAWS and NVDA at this point

  84. garcialo
    15:54
    Yeah, looks like 2.2.2 is your best bet.
  85. zakim-robot
    15:54
    [heidi valles, a11y] @artisticabode: Yes, it would fail 2.2.2 "For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential"
  86. zakim-robot
    15:55
    [Andrea Skeries, a11y] Thanks @garcialo and @heidi. I'm going to run with it.
  87. zakim-robot
    15:56
    [heidi valles, a11y] @garcialo: paypal example is a cool solution. thanks for sharing
  88. jonathantneal
    15:56
    @dylanb Note that I do not want to visually hide the citation.
  89. dylanb
    15:57
    yep, aria-hidden only hides things from the AT
  90. dylanb
    15:58
    it prevents the redundant announcement of the caption and citation, which would otherwise be encountered after the image is encountered
  91. LjWatson
    16:00
    @dylanb aria-hidden="true" on the <cite> is preventing it from being read as the description for the image.
  92. dylanb
    16:01
    in which AT?
  93. dylanb
    16:02
    There is an issue for this, not sure how widely it is supported yet http://www.w3.org/html/wg/wiki/Correct_Hidden_Attribute_Section_v2
  94. jonathantneal
    16:05
    @dylanb, if I do not add aria-hidden to those elements, they will be read twice in which AT? @LjWatson, if I add aria-hidden to those elements, they will not be read at all in which AT?
  95. LjWatson
    16:06
    @dylanb in Firefox.
  96. LjWatson
    16:06
    FF correctly removes anything with aria-hidden="true" from the acc tree.
  97. dylanb
    16:06
    @jonathantneal they will be read twice in every AT but the first time they will be associated with the image and the second time not, btw - this is not too bad
  98. dylanb
    16:06
    I was just trying to omptimize
  99. LjWatson
    16:06
    AFAIK that change request for aria-hidden was never implemented.
  100. dylanb
    16:06
    optimize
  101. dylanb
    16:07
    according to Rich Schwerdfeger's comment it was already part of the spec
  102. jonathantneal
    16:07
    Any way to have it read WITHOUT being read twice?
  103. LjWatson
    16:08
    @jonathantneal I wouldn't get too caught up in which browsers do what... The aria-hidden attribute is supposed to remove content from the accessibility tree for all ATs.
  104. jonathantneal
    16:08
    And it should prevent it from being read by aria-describedby or aria-labelledby, @LjWatson ?
  105. LjWatson
    16:08
    If you remove aria-hidden="true" from the <cite> element, nothing is repeated unless requested.
  106. LjWatson
    16:08
    @jonathantneal exactly, yes.
  107. jonathantneal
    16:09
    Now I’m confused. Which is the “right” way to do it? Adding or omitting aria-hidden?
  108. LjWatson
    16:10
    There's a blog post somewhere in all of this :)
  109. LjWatson
    16:10
    @jonathantneal you need to remove aria-hidden from the <cite> element.
  110. jonathantneal
    16:11
    and the <figcaption>?
  111. LjWatson
    16:11
    If you leave it there, then people using FF + a screen reader won't be able to access the citation information at all.
  112. dylanb
    16:11
    @jonathantneal what @LjWatson says is true currently because of AT limitations (apparently) - sorry for the confusion
  113. LjWatson
    16:11
    Possibly true in other browsers too, but I don't have them to hand to check.
  114. jonathantneal
    16:12
    Okay, so never use aria-hidden EVER for text that should be read aloud, even if it is used by aria-*by?
  115. LjWatson
    16:12
    @dylanb it turns out to be a bit of a mess... since it seems that in FF the <figcaption> is still being picked up as the acc name for the <figure>, despite also being hidden.
  116. jonathantneal
    16:13
    And as far as text being read twice; just deal with it; there is no solution?
  117. LjWatson
    16:13
    @jonathantneal aria-hidden removes content completely as far as ATs are concerned. You use it when you want something to be visible, but not available to an AT.
  118. dylanb
    16:13
    @LjWatson That is what is supposed to happen and it is supported in Safari too
  119. LjWatson
    16:14
    @dylanb where is the specificity documented? In theory if the source of the acc name is not in the acc tree, it shouldn't be available to anything.
  120. LjWatson @LjWatson puts face in hands.
  121. dylanb
    16:15
    aria-hidden exposes element as strings (apparently) which can then be referenced only by aria-describedby and aria-labelledby. The spec states 
    Skip hidden elements unless the author specifies to use them via an aria-labelledby or aria-describedby being used in the current computation
  122. jonathantneal
    16:16
    Ruh roh.
  123. LjWatson
    16:16
    @dylanb yup, but what impact does/should aria-hidden="true" have on that?
  124. dylanb
    16:17
    aria-hidden = hidden in that statement
  125. dylanb
    16:17
    but hidden also equals display:none and visibility:hidden
  126. LjWatson
    16:17
    @jonathantneal no row, just dispair over the ARIA spec - conversations like this are useful because they highlight gaps in the spec and problems with real-world implementation. It's good to have @dylanb's brain on this :)
  127. dylanb
    16:18
    http://www.w3.org/TR/wai-aria/terms#def_hidden
  128. jonathantneal
    16:18
    @dylanb yeap, I was just reading that from the WAI/PF/aria-implementation page
  129. jonathantneal
    16:19
    Okay, so aria-hidden=“true” is how it should be, but just know that it will not work in any current AT. Is that right?
  130. dylanb
    16:20
    @jonathantneal it works in VO on Safari on OS X
  131. LjWatson
    16:20
    @jonathantneal No, not quite. The aria-hidden attribute is *supposed to hide things from AT. That's how the attribute is defined in the spec.
  132. dylanb
    16:20
    it may work elsewhere, but apparently not where @LjWatson was testing
  133. dylanb
    16:20
    so the best thing is to live with redundancy
  134. LjWatson
    16:21
    When aria-hidden="true" is set, the content should be completely be removed from the browser's accessibility tree. In other words it should not exist at all, as far as an AT is concerned.
  135. dylanb @dylanb shakes head at confusing nature of ARIA
  136. LjWatson
    16:22
    It seems that Firefox honours this behaviour, but Safari doesn't, and other browsers appear unknown.
  137. LjWatson
    16:22
    @dylanb confusing's the polite way of putting it :)
  138. jonathantneal
    16:23
    @LjWatson it should be completely removed even from aria references (aka, is the spec getting it wrong)?
  139. dylanb
    16:23
    http://www.w3.org/html/wg/wiki/ChangeProposals/ARIA_Can_Only_Refer_To_Hidden_Content_With_Specific_Restrictions
  140. dylanb
    16:24
    Look at the "Positive Effects" section
  141. dylanb
    16:24
    lol at the risks "Without good author guidance, some authors will misunderstand the limitations of what can be achieved using ARIA. We already have evidence of that today."
  142. jonathantneal
    16:39
    I could not crack using VoiceOver with Chrome or Firefox.
  143. jonathantneal
    16:40
    And we don’t have something like browserstack or modern.ie for a11y tools.
  144. jonathantneal
    16:40
    Or do we?
  145. rodneyrehm
    16:41
    there are trial versions available
  146. rodneyrehm
    16:42
    but you’ll have to install them on your system (or VM), there are no ready VMs you can connect to - at least none that I know of
  147. rodneyrehm
    16:43
    (running JAWS in a VM eases the pain of the 30 minutes you get to play with the tool before having to restart the system)
  148. jonathantneal
    16:51
    I downloaded the 32-bit version of JAWS, but the XP VM said it was not a valid 32-bit application. Okay. I’ll try again later.
  149. dylanb
    16:54
    @jonathantneal at the moment VO works best with Safari
  150. jonathantneal
    17:00
    Got it. Thanks @dylanb.
  151. stevefaulkner
    21:11
    @jonathantneal may be relevant www.w3.org/TR/aria-in-html#hiding-content-has-no-effect-on-accessible-name-or-description-calculation
  152. dylanb
    21:15
    @stevefaulkner is my hero again...I was looking for that and could not find it...
  153. jonathantneal
    23:20
    @stevefaulkner this is very confusing - I don’t trust aria-hidden=“true” at all now.
  154. zakim-robot
    23:54
    [Cordelia McGee-Tubb, a11y] does anyone know of a way to display which keys are pressed while running VoiceOver? i’m doing a demo later for a group of devs and dreaming of a caption panel that shows the keys i’m pressing as i navigate