Upgrade to Pro — share decks privately, control downloads, hide ads and more …

These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x interpretation and audits / a11yTO / 24 October 2019

These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x interpretation and audits / a11yTO / 24 October 2019

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...


Patrick H. Lauke

October 24, 2019

More Decks by Patrick H. Lauke

Other Decks in Technology


  1. These aren't the SCs you're looking for... (mis)adventures in WCAG

    2.x interpretation and audits Patrick H. Lauke / a11yTO / Toronto / 24 October 2019
  2. about me... ▪  principal accessibility engineer at The Paciello Group

    ▪  occasional W3C AGWG member ▪  WCAG trash panda ▪  known for my rants, not my brevity...
  3. what really grinds my gears... ▪  doing accessibility audits ▪

     advising and reviewing the work of other engineers doing audits ▪  being active on accessibility mailing lists (WebAIM, W3C, ...) ...and far too often, the same question always bubbles up
  4. “which success criterion can I fail this under?”

  5. None
  6. ...it depends™

  7. far too often, auditors clearly dislike something, and look for

    a justification to fail it ...
  8. overstep the boundaries of WCAG SCs claim something has to

    be fixed/changed "to pass WCAG" when it normatively doesn't
  9. None
  10. we are not lawyers (or judges) but our audits and

    evaluations often have some legal dimension to them. ▪  evaluations should be as objective as possible ▪  evaluations should be consistent ...of course, this is easier said than done
  11. WCAG is built on the idea that success criteria can

    be evaluated clearly, unambiguously and consistently... ...but that's not always the case
  12. only a few cherry-picked examples ... otherwise we'd be here

    a few more hours
  13. WCAG success criteria are often misunderstood and/or misinterpreted leads to

    wrong, or at least inconsistent, error reporting
  14. None
  15. 2.4.6 Headings and Labels (AA) Headings and labels describe topic

    or purpose. this doesn't mandate the use of headings and labels ... only that if a page uses headings and labels, they must be descriptive. it also doesn't mandate that headings and labels be correctly marked-up - that's the job of 1.3.1 Info and Relationships and (where it affects "accessible name" of controls) 4.1.2 Name, Role, Value . lastly, if labels aren't there, it's a 3.3.2 Labels or Instructions problem. “
  16. <input type="text"> passes 2.4.6 Headings and Labels fails 3.3.2 Labels

    or Instructions fails 4.1.2 Name, Role, Value
  17. <p class="heading1">I'm a heading</p> <p>First name</p> <input type="text"> passes 2.4.6

    Headings and Labels fails 1.3.1 Info and Relationships fails 4.1.2 Name, Role, Value
  18. 3.3.2 Labels or Instructions (A) Labels or instructions are provided

    when content requires user input. again, this doesn't mandate that labels be marked-up as <label> and properly associated with form controls - that's covered by 1.3.1 Info and Relationships and (where it affects "accessible name" of controls) 4.1.2 Name, Role, Value . “
  19. <p>First name</p> <input type="text"> passes 3.3.2 Labels or Instructions fails

    4.1.2 Name, Role, Value fails 1.3.1 Info and Relationships
  20. 2.1.1 Keyboard (A) All functionality of the content is operable

    through a keyboard interface [...] doesn't say anything about which keys are needed to operate controls/functionality “
  21. <a href="#" onclick="..." role="button">fake button</a> passes 2.1.1 Keyboard even though

    it doesn't respond to SPACE like real button would
  22. 3.2.3 Consistent Navigation (AA) Navigational mechanisms that are repeated on

    multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. this only normatively requires the relative order of navigation (in relation to other page components) to be consistent - nothing more. doesn't mandate that navigation should be same, work the same, etc across pages “
  23. 1.3.3 Sensory Characteristics (A) Instructions provided for understanding and operating

    content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. this only relates specifically to instructions ... and not whether or not sensory characteristics are used - this is covered by other SCs, like 1.4.1 Use of Color or even 1.1.1 Non-Text Content . “
  24. WCAG success criteria and cascades of fail ...

  25. cascade of fail <a href="..."> <img src="..."> </a> fails multiple

    criteria ...need to consistently report these, but easy to forget and tedious to do...
  26. "speculative" cascade of fail <div>Read more</div> fails 2.1.1 Keyboard ...

    but also 4.1.2 Name, Role, Value and if it acts as a link, also 2.4.4 Link Purpose (In Context) ?
  27. auditor education / consistency problems... internal training and resources can

  28. more problematic are issues caused by WCAG SCs that are

    vague , incomplete or otherwise lacking
  29. WCAG 2.x is not perfect written by well-meaning, but fallible

    humans (after all)
  30. WCAG success criteria can be subjective ...

  31. subjective interpretation? ▪   1.1.1 All non-text content [...] has

    a text alternative that serves the equivalent purpose - but what's the purpose? ▪   1.3.1 Information, structure, and relationships conveyed through presentation [...] - where do you draw the line? ▪   2.4.6 Headings and labels describe topic or purpose - what's "descriptive" exactly?
  32. <div class="footer"> ... </div> do you fail 1.3.1 Info and

    Relationships because they don't use <footer> or role="contentinfo" ? is it not clear from context? <a href="/">home</a> <a href="...">products</a> <a href="...">contact</a> do you fail 1.3.1 Info and Relationships because they didn't wrap this in a <ul> even when styled as an inline set of three links?
  33. "I think what the founding fathers of WCAG meant to

  34. None
  35. understanding documents and techniques try to clarify... normative versus non-normative

  36. understanding / techniques can't provide examples of all possible scenarios

  37. beyond the need for subjective interpretation WCAG success criteria can

    have odd loopholes ...
  38. 2.4.7 Focus Visible (AA) Any keyboard operable user interface has

    a mode of operation where the keyboard focus indicator is visible. but what does visible mean? it's not normatively defined... “
  39. a single extra pixel shown on focus is arguably visible

  40. WCAG 2.1 decided not to modify 2.0 SCs, patched loopholes

    with more SCs but these new SCs also ended up having some loopholes
  41. 1.4.11 Non-text Contrast (AA) The visual presentation of the following

    have a contrast ratio of at least 3:1 against adjacent color(s): ▪  User Interface Components: Visual information required to identify user interface components and states [...] ▪  Graphical Objects: [...] “
  42. much better...that pixel has a 3:1 contrast ratio now

  43. 1.4.11 Non-text Contrast (AA) The visual presentation of the following

    have a contrast ratio of at least 3:1 against adjacent color(s): [...] note that this only applies normatively to adjacent colors ... doesn't apply to contrast between different colors used for states of the same control “
  44. fails 1.4.11 Non-text Contrast

  45. passes 1.4.11 Non-text Contrast

  46. passes 1.4.11 Non-text Contrast. but wait, does it fail 1.4.1

    Use of Color ?
  47. 1.4.1 Use of Color (A) Color is not used as

    the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. but there's an escape clause in the non-normative F73 failure technique that tries to redefine, by the backdoor, what "color" means... “
  48. F73: Failure of Success Criterion 1.4.1 due to creating links

    that are not visually evident without color vision Note 1: Red and Pink are the same color (hue) but they have different lightness (which is not color). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater WAT? “
  49. None
  50. ...but we'll fix it in WCAG 2.2 (?) 2.4.11 Focus

    Visible Enhanced (Level AA)
  51. SCs that are overly specific... and then end up only

    applying to very specific cases
  52. 1.4.10 Reflow (AA) Content can be presented without loss of

    information or functionality, and without requiring scrolling in two dimensions for: ▪  Vertical scrolling content at a width equivalent to 320 CSS pixels ▪  Horizontal scrolling content at a height equivalent to 256 CSS pixels [...] meant to help low vision users that require up to 400% zoom, but ended up too specific - only normatively applies at those exact values “
  53. @media ( width: 320px ) { ... } codepen.io/patrickhlauke/pen/ZZqzaB

  54. 1.4.12 Text Spacing (AA) In content implemented using markup languages

    that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: ▪  Line height (line spacing) to at least 1.5 times the font size ▪  Spacing following paragraphs to at least 2 times the font size ▪  Letter spacing (tracking) to at least 0.12 times the font size ▪  Word spacing to at least 0.16 times the font size [...] only those exact values and over - if content breaks/stops working at line height of 1.4 instead of 1.5, not a failure... “
  55. use JavaScript to detect line height and fix only if

    1.5 or higher codepen.io/patrickhlauke/pen/jgVGOp
  56. even after years of auditing, I sometimes have weird moments

    of realisation seeing SCs, and what they say/apply to, in a new light
  57. None
  58. same discussions about applicability and interpretation even happen within the

  59. WCAG success criteria need to be testable ... but this

    doesn't allow for nuance
  60. WCAG SCs are binary you either pass or fail

  61. sometimes the values/thresholds are just arbitrary lines in the sand

  62. no weighting given to impact or frequency of a particular

    fail, or how bad a failure is off the mark sometime, you just want to say something's a minor or soft fail , but distinction doesn't exist
  63. fail a single SC and you can't really claim to

    be conformant
  64. loopholes , omissions and subjective requirements can and will be

    exploited auditors aren't the only ones who try to find these gaps...
  65. None
  66. ...so what do we do about this?

  67. None
  68. join the debate/discussion (more open nowadays) github.com/w3c/wcag/issues

  69. more consistent Accessibility Compliance Testing (ACT) w3.org/community/act-r

  70. act-rules.github.io/rules

  71. the next generation of accessibility guidelines... w3.org/WAI/GL/task-forces/silver

  72. moving away from binary pass/fail conformance (or trying) www.w3.org/.../#Silver_Conformance

  73. potentially complex scoring/rating system more nuanced but too complex ?

  74. ...in the meantime though...

  75. don't creatively reinterpret what an SC says to fit your

    agenda whether you're a developer or an auditor doing an evaluation
  76. None
  77. as auditor, you do your client a disservice by not

    making clear what is and isn't a normative failure ...what happens when a clued-up client rightly challenges your claim? all your other results lose credibility...
  78. be conservative in your pass / fail assessments document your

    hesitation, clearly state when something's "more of a suggestion" than a hard failure
  79. further reading...

  80. join my WCAG Trash Panda Webring : ▪  Fixes to

    WCAG 2.1 Understanding 2.4.6 and 3.3.2 #612 ▪  Edits to 135 failure #890 ▪  Proposal for color and contrast (1.3.1, 1.4.1, 1.4.3., 1.4.6, 1.4.11) #901 ▪  Should role button and input button be a WCAG fail if cannot be activated using space? #857 ▪  Does SC 1.4.11 require comparing focused and non-focused states #541 ▪  Ambiguity in understanding for 1.3.3 sensory characteristics #750 ▪  Bad/incomplete example for Understanding 3.3.2 #755
  81. ▪  "at least" should be "at most" in WCAG 2.1

    SC 1.4.12 #635 ▪  Expand 1.4.10 to apply 'down to' instead of 'at' #698 ▪  2.4.7 Focus Visible - what counts as "visible"? #302 ▪  Must the tooltip of icons match the accessible name? (for "Label in Name", SC 2.5.3) #891 ▪  Keyboard operation with assistive technology: 2.1.1 or 4.1.2? #878 ▪  Can title on links (e.g. linked icon) as sole source of accName ever pass 1.1.1? #867 (side discussion about high contrast mode and reponsibility of user agents) ▪  Error of the User Agents part of WCAG or not #866
  82. ▪  1.4.5 / 1.4.9 Image of Text and <text> inside

    SVGs #773 ▪  Revisiting imbalance between 1.2.4 Captions (Live) (AA) and 1.2.9 Audio- only (Live) (AAA) #795 ▪  ARIA in HTML conformance to conform WCAG ? #717 ▪  Failure technique F94 (1.4.4 resize text): remove "1280 pixels wide" step in test procedure #704 ▪  Contrast Ratio Math and Related Visual Issues #695 ▪  Include font weight for color contrast tests #665 ▪   Accessible P Tag Usage (WebAim)
  83. ▪  Must the tooltip of icons match the accessible name?

    (for "Label in Name", SC 2.5.3) #891 ▪  Are Reflow, Text Size and Orientation cumulative? #391 ▪  What does "support the following text style properties" mean (1.4.12)? #884 ▪  Does using the placeholder with a value alone pass 3.3.2 Labels or Instructions? #864 ▪  Using color ALONE as focus indicator #757 ▪  New SC for keyboard operation? #872
  84. @patrick_h_lauke github.com/patrickhlauke/ paciellogroup.com splintered.co.uk