Archive index

A11y Slackers Gitter Channel Archive 16th of February 2016

What fresh hell is THIS now? - Patrick Lauke
  1. bigblind
    Feb 16 02:53
    This message was deleted
  2. bigblind
    Feb 16 02:54
    This message was deleted
  3. sideshowbarker
    Feb 16 08:03
    https://github.com/gitterHQ/gitter/issues/769#issuecomment-184318121
  4. MichielBijl
    Feb 16 10:47
    “Designers should work to avoid conflicts between visual appearance and [WAI-ARIA] semantics.”—W3C APG: https://twitter.com/MichielBijl/status/699542169133150208
  5. zakim-robot
    Feb 16 11:17
    [callumacrae] yay I'm finding an excuse to do some accessibility stuff again \o/ christianalfoni/formsy-react#310
  6. MichielBijl
    Feb 16 11:23
    Callum, still want to do that test?
  7. zakim-robot
    Feb 16 11:26
    [callumacrae] which test?
  8. zakim-robot
    Feb 16 11:26
    [callumacrae] </memory>
  9. zakim-robot
    Feb 16 11:37
    [callumacrae] Heh, and redux-form too erikras/redux-form#650
  10. MichielBijl
    Feb 16 11:47
    The controlling voiceover/audio via Hangouts/whatever test thing.
  11. zakim-robot
    Feb 16 11:51
    [callumacrae] Are you sure that was me? My memory is bad but it isn't that bad! :smile:
  12. zakim-robot
    Feb 16 11:52
    [jitendra] Is using content images as CSS background images if Image description is available in markup (above the image) ok?
  13. zakim-robot
    Feb 16 11:53
    [jitendra] Many dev are using hero slider images that way because it’s easier to make them responsive
  14. zakim-robot
    Feb 16 11:53
    [callumacrae] When I took that approach, user tester seemed to be fine with it
  15. zakim-robot
    Feb 16 11:53
    [callumacrae] Responsible images, though?
  16. zakim-robot
    Feb 16 11:54
    [jitendra] Specially backround-size:cover make the work easy
  17. zakim-robot
    Feb 16 11:55
    [jitendra] I was discussing it with a developer
  18. zakim-robot
    Feb 16 11:56
    [jitendra] I said to him that content Images should be part of content and we also get SEO benefit
  19. zakim-robot
    Feb 16 11:56
    [jitendra] Developer said “Client doesn’t care about image’s SEO"
  20. zakim-robot
    Feb 16 11:57
    [jitendra] And screen reader can read the description which in markup
  21. zakim-robot
    Feb 16 11:57
    [callumacrae] Sounds like a good case for srcset and overflow: hidden. Not really sure what the advantage of using background images here is
  22. zakim-robot
    Feb 16 11:57
    [callumacrae] But a description in markup would also do the trick, as long as it is kept up to date
  23. zakim-robot
    Feb 16 11:58
    [callumacrae] It's easier for it to go out of date when the images are in a css file and the text is in the markup, though
  24. zakim-robot
    Feb 16 11:58
    [jitendra] CSS images can’t be parsed by Search engine crawler I think
  25. zakim-robot
    Feb 16 11:59
    [jitendra] And there is a possibility of Image description and Description text can have no relation
  26. zakim-robot
    Feb 16 12:00
    [jitendra] I mean what exactly being shown in image could be different than what Description text is
  27. zakim-robot
    Feb 16 12:00
    [jitendra] because in my case Description text is also a title of the article which can be opened by clicking on description
  28. zakim-robot
    Feb 16 12:01
    [jitendra] So it would be possible that Images might be selected after article and title have been written
  29. MichielBijl
    Feb 16 12:06
    @Callum, sorry, I have you confused with someone else -.-
  30. MichielBijl
    Feb 16 12:07
    Seems my memory is shot, too.
  31. zakim-robot
    Feb 16 12:07
    [callumacrae] No worries!
  32. MichielBijl
    Feb 16 13:34
    What do people think of this as a description for a breadcrumb design pattern:
  33. MichielBijl
    Feb 16 13:34
    A breadcrumb contains links to the parent pages of the current page in hierachical order. These help users find their place within a website or web application.
  34. MichielBijl
    Feb 16 13:34
    Breadcrumbs are often placed (horizontally) under a page's header. It is recommended authors use an ordered list as the basis for breadcrumbs.
  35. MichielBijl
    Feb 16 13:37
    As used here: https://rawgit.com/w3c/aria/feature/breadcrumb/practices/aria-practices.html#breadcrumb
  36. zakim-robot
    Feb 16 13:47
    [callumacrae] I reckon the best way to explain breadcrumbs is with an actual example
  37. MichielBijl
    Feb 16 13:51
    Yeah I'll include one once I have the text.
  38. MichielBijl
    Feb 16 13:51
    The code is not the hard part :P
  39. MichielBijl
    Feb 16 13:57
    Also see: https://gitter.im/w3c/a11ySlackers?at=568aa84f0171d1791d03553c
  40. jasonday
    Feb 16 14:22
    @MichielBijl - I'm developing our pattern library too, and writing the standards is the hardest part. I found the govt site - https://uspto.github.io/designpatterns/1.x/docs/components/breadcrumbs.html to have pretty good descriptions as a starting point
  41. MichielBijl
    Feb 16 14:23
    Thanks, I'll have a look!
  42. MichielBijl
    Feb 16 14:24
    It's license does allow me to just copy that >:)
  43. jasonday
    Feb 16 14:25
    yup...you can fork it on github, and voila
  44. MichielBijl
    Feb 16 14:25
    don't think the W3C would be too happy with me just copying stuff into the APG from other places though :P
  45. MichielBijl
    Feb 16 15:00
    Code example for breadcrumbs: https://cdn.rawgit.com/w3c/aria/feature/breadcrumb/practices/examples/breadcrumb/index.html
  46. MichielBijl
    Feb 16 15:00
    Any comments welcome of course :)
  47. jasonday
    Feb 16 15:04
    @MichielBijl - looks good. My only comment/question is should the current page be clickable? In your example, it reloads the current page. Typical use case is that it is indicative of the current location and is not actionable.
  48. MichielBijl
    Feb 16 15:06
    Good question. That is because aria-current (https://www.w3.org/TR/wai-aria-1.1/#aria-current) is only allowed on links.
  49. MichielBijl
    Feb 16 15:06
    Although, you could of course decide not to link it.
  50. MichielBijl
    Feb 16 15:06
    But that would mean there is no ARIA way to communicate is as the current page.
  51. jasonday
    Feb 16 15:07
    you could do a "javascript: void(0);" to prevent reload, and remove underline from the CSS to prevent indication of action
  52. MichielBijl
    Feb 16 15:07
    I will discuss this in next weeks APG meeting.
  53. MichielBijl
    Feb 16 15:08
    Hmm, I should add a hash or something to the href (is now an empty href, whoops)
  54. MichielBijl
    Feb 16 15:09
    But, then again, it should just link to the current page.
  55. MichielBijl
    Feb 16 15:09
    And if it's a link, it should have some sort of indication that you can perform an action.
  56. jasonday
    Feb 16 15:09
    which reloads the page
  57. MichielBijl
    Feb 16 15:09
    Is that so bad?
  58. jasonday
    Feb 16 15:10
    I don't know if it's bad, but it is atypical
  59. zakim-robot
    Feb 16 15:10
    [johnbhartley] nbd, but you spelled Breadcrumb wrong in your breadcrumbs.
  60. MichielBijl
    Feb 16 15:10
    Haha, whoops…
  61. MichielBijl
    Feb 16 15:11
    I don't really want my bread to cumb
  62. zakim-robot
    Feb 16 15:11
    [johnbhartley] as for the last one being a link, it seems like based on the "consistent navigation" guideline you would want it to be a link, unless the convention throughout the rest of the site is to not have it clickable
  63. zakim-robot
    Feb 16 15:11
    [johnbhartley] not sure if it actually hurts or helps anything though
  64. jasonday
    Feb 16 15:12
    I'm trying to think about it from a UX perspective - what does a user expect when interacting with breadcrumbs? Reloading the current page may be confusing and is a different behavior than the user has encountered before
  65. MichielBijl
    Feb 16 15:12
    @jasonday, okay. I see mixed cases throughout the web. And if we don't make it clickable we would have to allow for aria-current to be placed on other elements (which doesn't really make sense).
  66. MichielBijl
    Feb 16 15:13
    Current pages in website navigation are often still links to the current page
  67. MichielBijl
    Feb 16 15:13
    And also reload.
  68. jasonday
    Feb 16 15:14
    very true, but i feel like breadcrumbs may be a different animal. Because their main purpose isn't as much about navigating, but being a record of waypoints to the user's current location
  69. zakim-robot
    Feb 16 15:14
    [johnbhartley] could you add a callout that says it's the current page to give more context? with Voiceover it doesn't seem to care about aria-current or mention it
  70. MichielBijl
    Feb 16 15:15
    aria-current is not implemented anywhere as far as I know.
  71. jasonday
    Feb 16 15:16
    the trick is that under the hood, breadcrumbs are a list of links, but the intent and user experience is different than a list of links
  72. MichielBijl
    Feb 16 15:17
    @jasonday: I'll discuss your concerns during the meeting :)
  73. MichielBijl
    Feb 16 15:17
    @johnbhartley: you could of course, if your software allows, add text to it, but the point of aria-current is to prevent that.
  74. MichielBijl
    Feb 16 15:17
    Also see: http://www.michielbijl.nl/2014/09/23/the-current-page-conundrum/#main
  75. MichielBijl
    Feb 16 15:18
    Although that is now slightly dated; aria-current now takes tokens instead of a value of true.
  76. jasonday
    Feb 16 15:20
    I retain the rights to "[breadcrumbs are] a record of waypoints to the user's current location", but feel free to use it
  77. jasonday
    Feb 16 15:21
    ;)
  78. MichielBijl
    Feb 16 15:21
    :+1:
  79. jasonday
    Feb 16 15:28
    Anyone have a moment to test something? NVDA use to announce the jQuery UI Autocomplete, but now I'm getting no announcement when the submenu opens. Chrome Vox announces as expected.
  80. jnurthen
    Feb 16 15:29
    Banana protector
  81. jnurthen
    Feb 16 15:30
    I have no idea why mt phone did that. I blame auto correct.
  82. jasonday
    Feb 16 15:31
    @jnurthen I'm sure you can find one on Amazon
  83. jnurthen
    Feb 16 15:34
    If I wanted one I'm sure I could. Have some thoughts about Breadcrumbs but will wait till I get to a real keyboard.
  84. MichielBijl
    Feb 16 16:28
    @jnurthen, should we create a banana protector design pattern?
  85. MichielBijl
    Feb 16 16:41
    @jnurthen, and could you reply to the full message (I edited it): https://github.com/w3c/aria/issues/113#issuecomment-184655677
  86. jnurthen
    Feb 16 17:04
    @MichielBijl I guess edits don't come through in the emails.
  87. MichielBijl
    Feb 16 17:04
    Nope :(
  88. jasonday
    Feb 16 20:18
    Can someone fire up JAWS & NVDA to look at jQuery UI autocomplete? I'm not getting announcements of the submenu with NVDA and I'd like to verify with others
  89. zakim-robot
    Feb 16 20:20
    [karlgroves] Jason. Do you have an example? Or are you just testing the one from their site?
  90. jasonday
    Feb 16 20:21
    Any of them. I was testing internal, and then went to the jQuery UI site, and then to other implementations in the wild - all with the same result
  91. jasonday
    Feb 16 20:23
    I feel like I remember getting announcements a month or so ago, but the behavior is different now
  92. zakim-robot
    Feb 16 20:25

    [karlgroves] Here’s a standalone copy of it (for any others on here willing to test)

    http://output.jsbin.com/tayoso

    Just tested it with VO and worked as designed. I’ll fire up VMWare in a few minutes if nobody else gets to it with NVDA/ JAWS.

    FWIW, not sure when but I think they recently did shorten the timeout before the announcement

  93. zakim-robot
    Feb 16 20:42
    [karlgroves] Jason: Tested in Windows 8.1 JAWS and NVDA on IE 11 and Firefox. Each are also working as intended
  94. zakim-robot
    Feb 16 20:43
    [karlgroves] Oddly, the delay before announcement seems a little long there
  95. jasonday
    Feb 16 21:08
    Thanks for doing that Karl. I'll double check my end to see if the delay is at play, or if it's another issue