These aren't the SCs you're looking for...

(mis)adventures in WCAG 2.x interpretation and audits

The Paciello Group

These aren't the SCs you're looking for...

(mis)adventures in WCAG 2.x interpretation and audits

Patrick H. Lauke

about me...

what really grinds my gears...

...and far too often, the same question always bubbles up

“which success criterion can I fail this under?”

Meme picture: FAIL ALL THE THINGS

...it depends™

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

overstep the boundaries of WCAG SCs

claim something has to be fixed/changed "to pass WCAG" when it normatively doesn't

Animation loop from Judge Dredd (1995) - Dredd shouting 'I am the law'

we are not lawyers (or judges)

but our audits and evaluations often have some legal dimension to them.

...of course, this is easier said than done

WCAG is built on the idea that success criteria can be evaluated clearly, unambiguously and consistently...

...but that's not always the case

only a few cherry-picked examples...

otherwise we'd be here a few more hours

WCAG success criteria are often misunderstood and/or misinterpreted

leads to wrong, or at least inconsistent, error reporting

Animation loop from Star Wars - Obi Wan waving his hand and saying: these aren't the droids you're looking for...

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.

<input type="text">

passes 2.4.6 Headings and Labels

fails 3.3.2 Labels or Instructions

fails 4.1.2 Name, Role, Value

<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

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.

<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

<p>First name</p>
<input type="text" aria-label="First name">

passes 3.3.2 Labels or Instructions

passes 4.1.2 Name, Role, Value

passes (arguably) 1.3.1 Info and Relationships

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

<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

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

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.

WCAG has a few strange omissions...

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?

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

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

WCAG success criteria and cascades of fail...

cascade of fail

<a href="..."> <img src="..."> </a>

fails multiple criteria...need to consistently report these, but easy to forget and tedious to do...

"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)?

auditor education / consistency problems...

internal training and resources can help

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

WCAG 2.x is not perfect

written by well-meaning, but fallible humans (after all)

WCAG success criteria can be subjective...

subjective interpretation?

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

"I think what the founding fathers of WCAG meant to say..."
Animation loop from The Big Lebowski: the dude sitting at the bowling hall, shaking his head

understanding documents and techniques try to clarify...

normative versus
non-normative

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

beyond the need for subjective interpretation

WCAG success criteria can have odd loopholes...

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

Two identical looking 'Sign in' buttons - but the one on the right has a single light pixel added

a single extra pixel shown on focus is arguably visible

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

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: [...]
Two identical looking 'Sign in' buttons - but the one on the right has a single light pixel added; this one pixel is darker than in the previous example

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

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

Three controls labeled 'one', 'two' and 'three'; the middle one, focused, has a slightly light green background, while the others have a light gray background; the green and gray colors are immediately adjacent, with no gap between them

fails 1.4.11 Non-text Contrast

Three controls labeled 'one', 'two' and 'three'; the middle one, focused, has a slightly light green background, while the others have a light gray background; the controls are separated by grey borders, meaning the very similar light green and light gray are not adjacent

passes 1.4.11 Non-text Contrast

Two identical looking 'Sign in' buttons - the one on the left is light green, the one on the right light gray

passes 1.4.11 Non-text Contrast.

but wait, does it fail 1.4.1 Use of Color?

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

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?

Animation loop from the Matrix: Morpheus in the kung-fu dojo simulation, doing the 'come at me' hand gesture

...but we'll fix it in WCAG 2.2 (?)

2.4.11 Focus Visible Enhanced (Level AA)

SCs that are overly specific...

and then end up only applying to very specific cases

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

Screenshots from a reflow example where there are both horizontal and vertical scrollbars at any window size *except* when *exactly* at 320 CSS pixel width

@media (width: 320px) { ... }

codepen.io/patrickhlauke/pen/ZZqzaB

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

Screenshots from a text spacing example where text content is cut off in a container *except* when line height is *exactly* at 1.5

use JavaScript to detect line height and fix only if 1.5 or higher

codepen.io/patrickhlauke/pen/jgVGOp

even after years of auditing,
I sometimes have weird moments of realisation

seeing SCs, and what they say/apply to, in a new light

Meme picture 'sudden clarity Clarence': young man at a party staring into the distance as if he is experiencing an epiphany

same discussions about applicability and interpretation even happen within the AGWG

WCAG success criteria need to be testable ... but this doesn't allow for nuance
Screenshots from a reflow example where there are both horizontal and vertical scrollbars at any window size *except* when *exactly* at 320 CSS pixel width

@media (width: 320px) { ... }

codepen.io/patrickhlauke/pen/ZZqzaB

WCAG SCs are binary
you either
pass or fail

Color Contrast Analyser, showing that #777777 on #FFFFFF fails with contrast just below 4.5:1, but #767677 on #FFFFFF passes at exactly 4.5:1 - but visually the two greys are indistinguishable

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

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

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

loopholes, omissions and subjective requirements can and will be exploited

auditors aren't the only ones who try to find these gaps...

Classic 'Bobby Approved' badge image

...so what do we do about this?

Color Contrast Analyser, showing that #777777 on #FFFFFF fails with contrast just below 4.5:1, but #767677 on #FFFFFF passes at exactly 4.5:1 - but visually the two greys are indistinguishable

sometimes the values are just lines in the sand...

Screenshot of W3C WCAG GitHub repository issues

join the debate/discussion (more open nowadays)

github.com/w3c/wcag/issues

Screenshot of W3C ACT Rules Community Rules

more consistent Accessibility Compliance Testing (ACT)

w3.org/community/act-r

Composite screenshot of W3C ACT Rules Community pages on GitHub, showing a selection of rules, and the start of a specific rule (in this case, 'Heading is descriptive')

act-rules.github.io/rules

Screenshot of W3C Silver Task Force of the AGWG page

the next generation of accessibility guidelines...

w3.org/WAI/GL/task-forces/silver

Screenshot of W3C Silver Task Force wiki's conformance section

moving away from binary pass/fail conformance (or trying)

www.w3.org/.../#Silver_Conformance

Screenshot of one of the proposed scoring examples ... utterly confusing spreadsheet of points, weighting of issues, etc.

...in the meantime though...

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

whether you're a developer or an auditor doing an evaluation

Meme picture from The Big Lebowski - Walter pointing his gun, with superimposed text: This isn't Nam, there are rules

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

be conservative in your
pass / fail assessments

document your hesitation, clearly state when something's "more of a suggestion" than a hard failure

further reading...

join my WCAG Trash Panda Webring:

The Paciello Group

@patrick_h_lauke
github.com/patrickhlauke/
paciellogroup.com
splintered.co.uk

Creative Commons: Attribution Non-Commercial Share-Alike