/
index.html
994 lines (799 loc) · 39.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>These (still) aren't the SCs you're looking for … / Patrick H. Lauke</title>
<link rel="stylesheet" href="shower/themes/redux-tetralite/styles/screen.css">
<link rel="stylesheet" href="shower/themes/redux-tetralite/styles/overrides.css">
<link rel="stylesheet" href="highlight/styles/sunburst.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="shower list">
<header class="caption">
<h1>These (still) aren't the SCs you're looking for …</h1>
<p>(mis)adventures in WCAG 2.x interpretation and audits</p>
</header>
<!-- -->
<section class="slide title" id="title"><div>
<div class="titlestrap">
<img src="./images/tetralogical-white.svg" alt="TetraLogical" width="200">
<h1>These (still) <strong>aren't</strong> the <abbr title="Success Criteria">SC</abbr>s you're looking for …</h1>
<p>(mis)adventures in WCAG 2.x interpretation and audits</p>
</div>
<p class="info">Patrick H. Lauke</p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h2>about me …</h2>
<ul>
<li>principal accessibility specialist at <a target=_blank rel=noopener href="https://www.tetralogical.com/">TetraLogical</a></li>
<li>previously at The Paciello Group (now TPGi)</li>
<li>occasional W3C AGWG member</li>
<li>WCAG <strong>trash panda</strong></li>
</ul>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h2 lang="fr">déjà vu?</h2>
<p>you may have already seen an earlier version of this talk …</p>
<p>even years later, <strong>the same question still bubbles up</strong><br><small>(on mailing lists, a11ySlack, mastodon, …)</small></p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>“which success criterion can I <strong>fail</strong> this under?”</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/fail-all-the-things.png" alt="Meme picture: FAIL ALL THE THINGS">
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>far too often, auditors clearly <strong>dislike</strong> something, and look for a <strong>justification to fail it</strong> …</p>
<p><small>and I get it … sometimes it's just to show how smart we are</small></p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>overstep the <strong>boundaries</strong> of WCAG SCs</p>
<p class="context">claim something has to be fixed/changed "to pass WCAG" when it normatively doesn't</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/dredd-law.gif" alt="Animation loop from Judge Dredd (1995) - Dredd shouting 'I am the law'">
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h2>we are not <strong>lawyers</strong> (or judges)</h2>
<p>but our audits and evaluations often have some legal dimension to them.</p>
<ul>
<li>evaluations should be as objective as possible</li>
<li>evaluations should be consistent</li>
</ul>
<p>… of course, this is easier said than done</p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>WCAG is built on the idea that <strong>success criteria</strong> can be evaluated clearly, unambiguously and consistently…</p>
<p class="context">… but that's not always the case</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>with <strong class="new">WCAG 2.2</strong> we now have<br>9 more SCs!</p>
<p class="context">… just more potential for confusion and misinterpretation?</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>only a few <strong>cherry-picked examples</strong></p>
<p class="context">but there's more where that came from…</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>WCAG success criteria are often <strong>misunderstood</strong> and/or <strong>misinterpreted</strong></p>
<p class="context">leads to wrong, or at least inconsistent, error reporting</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/droids.gif" alt="Animation loop from Star Wars - Obi Wan waving his hand and saying: these aren't the droids you're looking for …">
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.4.6 <strong>Headings and Labels</strong> (AA)</h2>
<blockquote><p>Headings and labels describe topic or purpose.</p></blockquote>
<p>this <strong>doesn't</strong> mandate the use of headings and labels … only that <strong>if</strong> a page uses headings and labels, they must be descriptive.</p>
<p>it also <strong>doesn't</strong> mandate that headings and labels be correctly marked-up - that's the job of <strong>1.3.1 Info and Relationships</strong> and (where it affects "accessible name" of controls) <strong>4.1.2 Name, Role, Value</strong>.</p>
<p>lastly, if labels aren't there, it's a <strong>3.3.2 Labels or Instructions</strong> problem.</p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><p class="heading1">More information</p></code></pre>
<ul>
<li><strong>passes</strong> 2.4.6 Headings and Labels</li>
<li><strong>fails</strong> 1.3.1 Info and Relationships</li>
</ul>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>3.3.2 <strong>Labels or Instructions</strong> (A)</h2>
<blockquote><p>Labels or instructions are provided when content requires user input.</p></blockquote>
<p>again, this <strong>doesn't</strong> mandate that labels be marked-up as <code><label></code> and properly associated with form controls - that's covered by <strong>1.3.1 Info and Relationships</strong> and (where it affects "accessible name" of controls) <strong>4.1.2 Name, Role, Value</strong>.</p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><input type="text"></code></pre>
<ul>
<li><strong>passes</strong> 2.4.6 Headings and Labels</li>
<li><strong>fails</strong> 3.3.2 Labels or Instructions</li>
<li><strong>fails</strong> 4.1.2 Name, Role, Value</li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><p>First name</p>
<input type="text"></code></pre>
<ul>
<li><strong>passes</strong> 2.4.6 Headings and Labels</li>
<li><strong>passes</strong> 3.3.2 Labels or Instructions</li>
<li><strong>fails</strong> 1.3.1 Info and Relationships</li>
<li><strong>fails</strong> 2.5.3 Label in Name</li>
<li><strong>fails</strong> 4.1.2 Name, Role, Value</li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><p>First name</p>
<input type="text" <mark>aria-label="First name"</mark>></code></pre>
<ul>
<li><strong>passes</strong> 2.4.6 Headings and Labels</li>
<li><strong>passes</strong> 3.3.2 Labels or Instructions</li>
<li><strong>passes</strong> 2.5.3 Label in Name</li>
<li><strong>passes</strong> 4.1.2 Name, Role, Value</li>
<li><strong>passes</strong> (arguably) 1.3.1 Info and Relationships</li>
</ul>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.1.1 <strong>Keyboard</strong> (A)</h2>
<blockquote><p>All functionality of the content is operable through a keyboard interface […]</p></blockquote>
<p>doesn't say anything about <strong>which keys</strong> are needed to operate controls/functionality</p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><a href="#" onclick="…" role="button">fake button</a></code></pre>
<ul>
<li><strong>passes</strong> 2.1.1 Keyboard</li>
</ul>
<p>even though it doesn't respond to <kbd>SPACE</kbd> like real button would</p>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<pre><code class="html"><a href="#" role="button">Activate using 'b'</a></code></pre>
<pre><code class="js">.addEventListener('keypress', function(e) {
if (e.key == 'b') { /* do something */ }
})</code></pre>
<ul>
<li><strong>passes</strong> 2.1.1 Keyboard</li>
</ul>
<p>even though it can only be triggered using the letter <kbd>b</kbd></p>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.3.3 <strong>Sensory Characteristics</strong> (A)</h2>
<blockquote><p>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.</p></blockquote>
<p>this only relates specifically to <strong>instructions</strong> … and <strong>not</strong> whether or not sensory characteristics are used for content - this is covered by other SCs, like <strong>1.4.1 Use of Color</strong> or even <strong>1.1.1 Non-Text Content</strong>.</p>
<p><small><a target=_blank rel=noopener href="https://github.com/w3c/wcag/pull/767">Fixes for Understanding 1.3.3 Sensory Characteristics #767</a></small></p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<h3>example: buttons with shapes or colours</h3>
<img src="images/1.3.3-pass.png" height="150" alt="Two sets of unlabelled buttons - in the first, one button is square, the other is round; in the second, both buttons are square, but one is red while the other is green">
<ul>
<li><strong>fail</strong> 1.1.1 Non-text Content (if there's no hidden text / accessible name)</li>
<li><strong>fail</strong> 1.4.1 Use of Color for the second set</li>
<li><strong>fail</strong> 4.1.2 Name, Role, Value (if there's no accessible name)</li>
<li><strong>pass</strong> <em>1.3.3 Sensory Characteristics</em> as there are no <strong>instructions</strong></li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<h3>example: buttons with shapes or colours</h3>
<img src="images/1.3.3-fail.png" height="150" alt="The same two sets of buttons, but this time there are instructions: 'To proceed, press the round button' and 'To proceed, press the green button'">
<ul>
<li><strong>fail</strong> 1.1.1 Non-text Content (if there's no hidden text / accessible name)</li>
<li><strong>fail</strong> 1.4.1 Use of Color for the second set</li>
<li><strong>fail</strong> 4.1.2 Name, Role, Value (if there's no accessible name)</li>
<li><strong>fail</strong> <em>1.3.3 Sensory Characteristics</em> as there <em>are</em> instructions</li>
</ul>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>SCs that are interpreted as their <strong>opposites</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.4.1 <strong>Use of Color</strong> (A)</h2>
<blockquote><p>Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.</p></blockquote>
<img src="images/use-of-color-links.png" alt="Two lines of black text, both containing a link each; the links aren't underlines; in the first line, the link is blue, while in the second line the link is black just like the text (and not discernible at all visually)">
<p>both lines contain a link. but only in the first line is <strong>colour</strong> used.</p>
<p>the first cases <strong>fails</strong> 1.4.1 Use of Color, but the second <strong>passes</strong></p>
<p>auditors pondering failing the previous example for <strong>not</strong> using colour …</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.3.1 <strong>Info and Relationships</strong> (A)</h2>
<blockquote><p>Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.</p></blockquote>
<p>auditors pondering failing the previous example for <strong>not</strong> conveying things through presentation …</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>SCs are <strong>non-commutative</strong><br>
<small>("if X, then Y" does not mean "if Y, then X")</small></p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
WCAG success criteria and <strong>cascades of fail</strong> …
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<h2>cascade of fail</h2>
<pre><code class="html"><a href="…"> <img src="…"> </a></code></pre>
<p>fails <strong>multiple criteria</strong>, in sequence:</p>
<ul>
<li>the image itself <strong>fails</strong> 1.1.1 Non-text content</li>
<li>as a result, link lacks accessible name and <strong>fails</strong> 4.1.2 Name, Role, Value</li>
<li><em>arguably</em>, link also <strong>fails</strong> 2.4.4 Link Purpose (In Context)</li>
</ul>
<p>need consistency in how this is reported</p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<strong>interrelated</strong> criteria …
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>3.1.1 <strong>Language of Page</strong> (A)</h2>
<blockquote><p>The default human language of each Web page can be programmatically determined.</p></blockquote>
<h2>3.1.2 <strong>Language of Parts</strong> (AA)</h2>
<blockquote><p>The human language of each passage or phrase in the content can be programmatically determined […]</p></blockquote>
<p>if you can't determine the language of the page, then you also can't determine the language of each passage or phrase.</p>
<p><strong>fail one, and you automatically fail the other …</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<h2>minimum and enhanced</h2>
<ul>
<li><strong>1.4.3</strong> Contrast (Minimum) → <strong>1.4.6</strong> Contrast (Enhanced)</li>
<li><strong>2.4.11</strong> Focus Not Obscured (Minimum) → <strong>2.4.12</strong> Focus Not Obscured (Enhanced)</li>
<li><strong>2.5.8</strong> Target Size (Minimum) → <strong>2.5.5</strong> Target Size (Enhanced)</li>
<li><strong>3.3.8</strong> Accessible Authentication (Minimum) → <strong>3.3.9</strong> Accessible Authentication (Enhanced)</li>
</ul>
<p><strong>fail one, and you automatically fail the other …</strong></p>
<p>need consistency in how this is reported (if you care about AAA)</p>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>auditor education / consistency problems …</p>
<p class="context">internal training and resources can help</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<small>more problematic are issues caused by</small><br>
WCAG SCs that are <strong>vague</strong>, <strong>incomplete</strong> or otherwise <strong>lacking</strong>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>WCAG 2.x is <strong>not perfect</strong></p>
<p class="context">written by well-meaning, but fallible humans …</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
WCAG success criteria can be <strong>subjective</strong> …
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<h2>subjective interpretation?</h2>
<ul>
<li><strong>1.1.1</strong> <q>All non-text content […] has a text alternative that serves the equivalent purpose</q> - but what's the purpose?</li>
<li><strong>1.2.2</strong> <q>Captions are provided …</q> - but do these captions need to be exact, identify speakers, etc.?</li>
<li><strong>1.3.1</strong> <q>Information, structure, and relationships conveyed through presentation […]</q> - where do you draw the line?</li>
<li><strong>2.4.6</strong> <q>Headings and labels describe topic or purpose</q> - what's "descriptive" exactly?</li>
</ul>
</div></section>
<!-- -->
<section class="slide code listing"><div>
<h2>what is a list?</h2>
<img src="images/links.png" alt="Three links, presented on a single line, separated by slashes">
<pre><code class="html"><a href="/">home</a>
<a href="…">products</a>
<a href="…">contact</a></code></pre>
<p>do you <strong>fail</strong> 1.3.1 Info and Relationships because they didn't wrap this in a <code><ul></code>, even if this isn't <q>conveyed through presentation</q>?</p>
<p>if you look hard enough, it's <del>turtles</del> <ins>lists</ins> all the way down</p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
WCAG has a few strange <strong>omissions</strong>, <strong>ambiguities</strong>, <strong>exemptions</strong> …
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.4.4 <strong>Link Purpose (In Context)</strong> (AA)</h2>
<blockquote><p>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 […]</p></blockquote>
<p>what counts as "programmatically determined link context"? do preceding headings count?</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
"I think what the<br><strong>founding fathers/mothers</strong><br>of WCAG meant to say …"
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/lebowski.gif" alt="Animation loop from The Big Lebowski: the dude sitting at the bowling hall, shaking his head">
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p class="context">understanding documents and techniques try to clarify …</p>
<p><strong>normative</strong> versus<br><strong>non-normative</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>understanding / techniques can't provide examples of <strong>all possible scenarios</strong>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p class="context">beyond the need for subjective interpretation</p>
<p>WCAG success criteria can have odd <strong>loopholes</strong>…</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.4.7 <strong>Focus Visible</strong> (AA)</h2>
<blockquote><p>Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.</p></blockquote>
<p>but what does <strong>visible</strong> mean? it's not normatively defined…</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/focus1b.png" alt="Two identical looking 'Sign in' buttons - but the one on the right has a single light pixel added">
<p>a single extra pixel shown on focus is arguably <strong>visible</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>WCAG 2.1 decided not to modify 2.0 SCs, <strong>patched</strong> loopholes with more SCs</p>
<p class="context">but these new SCs also ended up having some loopholes</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.4.11 <strong>Non-text Contrast</strong> (AA)</h2>
<blockquote><p>The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):</p>
<ul>
<li>User Interface Components: Visual information required to identify user interface components and states […]</li>
<li>Graphical Objects: […]</li>
</ul>
</blockquote>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/focus1c.png" alt="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">
<p>much better … that pixel has a <strong>3:1 contrast ratio</strong> now</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>… but we'll fix focus WCAG 2.2?</p>
<p class="context">2.4.11 <strong> Focus Appearance (Minimum)</strong> (Level AA)</p>
<p class="context">2.4.12 <strong> Focus Appearance (Enhanced)</strong> (Level AAA)</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>… but we'll fix focus WCAG 2.2!</p>
<p class="context"><del>2.4.11 Focus Appearance (Minimum) (Level AA)</del></p>
<p class="context"><del>2.4.12 Focus Appearance (Enhanced) (Level AAA)</del></p>
<p class="context">2.4.13 <strong> Focus Appearance </strong> (Level AAA)</p>
<p><small>Only at Level AAA … <strong>where success criteria go to die</strong> …</small></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.4.11 <strong>Focus Not Obscured (Minimum)</strong> (AA)</h2>
<div class="new">New in WCAG 2.2</div>
<blockquote><p>When a user interface component receives keyboard focus, the component is <strong>not entirely hidden</strong> due to author-created content.</p></blockquote>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<img class="bordered" src="images/focus-obscured.png" alt="Screenshot of a site with a sticky header - a link in the underlying main content has focus, and is half obscured by the header">
<p>classic example: sticky header …</p>
<p>this <strong>passes</strong> 2.4.11 Focus Not Obscured (Minimum) (AA)</p>
<p>but how far can we take the "not <strong>entirely</strong> hidden" aspect?</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<img class="bordered" src="images/focus-obscured-extreme2.png" alt="Screenshot of a site with a sticky header - a link in the underlying main content has focus, and is completely covered except for the bottom 1px border of the focus indicator just peeking out from underneath the header">
<p>arguably … not <strong>entirely</strong> hidden<br><small>(but is the focus indicator part of the component? <a target=_blank rel=noopener href="https://github.com/w3c/wcag/issues/3529">wcag/issues/3529</a>)</small></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.4.1 <strong>Use of Color</strong> (A)</h2>
<blockquote>
<p>Color is not used as the only visual means of <strong>conveying information</strong>, indicating an action, prompting a response, or distinguishing a visual element.</p>
</blockquote>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<img src="images/use-of-color-button-focus.png" alt="Two sign in buttons. The left button is gray. The right button is light green. An arrow points from the left button to the right button, with text 'Tab' above it">
<p>if your focus indication just changes colour, <strong>1.4.1</strong> likely applies</p>
<blockquote><p>If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater.</p></blockquote>
<p><small>used to be buried in technique F73, now in <a target=_blank rel=noopener href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">understanding for 1.4.1</a> (<a target=_blank rel=noopener href="https://github.com/w3c/wcag/pull/1500">#1500</a>)</small></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<img src="images/use-of-color-button-hover.png" alt="Two sign in buttons. The left button is gray. The right button is light green. The right button is hovered with a mouse pointer in the shape of a hand">
<p>beware: if you look hard enough, <strong>everything is a use of color</strong>.</p>
<p>is it essential for <strong>conveying information</strong> or just eye candy?</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/matrix-morpheus-kungfu.gif" alt="Animation loop from the Matrix: Morpheus in the kung-fu dojo simulation, doing the 'come at me' hand gesture">
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>SCs that are <strong>overly</strong> specific …</p>
<p class="context">and then end up <strong>only</strong> applying to very specific cases</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.4.10 <strong>Reflow</strong> (AA)</h2>
<blockquote><p>Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:</p>
<ul>
<li>Vertical scrolling content <strong>at a width</strong> equivalent to 320 CSS pixels</li>
<li>Horizontal scrolling content <strong>at a height</strong> equivalent to 256 CSS pixels</li>
</ul>
<p>[…]</p>
</blockquote>
<p>to help low vision users. should ideally have been "use responsive design"</p>
<p>instead, it was watered down to 400% zoom on a 1280×1024 display … and now <strong>only</strong> normatively applies at those <strong>exact values</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>1.4.12 <strong>Text Spacing</strong> (AA)</h2>
<blockquote><p>In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting <strong>all of the following</strong> […]:</p>
<ul>
<li>Line height (line spacing) to at least 1.5 times the font size</li>
<li>Spacing following paragraphs to at least 2 times the font size</li>
<li>Letter spacing (tracking) to at least 0.12 times the font size</li>
<li>Word spacing to at least 0.16 times the font size</li>
</ul>
<p>[…]</p>
</blockquote>
<p>only those <strong>exact values and over</strong></p>
<p>do you test the <strong>"at least"</strong> part here, and up to which values?</p>
<p>what if user changes just a few (e.g. just letter spacing)</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<blockquote>this bookmarklet didn't work to change text styles … can I fail this?</blockquote>
<p><strong>no you can't</strong> … the SC doesn't care if a user can or can't change the metrics, or if a particular bookmarklet or method doesn't work.</p>
<p>only that <em>if</em> the metrics are indeed changed, <em>then</em> content doesn't become unreadable or unusable.</p>
<p><small><a target=_blank rel=noopener href="https://github.com/w3c/wcag/pull/1687">Understanding 1.4.12: clarify the intent and author responsibility #1687</a></small></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>3.3.8 <strong>Accessible Authentication (Minimum)</strong> (AA)</h2>
<div class="new">New in WCAG 2.2</div>
<blockquote><p>A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step <strong>in an authentication process</strong> […]</p></blockquote>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="images/authentication.png" alt="Two forms side by side: on the left, a sign-in form with a CAPTCHA; on the right, the almost exact same form, but the submit button now says 'sign up' instead of 'sign in'">
<p>what counts as an <strong>authentication process</strong> …</p>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>SCs that are <strong>confusingly titled</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.5.8 <strong>Target Size (Minimum)</strong> (AA)</h2>
<div class="new">New in WCAG 2.2</div>
<blockquote><p>The size of the target for pointer inputs is at least 24 by 24 CSS pixels […]</p>
</blockquote>
<p>at first glance, the SC defines a minimum target size (it says so in the title)</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>2.5.8 <strong>Target Size (Minimum)</strong> (AA)</h2>
<div class="new">New in WCAG 2.2</div>
<blockquote><p>The size of the target for pointer inputs is at least 24 by 24 CSS pixels except where:</p>
<ul>
<li>Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target</li>
</ul>
…
</blockquote>
<p>the first exception turns this into <strong>Target <em>Spacing</em> (Minimum)</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/target-size-minimum.png" alt="A tiny square, representing a 1px by 1px target, with a superimposed circle noted to be 24px in diameter">
<p>no target too small – as long as it has <strong>spacing</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<h2>3.2.6 <strong>Consistent Help</strong> (A)</h2>
<div class="new">New in WCAG 2.2</div>
<blockquote><p>If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in <strong>the same order relative to other page content</strong>, unless a change is initiated by the user […]:</p>
</blockquote>
<p>the understanding document goes in depth listing and explaining help mechanisms, but the SC doesn't actually <strong>require</strong> any help mechanisms to be present at all …</p>
</div>
</div></section>
<!-- -->
<section class="slide listing"><div>
<div>
<img src="images/consistent-help.png" alt="Three views of the same webpage (the W3C homepage, overlaid with a semi-transparent white layer to deemphasise it), with a floating 'Support' button in three different positions">
<p>relative order here means just means a consistent "focus/reading order"</p>
<blockquote><p>"If the help item is visually in a different location, but in the same serial order, that is not helpful from a user's point of view, but it would not fail this criterion."</p></blockquote>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/gladiator-are-you-not-entertained.gif" alt="Animated gif: Russel Crow in Gladiator, after winning his first fight, arms wide holding a sword and addressing the crowd: 'are you not entertained?'">
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>even after years of auditing,<br>I sometimes have weird <strong>moments of realisation</strong></p>
<p class="context">seeing SCs, and what they say/apply to, in a new light</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/sudden-clarity-clarence.png" alt="Meme picture 'sudden clarity Clarence': young man at a packed party/rave, staring into the distance as if he is having an epiphany">
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p><strong>same discussions</strong> about applicability and interpretation even happen within the <abbr title="Accessibility Guidelines Working Group">AGWG</abbr></p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
WCAG success criteria need to be <strong>testable</strong> … but this doesn't allow for <strong>nuance</strong>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>WCAG SCs are <strong>binary</strong><br>you either<br>
<strong>pass</strong> or <strong>fail</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/color-contrast-comparison.png" alt="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">
<p>sometimes the values/thresholds are just arbitrary <strong>lines in the sand</strong> …</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>no weighting given to <strong>impact</strong> or <strong>frequency</strong> of a particular fail,<br> or <strong>how bad</strong> a failure is off the mark</p>
<p class="context">sometime, you just want to say something's a <strong>minor</strong> or <strong>soft fail</strong>, but distinction doesn't exist</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
fail <strong>a single SC</strong> and you can't really claim to be <strong>conformant</strong>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p><strong>loopholes</strong>, <strong>omissions</strong> and <strong>subjective</strong> requirements can and will be <strong>exploited</strong></p>
<p class="context">auditors aren't the only ones who try to find these gaps …</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img class="cover pixelated" src="images/bobbyapproved.png" alt="Classic 'Bobby v3.2 Approved' badge, with the comic-style british bobby/policeman with a wheelchair user symbol on his helmet">
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>… so <strong>what do we do</strong> then?</p>
</div>
</div></section>
<!-- -->
<section class="slide cover"><div>
<div>
<img class="cover" src="images/statler-and-waldorf.gif" alt="Animation loop from the Muppet Show - Statler and Waldorf in their balcony seat">
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/github-w3c-wcag-lauke.png" alt="Screenshot of W3C WCAG GitHub repository issues/pull requests, filtered for all open items involving me">
<p>join my <strong>WCAG Trash Panda Web Ring</strong><br><a target=_blank rel=noopener href="https://github.com/w3c/wcag/issues?q=is%3Aopen%20patrickhlauke">github.com/w3c/wcag/issues?q=is%3Aopen%20patrickhlauke</a><br>to look for discussions and <strong>pending clarifications</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img class="cover" src="images/github-w3c-wcag-counters.png" alt="Close-up of the W3C WCAG GitHub repository, showing it has 613 open issues, 209 pull requests, and 288 branches">
<p>frustration: most efforts has been going towards <strong>new WCAG 2.2 <abbr title="Success Criteria">SCs</abbr></strong><br>rather than fixing what's broken in 2.0/2.1</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<div>
<img src="images/wcag3.png" alt="Screenshot of the W3C Accessibility Guidelines (WCAG) 3.0 - W3C Working Draft 24 July 2023">
<p><a target=_blank rel=noopener href="https://www.w3.org/TR/wcag-3.0/">w3.org/TR/wcag-3.0</a> … but still <strong>very early days</strong></p>
<p class="context">and it will be quite some time before legislation references 3.0 once it's actually a ratified recommendation …</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>but in the <strong>meantime</strong> …</p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>don't creatively <strong>reinterpret</strong><br>what an SC says<br> to <strong>fit your agenda</strong></p>
<p class="context">whether you're a developer or an auditor doing an evaluation</p>
</div>
</div></section>
<!-- -->
<section class="slide cover">
<div>
<img class="cover" src="images/tron-users.jpg" alt="picture of Bruce Boxleitner in Tron (1982), holding his identity disc after a fight, with caption: I FIGHT FOR THE USERS">
</div>
</section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>“but unless it's reported as a <strong>WCAG failure</strong> <br>the client won't change it”</p>
<p class="context">then you have more fundamental problem …</p>
</div>
</div></section>
<!-- -->
<section class="slide impact"><div>
<div>
<p>as auditor, you do your client a <strong>disservice</strong> by not making clear what is and isn't a <strong>normative failure</strong></p>
<p class="context"> what happens when a clued-up client rightly challenges your claim? <strong>all your other results lose credibility!</strong></p>
</div>
</div></section>
<!-- -->
<section class="slide statement"><div>
<div>
<p>be conservative in your<br><strong>pass</strong> / <strong>fail</strong> assessments</p>
<p class="context">document your hesitation, clearly state when something's "more of a suggestion" than a hard failure</p>
</div>
</div></section>
<!-- -->
<section class="slide"><div>
<img src="./images/tetralogical-colour.svg" alt="TetraLogical" width="250">
<p><a target=_blank rel=noopener href="https://mastodon.social/@patrick_h_lauke">@patrick_h_lauke@mastodon.social</a><br>
<a target=_blank rel=noopener href="https://github.com/patrickhlauke/">github.com/patrickhlauke</a><br>
<a target=_blank rel=noopener href="https://www.tetralogical.com/">tetralogical.com</a></p>
<p><a target=_blank rel=noopener href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="images/cc-by-nc-sa.svg" width="150" alt="Creative Commons: Attribution Non-Commercial Share-Alike"></a></p>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="shower/shower.min.js"></script>
</body>
</html>