Archive index

A11y Slackers Gitter Channel Archive 18th of October 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Oct 18 15:32
    [lauraf] If anyone is using the Drupal CK editor accessibilty check, I posted a question about it on the drupal channel; mostly related to the lack of updates of the Quail library
  2. [cehfisher] @mgifford ^^
  3. zakim-robot
    @zakim-robot
    Oct 18 15:37
    [mgifford] Hi @lauraf The Drupal CK editor accessibility plugin needs to be rewritten because the Quail Library is no longer supported. Don’t use the plugin.
  4. [mgifford] This really should be taken down from the CKEditor site, because if nobody is maintaining the code, then you shouldn’t be using it.
  5. [mgifford] Thanks for the heads-up @cehfisher
  6. zakim-robot
    @zakim-robot
    Oct 18 15:59

    [alboss] Okay, folks, here is today’s opportunity to enjoy not being me.

    People far above me in the org chart are True Believers in a PPP (productivity prevention program) built on a Performance Metrics foundation. They employ an instrument of torture known as a “weeping board.” (Okay, they’don’t call it that; they call it a “tier board.” Whatever. A rose, by any other name, can be run through a gas chromatograph, it’s components broken down into numeric values, and displayed on a bar graph in a PowerPoint slide on a tier board, apparently. Which would be great if I were a botanist and not a Web developer.)

    So, I am supposed to display a simple chart that conveys our web accessibility successes and challenges, in a way that is meaningful, measurable, and simple. I have scans, of course, but they are complex and enormous. (Our site has about 25,000 pages.) I have an audit full of excellent suggestions, but it is narrative and not quantified. And I have one day. No pressure.

    Am I the only person on earth who has ever been granted the honor of getting to roll this particular boulder up the mountainside? Or is there already a reasonable approach I could employ?

    Let the answers flow toward me.

  7. [karlgroves] backs away slowly
  8. [rselzer] you could make a bar chart that just shows the number of aria attributes per page
  9. [karlgroves] What would that data mean?
  10. [rselzer] haha nothing really
  11. [rselzer] but it'd shut em up
  12. zakim-robot
    @zakim-robot
    Oct 18 16:04
    [clairebones] i worked on a project once that marked accessibility success against the WCAG AA guidelines, i.e. green if we met it, red if not, etc. doesn't cover every concern your project probably has but at least it's some sort of metric?
  13. [karlgroves] That’s a good direction, but it doesn’t really account for the WCAG SCs that are failing, how often they fail, and how severly they fail
  14. [karlgroves] Of course, given the turnaround time, its a good plan
  15. [alboss] @clairebones That was my original plan. Our scanning tool helped me out by redesigning everything and destroying any chance at longitudinal data (thanks). Even before that, progress wasn’t visible on a graph because of the sheer volume of our site. I’d have to change the scale to something bogus just to make the change visible.
  16. zakim-robot
    @zakim-robot
    Oct 18 16:10

    [karlgroves] Small sales pitch warning:

    Given you have 25000 pages, you could test 9991 of them with Tenon. This would give you a Confidence level of 99% and Confidence interval of 1.

    Communicate not just error rates & types but Density:
    http://blog.tenon.io/issue-density-as-a-performance-indicator/

    You could possibly “Grade” them based on their average Density
    http://blog.tenon.io/how-to-grade-a-page-tested-with-tenon-io/

    Then, on your slide, put a big fat disclaimer that automated testing isn’t a complete picture

  17. zakim-robot
    @zakim-robot
    Oct 18 16:16
    [ghanek] There is a project by some U of Illinois to create a "plugin" for the CKEditor (v4 framework, I think) to put accessibility in front of the editor workflow. (info and link to github repo on website)
    Might be of interest...
    https://a11yfirst.library.illinois.edu/
  18. zakim-robot
    @zakim-robot
    Oct 18 17:48
    [lefthandev] Hey all. I'm looking for interesting / decent implementations of input type="range" sliders out there in the wild. Primarily to see what's possible whilst keeping it cool for school with accessibility. Any examples come to mind? Thanks.
  19. zakim-robot
    @zakim-robot
    Oct 18 18:20
    [car] @lefthandev Haven't tried this, but @higley has a slider: https://codepen.io/smhigley/pen/ObWbdy

  20. [car] I have a <table> element that needs to be marked up as a tree. (I know. Don't ask. No, I can't change it into ul or div. Because 6 year old reasons. :( )

    Not sure where to put the roles...

    *Option 1)* add a div parent with role="tree"; put role="presentation" on the <table>; role="group" on the <tr> that represent branches; role="treeitem" on the <tr> that represent leaves.

    *Option 2)* put role="tree" on the <table>; role="group" on the <tr> that represent branches; role="treeitem" on the <tr> that represent leaves.

    *Option 3)* something else?

    Each <td> contains <a href="valid/link" tabindex="-1">.

    Do the <td>s need role="presentation"?

    Has anyone ever done this crazy thing before? ;)

  21. [svinkle] @lefthandev Here’s one from @devonpersing https://codepen.io/dpersing/pen/QMpNae thumbsup emoji
  22. [ugi] @lefthandev I’d also recommend adding +/- buttons, so that you don’t rely on swipes on mobile devices, and drag&drop on desktop.
  23. zakim-robot
    @zakim-robot
    Oct 18 18:30
    [jhetrick] I recently learned that at least some AT will read CSS-inserted content. is it better to move CSS-generated content into the DOM proper, and then hide it (or not) from AT explicitly?
  24. [jhetrick] Specific case I’m dealing with: A web form with required fields, with the input element marked with the required attribute, and the label element appended with “(required)” via CSS ::after content. Some AT picks up on the required attribute and also the CSS-inserted text, so it announces the required state twice, e.g. “First Name (required), required.”
  25. zakim-robot
    @zakim-robot
    Oct 18 18:37
    [lefthandev] @car @svinkle @ugi Thanks all. For my use case the slider supplements / augments the core input element which is a text input. I noticed that the WAI-ARIA pattern has variable support (eg: it doesn't work on VoiceOver iOS at present).
  26. [svinkle] ^^True, mobile support is totally whack. Will need to wait for JS hardware support before we can use that pattern.
  27. [lefthandev] @svinkle +1: Ever seen a sane implementation of a native input type range with a tooltip on the thumb bit?
  28. zakim-robot
    @zakim-robot
    Oct 18 18:45
    [svinkle] Perhaps…
  29. zakim-robot
    @zakim-robot
    Oct 18 19:05
    [cmegown] @jhetrick as far as i'm aware the best practice is to keep pseudo elements (before/after) to purely decorative purposes
  30. zakim-robot
    @zakim-robot
    Oct 18 19:28
    [ugi] @lefthandev @svinkle IE11 does that :)
  31. [ugi] @jhetrick https://www.w3.org/TR/WCAG20-TECHS/F87.html
  32. zakim-robot
    @zakim-robot
    Oct 18 20:19
    [backwardok] is there a way to group items in such a way for on web for ios VO such that it will treat those items as a group and not go in unless you specify?
  33. [backwardok] i have a calendar that has several dates you can choose from, and if you were using a keyboard, you could tab out from the individual dates
  34. [backwardok] but on VO for iOS on its own, i’m in a never ending loop of swiping through dates
  35. [cameron] @backwardok are you using the rotor to set navigation groups?
  36. [cameron] if you two-finger pinch and rotate, you can change the granularity of navigation
  37. [cameron] on iOS
  38. [cameron] https://support.apple.com/en-us/HT204783
  39. [backwardok] mm i’m not seeing anything that would actually allow me to bypass a group of content
  40. [backwardok] navigating by container will still get me to the next date
  41. zakim-robot
    @zakim-robot
    Oct 18 20:24
    [cameron] hm, I’m thinking about landmarks
  42. [cameron] (thinking face emoji)
  43. [backwardok] also, would each month be appropriate as a landmark? if i were to set role="group", i noticed that iOS VO doesn’t even call out the group
  44. [backwardok] OSX VO does though
  45. [cameron] landmarks might be a poor choice on reflection
  46. [ugi] @backwardok Mobile VoiceOver always threat items in block links as individual links. so far, the only way I was able to group items was to use <button> instead of <a> ¯\_(ツ)_/¯
  47. [cameron] what about wrapping the links in a list
  48. [cameron] ‘ol’
  49. [cameron] the rotor supports a bunch of navigation options btw, including lists
  50. zakim-robot
    @zakim-robot
    Oct 18 20:29
    [cameron] @backwardok is there a link you can share?
  51. [ugi] @backwardok http://fyvr.net/a11y/block-level-links.html
  52. [backwardok] @ugi what I’m reading for that is that there’s no good solution for things getting read individually for ios VO :p
  53. zakim-robot
    @zakim-robot
    Oct 18 20:34
    [backwardok] let me see if i can find a “simple” example
  54. [backwardok] http://airbnb.io/react-dates/?selectedKind=DayPicker&selectedStory=single%20month&full=0&down=1&left=1&panelRight=0
  55. zakim-robot
    @zakim-robot
    Oct 18 20:40
    [backwardok] there is a separate issue of non yet visual dates a month ahead and behind can be swiped to
  56. [cameron] so this is a table, which in line with other accessibility examples out there
  57. [cameron] for example http://oaa-accessibility.org/examplep/datepicker1/
  58. [jhetrick] @cmegown @ugi thanks, that helps! I’ll check out that link. sounds like we need to get away from CSS content for this
  59. [backwardok] i guess the simple answer would be that once you select a date, the input would close and that date would be selected and the calendar just goes away
  60. [cameron] that behavior also seems conventional for datepickers
  61. [cameron] in general I mean
  62. [backwardok] hmm i just opened up that date picker example in ios VO and actually can’t use the date picker calendar
  63. zakim-robot
    @zakim-robot
    Oct 18 20:45
    [backwardok] it’s not possible to swipe to a different date
  64. [cameron] mm, let me peek at jquery-ui’s widget then, follows the same convention
  65. [cameron] https://jqueryui.com/datepicker/
  66. zakim-robot
    @zakim-robot
    Oct 18 20:51
    [cameron] the jquery ui example behaves like you described, with the exception of setting focus back to the field on closing
  67. [backwardok] hmm ok so i think the general idea is that it’s not worth trying to figure out how to bypass the calendar and instead just get out of the calendar once a date is chosen
  68. zakim-robot
    @zakim-robot
    Oct 18 20:57
    [trishasalas] Hello all! I've been asked for my 'credentials' in Digital Accessibility. Other than the audits I've done and studying for the CPACC test I don't have any formal training. What would you do?
  69. [info] Resources for accessible date pickers: http://www.webaxe.org/accessible-date-pickers/
  70. zakim-robot
    @zakim-robot
    Oct 18 21:52
    [lefthandev] Anyone seen (doesn't hold breath) an accordion widget (aria-multiselectable="false") where the triggering element to open each respective section is a radio input?
  71. zakim-robot
    @zakim-robot
    Oct 18 22:01

    [svinkle] @trishasalas I don’t know if anyone has any formal training. Accessibility isn’t taught in schools nor are there any “certificates” that I know of. Personally, I have no proof other than looking at my Twitter profile or GitHub projects that reflect my interest, experience, or past projects to figure out what I “may” know.

    It’s a good question, though. Perhaps someone else will have a better response.

  72. [svinkle] @lefthandev Might ne some on CodePen? I’d hope there wouldn’t be any though; not a good use of radio controls.
  73. zakim-robot
    @zakim-robot
    Oct 18 22:23
    [info] @lefthandev I heard about one a few months ago; can’t remember where and don’t want to! :) @svinkle
  74. Sean Elliott
    @seanus1138
    Oct 18 22:24
    @trishasalas @svinkle check this out http://www.mediaaccess.org.au/digitalaccessibilityservices/services/education-and-training/pcwa/ its a online course when complete gives you a professional certificate.
  75. zakim-robot
    @zakim-robot
    Oct 18 22:26
    [info] There’s a graduate Inclusive Design program at OCAD in Toronto https://www.ocadu.ca/academics/graduate-studies/inclusive-design.htm
  76. zakim-robot
    @zakim-robot
    Oct 18 23:16
    [caesar] I think IAAP offers "certification" of sorts
  77. [caesar] http://www.accessibilityassociation.org/
  78. [caesar] Specifically: http://www.accessibilityassociation.org/certification
  79. [caesar] Oh wait that's what CPACC is, that you already mentioned :facepalm:
  80. zakim-robot
    @zakim-robot
    Oct 18 23:32

    [karlgroves] Just saw this. I just unleashed a tweet storm on this.

    Also, see http://www.karlgroves.com/2015/08/03/on-certification/