Archive index

A11y Slackers Gitter Channel Archive 11th of April 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Apr 11 00:12
    [shawn.henning] We have a chart showing a years worth of data. A developer was asking how best to surface the daily data. I suggested breaking it into tabular data by month/week with each day of the week being a column header in the table.
  2. [shawn.henning] Have others seen similar data surfaced to screen readers? Thoughts on best practices?
  3. [shawn.henning] Each day value is a single number so I think announcing seven values starting with Sunday at the beginning of each month then headlining with week1, week 2, etc.
  4. zakim-robot
    @zakim-robot
    Apr 11 00:19
    [herin] @shawn.henning : A data table with filter support will be good. You can also have buttons to change the views to year, month, week, day/
  5. [herin] There might be chances you need to show data from a range : from date to To date
  6. [herin] A filter could include this range values
  7. zakim-robot
    @zakim-robot
    Apr 11 01:47
    [shawn.henning] Thank you @herin
  8. zakim-robot
    @zakim-robot
    Apr 11 03:59
    [herin] Hi All, if the application framework does not support Aria-required, will the (required) indicator in the Label be enough for compliance?
  9. [herin] Initially we had * as mandatory indicator. But, advised to change to "required" for screen reader support
  10. [herin] Now, we have issues as the structs 1.38 custom tags does not support aria attributes. Will be a complete rewrite of the tags otherwise
  11. [garcialo] @herein “(required)” in the label is great
  12. [herin] If the error messages are displayed on the top of the page and no support for aria-invalid, adding a tab-index to the error message and moving focus - will that be enough?
  13. [herin] Thank you @garcialo
  14. [caesar] @herin that is definitely one of the sufficient techniques: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H90
  15. [garcialo] You could also do the converse and have all fields be required unless labeled as “(optional)”
  16. [garcialo] er…inverse? I forget which word means what…I’m tired :p
  17. zakim-robot
    @zakim-robot
    Apr 11 04:04
    [herin] Thanks @caesar.
  18. [herin] Will go with the required as there are only few. But a good tip.Thanks @garcialo
  19. [herin] If the error messages are displayed on the top of the page and no support for aria-invalid, adding a tab-index to the error message and moving focus - will that be enough?
  20. [garcialo] The error message should only be in the tab index if they’re interactive.
  21. [herin] When you say interactive - like linked to the error fields?
  22. [garcialo] interactive as in when the user activates it, something happens
  23. [garcialo] links, buttons, inputs
  24. [herin] get it
  25. [garcialo] so yeah, if they’re links to the error fields then they should be in the tab index natively since you should be using links to link them to the inputs :p
  26. zakim-robot
    @zakim-robot
    Apr 11 04:10
    [herin] Ha... you are right. Sometimes, i forget basic rules. (sweat smile emoji)
    Have you suggested any alternatives for the places where aria cannot be used?
  27. [herin] Server side validation error messages
  28. [caesar] https://www.w3.org/WAI/tutorials/forms/notifications/#listing-errors
  29. [garcialo] I’ve not particularly thought of that specifically
  30. [herin] @caesar : Role="Alert" does not work when the page is reloaded
  31. [herin] We have some design issues
  32. [herin] Thanks for the link.
  33. [herin] Will read and see what we can do
  34. [caesar] Are you reloading the page dynamically though?
  35. [caesar] I assume yes.
  36. [herin] Yes. The server side validation and page reloads with the new error message
  37. [caesar] Because focus passing.
  38. [caesar] OK
  39. zakim-robot
    @zakim-robot
    Apr 11 04:15
    [herin] Thank you @caesar and @garcialo
  40. [caesar] Good luck!
  41. zakim-robot
    @zakim-robot
    Apr 11 08:10
    [becky] 1Appleaday
  42. powrsurg
    @powrsurg
    Apr 11 13:02
    I'm creating a demo to show off some a11y stuff to people that are only sorta familiar with it (they know to use labels, and know about some ARIA stuff). I put together the following codepen to show off setCustomValidity and the output element. Any other suggestions for it? http://codepen.io/powrsurg/pen/vxQQMx
  43. zakim-robot
    @zakim-robot
    Apr 11 14:16
    [kasiawasko] Hello! I am new to this channel :) Excited to learn more about a11y!
  44. luis garcia
    @garcialo
    Apr 11 14:17
    Welcome! Glad to have you. :)
  45. zakim-robot
    @zakim-robot
    Apr 11 14:19
    [kasiawasko] Thank you!
  46. luis garcia
    @garcialo
    Apr 11 14:50
    @kasiawasko Are you working in a11y already?
  47. Or were the duties just delegated to you in addition to your normal dev/design/qa duties? :p
  48. zakim-robot
    @zakim-robot
    Apr 11 15:17
    [quidkid] hey guys! for accessibility which is better, doing separate pages or having a tabbed layout? every page has a video
  49. stevefaulkner
    @stevefaulkner
    Apr 11 15:17
    afternoon slackers :+1:
  50. Aaron Leventhal
    @aleventhal
    Apr 11 15:18
    hi @stevefaulkner
  51. stevefaulkner
    @stevefaulkner
    Apr 11 15:20
    hey @aleventhal how goes work on chrome?
  52. zakim-robot
    @zakim-robot
    Apr 11 15:20
    [garcialo] Ugh, who let him out of his cage?
  53. Aaron Leventhal
    @aleventhal
    Apr 11 15:20
    pretty good i'm working on a treegrid
  54. seems unloved
  55. trying to harmonize spec, authoring guides and implementations
  56. like i used to do
  57. but treegrid never got enough love
  58. stevefaulkner
    @stevefaulkner
    Apr 11 15:22
    cool!
  59. zakim-robot
    @zakim-robot
    Apr 11 15:22
    [garcialo] @quidkid Both can be done accessibly. I think if both solutions work for everyone it really comes down to personal preference.
  60. Aaron Leventhal
    @aleventhal
    Apr 11 15:23
    The Mozilla folks are being very nice about working together with the idea that we should get more interop between implementations
  61. wouldn't that be nice
  62. ARIA is way too different between impls
  63. we'll see
  64. zakim-robot
    @zakim-robot
    Apr 11 15:24
    [quidkid] @garcialo thank you so much for responding! what about in terms of loading times? would it take too long to load a page if every tab had a video? i guess i might stick with separate pages to maintain back button functionality
  65. [garcialo] I’m not a developer; at least not enough to make recommendations about loading times. But generally speaking I’ve heard the word “lazy loading” which I think is probably something that could be done?
  66. [quidkid] @garcialo i’ll look into it! thank you!
  67. zakim-robot
    @zakim-robot
    Apr 11 15:29
    [garcialo] np
  68. stevefaulkner
    @stevefaulkner
    Apr 11 15:30
    @aleventhal there are too many interop issues :-( just been testing some different methods i tested for role=alert back in 2012 https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/ - good news is support is a lot more robust across browsers/OS/AT than it was back then, will write up when i get a chance
  69. Aaron Leventhal
    @aleventhal
    Apr 11 15:32
    I feel like it's going to be slow going and don't know what other projects I'll be working on
  70. but I'll try to help
  71. I think everyone wants the same thing, but needs concentrated effort by the community
  72. to get it in a better place
  73. stevefaulkner
    @stevefaulkner
    Apr 11 15:33
    agree
  74. Aaron Leventhal
    @aleventhal
    Apr 11 15:33
    Chrome is still new enough not be set in it's ways
  75. new enough on the screen reader scene, I guess
  76. zakim-robot
    @zakim-robot
    Apr 11 15:33
    [car] Good to have you back, @aleventhal. If you are working on normalizing ARIA across Chrome & FF, then I'm hopeful that good things will happen. :)
  77. stevefaulkner
    @stevefaulkner
    Apr 11 15:33
    glad that firefox are working with chrome, wouldn't expect otherwise though from that team
  78. Aaron Leventhal
    @aleventhal
    Apr 11 15:34
    Hi car, I don't know if there is a /whois on here ... who am I speaking to?
  79. /whois car
  80. nope
  81. zakim-robot
    @zakim-robot
    Apr 11 15:34
    [car] Car MacLeod - IBM ;)
  82. Aaron Leventhal
    @aleventhal
    Apr 11 15:34
    Nice, hi
  83. zakim-robot
    @zakim-robot
    Apr 11 15:34
    [car] howdy
  84. [car] I'm on the Slack side of the pipe. You are using gitter, I presume (since you look like a bot over here. ;)
  85. Aaron Leventhal
    @aleventhal
    Apr 11 15:37
    oh i like slack, i'll get that now
  86. zakim-robot
    @zakim-robot
    Apr 11 15:40
    [car] Ok. In Slack, you can click on someone's avatar/icon to see more about them. (kind of a /whois)
  87. zakim-robot
    @zakim-robot
    Apr 11 15:45
    [car] Ah! There you are! Welcome! :)
  88. [car] @aleventhal FYI, there's a bunch of other channels in Slack (only the general channel is piped to gitter). Here's the ones I follow:
  89. [car] Pasted image at 2017-04-11, 11:48 AM
  90. [aleventhal] omg
  91. [aleventhal] hehe
  92. stevefaulkner
    @stevefaulkner
    Apr 11 15:51

    @car

    FYI, there's a bunch of other channels in Slack (only the general channel is piped to gitter)

    Gitter is the proletariat channel ;-)

  93. powrsurg
    @powrsurg
    Apr 11 17:32
    Looks like the Chrome skip links bug has finally been fixed
  94. zakim-robot
    @zakim-robot
    Apr 11 18:21
    [ghanek] Seeking a keynote speaker for one day event at Indiana University (this IS a paid gig) aimed at the uni's web and app developers. Details in a thread in the #events channel here.
  95. zakim-robot
    @zakim-robot
    Apr 11 21:59
    [cordelia] In a project I’m working on, another engineer would like to use flex styling on a <table> for more flexibility around controlling column width. Testing this out with 5 SR + browser combinations, JAWS + IE11 is the only one that recognizes the table as a table, the rest assume it must not be a table because of its non tabular CSS. If we want to keep the flex approach, is adding ARIA roles to the table and each of its cells the only way to get SRs to treat the table like what it actually is?
  96. zakim-robot
    @zakim-robot
    Apr 11 22:05
    [sitaggart] @cordelia I've had limited success with table functionality in SR's when using ARIA attributes, on anything the SR doesn't think it an actual table. Not tried on a non-table CSS displayed table element though
  97. [cordelia] @sitaggart, interesting! i’ve actually had pretty good success getting table functionality out of ARIA attributes on non-table HTML elements
  98. [cordelia] but it seems tedious to have to add explicit roles to elements that already have those same roles implicitly
  99. [sitaggart] it's pretty annoying that AT does that to tables, to be honest
  100. [cordelia] it really is
  101. zakim-robot
    @zakim-robot
    Apr 11 22:10
    [cordelia] I wish there were a single property I could use to tell the AT, “No, I really did mean to use this <table> as a table, not as a generic layout element. I just want to use this layout CSS property to style the table nicely.”
  102. [marcysutton] can't you set flex on a parent element? or does it not behave the same way inside the table?
  103. [cordelia] Oh woah, that’s a good point.
  104. [cordelia] :bulb:
  105. [cordelia] I’ll try that!
  106. [marcysutton] might work, might not! haha.
  107. [cordelia] I’ve honestly never used flex before so this is a new issue for me.
  108. [sitaggart] and to be fair, my experiments are with role="grid", not role="table"
  109. [marcysutton] Flexbox is awesome, took me a while to get it figured out though. I found issues when flex was set on elements like buttons but if I set it on a parent or a child, it solved a lot of problems.
  110. [cordelia] (My experiments were with role="grid" aria-readonly="true")
  111. [cordelia] (Doesn’t role="table" not officially exist yet?)
  112. [cordelia] (Oh wait, it does in 1.1!)
  113. [cordelia] (I was looking at the wrong doc!)
  114. [sitaggart] yeah, it's 1.1 new
  115. [sitaggart] so probably not implemented yet ;)
  116. [sitaggart] foiled again
  117. [sitaggart] (most likely)
  118. [cordelia] haha yeah, here’s my test page where i’ve been experimenting: http://codepen.io/cordelia/pen/bqKwVp
  119. zakim-robot
    @zakim-robot
    Apr 11 22:16
    [cordelia] NVDA and VO not handling table role very well
  120. [sitaggart] Nice proto
  121. zakim-robot
    @zakim-robot
    Apr 11 22:21
    [cordelia] thanks! need to experiment more with grid role… but first will try marcy’s suggestion of just putting flex on the container. here’s hoping that solves it
  122. [marcysutton] you might need to set flex-direction or other flex child properties, but it should inherit into children...at least I'd hope it would
  123. zakim-robot
    @zakim-robot
    Apr 11 22:30
    [cordelia] Hm, I think having the <table> as an intermediary layer between the flex container and the table contents blocks all the layout goodness
  124. [cordelia] i’ll keep experimenting
  125. zakim-robot
    @zakim-robot
    Apr 11 22:59
    [cordelia] Yeah, I think flex contexts only apply to direct children. :\