@verndale/accessibility-standards 1.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/OPERATING.md +3 -1
- package/README.md +4 -0
- package/bin/accessibility-standards.mjs +1 -1
- package/dist/manifest.json +159 -101
- package/dist/profiles/ai-orchestration/coverage-manifest.json +724 -68
- package/dist/profiles/ai-orchestration/implementation/accessibility.md +825 -10
- package/dist/profiles/ai-orchestration/pattern-contracts.json +1015 -343
- package/dist/profiles/ai-orchestration/patterns/accordion.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/alert.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/carousel.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/checkbox.md +27 -0
- package/dist/profiles/ai-orchestration/patterns/combobox.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/consequential-submission.md +15 -1
- package/dist/profiles/ai-orchestration/patterns/dialog.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/disclosure.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/dynamic-status.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/field.md +15 -0
- package/dist/profiles/ai-orchestration/patterns/image.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/listbox.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/media-player.md +17 -0
- package/dist/profiles/ai-orchestration/patterns/menu-button.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/menu.md +30 -0
- package/dist/profiles/ai-orchestration/patterns/pagination.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/popover.md +15 -0
- package/dist/profiles/ai-orchestration/patterns/progress.md +15 -0
- package/dist/profiles/ai-orchestration/patterns/radio-group.md +27 -0
- package/dist/profiles/ai-orchestration/patterns/slider.md +31 -0
- package/dist/profiles/ai-orchestration/patterns/spinbutton.md +28 -0
- package/dist/profiles/ai-orchestration/patterns/tabs.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/tooltip.md +14 -0
- package/dist/profiles/ai-orchestration/patterns/tree-view.md +31 -0
- package/dist/profiles/ai-orchestration/patterns/validation.md +15 -0
- package/dist/profiles/ai-orchestration/review/accessibility.md +21 -6
- package/dist/profiles/ai-orchestration/semantics/accessible-authentication.md +13 -0
- package/dist/profiles/ai-orchestration/semantics/accessible-name.md +8 -1
- package/dist/profiles/ai-orchestration/semantics/alert.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/consequential-action.md +6 -1
- package/dist/profiles/ai-orchestration/semantics/consistent-help.md +13 -0
- package/dist/profiles/ai-orchestration/semantics/data-table.md +7 -1
- package/dist/profiles/ai-orchestration/semantics/dragging-alternative.md +13 -0
- package/dist/profiles/ai-orchestration/semantics/expanded-state.md +6 -0
- package/dist/profiles/ai-orchestration/semantics/focus.initial.md +4 -0
- package/dist/profiles/ai-orchestration/semantics/focus.return.md +4 -0
- package/dist/profiles/ai-orchestration/semantics/focus.visible.md +8 -1
- package/dist/profiles/ai-orchestration/semantics/form-error.md +8 -1
- package/dist/profiles/ai-orchestration/semantics/form-label.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/form-required.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/headings.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/keyboard.escape.md +4 -0
- package/dist/profiles/ai-orchestration/semantics/keyboard.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/landmarks.md +6 -0
- package/dist/profiles/ai-orchestration/semantics/live-status.md +7 -1
- package/dist/profiles/ai-orchestration/semantics/media-alternatives.md +11 -0
- package/dist/profiles/ai-orchestration/semantics/motion-control.md +8 -1
- package/dist/profiles/ai-orchestration/semantics/name-role-value.md +6 -1
- package/dist/profiles/ai-orchestration/semantics/native-dialog.md +7 -0
- package/dist/profiles/ai-orchestration/semantics/native-elements.md +5 -0
- package/dist/profiles/ai-orchestration/semantics/non-text-alternative.md +5 -0
- package/dist/profiles/ai-orchestration/semantics/redundant-entry.md +13 -0
- package/dist/profiles/ai-orchestration/semantics/roles-states-properties.md +6 -0
- package/dist/profiles/ai-orchestration/semantics/selected-state.md +6 -0
- package/dist/profiles/ai-orchestration/semantics/target-size.md +6 -1
- package/dist/profiles/ai-orchestration/semantics.json +843 -100
- package/dist/profiles/ai-orchestration/testing/accessibility.md +33 -3
- package/dist/profiles/ai-orchestration/ui-design-brain-bindings.json +836 -0
- package/dist/profiles/conductor/a11y-semantics.md +270 -10
- package/dist/profiles/conductor/accessibility-quality.md +557 -1
- package/dist/profiles/conductor/applicability-matrix.json +270 -230
- package/dist/profiles/conductor/coverage-manifest.json +724 -68
- package/dist/profiles/conductor/pattern-contracts.json +1015 -343
- package/dist/profiles/conductor/patterns/accordion.json +42 -24
- package/dist/profiles/conductor/patterns/alert.json +36 -18
- package/dist/profiles/conductor/patterns/carousel.json +43 -25
- package/dist/profiles/conductor/patterns/checkbox.json +67 -0
- package/dist/profiles/conductor/patterns/combobox.json +44 -26
- package/dist/profiles/conductor/patterns/consequential-submission.json +41 -22
- package/dist/profiles/conductor/patterns/dialog.json +44 -26
- package/dist/profiles/conductor/patterns/disclosure.json +40 -22
- package/dist/profiles/conductor/patterns/dynamic-status.json +38 -19
- package/dist/profiles/conductor/patterns/field.json +58 -22
- package/dist/profiles/conductor/patterns/image.json +48 -19
- package/dist/profiles/conductor/patterns/listbox.json +42 -24
- package/dist/profiles/conductor/patterns/media-player.json +76 -26
- package/dist/profiles/conductor/patterns/menu-button.json +41 -23
- package/dist/profiles/conductor/patterns/menu.json +78 -0
- package/dist/profiles/conductor/patterns/pagination.json +41 -22
- package/dist/profiles/conductor/patterns/popover.json +49 -23
- package/dist/profiles/conductor/patterns/progress.json +45 -20
- package/dist/profiles/conductor/patterns/radio-group.json +69 -0
- package/dist/profiles/conductor/patterns/slider.json +84 -0
- package/dist/profiles/conductor/patterns/spinbutton.json +74 -0
- package/dist/profiles/conductor/patterns/tabs.json +41 -23
- package/dist/profiles/conductor/patterns/tooltip.json +38 -20
- package/dist/profiles/conductor/patterns/tree-view.json +77 -0
- package/dist/profiles/conductor/patterns/validation.json +59 -23
- package/dist/profiles/conductor/semantics.json +843 -100
- package/dist/profiles/conductor/ui-design-brain-bindings.json +836 -0
- package/dist/projection-manifest.json +123 -82
- package/dist/requirements-to-implementation.md +8 -0
- package/lib/build-manifest.mjs +12 -6
- package/lib/build.mjs +21 -7
- package/lib/compile-applicability.mjs +131 -10
- package/lib/coverage.mjs +20 -0
- package/lib/digest.mjs +8 -0
- package/lib/index.mjs +1 -1
- package/lib/load.mjs +44 -1
- package/lib/provenance.mjs +51 -0
- package/lib/render.mjs +115 -31
- package/lib/sync.mjs +242 -28
- package/lib/validate.mjs +557 -24
- package/package.json +27 -10
- package/profiles/ai-orchestration/profile.json +1 -1
- package/profiles/ai-orchestration/templates/patterns/README.md +1 -1
- package/profiles/ai-orchestration/templates/review/README.md +1 -1
- package/profiles/ai-orchestration/templates/semantics/README.md +1 -1
- package/profiles/ai-orchestration/templates/testing/README.md +1 -1
- package/profiles/conductor/profile.json +1 -1
- package/profiles/conductor/templates/evidence/README.md +1 -1
- package/profiles/conductor/templates/patterns/README.md +1 -1
- package/profiles/conductor/templates/semantics/README.md +1 -1
- package/schemas/consumer-config.schema.json +1 -1
- package/schemas/contract.schema.json +1 -0
- package/schemas/manifest.schema.json +1 -1
- package/schemas/pattern.schema.json +98 -1
- package/schemas/profile.schema.json +1 -1
- package/schemas/projection-manifest.schema.json +84 -1
- package/schemas/semantic.schema.json +26 -1
- package/schemas/standards-reference.schema.json +105 -0
- package/schemas/ui-design-brain-bindings.schema.json +86 -0
- package/schemas/wcag-coverage.schema.json +93 -0
- package/src/applicability/facts.yml +27 -1
- package/src/applicability/matrix.yml +8 -9
- package/src/applicability/ui-design-brain-bindings.yml +196 -0
- package/src/contract.yml +1 -0
- package/src/coverage/wcag-2.2.yml +68 -0
- package/src/patterns/disclosure/accordion.yml +1 -1
- package/src/patterns/disclosure/disclosure.yml +1 -1
- package/src/patterns/feedback/alert.yml +1 -1
- package/src/patterns/feedback/dynamic-status.yml +1 -1
- package/src/patterns/feedback/progress.yml +1 -1
- package/src/patterns/forms/consequential-submission.yml +1 -1
- package/src/patterns/forms/field.yml +1 -1
- package/src/patterns/forms/spinbutton.yml +1 -0
- package/src/patterns/forms/validation.yml +1 -1
- package/src/patterns/media/carousel.yml +1 -1
- package/src/patterns/media/image.yml +1 -1
- package/src/patterns/media/media-player.yml +1 -1
- package/src/patterns/navigation/menu-button.yml +1 -1
- package/src/patterns/navigation/menu.yml +1 -0
- package/src/patterns/navigation/pagination.yml +1 -1
- package/src/patterns/navigation/tabs.yml +1 -1
- package/src/patterns/navigation/tree-view.yml +1 -0
- package/src/patterns/overlays/dialog.yml +1 -1
- package/src/patterns/overlays/popover.yml +1 -1
- package/src/patterns/overlays/tooltip.yml +1 -1
- package/src/patterns/selection/checkbox.yml +1 -0
- package/src/patterns/selection/combobox.yml +1 -1
- package/src/patterns/selection/listbox.yml +1 -1
- package/src/patterns/selection/radio-group.yml +1 -0
- package/src/patterns/selection/slider.yml +1 -0
- package/src/semantics/accessible-names.yml +1 -1
- package/src/semantics/forms.yml +1 -1
- package/src/semantics/headings-landmarks.yml +1 -1
- package/src/semantics/keyboard-focus.yml +1 -1
- package/src/semantics/live-regions.yml +1 -1
- package/src/semantics/media.yml +1 -1
- package/src/semantics/native-elements.yml +1 -1
- package/src/semantics/roles-states-properties.yml +1 -1
- package/src/semantics/tables.yml +1 -1
- package/src/semantics/wcag-2.2.yml +1 -0
- package/src/sources.yml +1 -1
|
@@ -1,9 +1,38 @@
|
|
|
1
1
|
<!-- GENERATED by @verndale/accessibility-standards; DO NOT EDIT -->
|
|
2
|
+
<!-- package: @verndale/accessibility-standards@3.0.0; profile: ai-orchestration@3.0.0; schema: 3; source-digest: 708ac82783bfb5ebcce31e4dada15d8580863f5e37b32d1807adf61e415ed5af; profile-digest: de396e9a23010dff2e8abf3ae7e8500153599583ffa31a595b3a94fbe9df3da4 -->
|
|
2
3
|
# Accessibility implementation contract
|
|
3
4
|
|
|
5
|
+
## foundation.conformance-boundary
|
|
6
|
+
|
|
7
|
+
Automated checks provide evidence but do not establish conformance; every applicable outcome needs its declared proof routes.
|
|
8
|
+
|
|
9
|
+
## foundation.standards-hierarchy
|
|
10
|
+
|
|
11
|
+
Prefer native platform semantics; apply WCAG conformance, ARIA only where needed, APG interaction guidance, then non-conflicting product policy.
|
|
12
|
+
|
|
13
|
+
## foundation.wcag-2.2
|
|
14
|
+
|
|
15
|
+
Meet WCAG 2.2 Level A and AA. Target size minimum is 24 by 24 CSS pixels or an allowed exception; 44 by 44 is enhanced guidance only.
|
|
16
|
+
|
|
17
|
+
## semantics.accessible-authentication
|
|
18
|
+
|
|
19
|
+
Do not require a cognitive function test at any authentication step unless that step provides a non-cognitive alternative or an assistive mechanism such as password-manager support or copy and paste, including pasting a complete one-time code, or the test is limited to the object-recognition or user-provided personal-content exception.
|
|
20
|
+
|
|
21
|
+
Standards:
|
|
22
|
+
- [wcag-2.2 3.3.8](<https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum>) (Level AA) — normative
|
|
23
|
+
- [wcag-2.2-understanding 3.3.8](<https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html>) (Level AA) — informative
|
|
24
|
+
|
|
25
|
+
Proof: e2e, human.
|
|
26
|
+
|
|
4
27
|
## semantics.accessible-name
|
|
5
28
|
|
|
6
|
-
Every interactive or meaning-bearing control has a concise programmatic name
|
|
29
|
+
Every interactive or meaning-bearing control has a concise programmatic name. For user interface components whose visible labels include text or images of text, the accessible name contains the text presented visually; preserve that text's order where practical.
|
|
30
|
+
|
|
31
|
+
Standards:
|
|
32
|
+
- [wcag-2.2 2.5.3](<https://www.w3.org/TR/WCAG22/#label-in-name>) (Level A) — normative
|
|
33
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
34
|
+
- [wcag-2.2-understanding 2.5.3](<https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html>) (Level A) — informative
|
|
35
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
7
36
|
|
|
8
37
|
Proof: unit, axe, human.
|
|
9
38
|
|
|
@@ -11,47 +40,105 @@ Proof: unit, axe, human.
|
|
|
11
40
|
|
|
12
41
|
Use alert semantics only for urgent, time-sensitive messages that require immediate announcement.
|
|
13
42
|
|
|
43
|
+
Standards:
|
|
44
|
+
- [aria-apg alert](<https://www.w3.org/WAI/ARIA/apg/patterns/alert/>) — informative
|
|
45
|
+
- [wai-aria-1.2 alert](<https://www.w3.org/TR/wai-aria-1.2/#alert>) — normative
|
|
46
|
+
- [wcag-2.2 4.1.3](<https://www.w3.org/TR/WCAG22/#status-messages>) (Level AA) — normative
|
|
47
|
+
- [wcag-2.2-understanding 4.1.3](<https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html>) (Level AA) — informative
|
|
48
|
+
|
|
14
49
|
Proof: unit, human.
|
|
15
50
|
|
|
16
51
|
## semantics.consequential-action
|
|
17
52
|
|
|
18
|
-
|
|
53
|
+
For web pages that cause legal commitments or financial transactions, modify or delete user-controllable data in data storage systems, or submit user test responses, at least one safeguard is provided: submissions are reversible; user-entered data is checked for input errors and the user can correct them; or a mechanism lets the user review, confirm, and correct information before finalizing the submission.
|
|
54
|
+
|
|
55
|
+
Standards:
|
|
56
|
+
- [wcag-2.2 3.3.4](<https://www.w3.org/TR/WCAG22/#error-prevention-legal-financial-data>) (Level AA) — normative
|
|
57
|
+
- [wcag-2.2-understanding 3.3.4](<https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html>) (Level AA) — informative
|
|
58
|
+
|
|
59
|
+
Proof: e2e, human.
|
|
60
|
+
|
|
61
|
+
## semantics.consistent-help
|
|
62
|
+
|
|
63
|
+
When human contact details or mechanisms, self-help, or fully automated contact mechanisms repeat across pages in the same set, they occur in the same serialized order relative to other content for the same page variation unless the user initiates a change. This does not require adding help.
|
|
64
|
+
|
|
65
|
+
Standards:
|
|
66
|
+
- [wcag-2.2 3.2.6](<https://www.w3.org/TR/WCAG22/#consistent-help>) (Level A) — normative
|
|
67
|
+
- [wcag-2.2-understanding 3.2.6](<https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html>) (Level A) — informative
|
|
19
68
|
|
|
20
69
|
Proof: e2e, human.
|
|
21
70
|
|
|
22
71
|
## semantics.data-table
|
|
23
72
|
|
|
24
|
-
Tabular relationships use table
|
|
73
|
+
Tabular relationships use table semantics with programmatically associated row and column headers.
|
|
74
|
+
|
|
75
|
+
Standards:
|
|
76
|
+
- [aria-apg table](<https://www.w3.org/WAI/ARIA/apg/patterns/table/>) — informative
|
|
77
|
+
- [wcag-2.2 1.3.1](<https://www.w3.org/TR/WCAG22/#info-and-relationships>) (Level A) — normative
|
|
78
|
+
- [wcag-2.2-understanding 1.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html>) (Level A) — informative
|
|
25
79
|
|
|
26
80
|
Proof: axe, e2e, human.
|
|
27
81
|
|
|
82
|
+
## semantics.dragging-alternative
|
|
83
|
+
|
|
84
|
+
Author-provided functionality operated by dragging also provides an equivalent single-pointer method that does not require dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
|
|
85
|
+
|
|
86
|
+
Standards:
|
|
87
|
+
- [wcag-2.2 2.5.7](<https://www.w3.org/TR/WCAG22/#dragging-movements>) (Level AA) — normative
|
|
88
|
+
- [wcag-2.2-understanding 2.5.7](<https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html>) (Level AA) — informative
|
|
89
|
+
|
|
90
|
+
Proof: e2e, human.
|
|
91
|
+
|
|
28
92
|
## semantics.expanded-state
|
|
29
93
|
|
|
30
94
|
Expandable controls expose aria-expanded and identify the controlled region when needed.
|
|
31
95
|
|
|
96
|
+
Standards:
|
|
97
|
+
- [wai-aria-1.2 aria-expanded](<https://www.w3.org/TR/wai-aria-1.2/#aria-expanded>) — normative
|
|
98
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
99
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
100
|
+
|
|
32
101
|
Proof: unit, axe, e2e.
|
|
33
102
|
|
|
34
103
|
## semantics.focus.initial
|
|
35
104
|
|
|
36
105
|
On activation, focus moves to the deterministic target appropriate to the pattern.
|
|
37
106
|
|
|
107
|
+
Standards:
|
|
108
|
+
- [aria-apg dialog-modal](<https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboard_interaction>) — informative
|
|
109
|
+
|
|
38
110
|
Proof: unit, e2e.
|
|
39
111
|
|
|
40
112
|
## semantics.focus.return
|
|
41
113
|
|
|
42
114
|
On dismissal, focus returns to the invoking control or a documented logical successor.
|
|
43
115
|
|
|
116
|
+
Standards:
|
|
117
|
+
- [aria-apg dialog-modal](<https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboard_interaction>) — informative
|
|
118
|
+
|
|
44
119
|
Proof: unit, e2e.
|
|
45
120
|
|
|
46
121
|
## semantics.focus.visible
|
|
47
122
|
|
|
48
|
-
|
|
123
|
+
A visible keyboard focus indicator is available, and focused components are not entirely hidden by author-created content.
|
|
124
|
+
|
|
125
|
+
Standards:
|
|
126
|
+
- [wcag-2.2 2.4.11](<https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum>) (Level AA) — normative
|
|
127
|
+
- [wcag-2.2 2.4.7](<https://www.w3.org/TR/WCAG22/#focus-visible>) (Level AA) — normative
|
|
128
|
+
- [wcag-2.2-understanding 2.4.11](<https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html>) (Level AA) — informative
|
|
129
|
+
- [wcag-2.2-understanding 2.4.7](<https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html>) (Level AA) — informative
|
|
49
130
|
|
|
50
131
|
Proof: e2e, human.
|
|
51
132
|
|
|
52
133
|
## semantics.form-error
|
|
53
134
|
|
|
54
|
-
|
|
135
|
+
When an input error is automatically detected, identify the item in error and describe the error to the user in text. When correction suggestions are known, provide them unless doing so would jeopardize the security or purpose of the content.
|
|
136
|
+
|
|
137
|
+
Standards:
|
|
138
|
+
- [wcag-2.2 3.3.1](<https://www.w3.org/TR/WCAG22/#error-identification>) (Level A) — normative
|
|
139
|
+
- [wcag-2.2 3.3.3](<https://www.w3.org/TR/WCAG22/#error-suggestion>) (Level AA) — normative
|
|
140
|
+
- [wcag-2.2-understanding 3.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html>) (Level A) — informative
|
|
141
|
+
- [wcag-2.2-understanding 3.3.3](<https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html>) (Level AA) — informative
|
|
55
142
|
|
|
56
143
|
Proof: unit, axe, e2e, human.
|
|
57
144
|
|
|
@@ -59,41 +146,78 @@ Proof: unit, axe, e2e, human.
|
|
|
59
146
|
|
|
60
147
|
Every form control has a persistent programmatically associated label.
|
|
61
148
|
|
|
149
|
+
Standards:
|
|
150
|
+
- [wcag-2.2 1.3.1](<https://www.w3.org/TR/WCAG22/#info-and-relationships>) (Level A) — normative
|
|
151
|
+
- [wcag-2.2 3.3.2](<https://www.w3.org/TR/WCAG22/#labels-or-instructions>) (Level A) — normative
|
|
152
|
+
- [wcag-2.2-understanding 1.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html>) (Level A) — informative
|
|
153
|
+
- [wcag-2.2-understanding 3.3.2](<https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html>) (Level A) — informative
|
|
154
|
+
|
|
62
155
|
Proof: unit, axe.
|
|
63
156
|
|
|
64
157
|
## semantics.form-required
|
|
65
158
|
|
|
66
159
|
Requiredness is communicated visually and programmatically before submission.
|
|
67
160
|
|
|
161
|
+
Standards:
|
|
162
|
+
- [wcag-2.2 1.3.1](<https://www.w3.org/TR/WCAG22/#info-and-relationships>) (Level A) — normative
|
|
163
|
+
- [wcag-2.2 3.3.2](<https://www.w3.org/TR/WCAG22/#labels-or-instructions>) (Level A) — normative
|
|
164
|
+
- [wcag-2.2-understanding 1.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html>) (Level A) — informative
|
|
165
|
+
- [wcag-2.2-understanding 3.3.2](<https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html>) (Level A) — informative
|
|
166
|
+
|
|
68
167
|
Proof: unit, axe.
|
|
69
168
|
|
|
70
169
|
## semantics.headings
|
|
71
170
|
|
|
72
171
|
Headings describe document structure without choosing levels for visual appearance.
|
|
73
172
|
|
|
173
|
+
Standards:
|
|
174
|
+
- [wcag-2.2 1.3.1](<https://www.w3.org/TR/WCAG22/#info-and-relationships>) (Level A) — normative
|
|
175
|
+
- [wcag-2.2 2.4.6](<https://www.w3.org/TR/WCAG22/#headings-and-labels>) (Level AA) — normative
|
|
176
|
+
- [wcag-2.2-understanding 1.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html>) (Level A) — informative
|
|
177
|
+
- [wcag-2.2-understanding 2.4.6](<https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html>) (Level AA) — informative
|
|
178
|
+
|
|
74
179
|
Proof: axe, human.
|
|
75
180
|
|
|
76
181
|
## semantics.keyboard
|
|
77
182
|
|
|
78
183
|
All functionality is operable with a keyboard without traps.
|
|
79
184
|
|
|
185
|
+
Standards:
|
|
186
|
+
- [wcag-2.2 2.1.1](<https://www.w3.org/TR/WCAG22/#keyboard>) (Level A) — normative
|
|
187
|
+
- [wcag-2.2 2.1.2](<https://www.w3.org/TR/WCAG22/#no-keyboard-trap>) (Level A) — normative
|
|
188
|
+
- [wcag-2.2-understanding 2.1.1](<https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html>) (Level A) — informative
|
|
189
|
+
- [wcag-2.2-understanding 2.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html>) (Level A) — informative
|
|
190
|
+
|
|
80
191
|
Proof: e2e, human.
|
|
81
192
|
|
|
82
193
|
## semantics.keyboard.escape
|
|
83
194
|
|
|
84
195
|
Escape closes the topmost dismissible overlay without activating its trigger.
|
|
85
196
|
|
|
197
|
+
Standards:
|
|
198
|
+
- [aria-apg dialog-modal](<https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboard_interaction>) — informative
|
|
199
|
+
|
|
86
200
|
Proof: unit, e2e.
|
|
87
201
|
|
|
88
202
|
## semantics.landmarks
|
|
89
203
|
|
|
90
204
|
Use native landmarks and name repeated landmarks only when a name is required to distinguish them.
|
|
91
205
|
|
|
206
|
+
Standards:
|
|
207
|
+
- [aria-apg landmark-regions](<https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/>) — informative
|
|
208
|
+
- [wcag-2.2 1.3.1](<https://www.w3.org/TR/WCAG22/#info-and-relationships>) (Level A) — normative
|
|
209
|
+
- [wcag-2.2-understanding 1.3.1](<https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html>) (Level A) — informative
|
|
210
|
+
|
|
92
211
|
Proof: axe, human.
|
|
93
212
|
|
|
94
213
|
## semantics.live-status
|
|
95
214
|
|
|
96
|
-
|
|
215
|
+
Status messages that can be programmatically determined are exposed to assistive technology through appropriate roles or properties without receiving focus, using correctly scoped and non-duplicative live regions where needed.
|
|
216
|
+
|
|
217
|
+
Standards:
|
|
218
|
+
- [wai-aria-1.2 status](<https://www.w3.org/TR/wai-aria-1.2/#status>) — normative
|
|
219
|
+
- [wcag-2.2 4.1.3](<https://www.w3.org/TR/WCAG22/#status-messages>) (Level AA) — normative
|
|
220
|
+
- [wcag-2.2-understanding 4.1.3](<https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html>) (Level AA) — informative
|
|
97
221
|
|
|
98
222
|
Proof: unit, e2e, human.
|
|
99
223
|
|
|
@@ -101,17 +225,37 @@ Proof: unit, e2e, human.
|
|
|
101
225
|
|
|
102
226
|
Prerecorded media provides applicable captions, transcripts, and audio description.
|
|
103
227
|
|
|
228
|
+
Standards:
|
|
229
|
+
- [wcag-2.2 1.2.1](<https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded>) (Level A) — normative
|
|
230
|
+
- [wcag-2.2 1.2.2](<https://www.w3.org/TR/WCAG22/#captions-prerecorded>) (Level A) — normative
|
|
231
|
+
- [wcag-2.2 1.2.3](<https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded>) (Level A) — normative
|
|
232
|
+
- [wcag-2.2 1.2.5](<https://www.w3.org/TR/WCAG22/#audio-description-prerecorded>) (Level AA) — normative
|
|
233
|
+
- [wcag-2.2-understanding 1.2.1](<https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html>) (Level A) — informative
|
|
234
|
+
- [wcag-2.2-understanding 1.2.2](<https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html>) (Level A) — informative
|
|
235
|
+
- [wcag-2.2-understanding 1.2.3](<https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html>) (Level A) — informative
|
|
236
|
+
- [wcag-2.2-understanding 1.2.5](<https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html>) (Level AA) — informative
|
|
237
|
+
|
|
104
238
|
Proof: human.
|
|
105
239
|
|
|
106
240
|
## semantics.motion-control
|
|
107
241
|
|
|
108
|
-
|
|
242
|
+
Moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and appears alongside other content provides pause, stop, or hide controls unless essential. Automatically starting, parallel auto-updating content provides pause, stop, or hide controls or lets the user control update frequency unless essential. Honor reduced-motion preferences as a mechanism for disabling non-essential interaction-triggered animation.
|
|
243
|
+
|
|
244
|
+
Standards:
|
|
245
|
+
- [wcag-2.2 2.2.2](<https://www.w3.org/TR/WCAG22/#pause-stop-hide>) (Level A) — normative
|
|
246
|
+
- [wcag-2.2 2.3.3](<https://www.w3.org/TR/WCAG22/#animation-from-interactions>) (Level AAA) — normative
|
|
247
|
+
- [wcag-2.2-understanding 2.2.2](<https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html>) (Level A) — informative
|
|
248
|
+
- [wcag-2.2-understanding 2.3.3](<https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html>) (Level AAA) — informative
|
|
109
249
|
|
|
110
250
|
Proof: e2e, human.
|
|
111
251
|
|
|
112
252
|
## semantics.name-role-value
|
|
113
253
|
|
|
114
|
-
|
|
254
|
+
For every user interface component, the name and role can be programmatically determined; states, properties, and values that users can set can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
|
|
255
|
+
|
|
256
|
+
Standards:
|
|
257
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
258
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
115
259
|
|
|
116
260
|
Proof: unit, axe, human.
|
|
117
261
|
|
|
@@ -119,211 +263,882 @@ Proof: unit, axe, human.
|
|
|
119
263
|
|
|
120
264
|
Use dialog semantics with a programmatic name and modal state only when interaction is modal.
|
|
121
265
|
|
|
266
|
+
Standards:
|
|
267
|
+
- [aria-apg dialog-modal](<https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/>) — informative
|
|
268
|
+
- [wai-aria-1.2 dialog](<https://www.w3.org/TR/wai-aria-1.2/#dialog>) — normative
|
|
269
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
270
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
271
|
+
|
|
122
272
|
Proof: axe, e2e, human.
|
|
123
273
|
|
|
124
274
|
## semantics.native-elements
|
|
125
275
|
|
|
126
276
|
Use the native HTML element whose semantics and behavior match the control before adding ARIA.
|
|
127
277
|
|
|
278
|
+
Standards:
|
|
279
|
+
- [aria-apg read-me-first](<https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/>) — informative
|
|
280
|
+
- [wai-aria-1.2 host\_general\_conflict](<https://www.w3.org/TR/wai-aria-1.2/#host_general_conflict>) — normative
|
|
281
|
+
|
|
128
282
|
Proof: axe, human.
|
|
129
283
|
|
|
130
284
|
## semantics.non-text-alternative
|
|
131
285
|
|
|
132
286
|
Meaningful non-text content has an equivalent alternative and decorative content is ignored by assistive technology.
|
|
133
287
|
|
|
288
|
+
Standards:
|
|
289
|
+
- [wcag-2.2 1.1.1](<https://www.w3.org/TR/WCAG22/#non-text-content>) (Level A) — normative
|
|
290
|
+
- [wcag-2.2-understanding 1.1.1](<https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html>) (Level A) — informative
|
|
291
|
+
|
|
134
292
|
Proof: axe, human.
|
|
135
293
|
|
|
294
|
+
## semantics.redundant-entry
|
|
295
|
+
|
|
296
|
+
Information previously entered by or provided to the user and required again in the same process is auto-populated or available to select, unless re-entry is essential, required for security, or the prior information is no longer valid.
|
|
297
|
+
|
|
298
|
+
Standards:
|
|
299
|
+
- [wcag-2.2 3.3.7](<https://www.w3.org/TR/WCAG22/#redundant-entry>) (Level A) — normative
|
|
300
|
+
- [wcag-2.2-understanding 3.3.7](<https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html>) (Level A) — informative
|
|
301
|
+
|
|
302
|
+
Proof: e2e, human.
|
|
303
|
+
|
|
136
304
|
## semantics.roles-states-properties
|
|
137
305
|
|
|
138
306
|
Apply only valid ARIA roles, states, and properties and keep exposed state synchronized with rendered behavior.
|
|
139
307
|
|
|
308
|
+
Standards:
|
|
309
|
+
- [wai-aria-1.2 roles](<https://www.w3.org/TR/wai-aria-1.2/#roles>) — normative
|
|
310
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
311
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
312
|
+
|
|
140
313
|
Proof: unit, axe, e2e.
|
|
141
314
|
|
|
142
315
|
## semantics.selected-state
|
|
143
316
|
|
|
144
317
|
Selection widgets expose current selection with the state required by their role.
|
|
145
318
|
|
|
319
|
+
Standards:
|
|
320
|
+
- [wai-aria-1.2 aria-selected](<https://www.w3.org/TR/wai-aria-1.2/#aria-selected>) — normative
|
|
321
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
322
|
+
- [wcag-2.2-understanding 4.1.2](<https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html>) (Level A) — informative
|
|
323
|
+
|
|
146
324
|
Proof: unit, e2e.
|
|
147
325
|
|
|
148
326
|
## semantics.target-size
|
|
149
327
|
|
|
150
|
-
|
|
328
|
+
Each pointer target contains an axis-aligned 24 by 24 CSS pixel square unless one of these exceptions applies: an undersized target is positioned so that a 24 CSS pixel diameter circle centered on its bounding box does not intersect another target or the corresponding circle for another undersized target; an equivalent control on the same page meets this criterion; the target is in a sentence or its size is otherwise constrained by the line-height of non-target text; the target size is determined by an unmodified user agent; or the target's particular presentation is essential or legally required for the information being conveyed.
|
|
329
|
+
|
|
330
|
+
Standards:
|
|
331
|
+
- [wcag-2.2 2.5.8](<https://www.w3.org/TR/WCAG22/#target-size-minimum>) (Level AA) — normative
|
|
332
|
+
- [wcag-2.2-understanding 2.5.8](<https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html>) (Level AA) — informative
|
|
151
333
|
|
|
152
334
|
Proof: e2e, human.
|
|
153
335
|
|
|
154
336
|
## pattern.accordion
|
|
155
337
|
|
|
338
|
+
Standards:
|
|
339
|
+
- [aria-apg accordion](<https://www.w3.org/WAI/ARIA/apg/patterns/accordion/>) — informative
|
|
340
|
+
|
|
156
341
|
Requires: semantics.native-elements, semantics.accessible-name, semantics.expanded-state, semantics.keyboard, semantics.focus.visible.
|
|
157
342
|
|
|
343
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.accordion"}}`
|
|
344
|
+
|
|
345
|
+
Scope: Grouped disclosure sections.
|
|
346
|
+
|
|
158
347
|
Behavior:
|
|
159
348
|
- Toggle only the controlled panel
|
|
160
349
|
- Preserve DOM and focus order
|
|
161
350
|
|
|
351
|
+
Product decisions: single_or_multiple_open.
|
|
352
|
+
|
|
353
|
+
Functional Spec bindings: behavior, states, keyboard.
|
|
354
|
+
|
|
355
|
+
Implementation outcomes: accordion-control, accordion-panel.
|
|
356
|
+
|
|
162
357
|
Evidence: unit, axe, e2e, human.
|
|
163
358
|
|
|
164
359
|
## pattern.alert
|
|
165
360
|
|
|
361
|
+
Standards:
|
|
362
|
+
- [aria-apg alert](<https://www.w3.org/WAI/ARIA/apg/patterns/alert/>) — informative
|
|
363
|
+
|
|
166
364
|
Requires: semantics.alert.
|
|
167
365
|
|
|
366
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.alert"}}`
|
|
367
|
+
|
|
368
|
+
Scope: Urgent message.
|
|
369
|
+
|
|
168
370
|
Behavior:
|
|
169
371
|
- Announce once without moving focus
|
|
170
372
|
|
|
373
|
+
Product decisions: urgency.
|
|
374
|
+
|
|
375
|
+
Functional Spec bindings: messaging.
|
|
376
|
+
|
|
377
|
+
Implementation outcomes: alert-announcement.
|
|
378
|
+
|
|
171
379
|
Evidence: unit, human.
|
|
172
380
|
|
|
173
381
|
## pattern.carousel
|
|
174
382
|
|
|
383
|
+
Standards:
|
|
384
|
+
- [aria-apg carousel](<https://www.w3.org/WAI/ARIA/apg/patterns/carousel/>) — informative
|
|
385
|
+
|
|
175
386
|
Requires: semantics.accessible-name, semantics.keyboard, semantics.focus.visible, semantics.motion-control, semantics.live-status.
|
|
176
387
|
|
|
388
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.carousel"}}`
|
|
389
|
+
|
|
390
|
+
Scope: Rotating content set.
|
|
391
|
+
|
|
177
392
|
Behavior:
|
|
178
393
|
- Pause rotation on interaction
|
|
179
394
|
- Provide named controls and current position
|
|
180
395
|
|
|
396
|
+
Product decisions: auto_rotation, looping.
|
|
397
|
+
|
|
398
|
+
Functional Spec bindings: behavior, states, controls.
|
|
399
|
+
|
|
400
|
+
Implementation outcomes: carousel-controls, carousel-rotation.
|
|
401
|
+
|
|
402
|
+
Evidence: unit, axe, e2e, human.
|
|
403
|
+
|
|
404
|
+
## pattern.checkbox
|
|
405
|
+
|
|
406
|
+
Standards:
|
|
407
|
+
- [aria-apg checkbox](<https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/>) — informative
|
|
408
|
+
|
|
409
|
+
Requires: semantics.accessible-name, semantics.focus.visible, semantics.form-label, semantics.keyboard, semantics.name-role-value, semantics.native-elements, semantics.roles-states-properties.
|
|
410
|
+
|
|
411
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.checkbox"}}`
|
|
412
|
+
|
|
413
|
+
Scope: Standalone, grouped, dual-state, or tri-state checkboxes.
|
|
414
|
+
|
|
415
|
+
Behavior:
|
|
416
|
+
- Use a native checkbox when it provides the required behavior; otherwise expose checkbox semantics and synchronize checked, unchecked, or mixed state
|
|
417
|
+
- Space toggles the focused checkbox without changing unrelated controls
|
|
418
|
+
- Associate logical groups and any relevant descriptions with programmatic group labels
|
|
419
|
+
|
|
420
|
+
Product decisions: dual_or_tri_state, group_labeling, mixed_state_cycle.
|
|
421
|
+
|
|
422
|
+
Functional Spec bindings: fields, states, keyboard.
|
|
423
|
+
|
|
424
|
+
Implementation outcomes: checkbox-group-semantics, checkbox-state-machine.
|
|
425
|
+
|
|
181
426
|
Evidence: unit, axe, e2e, human.
|
|
182
427
|
|
|
183
428
|
## pattern.combobox
|
|
184
429
|
|
|
430
|
+
Standards:
|
|
431
|
+
- [aria-apg combobox](<https://www.w3.org/WAI/ARIA/apg/patterns/combobox/>) — informative
|
|
432
|
+
|
|
185
433
|
Requires: semantics.accessible-name, semantics.expanded-state, semantics.selected-state, semantics.keyboard, semantics.live-status.
|
|
186
434
|
|
|
435
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.combobox"}}`
|
|
436
|
+
|
|
437
|
+
Scope: Input with selectable popup.
|
|
438
|
+
|
|
187
439
|
Behavior:
|
|
188
440
|
- Keyboard controls popup, option, and input independently
|
|
189
441
|
|
|
442
|
+
Product decisions: editable, autocomplete, selection_commit.
|
|
443
|
+
|
|
444
|
+
Functional Spec bindings: behavior, states, keyboard.
|
|
445
|
+
|
|
446
|
+
Implementation outcomes: combobox-state-machine.
|
|
447
|
+
|
|
190
448
|
Evidence: unit, axe, e2e, human.
|
|
191
449
|
|
|
192
450
|
## pattern.consequential-submission
|
|
193
451
|
|
|
452
|
+
Standards:
|
|
453
|
+
- [wcag-2.2 3.3.4](<https://www.w3.org/TR/WCAG22/#error-prevention-legal-financial-data>) (Level AA) — normative
|
|
454
|
+
|
|
194
455
|
Requires: semantics.consequential-action, semantics.form-error, semantics.keyboard.
|
|
195
456
|
|
|
457
|
+
Activation: `{"contains":{"fact":"component.submission_consequence","value":"consequential"}}`
|
|
458
|
+
|
|
459
|
+
Scope: Legal commitments, financial transactions, stored user-controllable data changes, or user test-response submissions.
|
|
460
|
+
|
|
196
461
|
Behavior:
|
|
197
|
-
-
|
|
462
|
+
- Provide at least one declared safeguard: make the submission reversible; check user-entered data for errors and let the user correct them; or let the user review, confirm, and correct information before finalizing
|
|
463
|
+
|
|
464
|
+
Product decisions: safeguard, reversal_window.
|
|
465
|
+
|
|
466
|
+
Functional Spec bindings: submission, confirmation.
|
|
467
|
+
|
|
468
|
+
Implementation outcomes: submission-safeguard.
|
|
198
469
|
|
|
199
470
|
Evidence: e2e, human.
|
|
200
471
|
|
|
201
472
|
## pattern.dialog
|
|
202
473
|
|
|
474
|
+
Standards:
|
|
475
|
+
- [aria-apg dialog-modal](<https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/>) — informative
|
|
476
|
+
|
|
203
477
|
Requires: semantics.native-dialog, semantics.accessible-name, semantics.keyboard.escape, semantics.focus.initial, semantics.focus.return.
|
|
204
478
|
|
|
479
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.dialog"}}`
|
|
480
|
+
|
|
481
|
+
Scope: Modal and non-modal dialogs.
|
|
482
|
+
|
|
205
483
|
Behavior:
|
|
206
484
|
- Manage initial, contained, and return focus
|
|
207
485
|
- Dismiss topmost dialog with Escape
|
|
208
486
|
|
|
487
|
+
Product decisions: modal, initial_focus, dismissal.
|
|
488
|
+
|
|
489
|
+
Functional Spec bindings: behavior, states, focus, keyboard.
|
|
490
|
+
|
|
491
|
+
Implementation outcomes: dialog-semantics, dialog-focus-lifecycle.
|
|
492
|
+
|
|
209
493
|
Evidence: unit, axe, e2e, human.
|
|
210
494
|
|
|
211
495
|
## pattern.disclosure
|
|
212
496
|
|
|
497
|
+
Standards:
|
|
498
|
+
- [aria-apg disclosure](<https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/>) — informative
|
|
499
|
+
|
|
213
500
|
Requires: semantics.native-elements, semantics.accessible-name, semantics.expanded-state, semantics.keyboard.
|
|
214
501
|
|
|
502
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.disclosure"}}`
|
|
503
|
+
|
|
504
|
+
Scope: Show and hide supplementary content.
|
|
505
|
+
|
|
215
506
|
Behavior:
|
|
216
507
|
- Control toggles one region
|
|
217
508
|
|
|
509
|
+
Product decisions: initial_state.
|
|
510
|
+
|
|
511
|
+
Functional Spec bindings: behavior, states.
|
|
512
|
+
|
|
513
|
+
Implementation outcomes: disclosure-control.
|
|
514
|
+
|
|
218
515
|
Evidence: unit, axe, e2e.
|
|
219
516
|
|
|
220
517
|
## pattern.dynamic-status
|
|
221
518
|
|
|
519
|
+
Standards:
|
|
520
|
+
- [wcag-2.2 4.1.3](<https://www.w3.org/TR/WCAG22/#status-messages>) (Level AA) — normative
|
|
521
|
+
|
|
222
522
|
Requires: semantics.live-status.
|
|
223
523
|
|
|
524
|
+
Activation: `{"equals":{"fact":"component.has_dynamic_status","value":true}}`
|
|
525
|
+
|
|
526
|
+
Scope: Asynchronous status message.
|
|
527
|
+
|
|
224
528
|
Behavior:
|
|
225
529
|
- Announce meaningful changes once
|
|
226
530
|
|
|
531
|
+
Product decisions: announcement_copy.
|
|
532
|
+
|
|
533
|
+
Functional Spec bindings: messaging, states.
|
|
534
|
+
|
|
535
|
+
Implementation outcomes: status-live-region.
|
|
536
|
+
|
|
227
537
|
Evidence: unit, e2e, human.
|
|
228
538
|
|
|
229
539
|
## pattern.field
|
|
230
540
|
|
|
541
|
+
Standards:
|
|
542
|
+
- [wcag-2.2 3.3.2](<https://www.w3.org/TR/WCAG22/#labels-or-instructions>) (Level A) — normative
|
|
543
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
544
|
+
|
|
231
545
|
Requires: semantics.form-label, semantics.form-required, semantics.focus.visible.
|
|
232
546
|
|
|
547
|
+
Activation: `{"any":[{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.field"}},{"equals":{"fact":"component.has_form_fields","value":true}}]}`
|
|
548
|
+
|
|
549
|
+
Scope: Labeled form input.
|
|
550
|
+
|
|
233
551
|
Behavior:
|
|
234
552
|
- Expose label, instructions, and requiredness before interaction
|
|
235
553
|
|
|
554
|
+
Product decisions: required, instructions.
|
|
555
|
+
|
|
556
|
+
Functional Spec bindings: fields, requiredness.
|
|
557
|
+
|
|
558
|
+
Implementation outcomes: field-associations.
|
|
559
|
+
|
|
236
560
|
Evidence: unit, axe, human.
|
|
237
561
|
|
|
238
562
|
## pattern.image
|
|
239
563
|
|
|
564
|
+
Standards:
|
|
565
|
+
- [wcag-2.2 1.1.1](<https://www.w3.org/TR/WCAG22/#non-text-content>) (Level A) — normative
|
|
566
|
+
|
|
240
567
|
Requires: semantics.non-text-alternative.
|
|
241
568
|
|
|
569
|
+
Activation: `{"any":[{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.image"}},{"equals":{"fact":"content.has_non_text","value":true}}]}`
|
|
570
|
+
|
|
571
|
+
Scope: Informative, functional, complex, or decorative image.
|
|
572
|
+
|
|
242
573
|
Behavior:
|
|
243
574
|
- Alternative follows image purpose
|
|
244
575
|
|
|
576
|
+
Product decisions: purpose, long_description.
|
|
577
|
+
|
|
578
|
+
Functional Spec bindings: content.
|
|
579
|
+
|
|
580
|
+
Implementation outcomes: image-alternative.
|
|
581
|
+
|
|
245
582
|
Evidence: axe, human.
|
|
246
583
|
|
|
247
584
|
## pattern.listbox
|
|
248
585
|
|
|
586
|
+
Standards:
|
|
587
|
+
- [aria-apg listbox](<https://www.w3.org/WAI/ARIA/apg/patterns/listbox/>) — informative
|
|
588
|
+
|
|
249
589
|
Requires: semantics.accessible-name, semantics.selected-state, semantics.keyboard, semantics.focus.visible.
|
|
250
590
|
|
|
591
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.listbox"}}`
|
|
592
|
+
|
|
593
|
+
Scope: Single or multi-select option list.
|
|
594
|
+
|
|
251
595
|
Behavior:
|
|
252
596
|
- Arrow keys move active option
|
|
253
597
|
- Selection follows declared model
|
|
254
598
|
|
|
599
|
+
Product decisions: single_or_multi, selection_follows_focus.
|
|
600
|
+
|
|
601
|
+
Functional Spec bindings: behavior, states, keyboard.
|
|
602
|
+
|
|
603
|
+
Implementation outcomes: listbox-keyboard-model.
|
|
604
|
+
|
|
255
605
|
Evidence: unit, axe, e2e, human.
|
|
256
606
|
|
|
257
607
|
## pattern.media-player
|
|
258
608
|
|
|
609
|
+
Standards:
|
|
610
|
+
- [wcag-2.2 1.2.1](<https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded>) (Level A) — normative
|
|
611
|
+
- [wcag-2.2 1.2.2](<https://www.w3.org/TR/WCAG22/#captions-prerecorded>) (Level A) — normative
|
|
612
|
+
- [wcag-2.2 1.2.3](<https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded>) (Level A) — normative
|
|
613
|
+
- [wcag-2.2 1.2.5](<https://www.w3.org/TR/WCAG22/#audio-description-prerecorded>) (Level AA) — normative
|
|
614
|
+
|
|
259
615
|
Requires: semantics.media-alternatives, semantics.accessible-name, semantics.keyboard, semantics.focus.visible, semantics.motion-control.
|
|
260
616
|
|
|
617
|
+
Activation: `{"any":[{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.media-player"}},{"equals":{"fact":"content.has_media","value":true}}]}`
|
|
618
|
+
|
|
619
|
+
Scope: Audio or video playback.
|
|
620
|
+
|
|
261
621
|
Behavior:
|
|
262
622
|
- Provide keyboard-operable named controls and required alternatives
|
|
263
623
|
|
|
624
|
+
Product decisions: captions, transcript, audio_description, autoplay.
|
|
625
|
+
|
|
626
|
+
Functional Spec bindings: content, controls, behavior.
|
|
627
|
+
|
|
628
|
+
Implementation outcomes: media-alternatives, media-controls.
|
|
629
|
+
|
|
264
630
|
Evidence: axe, e2e, human.
|
|
265
631
|
|
|
632
|
+
## pattern.menu
|
|
633
|
+
|
|
634
|
+
Standards:
|
|
635
|
+
- [aria-apg menubar](<https://www.w3.org/WAI/ARIA/apg/patterns/menubar/>) — informative
|
|
636
|
+
|
|
637
|
+
Requires: semantics.accessible-name, semantics.expanded-state, semantics.focus.initial, semantics.focus.return, semantics.focus.visible, semantics.keyboard, semantics.keyboard.escape, semantics.roles-states-properties.
|
|
638
|
+
|
|
639
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.menu"}}`
|
|
640
|
+
|
|
641
|
+
Scope: Command menus, submenus, and persistent menubars.
|
|
642
|
+
|
|
643
|
+
Behavior:
|
|
644
|
+
- Expose menu or menubar containers with menuitem, menuitemcheckbox, or menuitemradio children; synchronize submenu expanded state, checkable-item checked state, orientation, and disabled state
|
|
645
|
+
- When a popup menu opens, move focus to its first item; when a persistent menubar receives focus through Tab or Shift+Tab, restore its declared last-focused item or use its first enabled item; Tab and Shift+Tab do not move among items and, from an item, exit the composite and close all open menus
|
|
646
|
+
- For the default horizontal menubar with vertical popup menus, Right and Left move among menubar items, Down opens a submenu and focuses its first item, Up may open it and focus its last item, Down and Up move among popup items, Right opens a child submenu, and Left closes a child submenu and returns focus to its parent item; reverse the declared axes for alternate orientations
|
|
647
|
+
- Enter opens an item's submenu and focuses its first item, or otherwise activates the item and closes the menu; declare whether Space mirrors Enter on plain items, toggles menuitemcheckbox without closing, and checks a menuitemradio while unchecking its group peers without closing
|
|
648
|
+
- Keep disabled menu items focusable but non-activatable, keep separators non-focusable, and apply Home, End, optional type-ahead, and the declared wrapping policy within the current menu or menubar
|
|
649
|
+
- Escape closes the menu containing focus and restores focus to its parent item, menu button, or invoking context
|
|
650
|
+
|
|
651
|
+
Product decisions: entry_focus, focus_strategy, menu_or_menubar, orientation, space_behavior, submenu_model, typeahead, wrap_navigation.
|
|
652
|
+
|
|
653
|
+
Functional Spec bindings: behavior, states, keyboard, focus.
|
|
654
|
+
|
|
655
|
+
Implementation outcomes: menu-composite-focus, menu-keyboard-model, menu-state-model.
|
|
656
|
+
|
|
657
|
+
Evidence: unit, axe, e2e, human.
|
|
658
|
+
|
|
266
659
|
## pattern.menu-button
|
|
267
660
|
|
|
661
|
+
Standards:
|
|
662
|
+
- [aria-apg menu-button](<https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/>) — informative
|
|
663
|
+
|
|
268
664
|
Requires: semantics.accessible-name, semantics.expanded-state, semantics.keyboard, semantics.focus.initial, semantics.focus.return.
|
|
269
665
|
|
|
666
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.menu-button"}}`
|
|
667
|
+
|
|
668
|
+
Scope: Button opening a command menu.
|
|
669
|
+
|
|
270
670
|
Behavior:
|
|
271
671
|
- Open and navigate menu by keyboard
|
|
272
672
|
|
|
673
|
+
Product decisions: focus_strategy.
|
|
674
|
+
|
|
675
|
+
Functional Spec bindings: behavior, keyboard, focus.
|
|
676
|
+
|
|
677
|
+
Implementation outcomes: menu-button-keyboard.
|
|
678
|
+
|
|
273
679
|
Evidence: unit, e2e, human.
|
|
274
680
|
|
|
275
681
|
## pattern.pagination
|
|
276
682
|
|
|
683
|
+
Standards:
|
|
684
|
+
- [wcag-2.2 2.4.4](<https://www.w3.org/TR/WCAG22/#link-purpose-in-context>) (Level A) — normative
|
|
685
|
+
|
|
277
686
|
Requires: semantics.native-elements, semantics.accessible-name, semantics.landmarks, semantics.focus.visible.
|
|
278
687
|
|
|
688
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.pagination"}}`
|
|
689
|
+
|
|
690
|
+
Scope: Paged result navigation.
|
|
691
|
+
|
|
279
692
|
Behavior:
|
|
280
693
|
- Expose current page and named navigation
|
|
281
694
|
|
|
695
|
+
Product decisions: url_behavior.
|
|
696
|
+
|
|
697
|
+
Functional Spec bindings: states, navigation.
|
|
698
|
+
|
|
699
|
+
Implementation outcomes: pagination-current-page.
|
|
700
|
+
|
|
282
701
|
Evidence: unit, axe, human.
|
|
283
702
|
|
|
284
703
|
## pattern.popover
|
|
285
704
|
|
|
705
|
+
Standards:
|
|
706
|
+
- [wcag-2.2 2.1.1](<https://www.w3.org/TR/WCAG22/#keyboard>) (Level A) — normative
|
|
707
|
+
- [wcag-2.2 2.4.3](<https://www.w3.org/TR/WCAG22/#focus-order>) (Level A) — normative
|
|
708
|
+
|
|
286
709
|
Requires: semantics.native-elements, semantics.accessible-name, semantics.keyboard.escape, semantics.focus.return.
|
|
287
710
|
|
|
711
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.popover"}}`
|
|
712
|
+
|
|
713
|
+
Scope: Non-modal transient surface.
|
|
714
|
+
|
|
288
715
|
Behavior:
|
|
289
716
|
- Dismiss without trapping focus
|
|
290
717
|
|
|
718
|
+
Product decisions: dismissal, focus_entry.
|
|
719
|
+
|
|
720
|
+
Functional Spec bindings: behavior, focus.
|
|
721
|
+
|
|
722
|
+
Implementation outcomes: popover-dismissal.
|
|
723
|
+
|
|
291
724
|
Evidence: unit, e2e, human.
|
|
292
725
|
|
|
293
726
|
## pattern.progress
|
|
294
727
|
|
|
728
|
+
Standards:
|
|
729
|
+
- [wai-aria-1.2 progressbar](<https://www.w3.org/TR/wai-aria-1.2/#progressbar>) — normative
|
|
730
|
+
- [wcag-2.2 4.1.2](<https://www.w3.org/TR/WCAG22/#name-role-value>) (Level A) — normative
|
|
731
|
+
|
|
295
732
|
Requires: semantics.name-role-value, semantics.live-status.
|
|
296
733
|
|
|
734
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.progress"}}`
|
|
735
|
+
|
|
736
|
+
Scope: Determinate or indeterminate progress.
|
|
737
|
+
|
|
297
738
|
Behavior:
|
|
298
739
|
- Expose value and completion changes without announcement noise
|
|
299
740
|
|
|
741
|
+
Product decisions: determinate.
|
|
742
|
+
|
|
743
|
+
Functional Spec bindings: states, messaging.
|
|
744
|
+
|
|
745
|
+
Implementation outcomes: progress-value.
|
|
746
|
+
|
|
300
747
|
Evidence: unit, axe, human.
|
|
301
748
|
|
|
749
|
+
## pattern.radio-group
|
|
750
|
+
|
|
751
|
+
Standards:
|
|
752
|
+
- [aria-apg radio](<https://www.w3.org/WAI/ARIA/apg/patterns/radio/>) — informative
|
|
753
|
+
|
|
754
|
+
Requires: semantics.accessible-name, semantics.focus.visible, semantics.form-label, semantics.keyboard, semantics.native-elements, semantics.roles-states-properties.
|
|
755
|
+
|
|
756
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.radio-group"}}`
|
|
757
|
+
|
|
758
|
+
Scope: Mutually exclusive choices presented as a radio group.
|
|
759
|
+
|
|
760
|
+
Behavior:
|
|
761
|
+
- Use native grouped radio inputs when they provide the required behavior; otherwise expose a named radiogroup containing named radio controls with exactly one checked item when selected
|
|
762
|
+
- Use one tab stop for group entry, focusing the checked radio or the first radio when none is checked
|
|
763
|
+
- Outside a toolbar, Space selects the focused radio and arrow keys move focus and selection with wrapping; inside a toolbar, toolbar navigation moves focus without changing selection, while Space or optionally Enter checks the focused radio
|
|
764
|
+
|
|
765
|
+
Product decisions: initial_selection, native_or_custom, toolbar_context, wrap_navigation.
|
|
766
|
+
|
|
767
|
+
Functional Spec bindings: fields, states, keyboard, focus.
|
|
768
|
+
|
|
769
|
+
Implementation outcomes: radio-group-keyboard-model, radio-group-labeling, radio-group-selection-model.
|
|
770
|
+
|
|
771
|
+
Evidence: unit, axe, e2e, human.
|
|
772
|
+
|
|
773
|
+
## pattern.slider
|
|
774
|
+
|
|
775
|
+
Standards:
|
|
776
|
+
- [aria-apg slider](<https://www.w3.org/WAI/ARIA/apg/patterns/slider/>) — informative
|
|
777
|
+
- [aria-apg slider-multithumb](<https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/>) — informative
|
|
778
|
+
|
|
779
|
+
Requires: semantics.accessible-name, semantics.dragging-alternative, semantics.focus.visible, semantics.keyboard, semantics.name-role-value, semantics.native-elements, semantics.roles-states-properties.
|
|
780
|
+
|
|
781
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.slider"}}`
|
|
782
|
+
|
|
783
|
+
Scope: Single-thumb or multi-thumb bounded range input.
|
|
784
|
+
|
|
785
|
+
Behavior:
|
|
786
|
+
- Use a native input[type=range] for a single-thumb slider when it supplies the required range, step, orientation, labeling, and value presentation; use a custom slider only when native behavior cannot satisfy the declared interaction
|
|
787
|
+
- Expose every focusable thumb as a distinct named slider with synchronized current, minimum, maximum, orientation, and user-friendly value text when the numeric value is insufficient
|
|
788
|
+
- Right and Up increase by one step while Left and Down decrease by one step unless a documented orientation and value presentation makes reversal more intuitive; Home and End move to range bounds, and optional Page Up and Page Down apply the declared larger step
|
|
789
|
+
- Provide an equivalent single-pointer method for every drag operation that does not require dragging, such as track activation or an adjacent value input
|
|
790
|
+
- Keep every thumb in a constant tab order for multi-thumb sliders and update dependent thumb bounds whenever another thumb changes them
|
|
791
|
+
- Verify operation with touch-based assistive technology on target devices before production use
|
|
792
|
+
|
|
793
|
+
Product decisions: direction_mapping, large_step, native_or_custom, orientation, single_or_multi_thumb, step, thumb_constraints, value_text.
|
|
794
|
+
|
|
795
|
+
Functional Spec bindings: fields, states, keyboard, controls.
|
|
796
|
+
|
|
797
|
+
Implementation outcomes: slider-keyboard-model, slider-native-control-selection, slider-range-state, slider-touch-at-compatibility.
|
|
798
|
+
|
|
799
|
+
Evidence: unit, axe, e2e, human.
|
|
800
|
+
|
|
801
|
+
## pattern.spinbutton
|
|
802
|
+
|
|
803
|
+
Standards:
|
|
804
|
+
- [aria-apg spinbutton](<https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/>) — informative
|
|
805
|
+
|
|
806
|
+
Requires: semantics.accessible-name, semantics.focus.visible, semantics.form-label, semantics.keyboard, semantics.name-role-value, semantics.native-elements, semantics.roles-states-properties.
|
|
807
|
+
|
|
808
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.spinbutton"}}`
|
|
809
|
+
|
|
810
|
+
Scope: Value input constrained to a discrete set or range, with optional direct text editing.
|
|
811
|
+
|
|
812
|
+
Behavior:
|
|
813
|
+
- Use a native number input when it supplies the required range, step, editing, labeling, and validation behavior; otherwise expose a named spinbutton with synchronized current, minimum, maximum, user-friendly value text, and invalid state when a value is outside the allowed range
|
|
814
|
+
- Keep focus on the spinbutton while Up and Down change its value, Home and End apply known bounds, and optional Page Up and Page Down apply the declared larger step
|
|
815
|
+
- Treat the editable decision as permission for direct text entry, not as whether the spinbutton is adjustable; when direct editing is disabled, the declared increment and decrement controls still change the value and the spinbutton is not exposed as read-only
|
|
816
|
+
- When direct editing is allowed, preserve platform text editing commands and do not intercept keys needed to enter, navigate, select, or modify text
|
|
817
|
+
|
|
818
|
+
Product decisions: editable, large_step, native_or_custom, range_bounds, step, value_text.
|
|
819
|
+
|
|
820
|
+
Functional Spec bindings: fields, states, keyboard, validation.
|
|
821
|
+
|
|
822
|
+
Implementation outcomes: spinbutton-keyboard-model, spinbutton-native-control-selection, spinbutton-range-state, spinbutton-validation.
|
|
823
|
+
|
|
824
|
+
Evidence: unit, axe, e2e, human.
|
|
825
|
+
|
|
302
826
|
## pattern.tabs
|
|
303
827
|
|
|
828
|
+
Standards:
|
|
829
|
+
- [aria-apg tabs](<https://www.w3.org/WAI/ARIA/apg/patterns/tabs/>) — informative
|
|
830
|
+
|
|
304
831
|
Requires: semantics.accessible-name, semantics.selected-state, semantics.keyboard, semantics.focus.visible.
|
|
305
832
|
|
|
833
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.tabs"}}`
|
|
834
|
+
|
|
835
|
+
Scope: Tabbed interfaces.
|
|
836
|
+
|
|
306
837
|
Behavior:
|
|
307
838
|
- Arrow keys move between tabs
|
|
308
839
|
- Selection and activation follow the documented model
|
|
309
840
|
|
|
841
|
+
Product decisions: automatic_or_manual_activation.
|
|
842
|
+
|
|
843
|
+
Functional Spec bindings: behavior, states, keyboard.
|
|
844
|
+
|
|
845
|
+
Implementation outcomes: tabs-keyboard-model.
|
|
846
|
+
|
|
310
847
|
Evidence: unit, axe, e2e, human.
|
|
311
848
|
|
|
312
849
|
## pattern.tooltip
|
|
313
850
|
|
|
851
|
+
Standards:
|
|
852
|
+
- [aria-apg tooltip](<https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/>) — informative
|
|
853
|
+
|
|
314
854
|
Requires: semantics.accessible-name, semantics.keyboard.escape.
|
|
315
855
|
|
|
856
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.tooltip"}}`
|
|
857
|
+
|
|
858
|
+
Scope: Supplementary description.
|
|
859
|
+
|
|
316
860
|
Behavior:
|
|
317
861
|
- Available on hover and focus
|
|
318
862
|
- Never contains interactive content
|
|
319
863
|
|
|
864
|
+
Product decisions: delay.
|
|
865
|
+
|
|
866
|
+
Functional Spec bindings: behavior.
|
|
867
|
+
|
|
868
|
+
Implementation outcomes: tooltip-description.
|
|
869
|
+
|
|
320
870
|
Evidence: unit, e2e, human.
|
|
321
871
|
|
|
872
|
+
## pattern.tree-view
|
|
873
|
+
|
|
874
|
+
Standards:
|
|
875
|
+
- [aria-apg treeview](<https://www.w3.org/WAI/ARIA/apg/patterns/treeview/>) — informative
|
|
876
|
+
|
|
877
|
+
Requires: semantics.accessible-name, semantics.expanded-state, semantics.focus.visible, semantics.keyboard, semantics.roles-states-properties, semantics.selected-state.
|
|
878
|
+
|
|
879
|
+
Activation: `{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.tree-view"}}`
|
|
880
|
+
|
|
881
|
+
Scope: Hierarchical single-select or multi-select tree widgets.
|
|
882
|
+
|
|
883
|
+
Behavior:
|
|
884
|
+
- Expose tree, treeitem, and group relationships, set aria-multiselectable for a multi-select tree, and provide level, position, and set-size metadata when the complete hierarchy is not represented in the DOM
|
|
885
|
+
- On tree entry, focus the selected node or first selected node when one exists and otherwise focus the first node; keep one composite tab stop and keep focus visually distinct from selection
|
|
886
|
+
- In a vertical tree, Right Arrow opens a closed parent without moving focus, moves from an open parent to its first child, and does nothing on an end node; Left Arrow closes an open parent, moves from a closed parent or end node to its parent, and does nothing on a root node that cannot close
|
|
887
|
+
- In a vertical tree, Down Arrow moves to the next visible focusable node and Up Arrow moves to the previous visible focusable node without changing expansion; Home and End move to the first and last visible focusable nodes, Enter performs the node's declared default action, and type-ahead moves to the next matching node
|
|
888
|
+
- For a horizontal tree, remap Down Arrow to the vertical Right Arrow behavior, Right Arrow to vertical Down Arrow, Up Arrow to vertical Left Arrow, and Left Arrow to vertical Up Arrow
|
|
889
|
+
- Keep focus distinct from selection and synchronize expansion and the declared aria-selected or aria-checked state model without exposing both states for the same selection purpose
|
|
890
|
+
- For a multi-select tree using the recommended modifier-free model, navigation does not clear selection, Space toggles selection of the focused node, and declared Shift combinations extend contiguous selection; for the alternative modifier-required model, unmodified navigation selects only the focused node while Control plus an arrow moves focus without changing selection and Control plus Space toggles the focused node
|
|
891
|
+
|
|
892
|
+
Product decisions: focus_strategy, multi_select_keyboard_model, orientation, selection_follows_focus, selection_state, single_or_multi_select, typeahead, virtualization.
|
|
893
|
+
|
|
894
|
+
Functional Spec bindings: behavior, states, keyboard, focus.
|
|
895
|
+
|
|
896
|
+
Implementation outcomes: tree-hierarchy-semantics, tree-keyboard-model, tree-selection-model.
|
|
897
|
+
|
|
898
|
+
Evidence: unit, axe, e2e, human.
|
|
899
|
+
|
|
322
900
|
## pattern.validation
|
|
323
901
|
|
|
902
|
+
Standards:
|
|
903
|
+
- [wcag-2.2 3.3.1](<https://www.w3.org/TR/WCAG22/#error-identification>) (Level A) — normative
|
|
904
|
+
- [wcag-2.2 3.3.3](<https://www.w3.org/TR/WCAG22/#error-suggestion>) (Level AA) — normative
|
|
905
|
+
|
|
324
906
|
Requires: semantics.form-error, semantics.live-status, semantics.focus.initial.
|
|
325
907
|
|
|
908
|
+
Activation: `{"any":[{"contains":{"fact":"component.accessibility_pattern_ids","value":"pattern.validation"}},{"equals":{"fact":"component.has_validation","value":true}}]}`
|
|
909
|
+
|
|
910
|
+
Scope: Client or server validation.
|
|
911
|
+
|
|
326
912
|
Behavior:
|
|
327
913
|
- Identify, associate, summarize, and focus errors deterministically
|
|
328
914
|
|
|
915
|
+
Product decisions: validation_timing, error_summary.
|
|
916
|
+
|
|
917
|
+
Functional Spec bindings: validation, messaging, focus.
|
|
918
|
+
|
|
919
|
+
Implementation outcomes: validation-associations, error-summary.
|
|
920
|
+
|
|
921
|
+
Evidence: unit, axe, e2e, human.
|
|
922
|
+
|
|
923
|
+
## applicability.page-context
|
|
924
|
+
|
|
925
|
+
When: `{"equals":{"fact":"artifact.page_context","value":true}}`
|
|
926
|
+
|
|
927
|
+
Outcomes: semantics.headings, semantics.landmarks.
|
|
928
|
+
|
|
929
|
+
Evidence: axe, human.
|
|
930
|
+
|
|
931
|
+
## applicability.non-text-content
|
|
932
|
+
|
|
933
|
+
When: `{"equals":{"fact":"content.has_non_text","value":true}}`
|
|
934
|
+
|
|
935
|
+
Outcomes: pattern.image.
|
|
936
|
+
|
|
937
|
+
Evidence: axe, human.
|
|
938
|
+
|
|
939
|
+
## applicability.media
|
|
940
|
+
|
|
941
|
+
When: `{"equals":{"fact":"content.has_media","value":true}}`
|
|
942
|
+
|
|
943
|
+
Outcomes: pattern.media-player.
|
|
944
|
+
|
|
945
|
+
Evidence: e2e, human.
|
|
946
|
+
|
|
947
|
+
## applicability.forms
|
|
948
|
+
|
|
949
|
+
When: `{"equals":{"fact":"component.has_form_fields","value":true}}`
|
|
950
|
+
|
|
951
|
+
Outcomes: pattern.field.
|
|
952
|
+
|
|
953
|
+
Evidence: unit, axe.
|
|
954
|
+
|
|
955
|
+
## applicability.validation
|
|
956
|
+
|
|
957
|
+
When: `{"equals":{"fact":"component.has_validation","value":true}}`
|
|
958
|
+
|
|
959
|
+
Outcomes: pattern.validation.
|
|
960
|
+
|
|
329
961
|
Evidence: unit, axe, e2e, human.
|
|
962
|
+
|
|
963
|
+
## applicability.consequential-submission
|
|
964
|
+
|
|
965
|
+
When: `{"contains":{"fact":"component.submission_consequence","value":"consequential"}}`
|
|
966
|
+
|
|
967
|
+
Outcomes: pattern.consequential-submission.
|
|
968
|
+
|
|
969
|
+
Evidence: e2e, human.
|
|
970
|
+
|
|
971
|
+
## applicability.dynamic-status
|
|
972
|
+
|
|
973
|
+
When: `{"equals":{"fact":"component.has_dynamic_status","value":true}}`
|
|
974
|
+
|
|
975
|
+
Outcomes: pattern.dynamic-status.
|
|
976
|
+
|
|
977
|
+
Evidence: unit, e2e, human.
|
|
978
|
+
|
|
979
|
+
## applicability.overlays
|
|
980
|
+
|
|
981
|
+
When: `{"any":[{"contains":{"fact":"component.ui_pattern_ids","value":"modal"}},{"contains":{"fact":"component.ui_pattern_ids","value":"popover"}},{"contains":{"fact":"component.ui_pattern_ids","value":"tooltip"}}]}`
|
|
982
|
+
|
|
983
|
+
Outcomes: semantics.keyboard.escape, semantics.focus.return.
|
|
984
|
+
|
|
985
|
+
Evidence: e2e.
|
|
986
|
+
|
|
987
|
+
## applicability.motion-timing
|
|
988
|
+
|
|
989
|
+
When: `{"equals":{"fact":"interaction.has_motion_or_timing","value":true}}`
|
|
990
|
+
|
|
991
|
+
Outcomes: semantics.motion-control.
|
|
992
|
+
|
|
993
|
+
Evidence: e2e, human.
|
|
994
|
+
|
|
995
|
+
## applicability.complex-pointer
|
|
996
|
+
|
|
997
|
+
When: `{"equals":{"fact":"interaction.has_complex_pointer","value":true}}`
|
|
998
|
+
|
|
999
|
+
Outcomes: semantics.keyboard.
|
|
1000
|
+
|
|
1001
|
+
Evidence: e2e, human.
|
|
1002
|
+
|
|
1003
|
+
## applicability.dragging-alternative
|
|
1004
|
+
|
|
1005
|
+
When: `{"equals":{"fact":"interaction.has_dragging","value":true}}`
|
|
1006
|
+
|
|
1007
|
+
Outcomes: semantics.dragging-alternative.
|
|
1008
|
+
|
|
1009
|
+
Evidence: e2e, human.
|
|
1010
|
+
|
|
1011
|
+
## applicability.target-size
|
|
1012
|
+
|
|
1013
|
+
When: `{"equals":{"fact":"interaction.has_pointer_targets","value":true}}`
|
|
1014
|
+
|
|
1015
|
+
Outcomes: semantics.target-size.
|
|
1016
|
+
|
|
1017
|
+
Evidence: e2e, human.
|
|
1018
|
+
|
|
1019
|
+
## applicability.focus-obstruction
|
|
1020
|
+
|
|
1021
|
+
When: `{"equals":{"fact":"interaction.can_obscure_focus","value":true}}`
|
|
1022
|
+
|
|
1023
|
+
Outcomes: semantics.focus.visible.
|
|
1024
|
+
|
|
1025
|
+
Evidence: e2e, human.
|
|
1026
|
+
|
|
1027
|
+
## applicability.accessible-authentication
|
|
1028
|
+
|
|
1029
|
+
When: `{"equals":{"fact":"flow.has_authentication","value":true}}`
|
|
1030
|
+
|
|
1031
|
+
Outcomes: semantics.accessible-authentication.
|
|
1032
|
+
|
|
1033
|
+
Evidence: e2e, human.
|
|
1034
|
+
|
|
1035
|
+
## applicability.redundant-entry
|
|
1036
|
+
|
|
1037
|
+
When: `{"equals":{"fact":"flow.repeats_entry","value":true}}`
|
|
1038
|
+
|
|
1039
|
+
Outcomes: semantics.form-label, semantics.redundant-entry.
|
|
1040
|
+
|
|
1041
|
+
Evidence: e2e, human.
|
|
1042
|
+
|
|
1043
|
+
## applicability.consistent-help
|
|
1044
|
+
|
|
1045
|
+
When: `{"equals":{"fact":"artifact.has_repeated_help_across_page_set","value":true}}`
|
|
1046
|
+
|
|
1047
|
+
Outcomes: semantics.consistent-help.
|
|
1048
|
+
|
|
1049
|
+
Evidence: e2e, human.
|
|
1050
|
+
|
|
1051
|
+
## applicability.data-table
|
|
1052
|
+
|
|
1053
|
+
When: `{"equals":{"fact":"component.has_data_table","value":true}}`
|
|
1054
|
+
|
|
1055
|
+
Outcomes: semantics.data-table.
|
|
1056
|
+
|
|
1057
|
+
Evidence: axe, e2e, human.
|
|
1058
|
+
|
|
1059
|
+
## policy.enhanced-quality
|
|
1060
|
+
|
|
1061
|
+
Enhanced guidance is advisory and cannot be represented as a conformance failure unless the consumer explicitly adopts it as product policy.
|
|
1062
|
+
|
|
1063
|
+
## policy.target-size
|
|
1064
|
+
|
|
1065
|
+
Enforce WCAG 2.5.8 at 24 by 24 CSS pixels or a documented exception; report 44 by 44 as enhanced guidance, never as the AA minimum.
|
|
1066
|
+
|
|
1067
|
+
## WCAG 2.2 Level A/AA coverage
|
|
1068
|
+
|
|
1069
|
+
Coverage is criterion-level traceability, not a conformance claim: 16 covered, 8 partial, and 31 gaps.
|
|
1070
|
+
|
|
1071
|
+
| Criterion | Title | Level | Status | Semantic IDs | Note |
|
|
1072
|
+
| --- | --- | --- | --- | --- | --- |
|
|
1073
|
+
| 1.1.1 | Non-text Content | A | partial | semantics.non-text-alternative | Meaningful and decorative non-text content are covered, but dedicated obligations for controls and input, time-based media identification, tests, sensory experiences, and CAPTCHA alternatives are not all represented. |
|
|
1074
|
+
| 1.2.1 | Audio-only and Video-only (Prerecorded) | A | partial | semantics.media-alternatives | The shared media rule does not distinguish every audio-only and video-only alternative. |
|
|
1075
|
+
| 1.2.2 | Captions (Prerecorded) | A | partial | semantics.media-alternatives | Captions are required broadly, without a criterion-specific prerecorded contract. |
|
|
1076
|
+
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) | A | partial | semantics.media-alternatives | The shared media rule covers both alternatives but does not encode the criterion's conditional choice. |
|
|
1077
|
+
| 1.2.4 | Captions (Live) | AA | gap | — | No semantic rule requires live captions. |
|
|
1078
|
+
| 1.2.5 | Audio Description (Prerecorded) | AA | partial | semantics.media-alternatives | Audio description is named, but prerecorded applicability is not represented independently. |
|
|
1079
|
+
| 1.3.1 | Info and Relationships | A | partial | semantics.data-table, semantics.form-label, semantics.form-required, semantics.headings, semantics.landmarks | Several structural cases are covered, but the general criterion is broader than the current rules. |
|
|
1080
|
+
| 1.3.2 | Meaningful Sequence | A | gap | — | No semantic rule explicitly preserves meaningful reading sequence. |
|
|
1081
|
+
| 1.3.3 | Sensory Characteristics | A | gap | — | No semantic rule prevents instructions from relying only on sensory characteristics. |
|
|
1082
|
+
| 1.3.4 | Orientation | AA | gap | — | No semantic rule prevents unnecessary orientation restrictions. |
|
|
1083
|
+
| 1.3.5 | Identify Input Purpose | AA | gap | — | No semantic rule requires programmatic input-purpose tokens. |
|
|
1084
|
+
| 1.4.1 | Use of Color | A | gap | — | No semantic rule prohibits color-only communication. |
|
|
1085
|
+
| 1.4.2 | Audio Control | A | gap | — | No semantic rule requires independent control of automatically playing audio. |
|
|
1086
|
+
| 1.4.3 | Contrast (Minimum) | AA | gap | — | No semantic rule defines minimum text contrast. |
|
|
1087
|
+
| 1.4.4 | Resize Text | AA | gap | — | No semantic rule defines text resizing behavior. |
|
|
1088
|
+
| 1.4.5 | Images of Text | AA | gap | — | Text alternatives do not replace a rule limiting images of text. |
|
|
1089
|
+
| 1.4.10 | Reflow | AA | gap | — | No semantic rule defines responsive reflow requirements. |
|
|
1090
|
+
| 1.4.11 | Non-text Contrast | AA | gap | — | No semantic rule defines contrast for controls, states, or graphical objects. |
|
|
1091
|
+
| 1.4.12 | Text Spacing | AA | gap | — | No semantic rule protects content under user-adjusted text spacing. |
|
|
1092
|
+
| 1.4.13 | Content on Hover or Focus | AA | gap | — | Pattern behavior exists for tooltips, but no semantic rule covers dismissibility, hoverability, and persistence together. |
|
|
1093
|
+
| 2.1.1 | Keyboard | A | covered | semantics.keyboard | — |
|
|
1094
|
+
| 2.1.2 | No Keyboard Trap | A | covered | semantics.keyboard | — |
|
|
1095
|
+
| 2.1.4 | Character Key Shortcuts | A | gap | — | Keyboard operability does not define shortcut remapping or deactivation. |
|
|
1096
|
+
| 2.2.1 | Timing Adjustable | A | gap | — | No semantic rule encodes timing adjustment and its exceptions. |
|
|
1097
|
+
| 2.2.2 | Pause, Stop, Hide | A | covered | semantics.motion-control | — |
|
|
1098
|
+
| 2.3.1 | Three Flashes or Below Threshold | A | gap | — | No semantic rule limits flashing content. |
|
|
1099
|
+
| 2.4.1 | Bypass Blocks | A | gap | — | Landmarks alone do not establish a required bypass mechanism. |
|
|
1100
|
+
| 2.4.2 | Page Titled | A | gap | — | No semantic rule requires descriptive page titles. |
|
|
1101
|
+
| 2.4.3 | Focus Order | A | gap | — | Pattern focus lifecycles do not establish document-wide focus order. |
|
|
1102
|
+
| 2.4.4 | Link Purpose (In Context) | A | gap | — | No semantic rule explicitly defines contextual link purpose. |
|
|
1103
|
+
| 2.4.5 | Multiple Ways | AA | gap | — | No semantic rule requires multiple ways to locate pages. |
|
|
1104
|
+
| 2.4.6 | Headings and Labels | AA | partial | semantics.headings | Heading structure is covered, but a unified descriptive-purpose rule for all headings and labels is absent. |
|
|
1105
|
+
| 2.4.7 | Focus Visible | AA | covered | semantics.focus.visible | — |
|
|
1106
|
+
| 2.4.11 | Focus Not Obscured (Minimum) | AA | covered | semantics.focus.visible | — |
|
|
1107
|
+
| 2.5.1 | Pointer Gestures | A | gap | — | Keyboard operation does not guarantee a single-pointer alternative to multipoint or path-based gestures. |
|
|
1108
|
+
| 2.5.2 | Pointer Cancellation | A | gap | — | No semantic rule defines down-event cancellation behavior. |
|
|
1109
|
+
| 2.5.3 | Label in Name | A | covered | semantics.accessible-name | — |
|
|
1110
|
+
| 2.5.4 | Motion Actuation | A | gap | — | No semantic rule addresses device or user motion actuation. |
|
|
1111
|
+
| 2.5.7 | Dragging Movements | AA | covered | semantics.dragging-alternative | — |
|
|
1112
|
+
| 2.5.8 | Target Size (Minimum) | AA | covered | semantics.target-size | — |
|
|
1113
|
+
| 3.1.1 | Language of Page | A | gap | — | No semantic rule explicitly requires the default page language. |
|
|
1114
|
+
| 3.1.2 | Language of Parts | AA | gap | — | No semantic rule explicitly identifies changes in human language. |
|
|
1115
|
+
| 3.2.1 | On Focus | A | gap | — | No semantic rule prohibits unexpected context changes on focus. |
|
|
1116
|
+
| 3.2.2 | On Input | A | gap | — | No semantic rule prohibits unexpected context changes on input. |
|
|
1117
|
+
| 3.2.3 | Consistent Navigation | AA | gap | — | Landmarks do not establish consistent repeated navigation order. |
|
|
1118
|
+
| 3.2.4 | Consistent Identification | AA | gap | — | No semantic rule requires consistent identification of repeated components. |
|
|
1119
|
+
| 3.2.6 | Consistent Help | A | covered | semantics.consistent-help | — |
|
|
1120
|
+
| 3.3.1 | Error Identification | A | covered | semantics.form-error | — |
|
|
1121
|
+
| 3.3.2 | Labels or Instructions | A | partial | semantics.form-label, semantics.form-required | Labels and requiredness are covered, but a dedicated rule for format and task-specific input instructions is absent. |
|
|
1122
|
+
| 3.3.3 | Error Suggestion | AA | covered | semantics.form-error | — |
|
|
1123
|
+
| 3.3.4 | Error Prevention (Legal, Financial, Data) | AA | covered | semantics.consequential-action | — |
|
|
1124
|
+
| 3.3.7 | Redundant Entry | A | covered | semantics.redundant-entry | — |
|
|
1125
|
+
| 3.3.8 | Accessible Authentication (Minimum) | AA | covered | semantics.accessible-authentication | — |
|
|
1126
|
+
| 4.1.2 | Name, Role, Value | A | covered | semantics.accessible-name, semantics.expanded-state, semantics.name-role-value, semantics.native-dialog, semantics.roles-states-properties, semantics.selected-state | — |
|
|
1127
|
+
| 4.1.3 | Status Messages | AA | covered | semantics.alert, semantics.live-status | — |
|
|
1128
|
+
|
|
1129
|
+
### Deferred APG patterns
|
|
1130
|
+
|
|
1131
|
+
- alert-dialog: Deferred until dialog purpose distinguishes urgent confirmation or attention from a general modal dialog.
|
|
1132
|
+
- grid: Deferred until a static-versus-interactive grid discriminator and keyboard interaction model are defined.
|
|
1133
|
+
- switch: Deferred until a binary toggle model distinguishes switch behavior from a generic form field.
|
|
1134
|
+
- toolbar: Deferred until control-group behavior and its focus-management model are defined.
|
|
1135
|
+
- treegrid: Deferred until static-versus-interactive grid selection and the hierarchical tree interaction model are defined.
|
|
1136
|
+
|
|
1137
|
+
## Evidence routing
|
|
1138
|
+
|
|
1139
|
+
Tool availability changes the evidence route, never requirement applicability. A missing required capability is a blocker.
|
|
1140
|
+
|
|
1141
|
+
- axe: automated rule evidence; capability: axe
|
|
1142
|
+
- e2e: keyboard, focus, and integrated behavior; capability: e2e
|
|
1143
|
+
- human: judgment, assistive technology, content, and visual evidence; capability: human
|
|
1144
|
+
- unit: semantic state and deterministic resolver behavior; capability: unit
|