Archive index

A11y Slackers Gitter Channel Archive 6th of December 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Dec 06 00:19
    [nschonni] Pretty disappointing to see the MSEdge PM agree with the article given the accessibility efforts they've put in
  2. zakim-robot
    @zakim-robot
    Dec 06 00:31

    [karlgroves] > A company has no inherent reason or moral obligation to consider people outside its products’ geographic or economic reach.

    Read as: We’ve decided who our market is, so FU if you’re outside of that definition

  3. zakim-robot
    @zakim-robot
    Dec 06 00:38
    [caesar] LOL "no moral obligation" but a legal one... in Australia at least there's the Disability Discrimination Act. So they can get stuffed.
  4. [caesar] haha
  5. zakim-robot
    @zakim-robot
    Dec 06 10:35
    [michiel] Note to self: avoid Viget.
  6. zakim-robot
    @zakim-robot
    Dec 06 12:18
    [karlgroves] This isn’t the first time the same guy posted a pretty controversial post
  7. zakim-robot
    @zakim-robot
    Dec 06 13:14
    [jv] does this work with Voice over https://www.paciellogroup.com/blog/2014/12/using-aria-describedby-to-provide-helpful-form-hints/
  8. [jv] I tried and it seems voice over doesn't read hint text
  9. zakim-robot
    @zakim-robot
    Dec 06 13:28
    [michiel] jv: http://jsbin.com/xojasumemi/edit?html,output
  10. [michiel] That one works for me in VoiceOver on 10.12
  11. [jv] won't it be spoken anyway?
  12. zakim-robot
    @zakim-robot
    Dec 06 13:48
    [michiel] How do you mean?
  13. [jv] as a simple paragraph
  14. [michiel] Sure, but not while focus is on the input :)
  15. [jv] oh ok. so that is the benefit of it
  16. [michiel] Yeap :)
  17. [michiel] IIRC the paragraph could even be hidden.
  18. [michiel] Not saying that’s better
  19. [jv] though if user might start typing before reading the hint
  20. zakim-robot
    @zakim-robot
    Dec 06 13:57
    [jv] this is good and easy to implement technique
  21. Mallory
    @StommePoes
    Dec 06 14:20
    Hey Jitendra, how are the banks doing over there?
  22. zakim-robot
    @zakim-robot
    Dec 06 15:07
    [jv] banks are bust
  23. [jv] busy*
  24. Mallory
    @StommePoes
    Dec 06 15:18
    I'm getting pretty frustrated
  25. so on my new-ish Windows machine I can't use Alexander Surkov's Dom Inspector because no version exists for Firefox 50
  26. so Paciello group says there's an add-on called DOM Inspector that I could download
  27. it's doesn't say how to use it tho
  28. so I download it
  29. and have no way of using it
  30. I can see it in my Add-ons
  31. but it's not in any menu.
  32. Everyone else in the universe knows the super-secret key combo that opens up this add-on for Firefox? Otherwise I can only inspect the accessibility tree in Firefox on Linux (which seems to have Grandfathered in Surkov's add-on)
  33. zakim-robot
    @zakim-robot
    Dec 06 15:41
    [johnkmcnabb] StommePoes, is that DOM Inspector for Firefox by SeaMonkey Council?
  34. [johnkmcnabb] This one? https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
  35. [johnkmcnabb] I can get it to work on Firefox 50 by doing: Click Tools > Web Developer > DOM Inspector
  36. [johnkmcnabb] More details here: https://developer.mozilla.org/en-US/docs/Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector
  37. Mallory
    @StommePoes
    Dec 06 16:54
    lemme try the tools, I clicked everywhere else and couldn't find it (yeah it's sea monkey), all my other extensions and addons are under there
  38. There it is! Thanks @johnkmcnabb
  39. zakim-robot
    @zakim-robot
    Dec 06 17:18

    [miwayha] an annoying question…

    I have this markup: 

    <article role="article" tabindex="-1" aria-labelledby="article_1_heading">             <p aria-hidden="true">Visible Subhead</p>             <h3 id="article_1_heading"><a href="">Article title</a></h3>             <p class="visually_hidden">Screen Reader Subhead</p>         </article>

    whenever I use voiceover to interact with the group, the screen reader jumps to the Screen Reader subhead. I have to use VO + left arrow to navigate back to the Article Title. Any ideas what’s going on?

  40. zakim-robot
    @zakim-robot
    Dec 06 17:55
    [dna] is an anchor with an empty href focusable?
  41. [dna] oh, maybe that doesnt make a difference in this case
  42. [miwayha] hm, that’s an interesting question!
  43. [miwayha] no, adding an actual url for the href doesn’t fix it :(
  44. zakim-robot
    @zakim-robot
    Dec 06 18:02
    [marcysutton] Is there any CSS impacting the article_1_heading?
  45. [miwayha] no css whatsoever
  46. [marcysutton] WEIRD
  47. [marcysutton] and it's just plain HTML? not delivered with JS or anything? Trying to determine if there is a visibility race condition
  48. [miwayha] yeah, it’s vanilla html
  49. [miwayha] i wonder if it’s some weird configuration on my machine or my software, vs how voiceover normally behaves
  50. [miwayha] (I haven’t been doing this long enough to know :p )
  51. powrsurg
    @powrsurg
    Dec 06 18:08
    In my experience VoiceOver does not always output text linearly. I have never figured out a good solution for what to do, nor why it did that.
  52. zakim-robot
    @zakim-robot
    Dec 06 18:13
    [marcysutton] You might check your Voiceover settings.
  53. [miwayha] thanks for looking, i’ll have a look at voiceover settings
  54. zakim-robot
    @zakim-robot
    Dec 06 18:30
    [dna] does anyone have any guidance on the use of role=menubar?
  55. [dna] i tweeted this out several days ago: https://twitter.com/dxna/status/803725524199673856
  56. [dna] and i got some interesting feedback re: the use of menubar
  57. [dna] folks are saying menubar should only be used as an application menubar, like in a desktop application
  58. [dna] but if that’s true
  59. [dna] why include it here https://www.w3.org/TR/wai-aria-practices-1.1/#menu at all?
  60. [dna] it seems as if the potential use case for something like this would be pretty limited to very specific web applications
  61. [dna] like editors in browsers or something
  62. [dna] my use case is navigation, btw
  63. [cordelia] I believe it’s very useful for WYSIWYG text editors, which are pretty common on the web (think email composers, blog editors, comment systems, etc).
  64. zakim-robot
    @zakim-robot
    Dec 06 18:35
    [dna] hmm, that’s totally fair
  65. [dna] should menu/menubar not be used in navigation then?
  66. [cordelia] In the case you mentioned, I think <nav> would be more appropriate, as it’s not really a set of tools but a set of pages you can navigate to. I mostly think of menubar as grouping related tools that affect content in a certain container.
  67. [dna] @cordelia when you say <nav> are you referring to a widget with defined behavior?
  68. [dna] like, something I can reference
  69. [dna] i like the wai-aria-practices guide in particular because it provides a list of expected keyboard behavior
  70. [cordelia] We’re talking just about the horizontal bar on that page?
  71. [dna] well, that horizontal bar reveals a beast of a nested navigation
  72. [dna] but i’ll start with the horizontal bar
  73. [dna] :)
  74. zakim-robot
    @zakim-robot
    Dec 06 18:45

    [cordelia] In the simple case of a horizontal bar of links, it could be marked up like this without any extra keyboard behavior: 

    <nav>   <ul>     <li><a href=“…”>A</a></li>     <li><a href=“…”>B</a></li>     …   </ul> </nav>

    But I didn’t realize there was a whole mega menu under it until your last comment so I think it would need to be a little more complex. Have you seen Adobe’s open source accessible mega menu? https://adobe-accessibility.github.io/Accessible-Mega-Menu/

  75. [cordelia] Also check out Terrill Thompson’s blog post about mega menus, it talks a little bit about this very issue (whether to use role=“menubar”): http://terrillthompson.com/blog/474
  76. [dna] ah, super interesting
  77. [dna] thanks @cordelia!
  78. zakim-robot
    @zakim-robot
    Dec 06 18:50
    [dna] i’ll take a look at these
  79. [cordelia] sure thing! i’ve never made a mega menu so my knowledge of how to do so in an accessible fashion is limited, but those resources look promising
  80. [dna] totally
  81. [dna] this mega menu looks great
  82. zakim-robot
    @zakim-robot
    Dec 06 19:52

    [miwayha] More weirdness…

    I tested this markup: 

    <article tabindex="-1" aria-label="article 1">             <p aria-hidden="true">Visible Subhead</p>             <p id="article_1_heading"><a href="http://example.com">Article One</a></p>             <p class="visually_hidden">Screen Reader Subhead</p>         </article>         <article tabindex="-1" aria-label="article 2">             <p aria-hidden="true">Visible Subhead</p>             <h3 id="article_2_heading"><a href="http://example.com">Article Two</a></h3>             <p class="visually_hidden">Screen Reader Subhead</p>         </article>         <article tabindex="-1" aria-label="article 3">             <p aria-hidden="true">Visible Subhead</p>             <p class="visually_hidden">Screen Reader Subhead</p>             <p id="article_3_heading"><a href="://example.com">Article Three</a></p>         </article>         <article tabindex="-1" aria-label="article 4">             <p aria-hidden="true">Visible Subhead</p>             <p class="visually_hidden">Screen Reader Subhead</p>             <h3 id="article_4_heading"><a href="http://example.com">Article Four</a></h3>         </article>

    In each time, on voiceover, “Screen Reader Subhead” was what the screen reader defaulted to after pressing Control-Option-Shift-Down to enter the group. I’m ready to give up. x@

    If anyone else would test with voiceover, I’d be eternally grateful

  83. zakim-robot
    @zakim-robot
    Dec 06 19:59
    [heidi] Question re: focus order: submenu on left of page (as an <aside>) programmatically follows the main content, so tab order goes through main area first, then menu. I think this is fine-ish, but what would be ideal? Should the menu be visually on the right to align with focus order? Or moved to come before the main area, provided there's a skip link over it? Fine as is?
  84. Mallory
    @StommePoes
    Dec 06 20:02
    If content-order wise that makes sense, then I'd say your only real worry is that so many websites go through the left-sidebars first (they are usually first in content-order) that people may initially be confused.
  85. But it wouldn't be wrong.
  86. I would have skip links either way though.
  87. Do away with your mouse and you'll find any page you go through several pages of, you appreciate skip links on them, esp if there are often 2 or more columns.
  88. I believe wikipedia would be an example (maybe not a good one) where, last time I was there, the main content was first in source, then the left sidebar. Also tab-wise.
  89. zakim-robot
    @zakim-robot
    Dec 06 20:04
    [lefthandev] Anyone able to share a decent implementation in the wild of an aria enabled slider widget?
  90. Mallory
    @StommePoes
    Dec 06 20:04
    I saw not ideal because while I can accept the sidebar-later bit, the stuff at the top being later I kinda draw the line.
  91. zakim-robot
    @zakim-robot
    Dec 06 20:04
    [heidi] Thanks stomme. Yeah, I think it makes sense practically, but it's not the expectation. So which is better... Will check wikipedia! Thanks.
  92. Mallory
    @StommePoes
    Dec 06 20:05
    Not one that worked with mobile/touch, @lefthandev that I know of
  93. Heidi I strongly suspect they have that content order for responsiveness to mouse-turd screens rather than it being good for keyboarders.
  94. If your visual designers don't care either way and people think moving it all to the right makes more sense, you're relieved of your dilemma at least.
  95. zakim-robot
    @zakim-robot
    Dec 06 20:08
    [heidi] SP, lol. Yeah, that's some crazy focus ordering on wikipedia. I'm going to maybe stop assuming that there's a strong expectation to go through the left bar before main content, and let it be, let it beeee.
  96. [lefthandev] @stommePoes any examples welcomed : )
  97. [heidi] Esp given it is an aside element
  98. [cordelia] I’ve seen a handful of sites with left-aligned navigation that comes after main content in DOM order. As long as you have a “Skip to navigation” link, which not just provides a quick jump but also hints that the navigation isn’t where one might expect it to be in the tab order, you should be fine.
  99. zakim-robot
    @zakim-robot
    Dec 06 20:13
    [miwayha] @heidi FWIW, I think many CMS (e.g. Drupal) themes have the main content come before any sidebars, so there is plenty of precedent not to do it that way. My org has ~4000k sites using our distro of Drupal, and in all of them, the center column comes before either sidebar
  100. [heidi] Aha, good to know! Thanks @cordelia @miwayha
  101. Mallory
    @StommePoes
    Dec 06 20:14
    And it got more common when everyone realised "OSHIT MOBILE"
  102. because most sites wanted the main content to be at the "top" of a narrow screen.
  103. which generally makes sense.
  104. depending on the site.
  105. zakim-robot
    @zakim-robot
    Dec 06 20:15
    [heidi] @lefthanddev Trying to find a slider for you... fluid project's UIOptions has one. What's the context exactly?
  106. zakim-robot
    @zakim-robot
    Dec 06 20:27

    [miwayha] A tangent about menus on mobile, we’ve found appendaround to a really handy javascript library. Basically, it allows you to reorder the DOM based on breakpoints. So on desktop, our submenu in our left sidebar is below the main content in source order, but on mobile, it’s before.

    https://github.com/filamentgroup/AppendAround

  107. zakim-robot
    @zakim-robot
    Dec 06 21:27
    [cordelia] @miwayha, regarding your <article> issue. I just tested the sample code you posted an hour and a half ago using VO + Safari. When I press Ctrl+Option+Shift+Down on first article, I hear “2 items, interact with article 1, with 2 items, article, 2 items, Article One link.” So it seems to correctly be moving to the first screenreader accessible child node.