Archive index

A11y Slackers Gitter Channel Archive 1st of October 2015

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Oct 01 00:27
    [Cordelia McGee-Tubb, a11y] Does anyone know if there have been any advancements regarding using aria-haspopup=“true” on buttons that launch a non-menu dialog?
  2. zakim-robot
    Oct 01 00:28
    [Cordelia McGee-Tubb, a11y] Latest I’ve read (and heard via NVDA & JAWS) is that the property should still only be used for menus.
  3. garcialo
    01:09
    Anyone know what the difference is between Tandem and Non-Tandem JAWS?
  4. garcialo
    01:10
    Oh...looks like it's used when connecting to another machine.
  5. zakim-robot
    05:12
    [Jesse Beach, a11y] @cordelia: afaik that is still true
  6. zakim-robot
    05:13
    [Jesse Beach, a11y] it should drop JAWS in menu mode when focus is passed to a menuitem from the button
  7. zakim-robot
    05:17
    [Jesse Beach, a11y] @saltnburnem: Mostly I just use the POUR acronym: Perceivable, operable, understandable, robust. which translates to: semantic HTML (HTML5 + ARIA), works with mouse and keyboard, has a descriptive label and, cheekily, actually works and has no bugs.
  8. zakim-robot
    05:18
    [Jesse Beach, a11y] For document-like content (posts, pages, etc) and online forms, this will get you far.
  9. zakim-robot
    05:18
    [Jesse Beach, a11y] If you're building complex interactions and components, then you'll need to start digging in. This slack is a great place to ask for guidance with specific issues
  10. jitendravyas
    05:19
    what is best jquery plugin for form validation?
  11. zakim-robot
    06:57
    [Neil Milliken, a11y] jaws tandem is often used for remote support
  12. MichielBijl
    09:22
    After this one, we just need to say @stevefaulkner 's name one more time and he should show up.
    You should look into a mirror and say his name four times, he will magically not appear anywhere near you; because this is the real life…
  13. zakim-robot
    11:03
    [Chris DeMars, a11y] Thanks @jessebeach. That's actually what I was going for. Same thing the "wcag 2 at a glance" article says
  14. zakim-robot
    11:29
    [heydon, a11y] @cordelia If I remember correctly, some UAs say “submenu” in relation to haspopup, so anything else would currently be confusing. Not sure what to do about that. A more generic notifier could be placed with hidden text or aria-decribedby ??
  15. LjWatson @LjWatson gives @stevefaulkner a prod
  16. stevefaulkner
    11:32
    @deborahgu I can set up tunnels to other channels, downside being that they will be message rate limited, unless someone wants to cough up cash for paid tunnels
  17. stevefaulkner
    11:33
    @cordelia I have heard that some people use aria-expanded as a method to indicate that some form of popup is associated with a control
  18. stevefaulkner
    11:36

    A11ySlackers log 30th September 2015 http://w3c.github.io/a11ySlackers/archives/2015/09/2015-09-30.html

  19. johncaseysmith
    13:37
    aria-invalid: only used for incorrect formatting in a field (used a character that isn't allowed) or is it also used for input not being found in the DB (username was wrong)?
  20. MichielBijl
    13:58
    Any error related to inputs AFAIK
  21. zakim-robot
    14:08
    [Matt Hinchliffe, a11y] Does anybody have an example of an accessible AJAX form?
  22. deborahgu
    14:12
    in what sense?
  23. powrsurg
    14:24
    does anyone have any idea why Firefox will sometime show an outline (that is, the default styling for focused elements) around a div that was given focus programmatically, but other times it does not?
  24. stevefaulkner
    14:25
    @powsurg you have example?
  25. powrsurg
    14:25
    let me see if I can work out a test case
  26. powrsurg
    14:27
    we have some wizard where you click on buttons at the bottom to go to the next/previous slides. When that happens I set the focus to the top of the slide so that things will be read out and they can move along the wizard (btw, should I be setting any other aria attributes in such a case). Some times I saw the focus get the default styling, sometimes I didn't
  27. stevefaulkner
    14:29
    using tabindex=?
  28. powrsurg
    14:30
    yes, I have tabindex=-1 in there since they should not be able to tab to it normally, but we want to give it focus since it changes thanks to their action
  29. stevefaulkner
    14:31
    sure
  30. rodneyrehm
    14:31
    @powrsurg because sometimes you pressed Tab before assigning focus, engaging an internal mode in Firefox
  31. powrsurg
    14:32
    it has tabindex=-1 so they weren't tabbing to that slide
  32. powrsurg
    14:33
    the application is sort of like a powerpoint deal that has buttons to go between slides. Figured the focus would need to be put back to the top after the buttons where clicked
  33. rodneyrehm
    14:33
    it’s not about the <div> gaining focus by keyboard, but that any element in the lifecycle of the document has gotten focus via keyboard before you ran yourDiv.focus();
  34. rodneyrehm
    14:33
    the same may happen to mouse activated focus
  35. powrsurg
    14:35
    If we actually apply our own focus styling with something like "#player:focus { outline: 1px dotted blue; }" it always seems to add the focus styling, but it does not always apply the default browser styling to focused elements then. That's what I'm confused about. Sometimes it does and sometimes it doesn't
  36. rodneyrehm
    14:36

    excerpt from my book (that I’m still writing so can’t link to)

    However, not all browsers are created equal. Clicking on a div with [tabindex="0"] or [tabindex="-1"] will always focus that element. Things get weird when we look at how the native focus outline is applied, though. On Mac OS X Safari, Chrome and Firefox behave the same: an element that has focus, gets the native focus outline drawn around it (unless a custom one was specified). On Windows things are a little more complicated. IE11 never renders the native focus outline on click, but does so on <kbd>Tab</kbd>. Custom focus outlines are drawn on click and <kbd>Tab</kbd>. Chrome doesn't differentiate OS in this regard and always renders the native focus outline as it should. Chrome might change its position, if this two year old patch gets merged. Firefox behaves like IE11, unless you've hit <kbd>Tab</kbd> at least once - then even a click will render the focus outline.

  37. MichielBijl
    14:45
    That is quite interesting.
  38. MichielBijl
    14:45
    We need a QI of the web with Stephan Fry
  39. rodneyrehm
    14:46
    QI?
  40. MichielBijl
    14:47
    http://www.bbc.co.uk/programmes/b006ml0g
  41. rodneyrehm
    14:50
    hehe
  42. MichielBijl
    14:51
    Or in other words, a very funny quiz show about quite interesting things, where nobody really gives the correct answer that often, and where nobody never really ends with a positive score ;)
  43. zakim-robot
    15:00
    [ccwilcox, a11y] @rodneyrehm: in IE11, what if you added a JavaScript click event to the div that would set the focus to that div, would that force it to draw the focus outline?
  44. rodneyrehm
    15:02
    I’m not sure I follow your line of thought
  45. rodneyrehm
    15:05
    an element can be focused without the focus outline being drawn. when you click on something that can be focused, it gets focused. you may not see that visually, but that doesn’t mean it’s not the case. you can verify that by adding a focus event handler to the div, or generally observe document.activeElement
  46. zakim-robot
    15:05
    [ccwilcox, a11y] If IE11 doesn’t change the styling on a click but does change it on a <kbd>Tab</kbd>, does it change the styling when it’s done programmatically? If I wrote a weird JavaScript that changed the focus from one div to the next every 5 seconds, would you see the focus styling in all browsers?
  47. rodneyrehm
    15:06

    does it change the styling when it’s done programmatically?

    nope.

  48. rodneyrehm
    15:06
    it is a "keyboard activation” not a “mouse deactivation"
  49. rodneyrehm
    15:06
    and a synthetic key event won’t get you anywhere either
  50. zakim-robot
    15:08
    [ccwilcox, a11y] So a workaround for IE11 might be to apply the outline styling when it becomes active (and remove it when it’s not) and not rely on the :focus pseudo
  51. rodneyrehm
    15:09
    Custom focus outlines are drawn on click and <kbd>Tab</kbd>.
  52. zakim-robot
    15:09
    [ccwilcox, a11y] OK
  53. rodneyrehm
    15:10
    if you actually want an outline, then style it yourself. that’s what you’d do with :focus. if you don’t have that, chances are the outlines aren’t drawn
  54. garcialo
    15:21
    @MichielBijl I can imagine a "How many <mains>?" version of https://www.youtube.com/watch?v=sGgmmX-dzgU
  55. garcialo
    15:21
    oh geez; that's huge
  56. stevefaulkner
    15:21
    ha!
  57. powrsurg
    15:26
    okay, got pulled into a meeting. Shouldn't we always visually apply some type of styling to an element when it receives focus? I thought it was considered bad practice to remove focus styling from things like form elements when they receive focus and I thought that would similarly apply to things you apply focus to programmatically (or they can tab to via tabindex="0")
  58. rodneyrehm
    15:44
    @powrsurg yes and no. It is important to NOT destroy focus styles for people that need them in the situation when they need them. but that doesn’t mean there aren’t cases where no styles is preferrable…
  59. rodneyrehm
    15:45
    @powrsurg see https://github.com/WICG/modality for a much better explanation than I could possibly give…
  60. powrsurg
    16:02
    applying different styling based on keyboards vs click ... interesting
  61. rodneyrehm
    16:03
    the proposal goes further than that in knowing the focused element’s role
  62. rodneyrehm
    16:03
    clicking on an input, for example, would still show the focus, because interaction is likely to continue with the keyboard
  63. jordanlev
    16:04
    Hi! @stevefaulkner , can I ask you a couple of followup questions to your excellent blog post about header/footer/main/aside/nav?
  64. stevefaulkner
    16:05
    @jordanlev sure
  65. stevefaulkner
    16:07
    @jordanlev I am getting around to repsonding to your comments on the post, thinking that I may write a companion article about the questions you raised
  66. jordanlev
    16:07
    Ah, that's really great to hear. I can wait until then if you'd prefer. I was just going to ask those same questions :)
  67. powrsurg
    16:08
    @rodneyrehm conceptually this is so useful to me ... now I wanna clean up a bunch of stuff I've already done ...
  68. jordanlev
    16:09
    Structuring the document is such a sore point with me. After being led down the path of the document outline, working really hard to understand it and use it properly... only then to be told that "actually browsers don't support this"...
  69. jordanlev
    16:09
    I want to do things the "right way", but every piece of advice seems to conflict with others.
  70. rodneyrehm
    16:09
    @powrsurg here’s a similar thing for differentiating focus (pointer, keyboard, script) that also works with ShadowDOM: http://medialize.github.io/ally.js/examples/focus-source.html
  71. jordanlev
    16:10
    So my new approach is "fuck the theories... figure out what works best for people who are using the keyboard or screenreaders to browse the web". Now I need to learn what those things are.
  72. rodneyrehm
    16:10
    (I’d probably go with the input modality prototype, if that’s all you need)
  73. stevefaulkner
    16:13
    @jordanlev on your question of header/footer in article/section, that is fine as header/footer are only mapped to landmark roles in browsers (and only announced by AT) when they are outside of article/section
  74. jordanlev
    16:15
    @stevefaulkner thanks. Does this imply then that header/footer in article/section doesn't offer any a11y benefit? So it's fine if they're there, but there's no real-world purpose to them being there?
  75. stevefaulkner
    16:19
    @jordanlev correct (they are implemented with a generic group role which is not a landmark and only exposed aurally if the element has an accessible name e.g. aria-label="blah")
  76. jordanlev
    16:22
    @stevefaulkner great, thank you so much.
  77. stevefaulkner
    16:24
    @jordanlev mappings for HTML elements/attributes are defined here http://rawgit.com/w3c/aria/master/html-aam/html-aam.html
  78. stevefaulkner
    16:24
    work in progress
  79. jordanlev
    16:24
    I'll eagerly await your blog followup about the "when the #@$%! would I use article vs. section" question :)
  80. stevefaulkner
    16:25
    @jordanlev will try to get it done next week!
  81. jordanlev
    16:28
    @stevefaulkner I've been waiting for 5 years... another few weeks won't make a difference. Thanks again so much for your advice.
  82. stevefaulkner
    16:33
    @jordanlev glad i have been hepful
  83. stevefaulkner
    16:50
    hepful/helpful
  84. powrsurg
    16:52
    technically, keyboard users are different from screenreader users
  85. powrsurg
    16:53
    and why didn't my chat scroll until I typed that ...
  86. zakim-robot
    17:59
    [Jesse Beach, a11y] @jordanlev, I arrived at the same point a while back...just totally frustrated with the density and quantity of docs and specs. Then I started meeting the folks who write the docs and I learned that these people are really smart, really passionate and really dedicated.
  87. zakim-robot
    18:01
    [Jesse Beach, a11y] My opinion evolved thusly: for decades, folks have researched and written and speculated. They've been out ahead of implementation. Now, implementation, the devs, are showing up and reading the docs and trying to build the things they envisioned. And the reification of the ideas is running up against the physics of the web and all its current limitations.
  88. zakim-robot
    18:01
    [Jesse Beach, a11y] Instead of throwing up ours hands and throwing out the docs, it is instead time to close the loop and start iterating.
  89. zakim-robot
    18:02
    [Jesse Beach, a11y] We've seen this scenario, with great success, in the JavaScript and HTML word. HTML5 is essentially the closed XHTML loop. Spec writers got too far out ahead of implementation and the pullback was the compromise if HTML5
  90. zakim-robot
    18:04
    [Jesse Beach, a11y] I personally feel like Accessibility is now seeing this loop close; it'll take a few years, but we've got the investment of individuals and institutions coming together.
  91. zakim-robot
    18:08
    [Marcy Sutton, a11y] Re: the tabindex conversation above…welcome to Button Focus Hell! I have conversations about that nearly every day now. So glad the input-modality proposal is happening!
  92. zakim-robot
    18:13
    [Carolyn MacLeod, a11y] Re: the sections/landmarks/specs & evolution of the web meta-conversation above... could I have some support (or at least feedback! ;)) on a FF feature I'd like to see that would help sighted folk 'see' more of the structure of web pages? My recent comment in the FF bugzilla is here: https://bugzilla.mozilla.org/show_bug.cgi?id=670928#c59
  93. zakim-robot
    21:59
    [Dirk Ginader, a11y] Hey lovely A11y Slackers
  94. zakim-robot
    22:00
    [Marcy Sutton, a11y] hi @ginader :wave:
  95. zakim-robot
    22:00
    [Dirk Ginader, a11y] I remember reading an article a while ago that spoke about caveats of Words that are spead over multiple nodes. I.e.:
  96. zakim-robot
    22:00
    [Dirk Ginader, a11y] <span>CA</span>LIFORNIA
  97. zakim-robot
    22:01
    [Dirk Ginader, a11y] hey @marcysutton :simple_smile:
  98. zakim-robot
    22:02
    [Dirk Ginader, a11y] Does anybody remember that article or the gist of it? Will some screenreaders choke on it? Any workarounds?
  99. zakim-robot
    22:19
    [Dirk Ginader, a11y] So far Chromevox chokes on everything I throw at it
  100. zakim-robot
    22:20
    [Dirk Ginader, a11y] <button arial-label="CALIFORNIA"><b>CA</b>LIFORNIA</button>
  101. zakim-robot
    22:20
    [Dirk Ginader, a11y] doesn’t work either
  102. zakim-robot
    22:20
    [Dirk Ginader, a11y] there HAS to be a solution, no?
  103. zakim-robot
    22:21
    [ccwilcox, a11y] Just to be clear, you’re trying to add styling to “CA” and only want screen readers to say “California?"
  104. zakim-robot
    22:21
    [Dirk Ginader, a11y] exactly! It’s meant to visually highlight partial search results
  105. zakim-robot
    22:31
    [Alice Boxhall, a11y] @ginader I assume the "arial-label" typo above isn't in your actual code?
  106. zakim-robot
    22:32
    [Dirk Ginader, a11y] F***k
  107. garcialo
    22:32
    =)
  108. zakim-robot
    22:32
    [Dirk Ginader, a11y] Face meet Palm
  109. zakim-robot
    22:32
    [Alice Boxhall, a11y] Hello exact point I was making last night
  110. zakim-robot
    22:32
    [Dirk Ginader, a11y] :stuck_out_tongue:
  111. zakim-robot
    22:33
    [Alice Boxhall, a11y] Also hello reason why so many of us programmers are such anal pedants
  112. zakim-robot
    22:33
    [Alice Boxhall, a11y] But in all seriousness you shouldn't need to resort to aria-label in this case, in an ideal world
  113. zakim-robot
    22:34
    [Dirk Ginader, a11y] yeah i agree
  114. zakim-robot
    22:34
    [Dirk Ginader, a11y] <span aria-label="California"><b>CA</b>LIFORNIA</span></span>
  115. zakim-robot
    22:35
    [Dirk Ginader, a11y] this example works in Chromevox
  116. zakim-robot
    22:35
    [Dirk Ginader, a11y] ignore the double closing span...
  117. zakim-robot
    22:35
    [Alice Boxhall, a11y] What happens in other screen readers?
  118. zakim-robot
    22:35
    [Alice Boxhall, a11y] Are you on a Chromebook by any chance?
  119. zakim-robot
    22:36
    [Dirk Ginader, a11y] no chromebook
  120. zakim-robot
    22:37
    [Dirk Ginader, a11y] testing on Voiceover right now
  121. zakim-robot
    22:38
    [Alice Boxhall, a11y] (was asking about Chromebook to see if you could try it in ChromeVox next, but ... I'm typing this on a Chromebook, so I should just try it!)
  122. zakim-robot
    22:39
    [Dirk Ginader, a11y] I tested in Chromevox in chrome OSX
  123. zakim-robot
    22:39
    [Dirk Ginader, a11y] Voiceover on chrome does the same thing
  124. zakim-robot
    22:41
    [Dirk Ginader, a11y] Voiceover on Safari as well
  125. zakim-robot
    22:41
    [Dirk Ginader, a11y] I’m ok with this at this moment
  126. zakim-robot
    22:41
    [Dirk Ginader, a11y] it’s double content but at least it reads properly
  127. zakim-robot
    22:48
    [Alice Boxhall, a11y] Yeah it's a bit of a shame.