Archive index

A11y Slackers Gitter Channel Archive 7th of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Mar 07 00:37
    [caesar] Q: how does everyone deal with the WCAG recommendation to provide warnings when links open in a new tab or window, when clients ask what conformance level it belongs to? Techniques G200 and G201 are attached only to Guideline 3.2, which is not a success critieria, and therefore has no conformance level.
  2. zakim-robot
    @zakim-robot
    Mar 07 00:57
    [jaredsmith] @caesar These aren't associated to success criteria because they're just general recommendations, not WCAG 'requirements'. Failing to provide this warning is not a WCAG failure.
  3. [caesar] I see, thanks
  4. zakim-robot
    @zakim-robot
    Mar 07 01:21
    [jessebeach] @alice I just had a bootcamper send me a screenshot of the AX Tree inspector in Chrome to prove that a component has a label
  5. [jessebeach] He was very matter-of-fact about it, like "of course this tool exists, that's how we build stuff, isn't it?"
  6. [jessebeach] :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap:
  7. zakim-robot
    @zakim-robot
    Mar 07 02:06
    [alice] @jessebeach OMG
  8. zakim-robot
    @zakim-robot
    Mar 07 13:59
    [andrewmacpherson] @caesar G200 relates to SC 3.2.5 Change on request, where it is listed in the "Additional Techniques (Advisory)" rather than sufficient techniques.
  9. [andrewmacpherson] @caesar Also see example 2 in F22 : " A user clicks on a link, and a new window appears. The original link has no associated text saying that it will open a new window". https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F22
  10. [andrewmacpherson] @caesar F22 is listed as a common failure of SC 3.2.5, which is level AAA.
  11. zakim-robot
    @zakim-robot
    Mar 07 17:41
    [shannon] Q: is there a standard or generally accepted format for online video captions?
  12. zakim-robot
    @zakim-robot
    Mar 07 17:46
    [conley] Depends on what you mean by "Standard". in my experience it depends on the video player being employed
  13. [conley] Some have better support than others

  14. [karlgroves] > Q: is there a standard or generally accepted format for online video captions?

    Web VTT

  15. zakim-robot
    @zakim-robot
    Mar 07 17:53
    [shannon] thanks so much! my question is on a very basic level - i’m wondering if there’s a sort of stylesheet that dictates how whether to use () or [] for environmental sound, dashes for speakers of camera, etc
  16. [seankeegan] Yes - check out the Captioning Key from the Described and Captioned Media Program (http://www.captioningkey.org/quality_captioning.html)
  17. [seankeegan] While somewhat specific to video (television), there are some general parameters to consider
  18. zakim-robot
    @zakim-robot
    Mar 07 19:47
    [sethkane] What is best practice for virtual cursor usage with screen readers around WAI patterns like this " i.e., Tab and Shift + Tab do not move focus outside the dialog. However, the window under a modal dialog is typically inert; users cannot interact with content outside the dialog window." It is easy to control the tab and shift tab but I am not sure we can or even should control the virtual cursors of screen readers? Thoughts???? #aria-patterns #screen-readers
  19. powrsurg
    @powrsurg
    Mar 07 20:10
    So how come if you give focus to an element with position fixed it will make the page jump so that the beginning of the element has focus, but the same is not done for absolute or relative elements?
  20. zakim-robot
    @zakim-robot
    Mar 07 22:48
    [caesar] Q: a client has created a section of information (including links) and given the parent <div> role="button". This is causing every element beneath it to read "button" because presumably they are inheriting the button role. What is the correct way of implementing something like this?
  21. zakim-robot
    @zakim-robot
    Mar 07 23:01
    [alice] @caesar Sounds like an accordion? https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
  22. [garcialo] @sethkane Check out the “Trap Screen Reader” section of the eBay Dialog MIND Pattern - https://ebay.gitbooks.io/mindpatterns/content/disclosure/dialog.html
  23. [garcialo] Basically you just need to make sure you trap it in the dialog while it’s open…other than that it should function like normal.
  24. zakim-robot
    @zakim-robot
    Mar 07 23:08
    [caesar] @alice indeed it is...
    https://owlui-accessibility.azurewebsites.net/search/flights?BookingPath=flight&SearchType=return&FlightLegs=%5B%7B%22locationFrom%22:6000630,%22locationTo%22:6000283,%22dateFrom%22:%222017-04-22T00:00:00%22,%22locationFromCode%22:%22SYD%22,%22locationFromType%22:3,%22locationToCode%22:%22HKG%22,%22locationToType%22:3%7D,%7B%22locationFrom%22:6000283,%22locationFromCode%22:%22HKG%22,%22locationFromType%22:3,%22locationTo%22:6000630,%22locationToCode%22:%22SYD%22,%22locationToType%22:3,%22dateFrom%22:%222017-04-28T00:00:00%22%7D%5D&PreferredFareGroup=E&DirectFlightOnly=0&IsInternational=1&TravellerConfiguration=1&FlexibleDates=false
  25. [caesar] Apologies for the long URL
  26. [caesar] For each flight row the entire panel serves as the accordion expand/collapse
  27. [caesar] Which is causing the other elements within the role to inherit the button role
  28. [alice] @ceasar Could they use that design patter advice, then?
  29. [caesar] The problem is the child links inheriting "button". The pattern assumes a "simple" toggle for the accordion row
  30. [caesar] So it's not really the accordion pattern that's the problem, but how to deal with a complex panel
  31. zakim-robot
    @zakim-robot
    Mar 07 23:18
    [alice] The pattern assumes you have a "heading", which you don't
  32. [alice] I wonder if you could do some trickery where the "flightSummaryBox_main" becomes the "heading"/toggle button, and you could add some extra info into the alt text on the image in there
  33. [alice] sorry - I mean _mainImage
  34. [caesar] Yeah, it definitely requires trickery of some sort. VO for example, takes the button role literally and every child element assumes the role of the parent, reading the entire panel contents as the accessibility text
  35. [alice] argh
  36. [alice] yeah you could make that image the "heading", and style the focus ring around the full row by hand
  37. zakim-robot
    @zakim-robot
    Mar 07 23:24
    [caesar] That makes sense.
  38. [caesar] Thanks!
  39. [alice] Hope it works!
  40. [alice] It seems like so much a11y craft is figuring out how to express novel UI in terms of familiar UI patterns from the 90s
  41. [caesar] Indeed. Or trying to convince developers not to use novel patterns when the familiar ones from the 90's are perfectly adequate (and possibly better). Haha....
  42. [caesar] E.g, the usability of this one is arguable, considering one has to understand that there are separate, smaller clickable regions inside the bigger one.
  43. zakim-robot
    @zakim-robot
    Mar 07 23:35
    [alice] Right
  44. [alice] Also I just realised faking out the focus ring is going to be problematic for zoom users
  45. [caesar] Oooh, yeah.
  46. [alice] syd-hkg heading and logo
  47. [alice] I wonder if you could restructure the HTML such that that becomes one "unit"
  48. zakim-robot
    @zakim-robot
    Mar 07 23:41
    [alice] actually I take it all back
  49. [caesar] I've been doing a lot of airline stuff lately, and in theory that section alone should read "Outbound flight on Air China, departing Sydney at 12:25pm, arriving in Hong Kong at 11:00am" so it would be better to have an invisible accessibility text as the heading and just make that whole thing role="presentation"
  50. [alice] this is less of an accordion and more of a disclosure widget for each thing
  51. [alice] with the "flight details" being the accessor for the disclosure widget
  52. [alice] I think you could get rid of the button role on the whole div altogether
  53. [alice] and the tabindex potentially
  54. [caesar] Interesting....
    https://www.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/
  55. [alice] then "flight details" would be the first tab stop
  56. [alice] you could give the "flightSummaryBox" a role of listitem or something
  57. zakim-robot
    @zakim-robot
    Mar 07 23:49
    [alice] then the click listener on the flightSummaryBox div becomes essentially just a huge click target for the "flight details" link/button
  58. [caesar] Interesting... getting a bit beyond my ken, but I'll pass that along to the devs and see what they think. Really appreciate the help and the deep dive!
  59. [alice] I hope it was of some use :) I'll be frank, I'm jet lagged and procrastinating on "real" work :p
  60. zakim-robot
    @zakim-robot
    Mar 07 23:56
    [caesar] Are you in Australia or just arrived elsewhere?