-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathITL_AI-Inclusive-Design-Sprints_website_exclusions.html
More file actions
1671 lines (1643 loc) · 106 KB
/
ITL_AI-Inclusive-Design-Sprints_website_exclusions.html
File metadata and controls
1671 lines (1643 loc) · 106 KB
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
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Examples of potential exclusions for Websites - Inclusive Tech Lab</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
body {font: 1rem/1.1 sans-serif; margin:2rem;}
h2 {margin-top: 3rem;}
h3 {font-size:1rem; margin-bottom:0rem;}
ul {margin-top:0.3rem;}
</style>
</head>
<body>
<main>
<h1>Examples of potential exclusions for Websites - Inclusive Tech Lab</h1>
<article id="access-accountprofile-menu" aria-labelledby="access-accountprofile-menu-h">
<h2 data-principle="pattern" id="access-accountprofile-menu-h">Access account/profile menu</h2>
<p class="user-action" data-principle="user-action">User opens account options.</p>
<section id="access-accountprofile-menu-perceivable" aria-labelledby="access-accountprofile-menu-perceivable-h">
<h3 id="access-accountprofile-menu-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Avatar unlabeled; blind user doesn't know it's clickable.</li>
<li data-principle="perceivable">Avatar-only button unlabeled; screen reader announces "graphic."</li>
<li data-principle="perceivable">Profile button uses avatar only; no text label for blind user.</li>
</ul>
</section>
<section id="access-accountprofile-menu-operable" aria-labelledby="access-accountprofile-menu-operable-h">
<h3 id="access-accountprofile-menu-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Menu only opens on hover; not keyboard accessible.</li>
<li data-principle="operable">Menu requires hover or gesture hold; not operable with keyboard.</li>
<li data-principle="operable">Requires swipe hold gesture; inaccessible for motor impaired.</li>
</ul>
</section>
<section id="access-accountprofile-menu-understandable" aria-labelledby="access-accountprofile-menu-understandable-h">
<h3 id="access-accountprofile-menu-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Options phrased vaguely ("Your stuff"); user unsure of function.</li>
<li data-principle="understandable">Options listed in inconsistent order; confusing to memory-impaired users.</li>
<li data-principle="understandable">Options rearranged on each visit; confusing for memory impaired user.</li>
</ul>
</section>
</article>
<article id="access-support" aria-labelledby="access-support-h">
<h2 data-principle="pattern" id="access-support-h">Access support / help</h2>
<p class="user-action" data-principle="user-action">User opens chat/help widget.</p>
<section id="access-support-perceivable" aria-labelledby="access-support-perceivable-h">
<h3 id="access-support-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Chat widget unlabeled; screen reader can't find entry point.</li>
<li data-principle="perceivable">Icon hidden behind overlapping elements; low-vision user doesn't find it.</li>
<li data-principle="perceivable">Widget hidden behind overlapping footer; low vision user cannot see.</li>
</ul>
</section>
<section id="access-support-operable" aria-labelledby="access-support-operable-h">
<h3 id="access-support-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Widget anchored in corner; switch user can't reach.</li>
<li data-principle="operable">Chat widget floats and blocks page content; screen reader user can't reach background.</li>
<li data-principle="operable">Requires multi finger gesture to activate; inaccessible for prosthetic hand.</li>
</ul>
</section>
<section id="access-support-understandable" aria-labelledby="access-support-understandable-h">
<h3 id="access-support-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Bot replies unclear or too complex; user with cognitive disability can't parse.</li>
<li data-principle="understandable">Bot uses complex multi-turn dialogue; confusing for autistic users.</li>
<li data-principle="understandable">Bot responds with long paragraphs; overwhelming for user with ADHD.</li>
</ul>
</section>
</article>
<article id="adjust-presentation" aria-labelledby="adjust-presentation-h">
<h2 data-principle="pattern" id="adjust-presentation-h">Adjust presentation</h2>
<p class="user-action" data-principle="user-action">User zooms, resizes, or toggles mode.</p>
<section id="adjust-presentation-perceivable" aria-labelledby="adjust-presentation-perceivable-h">
<h3 id="adjust-presentation-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Text in images doesn't scale; low-vision user loses info.</li>
<li data-principle="perceivable">Zooming crops content; low-vision user loses information.</li>
<li data-principle="perceivable">Content overlaps after zoom; low vision user misses context.</li>
</ul>
</section>
<section id="adjust-presentation-operable" aria-labelledby="adjust-presentation-operable-h">
<h3 id="adjust-presentation-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Resize breaks layout; keyboard navigation impossible.</li>
<li data-principle="operable">Theme toggle placed at screen bottom; unreachable for screen magnifier users.</li>
<li data-principle="operable">Requires rotating device orientation; inaccessible for fixed mount devices.</li>
</ul>
</section>
<section id="adjust-presentation-understandable" aria-labelledby="adjust-presentation-understandable-h">
<h3 id="adjust-presentation-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Layout shifts unpredictably; neurodiverse user disoriented.</li>
<li data-principle="understandable">Layout reflows unpredictably, disorienting ADHD user.</li>
<li data-principle="understandable">Terminology for modes unexplained; confusing for dyslexic users.</li>
</ul>
</section>
</article>
<article id="authenticatelogin" aria-labelledby="authenticatelogin-h">
<h2 data-principle="pattern" id="authenticatelogin-h">Authenticate/login</h2>
<p class="user-action" data-principle="user-action">User enters credentials, uses autofill, or 2FA.</p>
<section id="authenticatelogin-perceivable" aria-labelledby="authenticatelogin-perceivable-h">
<h3 id="authenticatelogin-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">CAPTCHA without audio/text alternative excludes blind users.</li>
<li data-principle="perceivable">Autofill suggestions not spoken by screen readers.</li>
<li data-principle="perceivable">Login feedback uses subtle color change only; colorblind user excluded.</li>
</ul>
</section>
<section id="authenticatelogin-operable" aria-labelledby="authenticatelogin-operable-h">
<h3 id="authenticatelogin-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Requires SMS code under time pressure; motor-impaired user excluded.</li>
<li data-principle="operable">2FA code requires switching apps quickly; inaccessible for memory-impaired users.</li>
<li data-principle="operable">Requires scanning QR code; impossible for blind users.</li>
</ul>
</section>
<section id="authenticatelogin-understandable" aria-labelledby="authenticatelogin-understandable-h">
<h3 id="authenticatelogin-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error "invalid login" too vague; dyslexic user doesn't know which field is wrong.</li>
<li data-principle="understandable">Password rules hidden until after failure; user with dyslexia repeatedly locked out.</li>
<li data-principle="understandable">2FA code delivered in complex sentence; confusing for dyslexic user.</li>
</ul>
</section>
</article>
<article id="browse-sequences" aria-labelledby="browse-sequences-h">
<h2 data-principle="pattern" id="browse-sequences-h">Browse sequences</h2>
<p class="user-action" data-principle="user-action">User swipes, clicks arrows, or presses keys in a carousel.</p>
<section id="browse-sequences-perceivable" aria-labelledby="browse-sequences-perceivable-h">
<h3 id="browse-sequences-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Carousel images lack alt text; blind users can't perceive items.</li>
<li data-principle="perceivable">Arrows blend into background; low-vision users can't perceive controls.</li>
<li data-principle="perceivable">Carousel dots lack labels; blind user cannot know current position.</li>
</ul>
</section>
<section id="browse-sequences-operable" aria-labelledby="browse-sequences-operable-h">
<h3 id="browse-sequences-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Carousel auto-rotates with no pause button; motor/vestibular issues triggered.</li>
<li data-principle="operable">Auto-play requires fast reactions to pause; inaccessible for slow motor users.</li>
<li data-principle="operable">Swipe speed must be exact; inaccessible for motor impaired users.</li>
</ul>
</section>
<section id="browse-sequences-understandable" aria-labelledby="browse-sequences-understandable-h">
<h3 id="browse-sequences-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">No progress indicator; user doesn't know how many slides exist.</li>
<li data-principle="understandable">Carousel resets to first slide when reopened; memory-impaired user loses place.</li>
<li data-principle="understandable">Carousel restarts unexpectedly; confusing for users with short term memory challenges.</li>
</ul>
</section>
</article>
<article id="consentpermissions" aria-labelledby="consentpermissions-h">
<h2 data-principle="pattern" id="consentpermissions-h">Consent/permissions</h2>
<p class="user-action" data-principle="user-action">User responds to cookie/notification prompts.</p>
<section id="consentpermissions-perceivable" aria-labelledby="consentpermissions-perceivable-h">
<h3 id="consentpermissions-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Popup not announced; blind user unaware.</li>
<li data-principle="perceivable">Pop-up placed at screen bottom, hidden from magnifier users.</li>
<li data-principle="perceivable">Consent prompt uses transparent overlay; invisible to low vision users.</li>
</ul>
</section>
<section id="consentpermissions-operable" aria-labelledby="consentpermissions-operable-h">
<h3 id="consentpermissions-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Close button too small; motor-impaired user can't dismiss.</li>
<li data-principle="operable">Requires precise tap on "X" to dismiss; inaccessible to motor-impaired users.</li>
<li data-principle="operable">Requires precise voice phrase "Allow notifications"; excludes speech diversity.</li>
</ul>
</section>
<section id="consentpermissions-understandable" aria-labelledby="consentpermissions-understandable-h">
<h3 id="consentpermissions-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Language in banner overly legalistic; user with cognitive disability can't consent meaningfully.</li>
<li data-principle="understandable">Legal language overly dense; user with cognitive disability clicks without comprehension.</li>
<li data-principle="understandable">Consent terms vague; user cannot make informed decision.</li>
</ul>
</section>
</article>
<article id="copy-and-share-content" aria-labelledby="copy-and-share-content-h">
<h2 data-principle="pattern" id="copy-and-share-content-h">Copy and share content</h2>
<p class="user-action" data-principle="user-action">User highlights text, copies, or taps share.</p>
<section id="copy-and-share-content-perceivable" aria-labelledby="copy-and-share-content-perceivable-h">
<h3 id="copy-and-share-content-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Text locked in image; blind user can't select it.</li>
<li data-principle="perceivable">Content embedded in canvas element; text not selectable.</li>
<li data-principle="perceivable">Copy action blocked by script; blind user cannot extract content.</li>
</ul>
</section>
<section id="copy-and-share-content-operable" aria-labelledby="copy-and-share-content-operable-h">
<h3 id="copy-and-share-content-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Share button requires precise pointer movement.</li>
<li data-principle="operable">Share button requires long-press gesture; inaccessible to prosthetic users.</li>
<li data-principle="operable">Share requires drag motion to dock; inaccessible for users with tremors.</li>
</ul>
</section>
<section id="copy-and-share-content-understandable" aria-labelledby="copy-and-share-content-understandable-h">
<h3 id="copy-and-share-content-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Share menu overloaded; user with ADHD overwhelmed.</li>
<li data-principle="understandable">Share menu full of irrelevant networks; confusing for novice users.</li>
<li data-principle="understandable">Share destinations unlabeled; confusing for novice users.</li>
</ul>
</section>
</article>
<article id="expandcollapse-sections" aria-labelledby="expandcollapse-sections-h">
<h2 data-principle="pattern" id="expandcollapse-sections-h">Expand/collapse sections</h2>
<p class="user-action" data-principle="user-action">User reveals hidden content via "+" or caret.</p>
<section id="expandcollapse-sections-perceivable" aria-labelledby="expandcollapse-sections-perceivable-h">
<h3 id="expandcollapse-sections-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Caret icon unlabeled; screen reader doesn't announce function.</li>
<li data-principle="perceivable">Expanded content appears offscreen; low-vision user misses new info.</li>
<li data-principle="perceivable">Animation fades too quickly; low vision user misses content reveal.</li>
</ul>
</section>
<section id="expandcollapse-sections-operable" aria-labelledby="expandcollapse-sections-operable-h">
<h3 id="expandcollapse-sections-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Section only expands with mouse click; no keyboard support.</li>
<li data-principle="operable">Expansion requires horizontal swipe; inaccessible to trackball users.</li>
<li data-principle="operable">Requires double click with precision; tremor users excluded.</li>
</ul>
</section>
<section id="expandcollapse-sections-understandable" aria-labelledby="expandcollapse-sections-understandable-h">
<h3 id="expandcollapse-sections-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Expansion changes layout unexpectedly; autistic user loses context.</li>
<li data-principle="understandable">Section collapses unexpectedly when tabbing, disorienting autistic users.</li>
<li data-principle="understandable">Section labels inconsistent; user cannot predict what will appear.</li>
</ul>
</section>
</article>
<article id="filterrefine-results" aria-labelledby="filterrefine-results-h">
<h2 data-principle="pattern" id="filterrefine-results-h">Filter/refine results</h2>
<p class="user-action" data-principle="user-action">User applies categories, sliders, or checkboxes.</p>
<section id="filterrefine-results-perceivable" aria-labelledby="filterrefine-results-perceivable-h">
<h3 id="filterrefine-results-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Slider has no text equivalent; blind user can't perceive range.</li>
<li data-principle="perceivable">Filters displayed only as icons (e.g., funnel); low-literacy user can't interpret.</li>
<li data-principle="perceivable">Filters hidden behind color icons; blind users unaware.</li>
</ul>
</section>
<section id="filterrefine-results-operable" aria-labelledby="filterrefine-results-operable-h">
<h3 id="filterrefine-results-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Slider requires precise dragging; motor-impaired user can't operate.</li>
<li data-principle="operable">Multi-select requires holding Shift/Ctrl; inaccessible for one-handed users.</li>
<li data-principle="operable">Multi column filter requires simultaneous scroll and click; inaccessible for one handed users.</li>
</ul>
</section>
<section id="filterrefine-results-understandable" aria-labelledby="filterrefine-results-understandable-h">
<h3 id="filterrefine-results-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Filter labels unclear; ADHD user misinterprets categories.</li>
<li data-principle="understandable">Filter labels use insider terminology (SKUs") confusing laypeople."</li>
<li data-principle="understandable">Filter categories overlap semantically; confusing for cognitive disability.</li>
</ul>
</section>
</article>
<article id="followsubscribe" aria-labelledby="followsubscribe-h">
<h2 data-principle="pattern" id="followsubscribe-h">Follow/subscribe</h2>
<p class="user-action" data-principle="user-action">User clicks "Follow" or bell icon.</p>
<section id="followsubscribe-perceivable" aria-labelledby="followsubscribe-perceivable-h">
<h3 id="followsubscribe-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Bell icon unlabeled; blind user doesn't know purpose.</li>
<li data-principle="perceivable">Bell notification only shows by color change; colorblind user excluded.</li>
<li data-principle="perceivable">Subscription confirmed only with subtle vibration; DeafBlind users excluded.</li>
</ul>
</section>
<section id="followsubscribe-operable" aria-labelledby="followsubscribe-operable-h">
<h3 id="followsubscribe-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Tiny icons hard to target; motor-impaired user struggles.</li>
<li data-principle="operable">Requires double-tap on small icon; inaccessible for tremor users.</li>
<li data-principle="operable">Requires gesture double tap on small icon; inaccessible for tremor users.</li>
</ul>
</section>
<section id="followsubscribe-understandable" aria-labelledby="followsubscribe-understandable-h">
<h3 id="followsubscribe-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">No confirmation; user with memory issues unsure if subscription worked.</li>
<li data-principle="understandable">No clear explanation of what "Follow" entails (emails? notifications?); user hesitant.</li>
<li data-principle="understandable">Label "subscribe" conflated with payments; confusing for novice users.</li>
</ul>
</section>
</article>
<article id="hoverfocus-for-details" aria-labelledby="hoverfocus-for-details-h">
<h2 data-principle="pattern" id="hoverfocus-for-details-h">Hover/focus for details</h2>
<p class="user-action" data-principle="user-action">User hovers cursor or tabs to focus.</p>
<section id="hoverfocus-for-details-perceivable" aria-labelledby="hoverfocus-for-details-perceivable-h">
<h3 id="hoverfocus-for-details-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Tooltip only visible on hover; not announced to screen reader.</li>
<li data-principle="perceivable">Hover detail appears off-screen; screen magnifier users can't perceive it.</li>
<li data-principle="perceivable">Hover details appear outside magnification lens; low vision user misses info.</li>
</ul>
</section>
<section id="hoverfocus-for-details-operable" aria-labelledby="hoverfocus-for-details-operable-h">
<h3 id="hoverfocus-for-details-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Detail requires hover; touch users can't access it.</li>
<li data-principle="operable">Touch users cannot replicate hover behavior.</li>
<li data-principle="operable">Requires hover dwell time; inaccessible for users with fast tremors.</li>
</ul>
</section>
<section id="hoverfocus-for-details-understandable" aria-labelledby="hoverfocus-for-details-understandable-h">
<h3 id="hoverfocus-for-details-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Tooltip disappears too quickly; dyslexic user can't finish reading.</li>
<li data-principle="understandable">Tooltip uses unexplained abbreviations; cognitive load too high.</li>
<li data-principle="understandable">Tooltip uses icons with no text; incomprehensible for neurodiverse user.</li>
</ul>
</section>
</article>
<article id="interact-with-media" aria-labelledby="interact-with-media-h">
<h2 data-principle="pattern" id="interact-with-media-h">Interact with media</h2>
<p class="user-action" data-principle="user-action">User plays or pauses media.</p>
<section id="interact-with-media-perceivable" aria-labelledby="interact-with-media-perceivable-h">
<h3 id="interact-with-media-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Controls unlabeled; blind user hears "button."</li>
<li data-principle="perceivable">Captions auto-hide after seconds; Deaf user loses content.</li>
<li data-principle="perceivable">Media controls low contrast in dark mode; low vision user excluded.</li>
</ul>
</section>
<section id="interact-with-media-operable" aria-labelledby="interact-with-media-operable-h">
<h3 id="interact-with-media-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Autoplay video without pause; keyboard users can't stop it.</li>
<li data-principle="operable">Media controls require fine motor input; inaccessible for tremor.</li>
<li data-principle="operable">Requires swipe gesture to scrub; inaccessible for keyboard only.</li>
</ul>
</section>
<section id="interact-with-media-understandable" aria-labelledby="interact-with-media-understandable-h">
<h3 id="interact-with-media-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Transcript missing; Deaf user can't understand dialogue.</li>
<li data-principle="understandable">Audio description uses technical jargon; confusing for new users.</li>
<li data-principle="understandable">Captions filled with non literal idioms; confusing for non native speakers.</li>
</ul>
</section>
</article>
<article id="jump-within-page" aria-labelledby="jump-within-page-h">
<h2 data-principle="pattern" id="jump-within-page-h">Jump within page</h2>
<p class="user-action" data-principle="user-action">User selects "skip link" or "back to top."</p>
<section id="jump-within-page-perceivable" aria-labelledby="jump-within-page-perceivable-h">
<h3 id="jump-within-page-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Skip link hidden from screen readers.</li>
<li data-principle="perceivable">Back to top only appears visually when scrolling not announced to Assistive Technology.</li>
<li data-principle="perceivable">Skip link styled as 1 pixel transparent element; invisible to low vision user.</li>
</ul>
</section>
<section id="jump-within-page-operable" aria-labelledby="jump-within-page-operable-h">
<h3 id="jump-within-page-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Control only appears on mouse hover; not available via keyboard.</li>
<li data-principle="operable">Requires rapid double-tap gesture on mobile; impossible for tremor.</li>
<li data-principle="operable">Requires voice command phrasing exactly; excludes users with speech differences.</li>
</ul>
</section>
<section id="jump-within-page-understandable" aria-labelledby="jump-within-page-understandable-h">
<h3 id="jump-within-page-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Skip link text unclear ("jump" instead of "skip to content"); user unsure of purpose.</li>
<li data-principle="understandable">Skip link labeled with technical jargon ("anchor link") not meaningful to general users.</li>
<li data-principle="understandable">Back to top label not meaningful; some users expect scroll not jump.</li>
</ul>
</section>
</article>
<article id="make-a-choice-from-options" aria-labelledby="make-a-choice-from-options-h">
<h2 data-principle="pattern" id="make-a-choice-from-options-h">Make a choice from options</h2>
<p class="user-action" data-principle="user-action">User picks from dropdowns, radios, or checkboxes.</p>
<section id="make-a-choice-from-options-perceivable" aria-labelledby="make-a-choice-from-options-perceivable-h">
<h3 id="make-a-choice-from-options-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Custom dropdown not exposed to screen reader.</li>
<li data-principle="perceivable">Options presented only visually (flag icons); blind users miss them.</li>
<li data-principle="perceivable">Options presented only visually (flag icons); blind users miss them.</li>
</ul>
</section>
<section id="make-a-choice-from-options-operable" aria-labelledby="make-a-choice-from-options-operable-h">
<h3 id="make-a-choice-from-options-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Dropdown only opens with mouse; can't be tabbed to.</li>
<li data-principle="operable">Multi-select requires rapid tapping; inaccessible for switch users.</li>
<li data-principle="operable">Requires long press to open; inaccessible for motor impairments.</li>
</ul>
</section>
<section id="make-a-choice-from-options-understandable" aria-labelledby="make-a-choice-from-options-understandable-h">
<h3 id="make-a-choice-from-options-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Options poorly grouped; user can't predict results.</li>
<li data-principle="understandable">Options overlap conceptually (e.g., newsletter" vs. "updates"); user confused."</li>
<li data-principle="understandable">Option labels too similar; user with cognitive disability cannot distinguish.</li>
</ul>
</section>
</article>
<article id="navigate-with-links" aria-labelledby="navigate-with-links-h">
<h2 data-principle="pattern" id="navigate-with-links-h">Navigate with links</h2>
<p class="user-action" data-principle="user-action">User clicks/taps a link in breadcrumbs, footer, or trust section.</p>
<section id="navigate-with-links-perceivable" aria-labelledby="navigate-with-links-perceivable-h">
<h3 id="navigate-with-links-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Link text says "Click here"; blind user doesn't know destination.</li>
<li data-principle="perceivable">Link color indistinguishable from body text for colorblind users.</li>
<li data-principle="perceivable">Link text presented only in uppercase; harder for screen reader pronunciation.</li>
</ul>
</section>
<section id="navigate-with-links-operable" aria-labelledby="navigate-with-links-operable-h">
<h3 id="navigate-with-links-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Small links too close together; motor-impaired user cannot reliably select.</li>
<li data-principle="operable">Links open in new tab without warning, confusing keyboard/screen reader users.</li>
<li data-principle="operable">Links spread across multiple lines; hard for motor impaired user to select.</li>
</ul>
</section>
<section id="navigate-with-links-understandable" aria-labelledby="navigate-with-links-understandable-h">
<h3 id="navigate-with-links-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Breadcrumb order inconsistent; dyslexic user cannot follow hierarchy.</li>
<li data-principle="understandable">Breadcrumb order presented right-to-left, confusing for cultures with left-to-right reading.</li>
<li data-principle="understandable">Link destinations unclear; user with autism becomes anxious about outcomes.</li>
</ul>
</section>
</article>
<article id="open-navigation-menus" aria-labelledby="open-navigation-menus-h">
<h2 data-principle="pattern" id="open-navigation-menus-h">Open navigation menus</h2>
<p class="user-action" data-principle="user-action">User taps/clicks a menu icon, presses Enter, or hovers to expand options.</p>
<section id="open-navigation-menus-perceivable" aria-labelledby="open-navigation-menus-perceivable-h">
<h3 id="open-navigation-menus-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Menu icon unlabeled; screen reader user cannot perceive it.</li>
<li data-principle="perceivable">Menu opens with animation too fast for users with low vision to track.</li>
<li data-principle="perceivable">Menu opens with low contrast animation; user with color vision deficiency cannot perceive change.</li>
</ul>
</section>
<section id="open-navigation-menus-operable" aria-labelledby="open-navigation-menus-operable-h">
<h3 id="open-navigation-menus-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Menu only opens on hover; keyboard user cannot activate it.</li>
<li data-principle="operable">Gesture-only swipe to open menu excludes switch users.</li>
<li data-principle="operable">Requires pinch gesture to open; inaccessible for users with limited hand mobility.</li>
</ul>
</section>
<section id="open-navigation-menus-understandable" aria-labelledby="open-navigation-menus-understandable-h">
<h3 id="open-navigation-menus-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Menu structure changes between pages; user with cognitive disabilities confused.</li>
<li data-principle="understandable">Icon uses metaphor (hamburger) that some users don't understand.</li>
<li data-principle="understandable">Menu items reorganize unpredictably; user with ADHD cannot maintain orientation.</li>
</ul>
</section>
</article>
<article id="provide-text-input" aria-labelledby="provide-text-input-h">
<h2 data-principle="pattern" id="provide-text-input-h">Provide text input</h2>
<p class="user-action" data-principle="user-action">User types into a field.</p>
<section id="provide-text-input-perceivable" aria-labelledby="provide-text-input-perceivable-h">
<h3 id="provide-text-input-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Placeholder used as label; screen reader misses context.</li>
<li data-principle="perceivable">Field border disappears in dark mode; low-vision user can't find it.</li>
<li data-principle="perceivable">Field label appears only on hover; blind user unaware of purpose.</li>
</ul>
</section>
<section id="provide-text-input-operable" aria-labelledby="provide-text-input-operable-h">
<h3 id="provide-text-input-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Field requires drag-and-drop input; keyboard user excluded.</li>
<li data-principle="operable">On-screen keyboard covers field; motor user can't scroll down.</li>
<li data-principle="operable">Voice dictation disabled; speech impaired user excluded.</li>
</ul>
</section>
<section id="provide-text-input-understandable" aria-labelledby="provide-text-input-understandable-h">
<h3 id="provide-text-input-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error instructions unclear; dyslexic user doesn't know correction needed.</li>
<li data-principle="understandable">Input requires specific format with no examples; dyslexic user guesses incorrectly.</li>
<li data-principle="understandable">Input rejects unexpected but valid formats; frustrating for dyslexic users.</li>
</ul>
</section>
</article>
<article id="ratereviewlikecomment" aria-labelledby="ratereviewlikecomment-h">
<h2 data-principle="pattern" id="ratereviewlikecomment-h">Rate/review/like/comment</h2>
<p class="user-action" data-principle="user-action">User clicks star, likes, or posts.</p>
<section id="ratereviewlikecomment-perceivable" aria-labelledby="ratereviewlikecomment-perceivable-h">
<h3 id="ratereviewlikecomment-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Star rating lacks labels; blind user hears "button."</li>
<li data-principle="perceivable">Star icons don't scale with zoom; low-vision user can't perceive.</li>
<li data-principle="perceivable">Ratings conveyed only with emoji; blind user cannot perceive meaning.</li>
</ul>
</section>
<section id="ratereviewlikecomment-operable" aria-labelledby="ratereviewlikecomment-operable-h">
<h3 id="ratereviewlikecomment-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Comment box requires mouse hover to activate.</li>
<li data-principle="operable">Requires drag gesture to slide rating; inaccessible for motor-impaired users.</li>
<li data-principle="operable">Requires swipe slider to set stars; inaccessible for keyboard only.</li>
</ul>
</section>
<section id="ratereviewlikecomment-understandable" aria-labelledby="ratereviewlikecomment-understandable-h">
<h3 id="ratereviewlikecomment-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Rating scale ambiguous (1 = best? worst?); confusing for all users.</li>
<li data-principle="understandable">Review box prefilled with placeholder "Type review here" text; confusing for screen reader.</li>
<li data-principle="understandable">Review prompts use sarcasm; confusing for autistic users.</li>
</ul>
</section>
</article>
<article id="respond-to-feedback" aria-labelledby="respond-to-feedback-h">
<h2 data-principle="pattern" id="respond-to-feedback-h">Respond to feedback</h2>
<p class="user-action" data-principle="user-action">User reads/dismisses toast, acts on error.</p>
<section id="respond-to-feedback-perceivable" aria-labelledby="respond-to-feedback-perceivable-h">
<h3 id="respond-to-feedback-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Error messages use only color; colorblind user can't perceive.</li>
<li data-principle="perceivable">Feedback uses only vibration; DeafBlind users can't perceive it.</li>
<li data-principle="perceivable">Toast appears partially off screen; low vision user cannot perceive.</li>
</ul>
</section>
<section id="respond-to-feedback-operable" aria-labelledby="respond-to-feedback-operable-h">
<h3 id="respond-to-feedback-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Toast disappears too fast; user with limited dexterity can't act.</li>
<li data-principle="operable">Dismiss button timed; mobility-impaired user can't act quickly enough.</li>
<li data-principle="operable">Feedback disappears before speech input completes; voice users excluded.</li>
</ul>
</section>
<section id="respond-to-feedback-understandable" aria-labelledby="respond-to-feedback-understandable-h">
<h3 id="respond-to-feedback-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error message uses jargon; user with cognitive disability can't understand.</li>
<li data-principle="understandable">Error phrased as "fatal exception"; alarming and incomprehensible to most users.</li>
<li data-principle="understandable">Error message uses technical acronyms; confusing for general population.</li>
</ul>
</section>
</article>
<article id="scroll-verticallyhorizontally" aria-labelledby="scroll-verticallyhorizontally-h">
<h2 data-principle="pattern" id="scroll-verticallyhorizontally-h">Scroll vertically/horizontally</h2>
<p class="user-action" data-principle="user-action">User swipes or drags scrollbar.</p>
<section id="scroll-verticallyhorizontally-perceivable" aria-labelledby="scroll-verticallyhorizontally-perceivable-h">
<h3 id="scroll-verticallyhorizontally-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Content hidden without visible scroll indicators.</li>
<li data-principle="perceivable">Hidden horizontal scroll causes sighted users to miss half the content.</li>
<li data-principle="perceivable">Scrollbar hidden by design choice; magnifier user cannot perceive boundaries.</li>
</ul>
</section>
<section id="scroll-verticallyhorizontally-operable" aria-labelledby="scroll-verticallyhorizontally-operable-h">
<h3 id="scroll-verticallyhorizontally-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Horizontal scroll traps keyboard focus; user can't reach content.</li>
<li data-principle="operable">Scroll requires two-finger gesture on laptop touchpad; inaccessible to users missing fingers.</li>
<li data-principle="operable">Requires fine two finger gesture; inaccessible for users with limited dexterity.</li>
</ul>
</section>
<section id="scroll-verticallyhorizontally-understandable" aria-labelledby="scroll-verticallyhorizontally-understandable-h">
<h3 id="scroll-verticallyhorizontally-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Content reflows unpredictably; user with cognitive challenges loses place.</li>
<li data-principle="understandable">Continuous scroll makes it unclear where sections begin or end.</li>
<li data-principle="understandable">Endless scroll disrupts logical reading order; confusing for screen reader users.</li>
</ul>
</section>
</article>
<article id="search-with-keywords" aria-labelledby="search-with-keywords-h">
<h2 data-principle="pattern" id="search-with-keywords-h">Search with keywords</h2>
<p class="user-action" data-principle="user-action">User types into a search box.</p>
<section id="search-with-keywords-perceivable" aria-labelledby="search-with-keywords-perceivable-h">
<h3 id="search-with-keywords-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Search box missing label; blind user doesn't know it's a search.</li>
<li data-principle="perceivable">Placeholder text too light; low-vision user can't see it.</li>
<li data-principle="perceivable">Search results rely solely on image thumbnails; blind user misses content.</li>
</ul>
</section>
<section id="search-with-keywords-operable" aria-labelledby="search-with-keywords-operable-h">
<h3 id="search-with-keywords-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Requires mouse to click tiny magnifying glass; not focusable via Tab.</li>
<li data-principle="operable">Auto-focus on field steals cursor from assistive tech user.</li>
<li data-principle="operable">Search button placed far from input; hard for motor impaired user to reach.</li>
</ul>
</section>
<section id="search-with-keywords-understandable" aria-labelledby="search-with-keywords-understandable-h">
<h3 id="search-with-keywords-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error message "invalid input" too vague; user doesn't know what to fix.</li>
<li data-principle="understandable">Error no results" provides no recovery guidance; leaving novice user lost."</li>
<li data-principle="understandable">Results ranked with no explanation; confusing for neurodiverse user.</li>
</ul>
</section>
</article>
<article id="select-an-item" aria-labelledby="select-an-item-h">
<h2 data-principle="pattern" id="select-an-item-h">Select an item</h2>
<p class="user-action" data-principle="user-action">User taps/clicks a card, link, or button.</p>
<section id="select-an-item-perceivable" aria-labelledby="select-an-item-perceivable-h">
<h3 id="select-an-item-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Card has no label; screen reader says "button."</li>
<li data-principle="perceivable">Image-only buttons without text confuse blind and low-vision users.</li>
<li data-principle="perceivable">Cards contain only background images; blind users perceive nothing.</li>
</ul>
</section>
<section id="select-an-item-operable" aria-labelledby="select-an-item-operable-h">
<h3 id="select-an-item-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Small clickable areas impossible for users with tremors.</li>
<li data-principle="operable">Click target overlaps with other controls, causing accidental actions for tremor users.</li>
<li data-principle="operable">Tap requires precise double tap; difficult for mobility impaired.</li>
</ul>
</section>
<section id="select-an-item-understandable" aria-labelledby="select-an-item-understandable-h">
<h3 id="select-an-item-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Button labels vague ("Submit" vs. "Submit Application"); confusing.</li>
<li data-principle="understandable">Button label text ("Continue") ambiguous about next step.</li>
<li data-principle="understandable">Button label "OK" not meaningful; confusing for cognitive disabilities.</li>
</ul>
</section>
</article>
<article id="select-datetime" aria-labelledby="select-datetime-h">
<h2 data-principle="pattern" id="select-datetime-h">Select date/time</h2>
<p class="user-action" data-principle="user-action">User clicks/taps into a picker.</p>
<section id="select-datetime-perceivable" aria-labelledby="select-datetime-perceivable-h">
<h3 id="select-datetime-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Picker not parseable by screen reader; blind user can't perceive dates.</li>
<li data-principle="perceivable">Calendar highlights holidays with color only; colorblind user misses info.</li>
<li data-principle="perceivable">Dates marked only with small colored dots; colorblind user misses them.</li>
</ul>
</section>
<section id="select-datetime-operable" aria-labelledby="select-datetime-operable-h">
<h3 id="select-datetime-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Picker requires free cursor drag; not usable with keyboard.</li>
<li data-principle="operable">Date picker requires drag gestures; inaccessible for prosthetic users.</li>
<li data-principle="operable">Requires dragging across entire calendar; inaccessible for switch device.</li>
</ul>
</section>
<section id="select-datetime-understandable" aria-labelledby="select-datetime-understandable-h">
<h3 id="select-datetime-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Week starts on unexpected day; autistic user misinterprets calendar.</li>
<li data-principle="understandable">Time displayed in 24h without labels; unfamiliar to many users.</li>
<li data-principle="understandable">Date displayed in unfamiliar calendar system; confusing for cultural context.</li>
</ul>
</section>
</article>
<article id="step-through-content" aria-labelledby="step-through-content-h">
<h2 data-principle="pattern" id="step-through-content-h">Step through content</h2>
<p class="user-action" data-principle="user-action">User clicks/taps "next" or scrolls to load more.</p>
<section id="step-through-content-perceivable" aria-labelledby="step-through-content-perceivable-h">
<h3 id="step-through-content-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Next button labeled only with an arrow; unclear for blind users.</li>
<li data-principle="perceivable">Pagination indicators are tiny dots; low-vision user can't count pages.</li>
<li data-principle="perceivable">Page indicators lack numbering; blind user cannot know position.</li>
</ul>
</section>
<section id="step-through-content-operable" aria-labelledby="step-through-content-operable-h">
<h3 id="step-through-content-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Infinite scroll prevents reaching footer; keyboard users can't escape loop.</li>
<li data-principle="operable">Load more requires precise aim; switch users can't trigger reliably.</li>
<li data-principle="operable">Requires rapid swiping; inaccessible for users with prosthetic limbs.</li>
</ul>
</section>
<section id="step-through-content-understandable" aria-labelledby="step-through-content-understandable-h">
<h3 id="step-through-content-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">No indicator of how many pages exist; user with memory issues loses place.</li>
<li data-principle="understandable">Infinite scroll hides user's sense of completion; autistic user feels trapped.</li>
<li data-principle="understandable">Content reshuffles on each load; user with dyslexia loses sense of continuity.</li>
</ul>
</section>
</article>
<article id="switch-viewslayouts" aria-labelledby="switch-viewslayouts-h">
<h2 data-principle="pattern" id="switch-viewslayouts-h">Switch views/layouts</h2>
<p class="user-action" data-principle="user-action">User toggles grid/list or dark/light.</p>
<section id="switch-viewslayouts-perceivable" aria-labelledby="switch-viewslayouts-perceivable-h">
<h3 id="switch-viewslayouts-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Toggle unlabeled; blind user doesn't know what it does.</li>
<li data-principle="perceivable">Dark mode toggle icon low contrast; low-vision user can't perceive it.</li>
<li data-principle="perceivable">Dark mode toggle represented only by moon icon; low literacy user cannot perceive meaning.</li>
</ul>
</section>
<section id="switch-viewslayouts-operable" aria-labelledby="switch-viewslayouts-operable-h">
<h3 id="switch-viewslayouts-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Toggle only responds to swipe; not keyboard operable.</li>
<li data-principle="operable">Requires rapid double-tap to change layout; not possible with tremors.</li>
<li data-principle="operable">Requires tilt gesture; inaccessible for wheelchair users using mounted tablets.</li>
</ul>
</section>
<section id="switch-viewslayouts-understandable" aria-labelledby="switch-viewslayouts-understandable-h">
<h3 id="switch-viewslayouts-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Toggle states not explained; dyslexic user unsure what view is active.</li>
<li data-principle="understandable">Toggle state represented only visually; dyslexic user can't tell which is active.</li>
<li data-principle="understandable">Terminology "compact view" not explained; confusing for novice users.</li>
</ul>
</section>
</article>
<article id="track-progress" aria-labelledby="track-progress-h">
<h2 data-principle="pattern" id="track-progress-h">Track progress</h2>
<p class="user-action" data-principle="user-action">User monitors progress bars or spinners.</p>
<section id="track-progress-perceivable" aria-labelledby="track-progress-perceivable-h">
<h3 id="track-progress-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Progress bar not labeled; blind user hears "graphic" only.</li>
<li data-principle="perceivable">Spinner loops infinitely with no textual status; blind user perceives nothing.</li>
<li data-principle="perceivable">Progress bar filled with texture pattern; unreadable for low vision user.</li>
</ul>
</section>
<section id="track-progress-operable" aria-labelledby="track-progress-operable-h">
<h3 id="track-progress-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Stepper requires dragging; no keyboard path.</li>
<li data-principle="operable">Requires pointer drag to move through steps; keyboard users stuck.</li>
<li data-principle="operable">Requires drag to move through steps; inaccessible for keyboard only.</li>
</ul>
</section>
<section id="track-progress-understandable" aria-labelledby="track-progress-understandable-h">
<h3 id="track-progress-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Loading… message vague; user doesn't know how long to wait.</li>
<li data-principle="understandable">Progress bar lacks milestones; autistic user can't predict progress.</li>
<li data-principle="understandable">Step numbers skip values; confusing for users with dyscalculia.</li>
</ul>
</section>
</article>
<article id="uploadcorrect-input" aria-labelledby="uploadcorrect-input-h">
<h2 data-principle="pattern" id="uploadcorrect-input-h">Upload/correct input</h2>
<p class="user-action" data-principle="user-action">User uploads a file or corrects input.</p>
<section id="uploadcorrect-input-perceivable" aria-labelledby="uploadcorrect-input-perceivable-h">
<h3 id="uploadcorrect-input-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">File input button unlabeled; blind user can't find it.</li>
<li data-principle="perceivable">File size errors only shown visually in red; not conveyed to AT.</li>
<li data-principle="perceivable">Upload feedback hidden in status bar; screen reader user misses it.</li>
</ul>
</section>
<section id="uploadcorrect-input-operable" aria-labelledby="uploadcorrect-input-operable-h">
<h3 id="uploadcorrect-input-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Drag-and-drop only upload; no keyboard alternative.</li>
<li data-principle="operable">Drag-drop required; inaccessible for voice input users.</li>
<li data-principle="operable">Requires simultaneous key and mouse action; impossible for one handed users.</li>
</ul>
</section>
<section id="uploadcorrect-input-understandable" aria-labelledby="uploadcorrect-input-understandable-h">
<h3 id="uploadcorrect-input-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error message "file type invalid" vague; user doesn't know what's allowed.</li>
<li data-principle="understandable">Error "upload failed" gives no reason; user doesn't know what to try.</li>
<li data-principle="understandable">File type codes unfamiliar; confusing for general public.</li>
</ul>
</section>
</article>
<article id="use-suggestions" aria-labelledby="use-suggestions-h">
<h2 data-principle="pattern" id="use-suggestions-h">Use suggestions</h2>
<p class="user-action" data-principle="user-action">User selects auto-complete options.</p>
<section id="use-suggestions-perceivable" aria-labelledby="use-suggestions-perceivable-h">
<h3 id="use-suggestions-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Suggestions not announced to screen reader.</li>
<li data-principle="perceivable">Suggestions announced too quickly; screen reader cuts them off.</li>
<li data-principle="perceivable">Suggestions truncated visually; low vision user cannot see full text.</li>
</ul>
</section>
<section id="use-suggestions-operable" aria-labelledby="use-suggestions-operable-h">
<h3 id="use-suggestions-operable-h">Operable</h3>
<ul>
<li data-principle="operable">User must use pointer to click small dropdown items; not keyboard accessible.</li>
<li data-principle="operable">Requires drag gesture to scroll through suggestions; no keyboard support.</li>
<li data-principle="operable">Requires trackpad gesture to navigate; inaccessible for switch device users.</li>
</ul>
</section>
<section id="use-suggestions-understandable" aria-labelledby="use-suggestions-understandable-h">
<h3 id="use-suggestions-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Suggestions irrelevant; neurodiverse user overwhelmed by noise.</li>
<li data-principle="understandable">Suggestions filled with ads; neurodiverse users can't distinguish relevant from irrelevant.</li>
<li data-principle="understandable">Suggested terms in multiple languages; disorients non bilingual users.</li>
</ul>
</section>
</article>
<article id="work-with-modals" aria-labelledby="work-with-modals-h">
<h2 data-principle="pattern" id="work-with-modals-h">Work with modals</h2>
<p class="user-action" data-principle="user-action">User opens/closes a modal.</p>
<section id="work-with-modals-perceivable" aria-labelledby="work-with-modals-perceivable-h">
<h3 id="work-with-modals-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Modal not announced as a dialog; blind user unaware.</li>
<li data-principle="perceivable">Modal overlay blends with background; low-vision user can't tell it's active.</li>
<li data-principle="perceivable">Modal contrast too low; low vision user cannot perceive separation from background.</li>
</ul>
</section>
<section id="work-with-modals-operable" aria-labelledby="work-with-modals-operable-h">
<h3 id="work-with-modals-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Modal traps focus; keyboard user can't close it.</li>
<li data-principle="operable">Close button in far top-right corner; inaccessible to limited reach users.</li>
<li data-principle="operable">Modal close requires precise corner swipe; not possible for prosthetic hand.</li>
</ul>
</section>
<section id="work-with-modals-understandable" aria-labelledby="work-with-modals-understandable-h">
<h3 id="work-with-modals-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Modal lacks clear purpose; neurodiverse user confused by interruption.</li>
<li data-principle="understandable">Modal interrupts without context; ADHD user loses train of thought.</li>
<li data-principle="understandable">Modal content uses nested jargon; overwhelming for user with ADHD.</li>
</ul>
</section>
</article>
<article id="add-item-to-cart" aria-labelledby="add-item-to-cart-h">
<h2 data-principle="pattern" id="add-item-to-cart-h">Add item to cart</h2>
<p class="user-action" data-principle="user-action">User adds a product or service to their cart.</p>
<section id="add-item-to-cart-perceivable" aria-labelledby="add-item-to-cart-perceivable-h">
<h3 id="add-item-to-cart-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Dynamic pricing refresh occurs without screen-reader announcement.</li>
<li data-principle="perceivable">Item confirmation toast overlaps text magnifier region.</li>
<li data-principle="perceivable">Cart count changes silently for blind users.</li>
</ul>
</section>
<section id="add-item-to-cart-operable" aria-labelledby="add-item-to-cart-operable-h">
<h3 id="add-item-to-cart-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Touchscreen users must precisely tap a small icon.</li>
<li data-principle="operable">Voice command mishears “add two items” as “remove.”</li>
<li data-principle="operable">Timed auto-redirect breaks switch user input.</li>
</ul>
</section>
<section id="add-item-to-cart-understandable" aria-labelledby="add-item-to-cart-understandable-h">
<h3 id="add-item-to-cart-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Tax details hidden until checkout, confusing first-time buyers.</li>
<li data-principle="understandable">Out-of-stock message appears after click, not before.</li>
<li data-principle="understandable">Cart summary labels (“item count”) inconsistent with page titles.</li>
</ul>
</section>
</article>
<article id="checkout-and-pay" aria-labelledby="checkout-and-pay-h">
<h2 data-principle="pattern" id="checkout-and-pay-h">Checkout and pay</h2>
<p class="user-action" data-principle="user-action">User completes payment and confirmation.</p>
<section id="checkout-and-pay-perceivable" aria-labelledby="checkout-and-pay-perceivable-h">
<h3 id="checkout-and-pay-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Error banner rendered in red only.</li>
<li data-principle="perceivable">Receipt preview missing semantic structure.</li>
<li data-principle="perceivable">Card-type logos lack alt text.</li>
</ul>
</section>
<section id="checkout-and-pay-operable" aria-labelledby="checkout-and-pay-operable-h">
<h3 id="checkout-and-pay-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Numeric keyboard suppressed for card fields on tablet.</li>
<li data-principle="operable">Focus trapped in third-party iframe.</li>
<li data-principle="operable">Voice dictation fails during two-factor entry.</li>
</ul>
</section>
<section id="checkout-and-pay-understandable" aria-labelledby="checkout-and-pay-understandable-h">
<h3 id="checkout-and-pay-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Error “invalid token” technical and unhelpful.</li>
<li data-principle="understandable">Tax summary placement inconsistent between steps.</li>
<li data-principle="understandable">Refund policy link hidden in fine print.</li>
</ul>
</section>
</article>
<article id="apply-promo-code" aria-labelledby="apply-promo-code-h">
<h2 data-principle="pattern" id="apply-promo-code-h">Apply promo code/coupon</h2>
<p class="user-action" data-principle="user-action">User applies discounts or promotions.</p>
<section id="apply-promo-code-perceivable" aria-labelledby="apply-promo-code-perceivable-h">
<h3 id="apply-promo-code-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Error tooltip obscures field label.</li>
<li data-principle="perceivable">Code input placeholder text too light.</li>
<li data-principle="perceivable">Savings summary mis-ordered in screen-reader flow.</li>
</ul>
</section>
<section id="apply-promo-code-operable" aria-labelledby="apply-promo-code-operable-h">
<h3 id="apply-promo-code-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Keyboard user can’t remove code without mouse.</li>
<li data-principle="operable">Gesture swipe to reveal coupon unavailable to keyboard.</li>
<li data-principle="operable">Auto-apply function refreshes entire page.</li>
</ul>
</section>
<section id="apply-promo-code-understandable" aria-labelledby="apply-promo-code-understandable-h">
<h3 id="apply-promo-code-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">“Partially applied” status vague.</li>
<li data-principle="understandable">Currency rounding differs from displayed amount.</li>
<li data-principle="understandable">Error copy reads as blameful (“you entered wrong code”).</li>
</ul>
</section>
</article>
<article id="save-to-wishlist" aria-labelledby="save-to-wishlist-h">
<h2 data-principle="pattern" id="save-to-wishlist-h">Save to wishlist</h2>
<p class="user-action" data-principle="user-action">User bookmarks or saves items for later.</p>
<section id="save-to-wishlist-perceivable" aria-labelledby="save-to-wishlist-perceivable-h">
<h3 id="save-to-wishlist-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Confirmation animation subtle and unannounced.</li>
<li data-principle="perceivable">Color-change only indicates saved state.</li>
<li data-principle="perceivable">Sync spinner loops indefinitely without status message.</li>
</ul>
</section>
<section id="save-to-wishlist-operable" aria-labelledby="save-to-wishlist-operable-h">
<h3 id="save-to-wishlist-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Keyboard focus returns to top after save.</li>
<li data-principle="operable">Long-press gesture required on touch.</li>
<li data-principle="operable">Rapid clicks cause duplicate saves.</li>
</ul>
</section>
<section id="save-to-wishlist-understandable" aria-labelledby="save-to-wishlist-understandable-h">
<h3 id="save-to-wishlist-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">“Favorites” and “Wishlist” labels used interchangeably.</li>
<li data-principle="understandable">Lack of privacy notice for shared lists.</li>
<li data-principle="understandable">Email confirmation contradicts onscreen status.</li>
</ul>
</section>
</article>
<article id="compare-products-features" aria-labelledby="compare-products-features-h">
<h2 data-principle="pattern" id="compare-products-features-h">Compare products/features</h2>
<p class="user-action" data-principle="user-action">User compares details between multiple options.</p>
<section id="compare-products-features-perceivable" aria-labelledby="compare-products-features-perceivable-h">
<h3 id="compare-products-features-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Header row not sticky for zoom users.</li>
<li data-principle="perceivable">Column labels truncate at small font sizes.</li>
<li data-principle="perceivable">Comparison summary not in reading order.</li>
</ul>
</section>
<section id="compare-products-features-operable" aria-labelledby="compare-products-features-operable-h">
<h3 id="compare-products-features-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Horizontal scroll locks arrow key control.</li>
<li data-principle="operable">Toggle checkboxes require precise pointer.</li>
<li data-principle="operable">Voice command “next column” unrecognized.</li>
</ul>
</section>
<section id="compare-products-features-understandable" aria-labelledby="compare-products-features-understandable-h">
<h3 id="compare-products-features-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Feature names inconsistent across columns.</li>
<li data-principle="understandable">Missing baseline makes differences meaningless.</li>
<li data-principle="understandable">Symbols (✓, ✗) unexplained for screen reader.</li>
</ul>
</section>
</article>
<article id="submit-expense-report" aria-labelledby="submit-expense-report-h">
<h2 data-principle="pattern" id="submit-expense-report-h">Submit an expense report for approval</h2>
<p class="user-action" data-principle="user-action">User uploads receipts and requests reimbursement.</p>
<section id="submit-expense-report-perceivable" aria-labelledby="submit-expense-report-perceivable-h">
<h3 id="submit-expense-report-perceivable-h">Perceivable</h3>
<ul>
<li data-principle="perceivable">Currency symbols tiny in high-zoom view.</li>
<li data-principle="perceivable">Bar chart summary uses color only.</li>
<li data-principle="perceivable">File status icons lack text.</li>
</ul>
</section>
<section id="submit-expense-report-operable" aria-labelledby="submit-expense-report-operable-h">
<h3 id="submit-expense-report-operable-h">Operable</h3>
<ul>
<li data-principle="operable">Drag-drop receipt upload not keyboard supported.</li>
<li data-principle="operable">Approver list requires fine scroll control.</li>
<li data-principle="operable">Auto-save activates during voice dictation.</li>
</ul>
</section>
<section id="submit-expense-report-understandable" aria-labelledby="submit-expense-report-understandable-h">
<h3 id="submit-expense-report-understandable-h">Understandable</h3>
<ul>
<li data-principle="understandable">Policy codes (“T&E 123”) unexplained.</li>
<li data-principle="understandable">Status terms (“Posted,” “Processed”) confusing.</li>
<li data-principle="understandable">Tax category language too technical.</li>
</ul>
</section>