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...

1. These aren't the SCs you're looking for...
(mis)adventures in WCAG 2.x interpretation and audits
Patrick H. Lauke / A11y Camp 2021

2. about me...
▪ principal accessibility specialist at TetraLogical
▪ previously at The Paciello Group (now TPGi)
▪ occasional W3C AGWG member
▪ WCAG trash panda

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, ...), twitter, Slack
...and far too often, the same question always bubbles up

4. “which success criterion can I
fail this under?”

6. far too often, auditors clearly
dislike something, and look for
a justification to fail it ...

7. overstep the boundaries of
WCAG SCs
claim something has to be fixed/changed "to pass WCAG"
when it normatively doesn't

9. 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

10. WCAG is built on the idea that
success criteria can be
evaluated clearly, unambiguously
and consistently...
...but that's not always the case

11. only a few
cherry-picked examples ...
otherwise we'd be here a few more hours

12. WCAG success criteria are often
misunderstood and/or
misinterpreted
leads to wrong, or at least inconsistent, error reporting

14. 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.
“

15. 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 .
“

16. <p class="heading1">More information</p>
▪ passes 2.4.6 Headings and Labels
▪ fails 1.3.1 Info and Relationships

17. <input type="text">
▪ passes 2.4.6 Headings and Labels
▪ fails 3.3.2 Labels or Instructions
▪ fails 4.1.2 Name, Role, Value

18. <p>First name</p>
<input type="text">
▪ passes 2.4.6 Headings and Labels
▪ passes 3.3.2 Labels or Instructions
▪ fails 1.3.1 Info and Relationships
▪ fails 2.5.3 Label in Name
▪ fails 4.1.2 Name, Role, Value

19. <p>First name</p>
<input type="text" aria-label="First name" >
▪ passes 2.4.6 Headings and Labels
▪ passes 3.3.2 Labels or Instructions
▪ passes 2.5.3 Label in Name
▪ passes 4.1.2 Name, Role, Value
▪ passes (arguably) 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. <a href="#" role="button">Activate using 'b'</a>
.addEventListener('keypress', function(e) {
if (e.key == 'b') { /* do something */ }
})
▪ passes 2.1.1 Keyboard
even though it can only be triggered using the letter b

23. 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
“

24. 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 .
Fixes for Understanding 1.3.3 Sensory Characteristics #767
“

25. SCs that are interpreted as their
opposites

26. 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.
both lines contain a link. but only in the first line is colour used.
the first cases fails 1.4.1 Use of Color, but the second passes
yes, it's rubbish, but no, can't argue that "color is used to convey..."
“

27. WCAG success criteria and
cascades of fail ...

28. cascade of fail
<a href="..."> <img src="..."> </a>
fails multiple criteria , in sequence:
▪ the image itself fails 1.1.1 Non-text content
▪ as a result, link lacks accessible name and fails 4.1.2 Name, Role, Value
▪ arguably, link also fails 2.4.4 Link Purpose (In Context)
need consistency in how this is reported

29. auditor education / consistency
problems...
internal training and resources can help

30. more problematic are issues caused by
WCAG SCs that are vague ,
incomplete or otherwise
lacking

31. WCAG 2.x is not perfect
written by well-meaning, but fallible humans...

32. WCAG success criteria can be
subjective ...

33. 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?

34. <div class="footer"> ... </div>
do you fail 1.3.1 Info and Relationships because they don't use
<footer> or role="contentinfo" ?
the footer may be styled differently from the rest of the page, but is its
purpose not clear from context?

35. <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 if this isn't conveyed through presentation ?

36. WCAG has a few strange
omissions ...

37. 2.4.4 Link Purpose (In Context) (AA)
The purpose of each link can be determined from the link text
alone or from the link text together with its programmatically
determined link context [...]
but what about buttons or similar?
is perhaps covered by 4.1.2 Name, Role, Value ?
“

38. 4.1.2 Name, Role, Value (A)
For all user interface components [...] the name and role can be
programmatically determined [...]
buttons need to have a programmatically exposed accessible name, but
doesn't mandate that the name needs to make sense / convey purpose
“

39. <p>...my amazing article...</p>
<p><a href="...">Read more</a></p>
▪ fails 2.4.4 Link Purpose (In Context)
<p>...my amazing product...</p>
<p><button>Add to cart</button></p>
▪ passes 4.1.2 Name, Role, Value
and arguably fails no other criterion, unless you want to drag out 2.4.6
Headings and Labels because the label is not "descriptive"?
or 1.3.1 Info and Relationships ?

40. "I think what the
founding fathers/mothers
of WCAG meant to say..."

42. understanding documents and techniques try to clarify...
normative versus
non-normative

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

44. beyond the need for subjective interpretation
WCAG success criteria can have
odd loopholes ...

45. 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...
“

46. a single extra pixel shown on focus is arguably visible

47. 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

48. 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: [...]
“

49. much better...that pixel has a 3:1 contrast ratio now

50. 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
“

51. fails 1.4.11 Non-text Contrast

52. passes 1.4.11 Non-text Contrast

53. passes 1.4.11 Non-text Contrast.
but wait, does it fail 1.4.1 Use of Color ?

54. 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...
“

55. 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
a note buried in a non-normative technique redefining what "color" means?
...at least now added to WCAG 2.2 understanding for 1.4.1 (see #1500)
“

57. ...but we'll fix focus WCAG 2.2
2.4.11 Focus Appearance (Minimum) (Level AA)
2.4.12 Focus Appearance (Enhanced) (Level AAA)

58. SCs that are overly specific...
and then end up only applying to very specific cases

59. 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
“

60. @media ( width: 320px ) { ... }
codepen.io/patrickhlauke/pen/ZZqzaB

61. 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...
“

62. use JavaScript to detect line height and fix only if 1.5 or higher
codepen.io/patrickhlauke/pen/jgVGOp

63. even after years of auditing,
I sometimes have weird
moments of realisation
seeing SCs, and what they say/apply to, in a new light

65. same discussions about
applicability and interpretation
even happen within the AGWG

66. WCAG success criteria need to
be testable ... but this doesn't
allow for nuance

67. WCAG SCs are binary
you either
pass or fail

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

69. 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

70. fail a single SC and you can't
really claim to be conformant

71. loopholes , omissions and
subjective requirements can
and will be exploited
auditors aren't the only ones who try to find these gaps...

73. ...so what do we do about this?

75. join the open debate/discussion github.com/w3c/wcag/issues
also a good place to look if there's pending clarifications

76. frustration: most efforts going towards new WCAG 2.2 SCs
rather than fixing what's broken in 2.0/2.1

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

78. act-rules.github.io/rules

79. github.com/canaxess/wcag-tests

80. less dense/technical than ACT Rules, but early days
same risk of "boiling the ocean"?

81. w3.org/TR/wcag-3.0
but note that it's still very early days on this
and it will be quite some time before legislation references 3.0 once it's actually a ratified recommendation...

82. but in the meantime ...

83. don't creatively reinterpret
what an SC says
to fit your agenda
whether you're a developer or an auditor doing an evaluation

84. "but unless it's reported as a
WCAG failure
the client won't change it"
then you have more fundamental problem...

85. 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!

86. be conservative in your
pass / fail assessments
document your hesitation, clearly state when something's
"more of a suggestion" than a hard failure

87. further reading...

88. 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

89. ▪ "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 responsibility
of user agents)
▪ Error of the User Agents part of WCAG or not #866

90. ▪ 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)

91. ▪ 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
▪ Does 3.3.2 mandate forms that have required/optional fields indicate this
visually? #923

92. ▪ 2.5.3: Must the visible label of site logos linking to the start page be
included in the accName? #722
▪ Exception for use of symbols as visible label in regard to 2.5.3 Label in
Name #598
▪ Understanding Label in Name #352
▪ @stevefaulkner: "<button aria-label="close">X</button> pass or fail WCAG
2.1 label in name?"

93. ▪ Overlap between 3.3.1 and 4.1.2? #696
▪ Problems with WCAG 2.0 Flash Definition #553
▪ WCAG 2.1 Understanding 2.3.1 - missing/vague dimension definitions
#585
▪ 1.4.5 / 1.4.9 Image of Text and inside SVGs #773
▪ Clarity on 1.4.11 as it applies to "Cards" #856
▪ Can ENTER on seach field be accepted as conforming alternative to
inaccessible control (loupe icon)? #2069

94. ▪ Cursor as sole focus indicator of inputs sufficient to meet 1.4.11? #680
▪ Looking for definitive clarification regarding 1.4.1 #1467
▪ 1.4.10: If original page must be scrolled and unchanged at 320px - is that a
violation of "Reflow"? #2063
▪ 1.4.11 Understanding: Additional focus indication of text inputs (default
caret visible) #1014
▪ Errata/clarification of 2.2.1 Timing Adjustable extension #1040
▪ Does the adjacent color clause of SC 1.4.11 apply when focus changes
swap colors but also are adjacent to the background ? #1775

95. @patrick_h_lauke
github.com/patrickhlauke/
tetralogical.com
splintered.co.uk