Archive index

A11y Slackers
Gitter Channel Archive 10th of August 2015

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    11:51

    A11ySlackers chat logs 7 http://w3c.github.io/a11ySlackers/archives/070815.html /8 http://w3c.github.io/a11ySlackers/archives/080815.html /9 http://w3c.github.io/a11ySlackers/archives/090815.html of August 2015

  2. ahmednuaman
    13:34
    hey all, is there a recommended html boilerplate that provides good accessibility?
  3. zakim-robot
    13:47
    [Katy Moe, a11y] what do you mean? valid HTML5 tends to be accessible unless something has been done to it
  4. ahmednuaman
    13:48
    sorry for not clarifiying, I mean a https://html5boilerplate.com/ with a11y sugar
  5. ahmednuaman
    13:48
    if there is such a thing?
  6. StommePoes
    13:50
    hm, that html5 boilerplate doesn't have a whole lot of content (because that's what you put in) so it wouldn't exist like that.
  7. StommePoes
    13:50
    But possible what you want are examples of widgets and structures that, if you were to copy and paste them but fill with your own text, would be accessible out of the box
  8. StommePoes
    13:50
    and I don't know of any one place, usually we go around looking for the widget in question. For example, for an expandable tree we'd look at the one at ajaxian, or for mega menus either Adobe's or filiament group's (I think they have one)
  9. StommePoes
    13:51
    rather than pages that start out that way, because usually when thing get "broken" a11y-wise, it's when content is added.
  10. StommePoes
    13:51
    or widgets
  11. ahmednuaman
    13:51
    sure, makes sense
  12. StommePoes
    13:52
    I don't think such a thing exists in a single place, but it would be a good idea. There would probably be more than one as at some point developer-styles appear and they could all be equally or mostly-equally accessible.
  13. StommePoes
    13:52
    Heydon has a fairly developer-friendly set of basic aria-y widgets (tab panels and whatnot).
  14. StommePoes
    13:53
    one example: http://heydonworks.com/practical_aria_examples/
  15. StommePoes
    13:53
    But no, not the same as boilerplate.
  16. zakim-robot
    13:53
    [Katy Moe, a11y] there are also the Deque ones at https://dequeuniversity.com/resources
  17. StommePoes
    13:53
    yeah
  18. StommePoes
    13:53
    and paciello group prolly has some
  19. StommePoes
    13:54
    those deque ones are nice
  20. jonathantneal
    14:19
    A school’s crest is displayed beneath block quotes for decoration using <img>. 1. Is this a classic example of role=“presentation” (per the 1st w3c definition)? 2. If so, should the alt be “school crest” or empty “”?
  21. StommePoes
    14:23
    Is there a point to role=presentation if alt=""?
  22. jonathantneal
    14:24
    I don’t know.
  23. StommePoes
    14:24
    I try to base my decisions on how decorative an <img> is by whether or not it matters to any user that it's there. If a sightie and a blink were collaborating on an application for example, both might want to be able to reference an image "after the buzzard image".
  24. StommePoes
    14:26
    If it's one of those everywhere decorations people put on things like flyers and nobody gives a flying whatever, I'd alt="" it. But that starts going into personal preference as some users care to know there's an image of the school crest somewhere, while others don't want clutter/verbosity.
  25. StommePoes
    14:26
    You might need to ask the school how important they find the crest, but it already sounded kinda decorative already. As in, they could have used a CSS background instead, you think?
  26. StommePoes
    14:27
    In either case I doubt you need the role, my understanding of presentation is that it's useful to remove dom elements from structures when it matters (like removing <li>s from lists when turning a list into a tab-panel and the parent-child relationship betweet tablist and tabs can't have anyone in between them).
  27. StommePoes
    14:29
    s/betweet/between/ :P
  28. stevefaulkner
    14:32

    Is there a point to role=presentation if alt=""?

    nope, for <img> use alt=""

  29. powrsurg
    14:33
    I recently did some testing of our script that displays a character count for text areas that had a max limit. Our set up is basically like http://webstandardssherpa.com/reviews/improving-the-tweet-box/ . When testing it last night I discovered that ChromeVox on Chrome OS was effectively only announcing " characters remaining" and ignoring the actual number. What should we do?
  30. powrsurg
    14:34
    Also, shouldn't clickable fields react to the space button as well as the enter key? We coded our scripts to react that way, but for things that are controlling a box that expands or collapses based on clicks ChromeVox didn't announce any change when the space button was pressed, and it actually missed announcing the first click so it would say that things were collapsed when they were expanded.
  31. jonathantneal
    14:35
    @stevefaulkner role=“presentation” is redundant on <img alt=“”>? How is this conclusion divined?
  32. stevefaulkner
    14:36
    @jonathantneal because they do the same thing
  33. StommePoes
    14:38
    clickable fields reacting to the spacebar-- buttons, u
  34. StommePoes
    14:38
    sure
  35. StommePoes
    14:38
    not all fields
  36. StommePoes
    14:39
    powrsurg are you, with your expando script, manually setting expanded states?
  37. powrsurg
    14:41
    yes, when clicked we change the aria-expanded to true or false. The default for us is false
  38. powrsurg
    14:41
    and I meant for things that we have to make clickable, like a div
  39. jonathantneal
    14:41
    @stevefaulkner is alt=“” sans role=“presentation" respected by mainstream screen readers?
  40. jonathantneal
    14:42
    Not challenging. Just didn’t know about this and want understand as much as possible.
  41. stevefaulkner
    14:42
    alt="" has been supported by mainstream screen readers since forever
  42. powrsurg
    14:42
    should it be alt="" or alt=" "
  43. powrsurg
    14:42
    I swore I read back in the day to use " "
  44. stevefaulkner
    14:43
    alt=""
  45. powrsurg
    14:47
    That's actually probably for the best ... just means I should fix up a couple of years worth of websites. Luckily, there were very few places that actually had decorative images that weren't background images in CSS ...
  46. StommePoes
    14:47
    Might have been bloggers using the space to ensure it was clear that this is an empty string? esp if they were using single quotes alt='' looks like one double
  47. jonathantneal
    14:47
    Thanks, Steve.
  48. powrsurg
    14:49
    I think the explanation I saw was that with "" it seemed like it was done accidentally by some software that expected alt text, where as with " " it is clearly intentional
  49. StommePoes
    14:51
    could be. Then it would matter if an SR saw the space as truthy and announced there was a graphic.
  50. stevefaulkner
    14:59

    Also, shouldn't clickable fields react to the space button as well as the enter key?

    only buttons and checkboxes AFAI recall

  51. stevefaulkner
    15:00
    @powrsurg re textarea update notfication - aria-live no?
  52. stevefaulkner
    15:01
    FYI Short Note on HTML conformance checking http://www.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/
  53. powrsurg
    15:14
    @stevefaulkner like in that example, we have aria-live="polite" and aria-atomic="true", but also added role="status"
  54. stevefaulkner
    15:15
    @powrsurg i couldn't see the aria-live, but if status helps then cool
  55. stevefaulkner
    15:35
    aria-hidden=false is funky in iOS https://lists.w3.org/Archives/Public/public-pfwg/2015Aug/0020.html
  56. MichielBijl
    15:55
    Regarding a11y examples: ones we get some more examples up, this will be a good resource: https://github.com/w3c/aria/wiki/Aria-Authoring-Practices-Patterns-Status
  57. MichielBijl
    15:56
    Includes both native and custom implementation according to the ARIA Authoring Practices Guide: https://rawgit.com/w3c/aria/master/practices/aria-practices.html
  58. MichielBijl
    15:58
    @ahmednuaman
  59. MichielBijl @MichielBijl is curious if Gitter changed the self mention colour in Next
  60. MichielBijl
    15:59
    They have :D
  61. MichielBijl
    16:00
    Now a contrast ratio of 6.98:1!
  62. stevefaulkner
    16:04
    @MichielBijl whats 'next'?
  63. stevefaulkner
    16:06
    @MichielBijl found it :-)
  64. powrsurg
    16:07
    Maybe it's just because I'm paying more attention to it these days, or maybe there are just more people testing these days, but it seems like more ios accessibility issues have been popping up lately
  65. MichielBijl
    16:08
    For everyone else, you can active Gitter Next here: http://next.gitter.im (get new features a little sooner, but also untested).
  66. MichielBijl
    16:09
    Or at least not tested as thoroughly as in Current
  67. stevefaulkner
    16:19
    @powrsurg probably a combination of the 2
  68. cptvitamin
    20:06
    is there a technique to force the Voiceover cursor to follow browser focus? I have a control that toggles the display of a div/region and moves focus to an element inside that region upon opening. This works reliably in all browser/platform and screenreader combinations except for the Voiceover user who navigates with VO+right arrow. If they tab after expanding the panel, all is good. But if they navigate with VO+arrowkey, it proceeds from the toggle control.
  69. zakim-robot
    20:35
    [sara.tabor, a11y] Hi all - if you could please add your voice to getting this IFrame escape/Firefox issue fixed, that’d be lovely. Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=814977
  70. rodneyrehm
    20:36
    that bug is only three years old.
  71. zakim-robot
    20:36
    [sara.tabor, a11y] Also, dunno if it’d help, but if you could please also retweet (should you feel inclined) to add amplitude to this request, I’d be so happy https://twitter.com/OneHotProcessor/status/630822768062406658
  72. rodneyrehm
    20:38
    Sara, is your example page supposed to stay empty? http://youtube-eng.blogspot.de/2010/07/new-way-to-embed-youtube-videos.html
  73. rodneyrehm
    20:42
    Sara, since I don’t get any iframed content on the original demo page, I’ve just tried a page with a couple of embedded videos (vimeo, youtube) and can’t reproduce your issue with Firefox nightly on Mac OS X
  74. rodneyrehm
    20:46
    yeah, can’t reproduce it with Firefox 39 on Windows 8.1 either
  75. rodneyrehm
    20:47
    I don’t have flash enabled, maybe that’s the thing to note here?
  76. zakim-robot
    21:49
    [brunopulis, a11y] Hello folks! o/
  77. zakim-robot
    21:54
    [Francis Storr, a11y] Alt text for users’ avatars in a twitter-esque thing. I cannot decide if it’s extraneous info, e.g., “username image, username” so would be best as alt=“”. I can’t decide if it falls in the “icon images” guidance here: http://www.w3.org/TR/2014/WD-html-alt-techniques-20141023/#icon-images
  78. zakim-robot
    22:05
    [Alice Boxhall, a11y] @fstorr
  79. zakim-robot
    22:06
    [Alice Boxhall, a11y] Was having a discussion about this with some folks on Twitter the other day
  80. zakim-robot
    22:07
    [Alice Boxhall, a11y] But if we can't then yeah alt='' (I see twitter uses just alt with no value which is nice) makes sense
  81. deborahgu
    22:11
    Ideally users would be able to describe their avatars.
  82. deborahgu
    22:11
    Since people do poor certain amount of identity into them.
  83. zakim-robot
    22:20
    [Francis Storr, a11y] @alice twitter is interesting. On their main page it’s alt=“” but if you look at your notifications page, they use alt=“{username}” for the accounts that have interacted with one of your tweets.
  84. zakim-robot
    22:29
    [Alice Boxhall, a11y] @fstorr Right, because in that case it wouldn't be redundant.
  85. zakim-robot
    22:30
    [Alice Boxhall, a11y] This is kind of a canonical example of how alt text is context-dependent!
  86. zakim-robot
    22:30
    [Alice Boxhall, a11y] I love it.
  87. zakim-robot
    22:32
    [Francis Storr, a11y] @alice: Oh wait. Yep. Because those avatars are links and the alt text is the text alternative. Duh!
  88. zakim-robot
    22:35
    [Alice Boxhall, a11y] I do wonder what the utility:noise ratio would be of allowing us to provide alt text for our avi's
  89. zakim-robot
    22:36
    [Alice Boxhall, a11y] They do provide some "flavour" for sighted users, but you already have the user's name and handle being announced
  90. zakim-robot
    22:36
    [Alice Boxhall, a11y] (for Twitter at least.)
  91. zakim-robot
    22:40
    [Francis Storr, a11y] yeah, it’s interesting. I can see arguments for allowing people to personalize their avatars and also to not.
  92. zakim-robot
    22:42
    [Alice Boxhall, a11y] I think they mostly function as like a "face recognition" hook for sighted folks
  93. zakim-robot
    22:42
    [Alice Boxhall, a11y] whether or not the "face" is the person's actual face is mostly irrelevant
  94. zakim-robot
    23:06
    [Francis Storr, a11y] Changing subjects, this WebAIM article on color contrast and links is interesting: http://webaim.org/blog/wcag-2-0-and-link-colors/
  95. deborahgu
    23:20
    on our social media network, people invest a lot of identity in avatars. But that might be unique to us.
  96. deborahgu
    23:21
    some places they're just a bookmark.
  97. zakim-robot
    23:45
    [siggiarni, a11y] Hi everybody.
  98. zakim-robot
    00:21
    [Alice Boxhall, a11y] @fstorr "A 3:1 contrast between the link text color and the surrounding non-link text color." - that's really interesting
  99. zakim-robot
    00:21
    [Alice Boxhall, a11y] I haven't seen other references to color contrast between two text colors
  100. zakim-robot
    00:22
    [Alice Boxhall, a11y] e.g. for all we rail against low-contrast text (me included), designers intentionally make some text low contrast specifically in order to de-emphasise it and reduce visual clutter
  101. zakim-robot
    00:22
    [Alice Boxhall, a11y] This is why I explicitly don't check for placeholder text contrast in a11y devtools for example - because making that text "sufficient" contrast would actually create a confusing UI
  102. zakim-robot
    00:50
    [Francis Storr, a11y] @alice: you have no idea how long I’ve spent trying to juggle that and brand guidelines!