@holmdigital/standards 1.0.0 → 1.1.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/README.md +9 -1
- package/data/rules.en-ca.json +1946 -0
- package/data/rules.en-gb.json +1946 -0
- package/data/rules.en-us.json +1946 -0
- package/data/rules.nl.json +1946 -0
- package/dist/index.js +7885 -1
- package/dist/index.mjs +7885 -1
- package/package.json +1 -1
|
@@ -0,0 +1,1946 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"ruleId": "color-contrast",
|
|
4
|
+
"wcagCriteria": "1.4.3",
|
|
5
|
+
"wcagLevel": "AA",
|
|
6
|
+
"wcagTitle": "Contrast (Minimum)",
|
|
7
|
+
"wcagVersion": "2.0",
|
|
8
|
+
"en301549Criteria": "9.1.4.3",
|
|
9
|
+
"en301549Title": "Contrast (minimum)",
|
|
10
|
+
"en301549Chapter": 9,
|
|
11
|
+
"dosLagenApplies": true,
|
|
12
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
13
|
+
"remediation": {
|
|
14
|
+
"description": "Text and images of text must have a contrast ratio of at least 4.5:1 (3:1 for large text).",
|
|
15
|
+
"technicalGuidance": "Use tools like WebAIM Contrast Checker to verify contrast. Adjust color choices or add background opacity to achieve correct contrast.",
|
|
16
|
+
"component": "@holmdigital/components/Button",
|
|
17
|
+
"codeExample": "import { Button } from '@holmdigital/components';\n\n// Bad: Poor contrast\n<button style={{ background: '#777', color: '#999' }}>Click me</button>\n\n// Good: Use accessible component\n<Button variant=\"primary\">Click me</Button>",
|
|
18
|
+
"wcagTechnique": [
|
|
19
|
+
"G18",
|
|
20
|
+
"G145",
|
|
21
|
+
"G174"
|
|
22
|
+
]
|
|
23
|
+
},
|
|
24
|
+
"holmdigitalInsight": {
|
|
25
|
+
"diggRisk": "high",
|
|
26
|
+
"eaaImpact": "critical",
|
|
27
|
+
"commonMistakes": [
|
|
28
|
+
"Gray text on white background (#777 on #FFF)",
|
|
29
|
+
"Light blue links without underline",
|
|
30
|
+
"Placeholder text with too low contrast"
|
|
31
|
+
],
|
|
32
|
+
"diggPrecedent": "Regulators often cite poor contrast in primary navigation elements.",
|
|
33
|
+
"priorityRationale": "Critical for users with low vision. Affects readability for all users in varying lighting conditions.",
|
|
34
|
+
"ukInterpretation": "One of the most common reasons for fines from regulators. Especially important for public sector monitoring."
|
|
35
|
+
},
|
|
36
|
+
"testability": {
|
|
37
|
+
"automated": true,
|
|
38
|
+
"requiresManualCheck": false,
|
|
39
|
+
"pseudoAutomation": false,
|
|
40
|
+
"complexity": "simple"
|
|
41
|
+
},
|
|
42
|
+
"tags": [
|
|
43
|
+
"color",
|
|
44
|
+
"contrast",
|
|
45
|
+
"visual",
|
|
46
|
+
"wcag2a",
|
|
47
|
+
"wcag21aa"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"ruleId": "keyboard-accessible",
|
|
52
|
+
"wcagCriteria": "2.1.1",
|
|
53
|
+
"wcagLevel": "A",
|
|
54
|
+
"wcagTitle": "Keyboard",
|
|
55
|
+
"wcagVersion": "2.0",
|
|
56
|
+
"en301549Criteria": "9.2.1.1",
|
|
57
|
+
"en301549Title": "Keyboard",
|
|
58
|
+
"en301549Chapter": 9,
|
|
59
|
+
"dosLagenApplies": true,
|
|
60
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
61
|
+
"remediation": {
|
|
62
|
+
"description": "All functionality must be accessible via keyboard.",
|
|
63
|
+
"technicalGuidance": "Use semantic HTML elements (button, a, input) instead of div/span with click handlers. Ensure tabindex is used correctly.",
|
|
64
|
+
"component": "@holmdigital/components/Button",
|
|
65
|
+
"codeExample": "// Bad: Div with onClick\n<div onClick={handleClick}>Click Me</div>\n\n// Good: Button element\n<button onClick={handleClick}>Click Me</button>\n\n// Best: Use HolmDigital component\nimport { Button } from '@holmdigital/components';\n<Button onClick={handleClick}>Click Me</Button>",
|
|
66
|
+
"wcagTechnique": [
|
|
67
|
+
"G202",
|
|
68
|
+
"H91"
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
"holmdigitalInsight": {
|
|
72
|
+
"diggRisk": "critical",
|
|
73
|
+
"eaaImpact": "critical",
|
|
74
|
+
"commonMistakes": [
|
|
75
|
+
"Using div/span for clickable elements",
|
|
76
|
+
"Custom dropdown menus without keyboard support",
|
|
77
|
+
"Modal dialogs that trap focus incorrectly"
|
|
78
|
+
],
|
|
79
|
+
"diggPrecedent": "Auditors have issued fines for sites where core functions (e.g. forms, navigation) are not keyboard accessible.",
|
|
80
|
+
"priorityRationale": "Critical for users with motor disabilities and screen reader users.",
|
|
81
|
+
"ukInterpretation": "Keyboard access is fundamental and non-negotiable. Top priority in compliance audits."
|
|
82
|
+
},
|
|
83
|
+
"testability": {
|
|
84
|
+
"automated": false,
|
|
85
|
+
"requiresManualCheck": true,
|
|
86
|
+
"pseudoAutomation": true,
|
|
87
|
+
"complexity": "moderate"
|
|
88
|
+
},
|
|
89
|
+
"tags": [
|
|
90
|
+
"keyboard",
|
|
91
|
+
"interaction",
|
|
92
|
+
"wcag2a",
|
|
93
|
+
"wcag21a"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"ruleId": "alt-text",
|
|
98
|
+
"wcagCriteria": "1.1.1",
|
|
99
|
+
"wcagLevel": "A",
|
|
100
|
+
"wcagTitle": "Non-text Content",
|
|
101
|
+
"wcagVersion": "2.0",
|
|
102
|
+
"en301549Criteria": "9.1.1.1",
|
|
103
|
+
"en301549Title": "Non-text content",
|
|
104
|
+
"en301549Chapter": 9,
|
|
105
|
+
"dosLagenApplies": true,
|
|
106
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
107
|
+
"remediation": {
|
|
108
|
+
"description": "All images must have descriptive alternative text.",
|
|
109
|
+
"technicalGuidance": "Add alt attributes to all img elements. For decorative images, use alt=\"\". For informative images, concisely describe the content.",
|
|
110
|
+
"codeExample": "// Bad: Msising alt\n<img src=\"logo.png\" />\n\n// Good: Descriptive alt\n<img src=\"logo.png\" alt=\"HolmDigital Logo\" />\n\n// Good: Decorative image\n<img src=\"decoration.png\" alt=\"\" role=\"presentation\" />",
|
|
111
|
+
"wcagTechnique": [
|
|
112
|
+
"G94",
|
|
113
|
+
"G95",
|
|
114
|
+
"H37"
|
|
115
|
+
]
|
|
116
|
+
},
|
|
117
|
+
"holmdigitalInsight": {
|
|
118
|
+
"diggRisk": "high",
|
|
119
|
+
"eaaImpact": "high",
|
|
120
|
+
"commonMistakes": [
|
|
121
|
+
"Missing alt text entirely",
|
|
122
|
+
"Alt text that just says 'image' or 'icon'",
|
|
123
|
+
"Filename as alt text (e.g. 'IMG_1234.jpg')",
|
|
124
|
+
"Decorative images with unnecessary description"
|
|
125
|
+
],
|
|
126
|
+
"diggPrecedent": "Audits frequently cite missing alt text, especially for vital infographics.",
|
|
127
|
+
"priorityRationale": "Critical for screen reader users to access visual information.",
|
|
128
|
+
"ukInterpretation": "Especially important for logos and informational graphics. Frequently checked in audits."
|
|
129
|
+
},
|
|
130
|
+
"testability": {
|
|
131
|
+
"automated": true,
|
|
132
|
+
"requiresManualCheck": true,
|
|
133
|
+
"pseudoAutomation": false,
|
|
134
|
+
"complexity": "simple"
|
|
135
|
+
},
|
|
136
|
+
"tags": [
|
|
137
|
+
"images",
|
|
138
|
+
"alt-text",
|
|
139
|
+
"wcag2a",
|
|
140
|
+
"wcag21a"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"ruleId": "form-labels",
|
|
145
|
+
"wcagCriteria": "3.3.2",
|
|
146
|
+
"wcagLevel": "A",
|
|
147
|
+
"wcagTitle": "Labels or Instructions",
|
|
148
|
+
"wcagVersion": "2.0",
|
|
149
|
+
"en301549Criteria": "9.3.3.2",
|
|
150
|
+
"en301549Title": "Labels or instructions",
|
|
151
|
+
"en301549Chapter": 9,
|
|
152
|
+
"dosLagenApplies": true,
|
|
153
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
154
|
+
"remediation": {
|
|
155
|
+
"description": "Form fields must have clear labels or instructions.",
|
|
156
|
+
"technicalGuidance": "Use label elements linked to input via for/id. For complex forms, use fieldset and legend. Use aria-describedby for extra instructions.",
|
|
157
|
+
"component": "@holmdigital/components/FormField",
|
|
158
|
+
"codeExample": "import { FormField } from '@holmdigital/components';\n\n// Bad: No label\n<input type=\"text\" placeholder=\"Name\" />\n\n// Good: With label\n<label htmlFor=\"name\">Name:</label>\n<input type=\"text\" id=\"name\" />\n\n// Best: Use HolmDigital component\n<FormField\n label=\"Name\"\n type=\"text\"\n required\n helpText=\"Enter your full name\"\n/>",
|
|
159
|
+
"wcagTechnique": [
|
|
160
|
+
"G131",
|
|
161
|
+
"G162",
|
|
162
|
+
"H44",
|
|
163
|
+
"H71"
|
|
164
|
+
]
|
|
165
|
+
},
|
|
166
|
+
"holmdigitalInsight": {
|
|
167
|
+
"diggRisk": "high",
|
|
168
|
+
"eaaImpact": "high",
|
|
169
|
+
"commonMistakes": [
|
|
170
|
+
"Only placeholder without label",
|
|
171
|
+
"Label and input not linked via for/id",
|
|
172
|
+
"Error messages without aria-describedby",
|
|
173
|
+
"Required fields not clearly marked"
|
|
174
|
+
],
|
|
175
|
+
"diggPrecedent": "Audit decisions often criticize poor form accessibility, especially for application and contact forms.",
|
|
176
|
+
"priorityRationale": "Critical for users to successfully use e-services and submit information.",
|
|
177
|
+
"ukInterpretation": "Forms are critical for e-services. Compliance is strictly enforced in public sector apps."
|
|
178
|
+
},
|
|
179
|
+
"testability": {
|
|
180
|
+
"automated": true,
|
|
181
|
+
"requiresManualCheck": false,
|
|
182
|
+
"pseudoAutomation": false,
|
|
183
|
+
"complexity": "simple"
|
|
184
|
+
},
|
|
185
|
+
"tags": [
|
|
186
|
+
"forms",
|
|
187
|
+
"labels",
|
|
188
|
+
"wcag2a",
|
|
189
|
+
"wcag21a"
|
|
190
|
+
]
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"ruleId": "page-title",
|
|
194
|
+
"wcagCriteria": "2.4.2",
|
|
195
|
+
"wcagLevel": "A",
|
|
196
|
+
"wcagTitle": "Page Titled",
|
|
197
|
+
"wcagVersion": "2.0",
|
|
198
|
+
"en301549Criteria": "9.2.4.2",
|
|
199
|
+
"en301549Title": "Page titled",
|
|
200
|
+
"en301549Chapter": 9,
|
|
201
|
+
"dosLagenApplies": true,
|
|
202
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
203
|
+
"remediation": {
|
|
204
|
+
"description": "Each web page must have a descriptive title.",
|
|
205
|
+
"technicalGuidance": "Use the title element in head. The title should be unique for each page and describe its purpose. Format: 'Page Name - Site Name'.",
|
|
206
|
+
"codeExample": "// Bad: Generic title\n<title>Page</title>\n\n// Good: Descriptive title\n<title>Contact Us - HolmDigital</title>\n\n// React/Next.js\nimport Head from 'next/head';\n\n<Head>\n <title>Contact Us - HolmDigital</title>\n</Head>",
|
|
207
|
+
"wcagTechnique": [
|
|
208
|
+
"G88",
|
|
209
|
+
"H25"
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
"holmdigitalInsight": {
|
|
213
|
+
"diggRisk": "medium",
|
|
214
|
+
"eaaImpact": "medium",
|
|
215
|
+
"commonMistakes": [
|
|
216
|
+
"Same title on all pages",
|
|
217
|
+
"Title not updating in SPAs",
|
|
218
|
+
"Too long or too short title",
|
|
219
|
+
"Title missing entirely"
|
|
220
|
+
],
|
|
221
|
+
"diggPrecedent": "Audits have noted missing page titles, especially in Single Page Applications.",
|
|
222
|
+
"priorityRationale": "Important for screen reader navigation and SEO.",
|
|
223
|
+
"ukInterpretation": "Important for navigation, especially in SPAs where the title must update dynamically."
|
|
224
|
+
},
|
|
225
|
+
"testability": {
|
|
226
|
+
"automated": true,
|
|
227
|
+
"requiresManualCheck": false,
|
|
228
|
+
"pseudoAutomation": false,
|
|
229
|
+
"complexity": "simple"
|
|
230
|
+
},
|
|
231
|
+
"tags": [
|
|
232
|
+
"navigation",
|
|
233
|
+
"title",
|
|
234
|
+
"wcag2a",
|
|
235
|
+
"wcag21a"
|
|
236
|
+
]
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"ruleId": "info-and-relationships",
|
|
240
|
+
"wcagCriteria": "1.3.1",
|
|
241
|
+
"wcagLevel": "A",
|
|
242
|
+
"wcagTitle": "Info and Relationships",
|
|
243
|
+
"wcagVersion": "2.0",
|
|
244
|
+
"en301549Criteria": "9.1.3.1",
|
|
245
|
+
"en301549Title": "Info and relationships",
|
|
246
|
+
"en301549Chapter": 9,
|
|
247
|
+
"dosLagenApplies": true,
|
|
248
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
249
|
+
"remediation": {
|
|
250
|
+
"description": "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.",
|
|
251
|
+
"technicalGuidance": "Use semantic HTML: <header>, <nav>, <main>, <footer>, <h1>-<h6>, <ul>/ <ol>, <table>. Do not use visual styles to create 'fake' headings or lists.",
|
|
252
|
+
"component": null,
|
|
253
|
+
"wcagTechnique": [
|
|
254
|
+
"H42",
|
|
255
|
+
"H48",
|
|
256
|
+
"G115"
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
"holmdigitalInsight": {
|
|
260
|
+
"diggRisk": "high",
|
|
261
|
+
"eaaImpact": "high",
|
|
262
|
+
"commonMistakes": [
|
|
263
|
+
"Using bold text instead of <h1>-<h6>",
|
|
264
|
+
"Using <br> for lists instead of <ul>",
|
|
265
|
+
"Tables for layout"
|
|
266
|
+
],
|
|
267
|
+
"priorityRationale": "Fundamental for all assistive technology navigation.",
|
|
268
|
+
"ukInterpretation": "Semantic structure is crucial for screen readers to navigate effectively. Auditors often cite 'div-soup' that looks like structure but lacks semantics."
|
|
269
|
+
},
|
|
270
|
+
"testability": {
|
|
271
|
+
"automated": true,
|
|
272
|
+
"requiresManualCheck": true,
|
|
273
|
+
"pseudoAutomation": false,
|
|
274
|
+
"complexity": "moderate"
|
|
275
|
+
},
|
|
276
|
+
"tags": [
|
|
277
|
+
"structure",
|
|
278
|
+
"semantic",
|
|
279
|
+
"headings",
|
|
280
|
+
"wcag2a"
|
|
281
|
+
]
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"ruleId": "use-of-color",
|
|
285
|
+
"wcagCriteria": "1.4.1",
|
|
286
|
+
"wcagLevel": "A",
|
|
287
|
+
"wcagTitle": "Use of Color",
|
|
288
|
+
"wcagVersion": "2.0",
|
|
289
|
+
"en301549Criteria": "9.1.4.1",
|
|
290
|
+
"en301549Title": "Use of color",
|
|
291
|
+
"en301549Chapter": 9,
|
|
292
|
+
"dosLagenApplies": true,
|
|
293
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
294
|
+
"remediation": {
|
|
295
|
+
"description": "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",
|
|
296
|
+
"technicalGuidance": "Complement color with text, icons, or underlining. E.g. links must have underlines or another visual marker besides color. Error messages need text/icon, not just a red border.",
|
|
297
|
+
"component": "@holmdigital/components/FormField",
|
|
298
|
+
"wcagTechnique": [
|
|
299
|
+
"G14",
|
|
300
|
+
"G182",
|
|
301
|
+
"G183"
|
|
302
|
+
]
|
|
303
|
+
},
|
|
304
|
+
"holmdigitalInsight": {
|
|
305
|
+
"diggRisk": "medium",
|
|
306
|
+
"eaaImpact": "medium",
|
|
307
|
+
"commonMistakes": [
|
|
308
|
+
"Links that only differ by color from body text",
|
|
309
|
+
"Error messages only marked with red color",
|
|
310
|
+
"Graphs where only color distinguishes data points"
|
|
311
|
+
],
|
|
312
|
+
"priorityRationale": "Crucial for color blind users.",
|
|
313
|
+
"ukInterpretation": "Common problem in graphs and maps where only color coding is used."
|
|
314
|
+
},
|
|
315
|
+
"testability": {
|
|
316
|
+
"automated": false,
|
|
317
|
+
"requiresManualCheck": true,
|
|
318
|
+
"pseudoAutomation": false,
|
|
319
|
+
"complexity": "moderate"
|
|
320
|
+
},
|
|
321
|
+
"tags": [
|
|
322
|
+
"visual",
|
|
323
|
+
"color",
|
|
324
|
+
"design",
|
|
325
|
+
"wcag2a"
|
|
326
|
+
]
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"ruleId": "reflow",
|
|
330
|
+
"wcagCriteria": "1.4.10",
|
|
331
|
+
"wcagLevel": "AA",
|
|
332
|
+
"wcagTitle": "Reflow",
|
|
333
|
+
"wcagVersion": "2.1",
|
|
334
|
+
"en301549Criteria": "9.1.4.10",
|
|
335
|
+
"en301549Title": "Reflow",
|
|
336
|
+
"en301549Chapter": 9,
|
|
337
|
+
"dosLagenApplies": true,
|
|
338
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
339
|
+
"remediation": {
|
|
340
|
+
"description": "Content must be presentable without requiring scrolling in two dimensions down to 320px width.",
|
|
341
|
+
"technicalGuidance": "Use responsive design (CSS Media Queries, Flexbox, Grid). Avoid fixed widths in pixels. Ensure tables and images scale correctly.",
|
|
342
|
+
"component": null,
|
|
343
|
+
"wcagTechnique": [
|
|
344
|
+
"C32",
|
|
345
|
+
"C31"
|
|
346
|
+
]
|
|
347
|
+
},
|
|
348
|
+
"holmdigitalInsight": {
|
|
349
|
+
"diggRisk": "high",
|
|
350
|
+
"eaaImpact": "high",
|
|
351
|
+
"commonMistakes": [
|
|
352
|
+
"Fixed widths on containers",
|
|
353
|
+
"Tables that are not responsive",
|
|
354
|
+
"Images wider than the screen"
|
|
355
|
+
],
|
|
356
|
+
"priorityRationale": "Critical for low vision users who zoom in heavily.",
|
|
357
|
+
"ukInterpretation": "A modern requirement (WCAG 2.1) critical for mobile use and magnified text. DIGG has zero tolerance for horizontal scroll on vertical sites."
|
|
358
|
+
},
|
|
359
|
+
"testability": {
|
|
360
|
+
"automated": false,
|
|
361
|
+
"requiresManualCheck": true,
|
|
362
|
+
"pseudoAutomation": true,
|
|
363
|
+
"complexity": "moderate"
|
|
364
|
+
},
|
|
365
|
+
"tags": [
|
|
366
|
+
"design",
|
|
367
|
+
"responsive",
|
|
368
|
+
"mobile",
|
|
369
|
+
"wcag21aa"
|
|
370
|
+
]
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"ruleId": "non-text-contrast",
|
|
374
|
+
"wcagCriteria": "1.4.11",
|
|
375
|
+
"wcagLevel": "AA",
|
|
376
|
+
"wcagTitle": "Non-text Contrast",
|
|
377
|
+
"wcagVersion": "2.1",
|
|
378
|
+
"en301549Criteria": "9.1.4.11",
|
|
379
|
+
"en301549Title": "Non-text contrast",
|
|
380
|
+
"en301549Chapter": 9,
|
|
381
|
+
"dosLagenApplies": true,
|
|
382
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
383
|
+
"remediation": {
|
|
384
|
+
"description": "The visual presentation of user interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.",
|
|
385
|
+
"technicalGuidance": "Applies to buttons, input borders, icons, and focus indicators. Ensure all interactive elements are clearly visible against the background.",
|
|
386
|
+
"component": "@holmdigital/components/Button",
|
|
387
|
+
"wcagTechnique": [
|
|
388
|
+
"G195",
|
|
389
|
+
"G207"
|
|
390
|
+
]
|
|
391
|
+
},
|
|
392
|
+
"holmdigitalInsight": {
|
|
393
|
+
"diggRisk": "low",
|
|
394
|
+
"eaaImpact": "low",
|
|
395
|
+
"commonMistakes": [
|
|
396
|
+
"Grayed out buttons with too low contrast"
|
|
397
|
+
],
|
|
398
|
+
"priorityRationale": "Important for distinguishing interactive elements.",
|
|
399
|
+
"ukInterpretation": "Often missed requirement regarding focus rings and inactive (but visible) components. Important for understanding the interface."
|
|
400
|
+
},
|
|
401
|
+
"testability": {
|
|
402
|
+
"automated": false,
|
|
403
|
+
"requiresManualCheck": true,
|
|
404
|
+
"pseudoAutomation": false,
|
|
405
|
+
"complexity": "complex"
|
|
406
|
+
},
|
|
407
|
+
"tags": [
|
|
408
|
+
"visual",
|
|
409
|
+
"contrast",
|
|
410
|
+
"graphics",
|
|
411
|
+
"wcag21aa"
|
|
412
|
+
]
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"ruleId": "text-spacing",
|
|
416
|
+
"wcagCriteria": "1.4.12",
|
|
417
|
+
"wcagLevel": "AA",
|
|
418
|
+
"wcagTitle": "Text Spacing",
|
|
419
|
+
"wcagVersion": "2.1",
|
|
420
|
+
"en301549Criteria": "9.1.4.12",
|
|
421
|
+
"en301549Title": "Text spacing",
|
|
422
|
+
"en301549Chapter": 9,
|
|
423
|
+
"dosLagenApplies": true,
|
|
424
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
425
|
+
"remediation": {
|
|
426
|
+
"description": "Content or functionality must not be lost when the user changes text spacing (line height, paragraph spacing, etc.).",
|
|
427
|
+
"technicalGuidance": "Avoid fixed heights on text containers. Let containers grow with content. Test with text spacing bookmarklet.",
|
|
428
|
+
"component": null,
|
|
429
|
+
"wcagTechnique": [
|
|
430
|
+
"C36"
|
|
431
|
+
]
|
|
432
|
+
},
|
|
433
|
+
"holmdigitalInsight": {
|
|
434
|
+
"diggRisk": "low",
|
|
435
|
+
"eaaImpact": "medium",
|
|
436
|
+
"commonMistakes": [
|
|
437
|
+
"Fixed line height in pixels",
|
|
438
|
+
"Text container that does not grow"
|
|
439
|
+
],
|
|
440
|
+
"priorityRationale": "Important for readability during adaptations.",
|
|
441
|
+
"ukInterpretation": "Important for dyslexia adaptations."
|
|
442
|
+
},
|
|
443
|
+
"testability": {
|
|
444
|
+
"automated": false,
|
|
445
|
+
"requiresManualCheck": true,
|
|
446
|
+
"pseudoAutomation": true,
|
|
447
|
+
"complexity": "moderate"
|
|
448
|
+
},
|
|
449
|
+
"tags": [
|
|
450
|
+
"visual",
|
|
451
|
+
"typography",
|
|
452
|
+
"wcag21aa"
|
|
453
|
+
]
|
|
454
|
+
},
|
|
455
|
+
{
|
|
456
|
+
"ruleId": "content-on-hover",
|
|
457
|
+
"wcagCriteria": "1.4.13",
|
|
458
|
+
"wcagLevel": "AA",
|
|
459
|
+
"wcagTitle": "Content on Hover or Focus",
|
|
460
|
+
"wcagVersion": "2.1",
|
|
461
|
+
"en301549Criteria": "9.1.4.13",
|
|
462
|
+
"en301549Title": "Content on hover or focus",
|
|
463
|
+
"en301549Chapter": 9,
|
|
464
|
+
"dosLagenApplies": true,
|
|
465
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
466
|
+
"remediation": {
|
|
467
|
+
"description": "Content shown on hover/focus (e.g. tooltips) must be Dismissable, Hoverable, and Persistent.",
|
|
468
|
+
"technicalGuidance": "Ensure tooltips do not disappear when moving mouse from trigger to the tooltip itself. Allow ESC to dismiss.",
|
|
469
|
+
"component": null,
|
|
470
|
+
"wcagTechnique": [
|
|
471
|
+
"SCR39"
|
|
472
|
+
]
|
|
473
|
+
},
|
|
474
|
+
"holmdigitalInsight": {
|
|
475
|
+
"diggRisk": "medium",
|
|
476
|
+
"eaaImpact": "medium",
|
|
477
|
+
"commonMistakes": [
|
|
478
|
+
"Tooltips that cannot be reached with mouse",
|
|
479
|
+
"Menus that close too easily",
|
|
480
|
+
"Content that cannot be dismissed without moving focus"
|
|
481
|
+
],
|
|
482
|
+
"priorityRationale": "Important for users with magnification and motor difficulties.",
|
|
483
|
+
"ukInterpretation": "Common problem with custom tooltips and mega-menus."
|
|
484
|
+
},
|
|
485
|
+
"testability": {
|
|
486
|
+
"automated": false,
|
|
487
|
+
"requiresManualCheck": true,
|
|
488
|
+
"pseudoAutomation": true,
|
|
489
|
+
"complexity": "complex"
|
|
490
|
+
},
|
|
491
|
+
"tags": [
|
|
492
|
+
"interaction",
|
|
493
|
+
"hover",
|
|
494
|
+
"tooltips",
|
|
495
|
+
"wcag21aa"
|
|
496
|
+
]
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"ruleId": "captions-prerecorded",
|
|
500
|
+
"wcagCriteria": "1.2.2",
|
|
501
|
+
"wcagLevel": "A",
|
|
502
|
+
"wcagTitle": "Captions (Prerecorded)",
|
|
503
|
+
"wcagVersion": "2.0",
|
|
504
|
+
"en301549Criteria": "9.1.2.2",
|
|
505
|
+
"en301549Title": "Captions (prerecorded)",
|
|
506
|
+
"en301549Chapter": 9,
|
|
507
|
+
"dosLagenApplies": true,
|
|
508
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
509
|
+
"remediation": {
|
|
510
|
+
"description": "Captions must be provided for all prerecorded audio content in synchronized media.",
|
|
511
|
+
"technicalGuidance": "Use the <track> element with WebVTT files for HTML5 video. For social media embeds, ensure captions are enabled.",
|
|
512
|
+
"component": null,
|
|
513
|
+
"wcagTechnique": [
|
|
514
|
+
"G87",
|
|
515
|
+
"G93"
|
|
516
|
+
]
|
|
517
|
+
},
|
|
518
|
+
"holmdigitalInsight": {
|
|
519
|
+
"diggRisk": "high",
|
|
520
|
+
"eaaImpact": "high",
|
|
521
|
+
"commonMistakes": [
|
|
522
|
+
"Auto-generated captions that satisfy no one",
|
|
523
|
+
"Captions missing entirely",
|
|
524
|
+
"Captions burned into video (not accessible for search/translation)"
|
|
525
|
+
],
|
|
526
|
+
"priorityRationale": "Critical for deaf and hard of hearing users.",
|
|
527
|
+
"ukInterpretation": "One of the most common deficiencies in the public sector. The legal requirement is strict: video with audio MUST have captions."
|
|
528
|
+
},
|
|
529
|
+
"testability": {
|
|
530
|
+
"automated": false,
|
|
531
|
+
"requiresManualCheck": true,
|
|
532
|
+
"pseudoAutomation": false,
|
|
533
|
+
"complexity": "simple"
|
|
534
|
+
},
|
|
535
|
+
"tags": [
|
|
536
|
+
"media",
|
|
537
|
+
"video",
|
|
538
|
+
"captions",
|
|
539
|
+
"wcag2a"
|
|
540
|
+
]
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"ruleId": "audio-description",
|
|
544
|
+
"wcagCriteria": "1.2.5",
|
|
545
|
+
"wcagLevel": "AA",
|
|
546
|
+
"wcagTitle": "Audio Description (Prerecorded)",
|
|
547
|
+
"wcagVersion": "2.0",
|
|
548
|
+
"en301549Criteria": "9.1.2.5",
|
|
549
|
+
"en301549Title": "Audio description (prerecorded)",
|
|
550
|
+
"en301549Chapter": 9,
|
|
551
|
+
"dosLagenApplies": true,
|
|
552
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
553
|
+
"remediation": {
|
|
554
|
+
"description": "Audio description must be provided for all prerecorded video content.",
|
|
555
|
+
"technicalGuidance": "Either as a separate audio track, an alternative version of the video, or (if 'talking heads') ensuring all info is conveyed by audio.",
|
|
556
|
+
"component": null,
|
|
557
|
+
"wcagTechnique": [
|
|
558
|
+
"G78",
|
|
559
|
+
"G69"
|
|
560
|
+
]
|
|
561
|
+
},
|
|
562
|
+
"holmdigitalInsight": {
|
|
563
|
+
"diggRisk": "medium",
|
|
564
|
+
"eaaImpact": "medium",
|
|
565
|
+
"commonMistakes": [
|
|
566
|
+
"Information shown only visually (graphics, text signs) without being mentioned in audio"
|
|
567
|
+
],
|
|
568
|
+
"priorityRationale": "Critical for blind video users.",
|
|
569
|
+
"ukInterpretation": "Can often be solved by 'integrated description' (talking about what is seen), which is more cost-effective."
|
|
570
|
+
},
|
|
571
|
+
"testability": {
|
|
572
|
+
"automated": false,
|
|
573
|
+
"requiresManualCheck": true,
|
|
574
|
+
"pseudoAutomation": false,
|
|
575
|
+
"complexity": "moderate"
|
|
576
|
+
},
|
|
577
|
+
"tags": [
|
|
578
|
+
"media",
|
|
579
|
+
"video",
|
|
580
|
+
"audio-description",
|
|
581
|
+
"wcag2aa"
|
|
582
|
+
]
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"ruleId": "orientation",
|
|
586
|
+
"wcagCriteria": "1.3.4",
|
|
587
|
+
"wcagLevel": "AA",
|
|
588
|
+
"wcagTitle": "Orientation",
|
|
589
|
+
"wcagVersion": "2.1",
|
|
590
|
+
"en301549Criteria": "9.1.3.4",
|
|
591
|
+
"en301549Title": "Orientation",
|
|
592
|
+
"en301549Chapter": 9,
|
|
593
|
+
"dosLagenApplies": true,
|
|
594
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
595
|
+
"remediation": {
|
|
596
|
+
"description": "Content must not restrict its view and operation to a single display orientation, unless a specific orientation is essential.",
|
|
597
|
+
"technicalGuidance": "Do not lock screen to portrait or landscape via CSS or JS manifest. Use CSS media queries to handle layout changes.",
|
|
598
|
+
"component": null,
|
|
599
|
+
"wcagTechnique": [
|
|
600
|
+
"F97"
|
|
601
|
+
]
|
|
602
|
+
},
|
|
603
|
+
"holmdigitalInsight": {
|
|
604
|
+
"diggRisk": "low",
|
|
605
|
+
"eaaImpact": "medium",
|
|
606
|
+
"commonMistakes": [
|
|
607
|
+
"Apps/sites that rotate interface 90 degrees against user will"
|
|
608
|
+
],
|
|
609
|
+
"priorityRationale": "Important for users who cannot rotate their device.",
|
|
610
|
+
"ukInterpretation": "Important for tablets and users who have the device mounted (e.g., wheelchair)."
|
|
611
|
+
},
|
|
612
|
+
"testability": {
|
|
613
|
+
"automated": false,
|
|
614
|
+
"requiresManualCheck": true,
|
|
615
|
+
"pseudoAutomation": true,
|
|
616
|
+
"complexity": "simple"
|
|
617
|
+
},
|
|
618
|
+
"tags": [
|
|
619
|
+
"mobile",
|
|
620
|
+
"responsive",
|
|
621
|
+
"orientation",
|
|
622
|
+
"wcag21aa"
|
|
623
|
+
]
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"ruleId": "identify-input-purpose",
|
|
627
|
+
"wcagCriteria": "1.3.5",
|
|
628
|
+
"wcagLevel": "AA",
|
|
629
|
+
"wcagTitle": "Identify Input Purpose",
|
|
630
|
+
"wcagVersion": "2.1",
|
|
631
|
+
"en301549Criteria": "9.1.3.5",
|
|
632
|
+
"en301549Title": "Identify input purpose",
|
|
633
|
+
"en301549Chapter": 9,
|
|
634
|
+
"dosLagenApplies": true,
|
|
635
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
636
|
+
"remediation": {
|
|
637
|
+
"description": "The purpose of each input field collecting information about the user can be programmatically determined.",
|
|
638
|
+
"technicalGuidance": "Use the 'autocomplete' attribute on input fields for personal data (name, email, tel, address etc.).",
|
|
639
|
+
"component": "@holmdigital/components/FormField",
|
|
640
|
+
"wcagTechnique": [
|
|
641
|
+
"H98"
|
|
642
|
+
]
|
|
643
|
+
},
|
|
644
|
+
"holmdigitalInsight": {
|
|
645
|
+
"diggRisk": "medium",
|
|
646
|
+
"eaaImpact": "high",
|
|
647
|
+
"commonMistakes": [
|
|
648
|
+
"Missing autocomplete attribute",
|
|
649
|
+
"Incorrect autocomplete value",
|
|
650
|
+
"Turning off autocomplete (autocomplete='off') unnecessarily"
|
|
651
|
+
],
|
|
652
|
+
"priorityRationale": "Reduces cognitive load and motor requirements.",
|
|
653
|
+
"ukInterpretation": "Makes it much easier to fill confusing forms (autofill)."
|
|
654
|
+
},
|
|
655
|
+
"testability": {
|
|
656
|
+
"automated": true,
|
|
657
|
+
"requiresManualCheck": false,
|
|
658
|
+
"pseudoAutomation": false,
|
|
659
|
+
"complexity": "simple"
|
|
660
|
+
},
|
|
661
|
+
"tags": [
|
|
662
|
+
"forms",
|
|
663
|
+
"autocomplete",
|
|
664
|
+
"wcag21aa"
|
|
665
|
+
]
|
|
666
|
+
},
|
|
667
|
+
{
|
|
668
|
+
"ruleId": "no-keyboard-trap",
|
|
669
|
+
"wcagCriteria": "2.1.2",
|
|
670
|
+
"wcagLevel": "A",
|
|
671
|
+
"wcagTitle": "No Keyboard Trap",
|
|
672
|
+
"wcagVersion": "2.0",
|
|
673
|
+
"en301549Criteria": "9.2.1.2",
|
|
674
|
+
"en301549Title": "No keyboard trap",
|
|
675
|
+
"en301549Chapter": 9,
|
|
676
|
+
"dosLagenApplies": true,
|
|
677
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
678
|
+
"remediation": {
|
|
679
|
+
"description": "If focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.",
|
|
680
|
+
"technicalGuidance": "Be careful with JS widgets that trap focus (e.g. modal windows). Ensure there is always a way out (e.g. ESC or shift+tab).",
|
|
681
|
+
"component": null,
|
|
682
|
+
"wcagTechnique": [
|
|
683
|
+
"G21"
|
|
684
|
+
]
|
|
685
|
+
},
|
|
686
|
+
"holmdigitalInsight": {
|
|
687
|
+
"diggRisk": "critical",
|
|
688
|
+
"eaaImpact": "critical",
|
|
689
|
+
"commonMistakes": [
|
|
690
|
+
"Custom widgets that loop focus infinitely",
|
|
691
|
+
"Embedded third-party components (maps, chats) without exit"
|
|
692
|
+
],
|
|
693
|
+
"priorityRationale": "Critical: The user gets stuck and must restart the browser.",
|
|
694
|
+
"ukInterpretation": "A keyboard trap is a 'blocker' that makes the website unusable. Serious error."
|
|
695
|
+
},
|
|
696
|
+
"testability": {
|
|
697
|
+
"automated": false,
|
|
698
|
+
"requiresManualCheck": true,
|
|
699
|
+
"pseudoAutomation": true,
|
|
700
|
+
"complexity": "moderate"
|
|
701
|
+
},
|
|
702
|
+
"tags": [
|
|
703
|
+
"keyboard",
|
|
704
|
+
"interaction",
|
|
705
|
+
"wcag2a"
|
|
706
|
+
]
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
"ruleId": "character-key-shortcuts",
|
|
710
|
+
"wcagCriteria": "2.1.4",
|
|
711
|
+
"wcagLevel": "A",
|
|
712
|
+
"wcagTitle": "Character Key Shortcuts",
|
|
713
|
+
"wcagVersion": "2.1",
|
|
714
|
+
"en301549Criteria": "9.2.1.4",
|
|
715
|
+
"en301549Title": "Character key shortcuts",
|
|
716
|
+
"en301549Chapter": 9,
|
|
717
|
+
"dosLagenApplies": true,
|
|
718
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
719
|
+
"remediation": {
|
|
720
|
+
"description": "If a keyboard shortcut consists of only one character (letter, number, symbol), there must be a way to turn it off or remap it, or it must only be active on focus.",
|
|
721
|
+
"technicalGuidance": "Avoid single-key shortcuts if possible. If needed, ensure they do not conflict with voice control or accidental typing.",
|
|
722
|
+
"component": null,
|
|
723
|
+
"wcagTechnique": [
|
|
724
|
+
"G217"
|
|
725
|
+
]
|
|
726
|
+
},
|
|
727
|
+
"holmdigitalInsight": {
|
|
728
|
+
"diggRisk": "medium",
|
|
729
|
+
"eaaImpact": "medium",
|
|
730
|
+
"commonMistakes": [
|
|
731
|
+
"Gmail-like shortcuts that are on by default without option to disable"
|
|
732
|
+
],
|
|
733
|
+
"priorityRationale": "Important to avoid accidental activation.",
|
|
734
|
+
"ukInterpretation": "Important for voice control users (Dragon etc.) where single words can trigger commands accidentally."
|
|
735
|
+
},
|
|
736
|
+
"testability": {
|
|
737
|
+
"automated": false,
|
|
738
|
+
"requiresManualCheck": true,
|
|
739
|
+
"pseudoAutomation": false,
|
|
740
|
+
"complexity": "moderate"
|
|
741
|
+
},
|
|
742
|
+
"tags": [
|
|
743
|
+
"keyboard",
|
|
744
|
+
"shortcuts",
|
|
745
|
+
"wcag21a"
|
|
746
|
+
]
|
|
747
|
+
},
|
|
748
|
+
{
|
|
749
|
+
"ruleId": "timing-adjustable",
|
|
750
|
+
"wcagCriteria": "2.2.1",
|
|
751
|
+
"wcagLevel": "A",
|
|
752
|
+
"wcagTitle": "Timing Adjustable",
|
|
753
|
+
"wcagVersion": "2.0",
|
|
754
|
+
"en301549Criteria": "9.2.2.1",
|
|
755
|
+
"en301549Title": "Timing adjustable",
|
|
756
|
+
"en301549Chapter": 9,
|
|
757
|
+
"dosLagenApplies": true,
|
|
758
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
759
|
+
"remediation": {
|
|
760
|
+
"description": "If a time limit (session, reading time) is set, the user must be able to turn off, adjust, or extend it.",
|
|
761
|
+
"technicalGuidance": "Provide a warning before the session expires with an 'Extend session' button. The time limit must be at least 20 seconds.",
|
|
762
|
+
"component": null,
|
|
763
|
+
"wcagTechnique": [
|
|
764
|
+
"SCR16",
|
|
765
|
+
"G180"
|
|
766
|
+
]
|
|
767
|
+
},
|
|
768
|
+
"holmdigitalInsight": {
|
|
769
|
+
"diggRisk": "high",
|
|
770
|
+
"eaaImpact": "high",
|
|
771
|
+
"commonMistakes": [
|
|
772
|
+
"Logout without warning",
|
|
773
|
+
"Time limits that cannot be extended"
|
|
774
|
+
],
|
|
775
|
+
"priorityRationale": "Critical to avoid losing entered data.",
|
|
776
|
+
"ukInterpretation": "Critical for e-services/banking. Users who read slowly or use assistive technology need more time."
|
|
777
|
+
},
|
|
778
|
+
"testability": {
|
|
779
|
+
"automated": false,
|
|
780
|
+
"requiresManualCheck": true,
|
|
781
|
+
"pseudoAutomation": true,
|
|
782
|
+
"complexity": "moderate"
|
|
783
|
+
},
|
|
784
|
+
"tags": [
|
|
785
|
+
"time",
|
|
786
|
+
"session",
|
|
787
|
+
"wcag2a"
|
|
788
|
+
]
|
|
789
|
+
},
|
|
790
|
+
{
|
|
791
|
+
"ruleId": "pause-stop-hide",
|
|
792
|
+
"wcagCriteria": "2.2.2",
|
|
793
|
+
"wcagLevel": "A",
|
|
794
|
+
"wcagTitle": "Pause, Stop, Hide",
|
|
795
|
+
"wcagVersion": "2.0",
|
|
796
|
+
"en301549Criteria": "9.2.2.2",
|
|
797
|
+
"en301549Title": "Pause, stop, hide",
|
|
798
|
+
"en301549Chapter": 9,
|
|
799
|
+
"dosLagenApplies": true,
|
|
800
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
801
|
+
"remediation": {
|
|
802
|
+
"description": "For moving, blinking, or scrolling content that starts automatically and lasts more than 5 seconds, there must be a way to pause, stop, or hide it.",
|
|
803
|
+
"technicalGuidance": "Applies to carousels (sliders), auto-updating news feeds, animated backgrounds. Add a clear pause button.",
|
|
804
|
+
"component": null,
|
|
805
|
+
"wcagTechnique": [
|
|
806
|
+
"G4",
|
|
807
|
+
"G186"
|
|
808
|
+
]
|
|
809
|
+
},
|
|
810
|
+
"holmdigitalInsight": {
|
|
811
|
+
"diggRisk": "medium",
|
|
812
|
+
"eaaImpact": "medium",
|
|
813
|
+
"commonMistakes": [
|
|
814
|
+
"Image carousels without pause button",
|
|
815
|
+
"Animated backgrounds that cannot be turned off"
|
|
816
|
+
],
|
|
817
|
+
"priorityRationale": "Important for cognitive accessibility.",
|
|
818
|
+
"ukInterpretation": "Important for users with concentration difficulties (ADHD/Autism) who are distracted by movement."
|
|
819
|
+
},
|
|
820
|
+
"testability": {
|
|
821
|
+
"automated": false,
|
|
822
|
+
"requiresManualCheck": true,
|
|
823
|
+
"pseudoAutomation": true,
|
|
824
|
+
"complexity": "moderate"
|
|
825
|
+
},
|
|
826
|
+
"tags": [
|
|
827
|
+
"animation",
|
|
828
|
+
"carousel",
|
|
829
|
+
"distraction",
|
|
830
|
+
"wcag2a"
|
|
831
|
+
]
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"ruleId": "three-flashes",
|
|
835
|
+
"wcagCriteria": "2.3.1",
|
|
836
|
+
"wcagLevel": "A",
|
|
837
|
+
"wcagTitle": "Three Flashes or Below Threshold",
|
|
838
|
+
"wcagVersion": "2.0",
|
|
839
|
+
"en301549Criteria": "9.2.3.1",
|
|
840
|
+
"en301549Title": "Three flashes or below threshold",
|
|
841
|
+
"en301549Chapter": 9,
|
|
842
|
+
"dosLagenApplies": true,
|
|
843
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
844
|
+
"remediation": {
|
|
845
|
+
"description": "Content must not flash more than three times per second (can cause seizures).",
|
|
846
|
+
"technicalGuidance": "Avoid rapid flashing in video and animations. Use tools to measure flash frequency (PEAT).",
|
|
847
|
+
"component": null,
|
|
848
|
+
"wcagTechnique": [
|
|
849
|
+
"G19"
|
|
850
|
+
]
|
|
851
|
+
},
|
|
852
|
+
"holmdigitalInsight": {
|
|
853
|
+
"diggRisk": "critical",
|
|
854
|
+
"eaaImpact": "critical",
|
|
855
|
+
"commonMistakes": [
|
|
856
|
+
"Stroboscopic effects in video",
|
|
857
|
+
"Misuse of blinking error messages"
|
|
858
|
+
],
|
|
859
|
+
"priorityRationale": "Critical safety risk.",
|
|
860
|
+
"ukInterpretation": "Health risk. Zero tolerance."
|
|
861
|
+
},
|
|
862
|
+
"testability": {
|
|
863
|
+
"automated": false,
|
|
864
|
+
"requiresManualCheck": true,
|
|
865
|
+
"pseudoAutomation": false,
|
|
866
|
+
"complexity": "complex"
|
|
867
|
+
},
|
|
868
|
+
"tags": [
|
|
869
|
+
"seizure",
|
|
870
|
+
"safety",
|
|
871
|
+
"animation",
|
|
872
|
+
"wcag2a"
|
|
873
|
+
]
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"ruleId": "bypass-blocks",
|
|
877
|
+
"wcagCriteria": "2.4.1",
|
|
878
|
+
"wcagLevel": "A",
|
|
879
|
+
"wcagTitle": "Bypass Blocks",
|
|
880
|
+
"wcagVersion": "2.0",
|
|
881
|
+
"en301549Criteria": "9.2.4.1",
|
|
882
|
+
"en301549Title": "Bypass blocks",
|
|
883
|
+
"en301549Chapter": 9,
|
|
884
|
+
"dosLagenApplies": true,
|
|
885
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
886
|
+
"remediation": {
|
|
887
|
+
"description": "There must be a way to skip blocks of content that are repeated on multiple pages (e.g. navigation).",
|
|
888
|
+
"technicalGuidance": "Implement a 'Skip to Main Content' link at the top of the page that becomes visible on focus. Use semantic landmarks (<main>, <nav>).",
|
|
889
|
+
"component": null,
|
|
890
|
+
"wcagTechnique": [
|
|
891
|
+
"G1",
|
|
892
|
+
"H69"
|
|
893
|
+
]
|
|
894
|
+
},
|
|
895
|
+
"holmdigitalInsight": {
|
|
896
|
+
"diggRisk": "medium",
|
|
897
|
+
"eaaImpact": "medium",
|
|
898
|
+
"commonMistakes": [
|
|
899
|
+
"Missing skip-link",
|
|
900
|
+
"Skip-link broken (does not move focus correctly)",
|
|
901
|
+
"Landmarks missing"
|
|
902
|
+
],
|
|
903
|
+
"priorityRationale": "Important for efficient navigation.",
|
|
904
|
+
"ukInterpretation": "Standard on all public sector sites. Enormously helpful for keyboard users."
|
|
905
|
+
},
|
|
906
|
+
"testability": {
|
|
907
|
+
"automated": true,
|
|
908
|
+
"requiresManualCheck": true,
|
|
909
|
+
"pseudoAutomation": true,
|
|
910
|
+
"complexity": "simple"
|
|
911
|
+
},
|
|
912
|
+
"tags": [
|
|
913
|
+
"navigation",
|
|
914
|
+
"skip-link",
|
|
915
|
+
"keyboard",
|
|
916
|
+
"wcag2a"
|
|
917
|
+
]
|
|
918
|
+
},
|
|
919
|
+
{
|
|
920
|
+
"ruleId": "focus-order",
|
|
921
|
+
"wcagCriteria": "2.4.3",
|
|
922
|
+
"wcagLevel": "A",
|
|
923
|
+
"wcagTitle": "Focus Order",
|
|
924
|
+
"wcagVersion": "2.0",
|
|
925
|
+
"en301549Criteria": "9.2.4.3",
|
|
926
|
+
"en301549Title": "Focus order",
|
|
927
|
+
"en301549Chapter": 9,
|
|
928
|
+
"dosLagenApplies": true,
|
|
929
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
930
|
+
"remediation": {
|
|
931
|
+
"description": "Focus order must be logical and follow meaning/structure.",
|
|
932
|
+
"technicalGuidance": "Match DOM order with visual order. Avoid tabindex greater than 0. Manage focus manually in modals and menus.",
|
|
933
|
+
"component": null,
|
|
934
|
+
"wcagTechnique": [
|
|
935
|
+
"G59",
|
|
936
|
+
"C27"
|
|
937
|
+
]
|
|
938
|
+
},
|
|
939
|
+
"holmdigitalInsight": {
|
|
940
|
+
"diggRisk": "high",
|
|
941
|
+
"eaaImpact": "high",
|
|
942
|
+
"commonMistakes": [
|
|
943
|
+
"Focus jumps illogically",
|
|
944
|
+
"Menus in wrong order",
|
|
945
|
+
"Modal closes and focus returns to top of page"
|
|
946
|
+
],
|
|
947
|
+
"priorityRationale": "Critical for keyboard navigation and understanding.",
|
|
948
|
+
"ukInterpretation": "Critical for complex layouts (Grid/Flexbox) where visual order may differ from DOM order."
|
|
949
|
+
},
|
|
950
|
+
"testability": {
|
|
951
|
+
"automated": false,
|
|
952
|
+
"requiresManualCheck": true,
|
|
953
|
+
"pseudoAutomation": true,
|
|
954
|
+
"complexity": "moderate"
|
|
955
|
+
},
|
|
956
|
+
"tags": [
|
|
957
|
+
"focus",
|
|
958
|
+
"keyboard",
|
|
959
|
+
"navigation",
|
|
960
|
+
"wcag2a"
|
|
961
|
+
]
|
|
962
|
+
},
|
|
963
|
+
{
|
|
964
|
+
"ruleId": "link-purpose",
|
|
965
|
+
"wcagCriteria": "2.4.4",
|
|
966
|
+
"wcagLevel": "A",
|
|
967
|
+
"wcagTitle": "Link Purpose (In Context)",
|
|
968
|
+
"wcagVersion": "2.0",
|
|
969
|
+
"en301549Criteria": "9.2.4.4",
|
|
970
|
+
"en301549Title": "Link purpose (in context)",
|
|
971
|
+
"en301549Chapter": 9,
|
|
972
|
+
"dosLagenApplies": true,
|
|
973
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
974
|
+
"remediation": {
|
|
975
|
+
"description": "The purpose of each link can be understood from the link text alone or from the link text together with its context.",
|
|
976
|
+
"technicalGuidance": "Avoid 'Read more' or 'Click here'. Write descriptive link texts. Use aria-label if visual space is limited but more info is needed.",
|
|
977
|
+
"component": null,
|
|
978
|
+
"wcagTechnique": [
|
|
979
|
+
"G91",
|
|
980
|
+
"H30"
|
|
981
|
+
]
|
|
982
|
+
},
|
|
983
|
+
"holmdigitalInsight": {
|
|
984
|
+
"diggRisk": "medium",
|
|
985
|
+
"eaaImpact": "medium",
|
|
986
|
+
"commonMistakes": [
|
|
987
|
+
"Lots of 'Read more' links",
|
|
988
|
+
"Links that don't say where they lead"
|
|
989
|
+
],
|
|
990
|
+
"priorityRationale": "Important for efficient navigation.",
|
|
991
|
+
"ukInterpretation": "Important for users navigating via link lists (screen readers)."
|
|
992
|
+
},
|
|
993
|
+
"testability": {
|
|
994
|
+
"automated": true,
|
|
995
|
+
"requiresManualCheck": true,
|
|
996
|
+
"pseudoAutomation": false,
|
|
997
|
+
"complexity": "simple"
|
|
998
|
+
},
|
|
999
|
+
"tags": [
|
|
1000
|
+
"links",
|
|
1001
|
+
"navigation",
|
|
1002
|
+
"copywriting",
|
|
1003
|
+
"wcag2a"
|
|
1004
|
+
]
|
|
1005
|
+
},
|
|
1006
|
+
{
|
|
1007
|
+
"ruleId": "multiple-ways",
|
|
1008
|
+
"wcagCriteria": "2.4.5",
|
|
1009
|
+
"wcagLevel": "AA",
|
|
1010
|
+
"wcagTitle": "Multiple Ways",
|
|
1011
|
+
"wcagVersion": "2.0",
|
|
1012
|
+
"en301549Criteria": "9.2.4.5",
|
|
1013
|
+
"en301549Title": "Multiple ways",
|
|
1014
|
+
"en301549Chapter": 9,
|
|
1015
|
+
"dosLagenApplies": true,
|
|
1016
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1017
|
+
"remediation": {
|
|
1018
|
+
"description": "There must be more than one way to find a web page within a set of web pages.",
|
|
1019
|
+
"technicalGuidance": "At least two of: Menu, Search, Sitemap, Links in content.",
|
|
1020
|
+
"component": null,
|
|
1021
|
+
"wcagTechnique": [
|
|
1022
|
+
"G125",
|
|
1023
|
+
"G126"
|
|
1024
|
+
]
|
|
1025
|
+
},
|
|
1026
|
+
"holmdigitalInsight": {
|
|
1027
|
+
"diggRisk": "low",
|
|
1028
|
+
"eaaImpact": "low",
|
|
1029
|
+
"commonMistakes": [
|
|
1030
|
+
"Missing search on sites with many pages"
|
|
1031
|
+
],
|
|
1032
|
+
"priorityRationale": "Facilitates different navigation strategies.",
|
|
1033
|
+
"ukInterpretation": "Often fulfilled by menu + search. Sitemap is best practice."
|
|
1034
|
+
},
|
|
1035
|
+
"testability": {
|
|
1036
|
+
"automated": false,
|
|
1037
|
+
"requiresManualCheck": true,
|
|
1038
|
+
"pseudoAutomation": false,
|
|
1039
|
+
"complexity": "simple"
|
|
1040
|
+
},
|
|
1041
|
+
"tags": [
|
|
1042
|
+
"navigation",
|
|
1043
|
+
"search",
|
|
1044
|
+
"sitemap",
|
|
1045
|
+
"wcag2aa"
|
|
1046
|
+
]
|
|
1047
|
+
},
|
|
1048
|
+
{
|
|
1049
|
+
"ruleId": "headings-and-labels",
|
|
1050
|
+
"wcagCriteria": "2.4.6",
|
|
1051
|
+
"wcagLevel": "AA",
|
|
1052
|
+
"wcagTitle": "Headings and Labels",
|
|
1053
|
+
"wcagVersion": "2.0",
|
|
1054
|
+
"en301549Criteria": "9.2.4.6",
|
|
1055
|
+
"en301549Title": "Headings and labels",
|
|
1056
|
+
"en301549Chapter": 9,
|
|
1057
|
+
"dosLagenApplies": true,
|
|
1058
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1059
|
+
"remediation": {
|
|
1060
|
+
"description": "Headings and labels must describe topic or purpose.",
|
|
1061
|
+
"technicalGuidance": "Write clear, descriptive headings that give meaning to the content below them. Form labels must be understandable.",
|
|
1062
|
+
"component": null,
|
|
1063
|
+
"wcagTechnique": [
|
|
1064
|
+
"G130"
|
|
1065
|
+
]
|
|
1066
|
+
},
|
|
1067
|
+
"holmdigitalInsight": {
|
|
1068
|
+
"diggRisk": "medium",
|
|
1069
|
+
"eaaImpact": "medium",
|
|
1070
|
+
"commonMistakes": [
|
|
1071
|
+
"Cryptic headings",
|
|
1072
|
+
"Labels that don't match what needs to be filled in"
|
|
1073
|
+
],
|
|
1074
|
+
"priorityRationale": "Important for cognitive accessibility.",
|
|
1075
|
+
"ukInterpretation": "About editorial quality and comprehensibility."
|
|
1076
|
+
},
|
|
1077
|
+
"testability": {
|
|
1078
|
+
"automated": false,
|
|
1079
|
+
"requiresManualCheck": true,
|
|
1080
|
+
"pseudoAutomation": false,
|
|
1081
|
+
"complexity": "simple"
|
|
1082
|
+
},
|
|
1083
|
+
"tags": [
|
|
1084
|
+
"content",
|
|
1085
|
+
"headings",
|
|
1086
|
+
"labels",
|
|
1087
|
+
"wcag2aa"
|
|
1088
|
+
]
|
|
1089
|
+
},
|
|
1090
|
+
{
|
|
1091
|
+
"ruleId": "focus-visible",
|
|
1092
|
+
"wcagCriteria": "2.4.7",
|
|
1093
|
+
"wcagLevel": "AA",
|
|
1094
|
+
"wcagTitle": "Focus Visible",
|
|
1095
|
+
"wcagVersion": "2.0",
|
|
1096
|
+
"en301549Criteria": "9.2.4.7",
|
|
1097
|
+
"en301549Title": "Focus visible",
|
|
1098
|
+
"en301549Chapter": 9,
|
|
1099
|
+
"dosLagenApplies": true,
|
|
1100
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1101
|
+
"remediation": {
|
|
1102
|
+
"description": "Any user interface operable by keyboard must have a visible focus indicator.",
|
|
1103
|
+
"technicalGuidance": "Never remove outline with CSS (outline: none) without replacing it with a clear visual indicator. Ensure contrast of focus ring is sufficient (see 1.4.11).",
|
|
1104
|
+
"component": "@holmdigital/components/Button",
|
|
1105
|
+
"wcagTechnique": [
|
|
1106
|
+
"G149",
|
|
1107
|
+
"G165",
|
|
1108
|
+
"C15"
|
|
1109
|
+
]
|
|
1110
|
+
},
|
|
1111
|
+
"holmdigitalInsight": {
|
|
1112
|
+
"diggRisk": "high",
|
|
1113
|
+
"eaaImpact": "high",
|
|
1114
|
+
"commonMistakes": [
|
|
1115
|
+
"outline: none in CSS reset",
|
|
1116
|
+
"Custom buttons missing :focus style"
|
|
1117
|
+
],
|
|
1118
|
+
"priorityRationale": "Critical: Without visible focus, the keyboard user doesn't know where they are.",
|
|
1119
|
+
"ukInterpretation": "One of the most common errors. Often because designers dislike the 'blue ring'."
|
|
1120
|
+
},
|
|
1121
|
+
"testability": {
|
|
1122
|
+
"automated": true,
|
|
1123
|
+
"requiresManualCheck": true,
|
|
1124
|
+
"pseudoAutomation": true,
|
|
1125
|
+
"complexity": "simple"
|
|
1126
|
+
},
|
|
1127
|
+
"tags": [
|
|
1128
|
+
"focus",
|
|
1129
|
+
"visual",
|
|
1130
|
+
"keyboard",
|
|
1131
|
+
"wcag2aa"
|
|
1132
|
+
]
|
|
1133
|
+
},
|
|
1134
|
+
{
|
|
1135
|
+
"ruleId": "language-of-page",
|
|
1136
|
+
"wcagCriteria": "3.1.1",
|
|
1137
|
+
"wcagLevel": "A",
|
|
1138
|
+
"wcagTitle": "Language of Page",
|
|
1139
|
+
"wcagVersion": "2.0",
|
|
1140
|
+
"en301549Criteria": "9.3.1.1",
|
|
1141
|
+
"en301549Title": "Language of page",
|
|
1142
|
+
"en301549Chapter": 9,
|
|
1143
|
+
"dosLagenApplies": true,
|
|
1144
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1145
|
+
"remediation": {
|
|
1146
|
+
"description": "The default human language of each web page must be programmatically determinable.",
|
|
1147
|
+
"technicalGuidance": "Set the 'lang' attribute on the <html> element. E.g., <html lang='en'> for English.",
|
|
1148
|
+
"component": null,
|
|
1149
|
+
"wcagTechnique": [
|
|
1150
|
+
"H57"
|
|
1151
|
+
]
|
|
1152
|
+
},
|
|
1153
|
+
"holmdigitalInsight": {
|
|
1154
|
+
"diggRisk": "high",
|
|
1155
|
+
"eaaImpact": "high",
|
|
1156
|
+
"commonMistakes": [
|
|
1157
|
+
"Lang attribute missing",
|
|
1158
|
+
"Wrong language code (e.g. 'en' on a Swedish page)"
|
|
1159
|
+
],
|
|
1160
|
+
"priorityRationale": "Critical for screen reader users.",
|
|
1161
|
+
"ukInterpretation": "Fundamental for screen reading. Without this, the screen reader guesses the language, often leading to wrong pronunciation."
|
|
1162
|
+
},
|
|
1163
|
+
"testability": {
|
|
1164
|
+
"automated": true,
|
|
1165
|
+
"requiresManualCheck": false,
|
|
1166
|
+
"pseudoAutomation": false,
|
|
1167
|
+
"complexity": "simple"
|
|
1168
|
+
},
|
|
1169
|
+
"tags": [
|
|
1170
|
+
"content",
|
|
1171
|
+
"language",
|
|
1172
|
+
"wcag2a"
|
|
1173
|
+
]
|
|
1174
|
+
},
|
|
1175
|
+
{
|
|
1176
|
+
"ruleId": "language-of-parts",
|
|
1177
|
+
"wcagCriteria": "3.1.2",
|
|
1178
|
+
"wcagLevel": "AA",
|
|
1179
|
+
"wcagTitle": "Language of Parts",
|
|
1180
|
+
"wcagVersion": "2.0",
|
|
1181
|
+
"en301549Criteria": "9.3.1.2",
|
|
1182
|
+
"en301549Title": "Language of parts",
|
|
1183
|
+
"en301549Chapter": 9,
|
|
1184
|
+
"dosLagenApplies": true,
|
|
1185
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1186
|
+
"remediation": {
|
|
1187
|
+
"description": "The human language of each passage or phrase in the content must be programmatically determinable.",
|
|
1188
|
+
"technicalGuidance": "Use the lang attribute on elements that differ from the page's main language. E.g. <span lang='fr'>Bonjour</span>.",
|
|
1189
|
+
"component": null,
|
|
1190
|
+
"wcagTechnique": [
|
|
1191
|
+
"H58"
|
|
1192
|
+
]
|
|
1193
|
+
},
|
|
1194
|
+
"holmdigitalInsight": {
|
|
1195
|
+
"diggRisk": "low",
|
|
1196
|
+
"eaaImpact": "low",
|
|
1197
|
+
"commonMistakes": [
|
|
1198
|
+
"Foreign quotes in text without markup"
|
|
1199
|
+
],
|
|
1200
|
+
"priorityRationale": "Important for correct pronunciation.",
|
|
1201
|
+
"ukInterpretation": "Rarely a critical error unless it significantly hinders understanding."
|
|
1202
|
+
},
|
|
1203
|
+
"testability": {
|
|
1204
|
+
"automated": false,
|
|
1205
|
+
"requiresManualCheck": true,
|
|
1206
|
+
"pseudoAutomation": true,
|
|
1207
|
+
"complexity": "moderate"
|
|
1208
|
+
},
|
|
1209
|
+
"tags": [
|
|
1210
|
+
"content",
|
|
1211
|
+
"language",
|
|
1212
|
+
"wcag2aa"
|
|
1213
|
+
]
|
|
1214
|
+
},
|
|
1215
|
+
{
|
|
1216
|
+
"ruleId": "on-focus",
|
|
1217
|
+
"wcagCriteria": "3.2.1",
|
|
1218
|
+
"wcagLevel": "A",
|
|
1219
|
+
"wcagTitle": "On Focus",
|
|
1220
|
+
"wcagVersion": "2.0",
|
|
1221
|
+
"en301549Criteria": "9.3.2.1",
|
|
1222
|
+
"en301549Title": "On focus",
|
|
1223
|
+
"en301549Chapter": 9,
|
|
1224
|
+
"dosLagenApplies": true,
|
|
1225
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1226
|
+
"remediation": {
|
|
1227
|
+
"description": "When a component receives focus, it must not initiate a change of context.",
|
|
1228
|
+
"technicalGuidance": "Do not open new windows, submit forms, or move focus automatically just because user tabs to a field.",
|
|
1229
|
+
"component": null,
|
|
1230
|
+
"wcagTechnique": [
|
|
1231
|
+
"G107"
|
|
1232
|
+
]
|
|
1233
|
+
},
|
|
1234
|
+
"holmdigitalInsight": {
|
|
1235
|
+
"diggRisk": "high",
|
|
1236
|
+
"eaaImpact": "high",
|
|
1237
|
+
"commonMistakes": [
|
|
1238
|
+
"Dropdowns that navigate immediately upon selection (without 'Go' button)",
|
|
1239
|
+
"Forms that auto-submit on last field focus"
|
|
1240
|
+
],
|
|
1241
|
+
"priorityRationale": "Important for predictability.",
|
|
1242
|
+
"ukInterpretation": "Very confusing for users. Creates a feeling of lack of control."
|
|
1243
|
+
},
|
|
1244
|
+
"testability": {
|
|
1245
|
+
"automated": false,
|
|
1246
|
+
"requiresManualCheck": true,
|
|
1247
|
+
"pseudoAutomation": true,
|
|
1248
|
+
"complexity": "moderate"
|
|
1249
|
+
},
|
|
1250
|
+
"tags": [
|
|
1251
|
+
"interaction",
|
|
1252
|
+
"focus",
|
|
1253
|
+
"predictability",
|
|
1254
|
+
"wcag2a"
|
|
1255
|
+
]
|
|
1256
|
+
},
|
|
1257
|
+
{
|
|
1258
|
+
"ruleId": "on-input",
|
|
1259
|
+
"wcagCriteria": "3.2.2",
|
|
1260
|
+
"wcagLevel": "A",
|
|
1261
|
+
"wcagTitle": "On Input",
|
|
1262
|
+
"wcagVersion": "2.0",
|
|
1263
|
+
"en301549Criteria": "9.3.2.2",
|
|
1264
|
+
"en301549Title": "On input",
|
|
1265
|
+
"en301549Chapter": 9,
|
|
1266
|
+
"dosLagenApplies": true,
|
|
1267
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1268
|
+
"remediation": {
|
|
1269
|
+
"description": "Changing the setting of any component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.",
|
|
1270
|
+
"technicalGuidance": "Inform the user that selection in a list reloads the page. Preferably, add a button to confirm the choice.",
|
|
1271
|
+
"component": null,
|
|
1272
|
+
"wcagTechnique": [
|
|
1273
|
+
"G13",
|
|
1274
|
+
"H32"
|
|
1275
|
+
]
|
|
1276
|
+
},
|
|
1277
|
+
"holmdigitalInsight": {
|
|
1278
|
+
"diggRisk": "medium",
|
|
1279
|
+
"eaaImpact": "medium",
|
|
1280
|
+
"commonMistakes": [
|
|
1281
|
+
"Checkboxes that reload page immediately",
|
|
1282
|
+
"Filtering that moves focus"
|
|
1283
|
+
],
|
|
1284
|
+
"priorityRationale": "Important for predictability.",
|
|
1285
|
+
"ukInterpretation": "Common in filtering functions."
|
|
1286
|
+
},
|
|
1287
|
+
"testability": {
|
|
1288
|
+
"automated": false,
|
|
1289
|
+
"requiresManualCheck": true,
|
|
1290
|
+
"pseudoAutomation": true,
|
|
1291
|
+
"complexity": "moderate"
|
|
1292
|
+
},
|
|
1293
|
+
"tags": [
|
|
1294
|
+
"interaction",
|
|
1295
|
+
"input",
|
|
1296
|
+
"predictability",
|
|
1297
|
+
"wcag2a"
|
|
1298
|
+
]
|
|
1299
|
+
},
|
|
1300
|
+
{
|
|
1301
|
+
"ruleId": "consistent-navigation",
|
|
1302
|
+
"wcagCriteria": "3.2.3",
|
|
1303
|
+
"wcagLevel": "AA",
|
|
1304
|
+
"wcagTitle": "Consistent Navigation",
|
|
1305
|
+
"wcagVersion": "2.0",
|
|
1306
|
+
"en301549Criteria": "9.3.2.3",
|
|
1307
|
+
"en301549Title": "Consistent navigation",
|
|
1308
|
+
"en301549Chapter": 9,
|
|
1309
|
+
"dosLagenApplies": true,
|
|
1310
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1311
|
+
"remediation": {
|
|
1312
|
+
"description": "Navigational mechanisms that are repeated on multiple Web pages occur in the same relative order each time they are repeated.",
|
|
1313
|
+
"technicalGuidance": "Main menu should look the same and be in the same place on all pages. Search function as well.",
|
|
1314
|
+
"component": null,
|
|
1315
|
+
"wcagTechnique": [
|
|
1316
|
+
"G61"
|
|
1317
|
+
]
|
|
1318
|
+
},
|
|
1319
|
+
"holmdigitalInsight": {
|
|
1320
|
+
"diggRisk": "medium",
|
|
1321
|
+
"eaaImpact": "medium",
|
|
1322
|
+
"commonMistakes": [
|
|
1323
|
+
"Menus that change place or order on different pages"
|
|
1324
|
+
],
|
|
1325
|
+
"priorityRationale": "Facilitates learning.",
|
|
1326
|
+
"ukInterpretation": "Predictability is key to cognitive accessibility."
|
|
1327
|
+
},
|
|
1328
|
+
"testability": {
|
|
1329
|
+
"automated": false,
|
|
1330
|
+
"requiresManualCheck": true,
|
|
1331
|
+
"pseudoAutomation": false,
|
|
1332
|
+
"complexity": "simple"
|
|
1333
|
+
},
|
|
1334
|
+
"tags": [
|
|
1335
|
+
"navigation",
|
|
1336
|
+
"design",
|
|
1337
|
+
"consistency",
|
|
1338
|
+
"wcag2aa"
|
|
1339
|
+
]
|
|
1340
|
+
},
|
|
1341
|
+
{
|
|
1342
|
+
"ruleId": "consistent-identification",
|
|
1343
|
+
"wcagCriteria": "3.2.4",
|
|
1344
|
+
"wcagLevel": "AA",
|
|
1345
|
+
"wcagTitle": "Consistent Identification",
|
|
1346
|
+
"wcagVersion": "2.0",
|
|
1347
|
+
"en301549Criteria": "9.3.2.4",
|
|
1348
|
+
"en301549Title": "Consistent identification",
|
|
1349
|
+
"en301549Chapter": 9,
|
|
1350
|
+
"dosLagenApplies": true,
|
|
1351
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1352
|
+
"remediation": {
|
|
1353
|
+
"description": "Components that have the same functionality within a set of Web pages are identified consistently.",
|
|
1354
|
+
"technicalGuidance": "Don't call search 'Search' on one page and 'Find' on another. Use the same icon for the same function.",
|
|
1355
|
+
"component": null,
|
|
1356
|
+
"wcagTechnique": [
|
|
1357
|
+
"G197"
|
|
1358
|
+
]
|
|
1359
|
+
},
|
|
1360
|
+
"holmdigitalInsight": {
|
|
1361
|
+
"diggRisk": "low",
|
|
1362
|
+
"eaaImpact": "low",
|
|
1363
|
+
"commonMistakes": [
|
|
1364
|
+
"Inconsistent naming",
|
|
1365
|
+
"Different icons for print/download"
|
|
1366
|
+
],
|
|
1367
|
+
"priorityRationale": "Reduces cognitive load.",
|
|
1368
|
+
"ukInterpretation": "Important for usability."
|
|
1369
|
+
},
|
|
1370
|
+
"testability": {
|
|
1371
|
+
"automated": false,
|
|
1372
|
+
"requiresManualCheck": true,
|
|
1373
|
+
"pseudoAutomation": false,
|
|
1374
|
+
"complexity": "simple"
|
|
1375
|
+
},
|
|
1376
|
+
"tags": [
|
|
1377
|
+
"content",
|
|
1378
|
+
"icons",
|
|
1379
|
+
"consistency",
|
|
1380
|
+
"wcag2aa"
|
|
1381
|
+
]
|
|
1382
|
+
},
|
|
1383
|
+
{
|
|
1384
|
+
"ruleId": "error-identification",
|
|
1385
|
+
"wcagCriteria": "3.3.1",
|
|
1386
|
+
"wcagLevel": "A",
|
|
1387
|
+
"wcagTitle": "Error Identification",
|
|
1388
|
+
"wcagVersion": "2.0",
|
|
1389
|
+
"en301549Criteria": "9.3.3.1",
|
|
1390
|
+
"en301549Title": "Error identification",
|
|
1391
|
+
"en301549Chapter": 9,
|
|
1392
|
+
"dosLagenApplies": true,
|
|
1393
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1394
|
+
"remediation": {
|
|
1395
|
+
"description": "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.",
|
|
1396
|
+
"technicalGuidance": "Show error message close to the field. Link with aria-describedby or include in label. Do not just color the field red.",
|
|
1397
|
+
"component": "@holmdigital/components/FormField",
|
|
1398
|
+
"wcagTechnique": [
|
|
1399
|
+
"G83",
|
|
1400
|
+
"SCR18"
|
|
1401
|
+
]
|
|
1402
|
+
},
|
|
1403
|
+
"holmdigitalInsight": {
|
|
1404
|
+
"diggRisk": "high",
|
|
1405
|
+
"eaaImpact": "high",
|
|
1406
|
+
"commonMistakes": [
|
|
1407
|
+
"'Invalid value' without explanation",
|
|
1408
|
+
"Error message not visible to screen readers"
|
|
1409
|
+
],
|
|
1410
|
+
"priorityRationale": "Critical for error handling.",
|
|
1411
|
+
"ukInterpretation": "Critical for completing tasks. Generic error messages ('Something went wrong') are not accepted if the error is specific."
|
|
1412
|
+
},
|
|
1413
|
+
"testability": {
|
|
1414
|
+
"automated": false,
|
|
1415
|
+
"requiresManualCheck": true,
|
|
1416
|
+
"pseudoAutomation": true,
|
|
1417
|
+
"complexity": "moderate"
|
|
1418
|
+
},
|
|
1419
|
+
"tags": [
|
|
1420
|
+
"forms",
|
|
1421
|
+
"errors",
|
|
1422
|
+
"wcag2a"
|
|
1423
|
+
]
|
|
1424
|
+
},
|
|
1425
|
+
{
|
|
1426
|
+
"ruleId": "error-suggestion",
|
|
1427
|
+
"wcagCriteria": "3.3.3",
|
|
1428
|
+
"wcagLevel": "AA",
|
|
1429
|
+
"wcagTitle": "Error Suggestion",
|
|
1430
|
+
"wcagVersion": "2.0",
|
|
1431
|
+
"en301549Criteria": "9.3.3.3",
|
|
1432
|
+
"en301549Title": "Error suggestion",
|
|
1433
|
+
"en301549Chapter": 9,
|
|
1434
|
+
"dosLagenApplies": true,
|
|
1435
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1436
|
+
"remediation": {
|
|
1437
|
+
"description": "If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user.",
|
|
1438
|
+
"technicalGuidance": "If date format is wrong, show required format (YYYY-MM-DD). Offer spelling suggestions for search ('Did you mean...?').",
|
|
1439
|
+
"component": "@holmdigital/components/FormField",
|
|
1440
|
+
"wcagTechnique": [
|
|
1441
|
+
"G177"
|
|
1442
|
+
]
|
|
1443
|
+
},
|
|
1444
|
+
"holmdigitalInsight": {
|
|
1445
|
+
"diggRisk": "medium",
|
|
1446
|
+
"eaaImpact": "medium",
|
|
1447
|
+
"commonMistakes": [
|
|
1448
|
+
"Only saying 'Error' without saying how to fix it"
|
|
1449
|
+
],
|
|
1450
|
+
"priorityRationale": "Facilitates correction.",
|
|
1451
|
+
"ukInterpretation": "About being helpful. Reduces support cases."
|
|
1452
|
+
},
|
|
1453
|
+
"testability": {
|
|
1454
|
+
"automated": false,
|
|
1455
|
+
"requiresManualCheck": true,
|
|
1456
|
+
"pseudoAutomation": true,
|
|
1457
|
+
"complexity": "moderate"
|
|
1458
|
+
},
|
|
1459
|
+
"tags": [
|
|
1460
|
+
"forms",
|
|
1461
|
+
"errors",
|
|
1462
|
+
"guidance",
|
|
1463
|
+
"wcag2aa"
|
|
1464
|
+
]
|
|
1465
|
+
},
|
|
1466
|
+
{
|
|
1467
|
+
"ruleId": "error-prevention",
|
|
1468
|
+
"wcagCriteria": "3.3.4",
|
|
1469
|
+
"wcagLevel": "AA",
|
|
1470
|
+
"wcagTitle": "Error Prevention (Legal, Financial, Data)",
|
|
1471
|
+
"wcagVersion": "2.0",
|
|
1472
|
+
"en301549Criteria": "9.3.3.4",
|
|
1473
|
+
"en301549Title": "Error prevention (legal, financial, data)",
|
|
1474
|
+
"en301549Chapter": 9,
|
|
1475
|
+
"dosLagenApplies": true,
|
|
1476
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1477
|
+
"remediation": {
|
|
1478
|
+
"description": "For Web pages that cause legal commitments or financial transactions, users must be able to: Reverse, Check, or Confirm.",
|
|
1479
|
+
"technicalGuidance": "Offer a summary page before final submission with ability to edit.",
|
|
1480
|
+
"component": null,
|
|
1481
|
+
"wcagTechnique": [
|
|
1482
|
+
"G164",
|
|
1483
|
+
"G98"
|
|
1484
|
+
]
|
|
1485
|
+
},
|
|
1486
|
+
"holmdigitalInsight": {
|
|
1487
|
+
"diggRisk": "high",
|
|
1488
|
+
"eaaImpact": "high",
|
|
1489
|
+
"commonMistakes": [
|
|
1490
|
+
"Direct purchase without confirmation",
|
|
1491
|
+
"Submission of binding contracts without review"
|
|
1492
|
+
],
|
|
1493
|
+
"priorityRationale": "Critical to avoid serious consequences of mistakes.",
|
|
1494
|
+
"ukInterpretation": "Absolute requirement for e-commerce and legal decisions."
|
|
1495
|
+
},
|
|
1496
|
+
"testability": {
|
|
1497
|
+
"automated": false,
|
|
1498
|
+
"requiresManualCheck": true,
|
|
1499
|
+
"pseudoAutomation": false,
|
|
1500
|
+
"complexity": "moderate"
|
|
1501
|
+
},
|
|
1502
|
+
"tags": [
|
|
1503
|
+
"forms",
|
|
1504
|
+
"legal",
|
|
1505
|
+
"financial",
|
|
1506
|
+
"wcag2aa"
|
|
1507
|
+
]
|
|
1508
|
+
},
|
|
1509
|
+
{
|
|
1510
|
+
"ruleId": "parsing",
|
|
1511
|
+
"wcagCriteria": "4.1.1",
|
|
1512
|
+
"wcagLevel": "A",
|
|
1513
|
+
"wcagTitle": "Parsing",
|
|
1514
|
+
"wcagVersion": "2.0",
|
|
1515
|
+
"en301549Criteria": "9.4.1.1",
|
|
1516
|
+
"en301549Title": "Parsing",
|
|
1517
|
+
"en301549Chapter": 9,
|
|
1518
|
+
"dosLagenApplies": true,
|
|
1519
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1520
|
+
"remediation": {
|
|
1521
|
+
"description": "Update: From WCAG 2.2 this criterion is removed/obsolete, but in WCAG 2.1/EN 301 549 it applies: IDs must be unique, elements correctly nested.",
|
|
1522
|
+
"technicalGuidance": "Validate HTML. Ensure id attributes are unique on the page. Close all tags correctly.",
|
|
1523
|
+
"component": null,
|
|
1524
|
+
"wcagTechnique": [
|
|
1525
|
+
"H88"
|
|
1526
|
+
]
|
|
1527
|
+
},
|
|
1528
|
+
"holmdigitalInsight": {
|
|
1529
|
+
"diggRisk": "low",
|
|
1530
|
+
"eaaImpact": "low",
|
|
1531
|
+
"commonMistakes": [
|
|
1532
|
+
"Duplicate IDs",
|
|
1533
|
+
"Broken HTML structure"
|
|
1534
|
+
],
|
|
1535
|
+
"priorityRationale": "Technical hygiene factor.",
|
|
1536
|
+
"ukInterpretation": "Less prioritized now as modern browsers handle errors well, but duplicate IDs can still break ARIA."
|
|
1537
|
+
},
|
|
1538
|
+
"testability": {
|
|
1539
|
+
"automated": true,
|
|
1540
|
+
"requiresManualCheck": false,
|
|
1541
|
+
"pseudoAutomation": false,
|
|
1542
|
+
"complexity": "simple"
|
|
1543
|
+
},
|
|
1544
|
+
"tags": [
|
|
1545
|
+
"code",
|
|
1546
|
+
"html",
|
|
1547
|
+
"parsing",
|
|
1548
|
+
"wcag2a"
|
|
1549
|
+
]
|
|
1550
|
+
},
|
|
1551
|
+
{
|
|
1552
|
+
"ruleId": "name-role-value",
|
|
1553
|
+
"wcagCriteria": "4.1.2",
|
|
1554
|
+
"wcagLevel": "A",
|
|
1555
|
+
"wcagTitle": "Name, Role, Value",
|
|
1556
|
+
"wcagVersion": "2.0",
|
|
1557
|
+
"en301549Criteria": "9.4.1.2",
|
|
1558
|
+
"en301549Title": "Name, role, value",
|
|
1559
|
+
"en301549Chapter": 9,
|
|
1560
|
+
"dosLagenApplies": true,
|
|
1561
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1562
|
+
"remediation": {
|
|
1563
|
+
"description": "For all components, name and role can be programmatically determined. Values can be set programmatically.",
|
|
1564
|
+
"technicalGuidance": "Use native HTML elements when possible. If custom components are used, ARIA (role, aria-label, aria-valuenow) must be used correctly.",
|
|
1565
|
+
"component": null,
|
|
1566
|
+
"wcagTechnique": [
|
|
1567
|
+
"ARIA4",
|
|
1568
|
+
"ARIA5"
|
|
1569
|
+
]
|
|
1570
|
+
},
|
|
1571
|
+
"holmdigitalInsight": {
|
|
1572
|
+
"diggRisk": "critical",
|
|
1573
|
+
"eaaImpact": "critical",
|
|
1574
|
+
"commonMistakes": [
|
|
1575
|
+
"Div buttons without role",
|
|
1576
|
+
"Custom checkboxes without aria-checked",
|
|
1577
|
+
"Missing accessible name"
|
|
1578
|
+
],
|
|
1579
|
+
"priorityRationale": "Absolutely critical for compatibility.",
|
|
1580
|
+
"ukInterpretation": "This is the foundation for how screen readers work with modern web apps. Without this, the app is 'invisible' to assistive technology."
|
|
1581
|
+
},
|
|
1582
|
+
"testability": {
|
|
1583
|
+
"automated": true,
|
|
1584
|
+
"requiresManualCheck": true,
|
|
1585
|
+
"pseudoAutomation": true,
|
|
1586
|
+
"complexity": "complex"
|
|
1587
|
+
},
|
|
1588
|
+
"tags": [
|
|
1589
|
+
"code",
|
|
1590
|
+
"aria",
|
|
1591
|
+
"interaction",
|
|
1592
|
+
"wcag2a"
|
|
1593
|
+
]
|
|
1594
|
+
},
|
|
1595
|
+
{
|
|
1596
|
+
"ruleId": "status-messages",
|
|
1597
|
+
"wcagCriteria": "4.1.3",
|
|
1598
|
+
"wcagLevel": "AA",
|
|
1599
|
+
"wcagTitle": "Status Messages",
|
|
1600
|
+
"wcagVersion": "2.1",
|
|
1601
|
+
"en301549Criteria": "9.4.1.3",
|
|
1602
|
+
"en301549Title": "Status messages",
|
|
1603
|
+
"en301549Chapter": 9,
|
|
1604
|
+
"dosLagenApplies": true,
|
|
1605
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1606
|
+
"remediation": {
|
|
1607
|
+
"description": "Statusmeddelanden ska kunna presenteras för användaren utan att motta fokus (via skärmläsare).",
|
|
1608
|
+
"technicalGuidance": "Använd aria-live regioner (polite/assertive) eller role='status'/'alert' för meddelanden som dyker upp dynamiskt (t.ex. 'Sparat', 'Sökning klar').",
|
|
1609
|
+
"component": null,
|
|
1610
|
+
"wcagTechnique": [
|
|
1611
|
+
"ARIA19",
|
|
1612
|
+
"ARIA22"
|
|
1613
|
+
]
|
|
1614
|
+
},
|
|
1615
|
+
"holmdigitalInsight": {
|
|
1616
|
+
"diggRisk": "medium",
|
|
1617
|
+
"eaaImpact": "medium",
|
|
1618
|
+
"commonMistakes": [
|
|
1619
|
+
"Silent updates of cart/search results",
|
|
1620
|
+
"Toast notifications not being announced"
|
|
1621
|
+
],
|
|
1622
|
+
"priorityRationale": "Provides feedback to users without sight.",
|
|
1623
|
+
"ukInterpretation": "Important in SPAs where page load does not happen. The user must know something happened."
|
|
1624
|
+
},
|
|
1625
|
+
"testability": {
|
|
1626
|
+
"automated": false,
|
|
1627
|
+
"requiresManualCheck": true,
|
|
1628
|
+
"pseudoAutomation": true,
|
|
1629
|
+
"complexity": "moderate"
|
|
1630
|
+
},
|
|
1631
|
+
"tags": [
|
|
1632
|
+
"aria",
|
|
1633
|
+
"updates",
|
|
1634
|
+
"feedback",
|
|
1635
|
+
"wcag21aa"
|
|
1636
|
+
]
|
|
1637
|
+
},
|
|
1638
|
+
{
|
|
1639
|
+
"ruleId": "landmark-one-main",
|
|
1640
|
+
"wcagCriteria": "1.3.1",
|
|
1641
|
+
"wcagLevel": "A",
|
|
1642
|
+
"wcagTitle": "Info and Relationships",
|
|
1643
|
+
"wcagVersion": "2.0",
|
|
1644
|
+
"en301549Criteria": "9.1.3.1",
|
|
1645
|
+
"en301549Title": "Info and relationships",
|
|
1646
|
+
"en301549Chapter": 9,
|
|
1647
|
+
"dosLagenApplies": true,
|
|
1648
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1649
|
+
"remediation": {
|
|
1650
|
+
"description": "The page must have exactly one 'main' landmark.",
|
|
1651
|
+
"technicalGuidance": "Use the <main> element once per page to identify the main content. Avoid having multiple <main> without unique labels, or missing it entirely.",
|
|
1652
|
+
"wcagTechnique": [
|
|
1653
|
+
"ARIA11",
|
|
1654
|
+
"H97"
|
|
1655
|
+
]
|
|
1656
|
+
},
|
|
1657
|
+
"holmdigitalInsight": {
|
|
1658
|
+
"diggRisk": "medium",
|
|
1659
|
+
"eaaImpact": "medium",
|
|
1660
|
+
"commonMistakes": [
|
|
1661
|
+
"Using <div id='main'> instead of <main>",
|
|
1662
|
+
"Having multiple <main> elements"
|
|
1663
|
+
],
|
|
1664
|
+
"ukInterpretation": "Screen reader users rely on landmarks to navigate quickly to the content. Missing <main> makes it difficult to skip navigation."
|
|
1665
|
+
},
|
|
1666
|
+
"testability": {
|
|
1667
|
+
"automated": true,
|
|
1668
|
+
"requiresManualCheck": false,
|
|
1669
|
+
"pseudoAutomation": true,
|
|
1670
|
+
"complexity": "simple"
|
|
1671
|
+
},
|
|
1672
|
+
"tags": [
|
|
1673
|
+
"wcag2a",
|
|
1674
|
+
"wcag131",
|
|
1675
|
+
"landmark"
|
|
1676
|
+
]
|
|
1677
|
+
},
|
|
1678
|
+
{
|
|
1679
|
+
"ruleId": "page-has-heading-one",
|
|
1680
|
+
"wcagCriteria": "1.3.1",
|
|
1681
|
+
"wcagLevel": "A",
|
|
1682
|
+
"wcagTitle": "Info and Relationships",
|
|
1683
|
+
"wcagVersion": "2.0",
|
|
1684
|
+
"en301549Criteria": "9.1.3.1",
|
|
1685
|
+
"en301549Title": "Info and relationships",
|
|
1686
|
+
"en301549Chapter": 9,
|
|
1687
|
+
"dosLagenApplies": true,
|
|
1688
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1689
|
+
"remediation": {
|
|
1690
|
+
"description": "The page must have a level 1 heading (<h1>).",
|
|
1691
|
+
"technicalGuidance": "Ensure there is exactly one <h1> describing the page's unique content.",
|
|
1692
|
+
"wcagTechnique": [
|
|
1693
|
+
"H42"
|
|
1694
|
+
]
|
|
1695
|
+
},
|
|
1696
|
+
"holmdigitalInsight": {
|
|
1697
|
+
"diggRisk": "high",
|
|
1698
|
+
"eaaImpact": "high",
|
|
1699
|
+
"commonMistakes": [
|
|
1700
|
+
"Starting headings at <h2>",
|
|
1701
|
+
"Using logo as the only <h1> without text"
|
|
1702
|
+
],
|
|
1703
|
+
"ukInterpretation": "A clear <h1> is critical for users to understand where they have landed. It is often the first thing a screen reader user looks for."
|
|
1704
|
+
},
|
|
1705
|
+
"testability": {
|
|
1706
|
+
"automated": true,
|
|
1707
|
+
"requiresManualCheck": false,
|
|
1708
|
+
"pseudoAutomation": true,
|
|
1709
|
+
"complexity": "simple"
|
|
1710
|
+
},
|
|
1711
|
+
"tags": [
|
|
1712
|
+
"wcag2a",
|
|
1713
|
+
"wcag131",
|
|
1714
|
+
"heading"
|
|
1715
|
+
]
|
|
1716
|
+
},
|
|
1717
|
+
{
|
|
1718
|
+
"ruleId": "heading-order",
|
|
1719
|
+
"wcagCriteria": "1.3.1",
|
|
1720
|
+
"wcagLevel": "A",
|
|
1721
|
+
"wcagTitle": "Info and Relationships",
|
|
1722
|
+
"wcagVersion": "2.0",
|
|
1723
|
+
"en301549Criteria": "9.1.3.1",
|
|
1724
|
+
"en301549Title": "Info and relationships",
|
|
1725
|
+
"en301549Chapter": 9,
|
|
1726
|
+
"dosLagenApplies": true,
|
|
1727
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1728
|
+
"remediation": {
|
|
1729
|
+
"description": "Headings must follow a logical order (h1 -> h2 -> h3).",
|
|
1730
|
+
"technicalGuidance": "Do not skip heading levels (e.g. directly from h1 to h3).",
|
|
1731
|
+
"wcagTechnique": [
|
|
1732
|
+
"G141"
|
|
1733
|
+
]
|
|
1734
|
+
},
|
|
1735
|
+
"holmdigitalInsight": {
|
|
1736
|
+
"diggRisk": "medium",
|
|
1737
|
+
"eaaImpact": "medium",
|
|
1738
|
+
"commonMistakes": [
|
|
1739
|
+
"Using h3 for styling instead of structure"
|
|
1740
|
+
],
|
|
1741
|
+
"ukInterpretation": "Incorrect heading structure makes it difficult for screen readers to navigate. Never skip levels."
|
|
1742
|
+
},
|
|
1743
|
+
"testability": {
|
|
1744
|
+
"automated": true,
|
|
1745
|
+
"requiresManualCheck": false,
|
|
1746
|
+
"pseudoAutomation": true,
|
|
1747
|
+
"complexity": "simple"
|
|
1748
|
+
},
|
|
1749
|
+
"tags": [
|
|
1750
|
+
"wcag2a",
|
|
1751
|
+
"wcag131",
|
|
1752
|
+
"heading"
|
|
1753
|
+
]
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
"ruleId": "landmark-banner-is-top-level",
|
|
1757
|
+
"wcagCriteria": "1.3.1",
|
|
1758
|
+
"wcagLevel": "A",
|
|
1759
|
+
"wcagTitle": "Info and Relationships",
|
|
1760
|
+
"wcagVersion": "2.0",
|
|
1761
|
+
"en301549Criteria": "9.1.3.1",
|
|
1762
|
+
"en301549Title": "Info and relationships",
|
|
1763
|
+
"en301549Chapter": 9,
|
|
1764
|
+
"dosLagenApplies": true,
|
|
1765
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1766
|
+
"remediation": {
|
|
1767
|
+
"description": "The banner (<header>) must be at the top level.",
|
|
1768
|
+
"technicalGuidance": "Do not place <header> inside another landmark if it is the page's main banner.",
|
|
1769
|
+
"wcagTechnique": [
|
|
1770
|
+
"ARIA11"
|
|
1771
|
+
]
|
|
1772
|
+
},
|
|
1773
|
+
"holmdigitalInsight": {
|
|
1774
|
+
"diggRisk": "medium",
|
|
1775
|
+
"eaaImpact": "medium",
|
|
1776
|
+
"commonMistakes": [
|
|
1777
|
+
"Nesting header inside main"
|
|
1778
|
+
],
|
|
1779
|
+
"ukInterpretation": "The page's main menu/banner must be located correctly in the structure to be found quickly."
|
|
1780
|
+
},
|
|
1781
|
+
"testability": {
|
|
1782
|
+
"automated": true,
|
|
1783
|
+
"requiresManualCheck": false,
|
|
1784
|
+
"pseudoAutomation": true,
|
|
1785
|
+
"complexity": "simple"
|
|
1786
|
+
},
|
|
1787
|
+
"tags": [
|
|
1788
|
+
"wcag2a",
|
|
1789
|
+
"wcag131",
|
|
1790
|
+
"landmark"
|
|
1791
|
+
]
|
|
1792
|
+
},
|
|
1793
|
+
{
|
|
1794
|
+
"ruleId": "landmark-no-duplicate-banner",
|
|
1795
|
+
"wcagCriteria": "1.3.1",
|
|
1796
|
+
"wcagLevel": "A",
|
|
1797
|
+
"wcagTitle": "Info and Relationships",
|
|
1798
|
+
"wcagVersion": "2.0",
|
|
1799
|
+
"en301549Criteria": "9.1.3.1",
|
|
1800
|
+
"en301549Title": "Info and relationships",
|
|
1801
|
+
"en301549Chapter": 9,
|
|
1802
|
+
"dosLagenApplies": true,
|
|
1803
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1804
|
+
"remediation": {
|
|
1805
|
+
"description": "The page must have only one 'banner' landmark (usually <header>).",
|
|
1806
|
+
"technicalGuidance": "Ensure you only have one <header> at the top level.",
|
|
1807
|
+
"wcagTechnique": [
|
|
1808
|
+
"ARIA11"
|
|
1809
|
+
]
|
|
1810
|
+
},
|
|
1811
|
+
"holmdigitalInsight": {
|
|
1812
|
+
"diggRisk": "medium",
|
|
1813
|
+
"eaaImpact": "medium",
|
|
1814
|
+
"commonMistakes": [
|
|
1815
|
+
"Having header both at top and bottom"
|
|
1816
|
+
],
|
|
1817
|
+
"ukInterpretation": "Multiple banners confuse navigation. There should be only one top header."
|
|
1818
|
+
},
|
|
1819
|
+
"testability": {
|
|
1820
|
+
"automated": true,
|
|
1821
|
+
"requiresManualCheck": false,
|
|
1822
|
+
"pseudoAutomation": true,
|
|
1823
|
+
"complexity": "simple"
|
|
1824
|
+
},
|
|
1825
|
+
"tags": [
|
|
1826
|
+
"wcag2a",
|
|
1827
|
+
"wcag131",
|
|
1828
|
+
"landmark"
|
|
1829
|
+
]
|
|
1830
|
+
},
|
|
1831
|
+
{
|
|
1832
|
+
"ruleId": "landmark-unique",
|
|
1833
|
+
"wcagCriteria": "1.3.1",
|
|
1834
|
+
"wcagLevel": "A",
|
|
1835
|
+
"wcagTitle": "Info and Relationships",
|
|
1836
|
+
"wcagVersion": "2.0",
|
|
1837
|
+
"en301549Criteria": "9.1.3.1",
|
|
1838
|
+
"en301549Title": "Info and relationships",
|
|
1839
|
+
"en301549Chapter": 9,
|
|
1840
|
+
"dosLagenApplies": true,
|
|
1841
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1842
|
+
"remediation": {
|
|
1843
|
+
"description": "Landmarks must have unique roles or labels.",
|
|
1844
|
+
"technicalGuidance": "If you have multiple <nav> elements, give them unique 'aria-label' (e.g., 'Main Menu', 'Footer Menu').",
|
|
1845
|
+
"wcagTechnique": [
|
|
1846
|
+
"ARIA11"
|
|
1847
|
+
]
|
|
1848
|
+
},
|
|
1849
|
+
"holmdigitalInsight": {
|
|
1850
|
+
"diggRisk": "medium",
|
|
1851
|
+
"eaaImpact": "medium",
|
|
1852
|
+
"commonMistakes": [
|
|
1853
|
+
"Multiple nav elements without aria-label"
|
|
1854
|
+
],
|
|
1855
|
+
"ukInterpretation": "The user must be able to distinguish between different menus/regions. Give them names."
|
|
1856
|
+
},
|
|
1857
|
+
"testability": {
|
|
1858
|
+
"automated": true,
|
|
1859
|
+
"requiresManualCheck": false,
|
|
1860
|
+
"pseudoAutomation": true,
|
|
1861
|
+
"complexity": "simple"
|
|
1862
|
+
},
|
|
1863
|
+
"tags": [
|
|
1864
|
+
"wcag2a",
|
|
1865
|
+
"wcag131",
|
|
1866
|
+
"landmark"
|
|
1867
|
+
]
|
|
1868
|
+
},
|
|
1869
|
+
{
|
|
1870
|
+
"ruleId": "region",
|
|
1871
|
+
"wcagCriteria": "1.3.1",
|
|
1872
|
+
"wcagLevel": "A",
|
|
1873
|
+
"wcagTitle": "Info and Relationships",
|
|
1874
|
+
"wcagVersion": "2.0",
|
|
1875
|
+
"en301549Criteria": "9.1.3.1",
|
|
1876
|
+
"en301549Title": "Info and relationships",
|
|
1877
|
+
"en301549Chapter": 9,
|
|
1878
|
+
"dosLagenApplies": true,
|
|
1879
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1880
|
+
"remediation": {
|
|
1881
|
+
"description": "All content on the page must be contained within landmarks (regions).",
|
|
1882
|
+
"technicalGuidance": "Ensure all content is inside <main>, <header>, <nav>, <footer>, or <aside>.",
|
|
1883
|
+
"component": null,
|
|
1884
|
+
"wcagTechnique": [
|
|
1885
|
+
"ARIA11"
|
|
1886
|
+
]
|
|
1887
|
+
},
|
|
1888
|
+
"holmdigitalInsight": {
|
|
1889
|
+
"diggRisk": "medium",
|
|
1890
|
+
"eaaImpact": "medium",
|
|
1891
|
+
"commonMistakes": [
|
|
1892
|
+
"Content directly in <body> without container",
|
|
1893
|
+
"Using too many landmarks"
|
|
1894
|
+
],
|
|
1895
|
+
"ukInterpretation": "For screen reader users to navigate effectively, the page must be divided into logical regions."
|
|
1896
|
+
},
|
|
1897
|
+
"testability": {
|
|
1898
|
+
"automated": true,
|
|
1899
|
+
"requiresManualCheck": false,
|
|
1900
|
+
"pseudoAutomation": true,
|
|
1901
|
+
"complexity": "simple"
|
|
1902
|
+
},
|
|
1903
|
+
"tags": [
|
|
1904
|
+
"wcag2a",
|
|
1905
|
+
"wcag131"
|
|
1906
|
+
]
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
"ruleId": "audio-description",
|
|
1910
|
+
"wcagCriteria": "1.2.5",
|
|
1911
|
+
"wcagLevel": "AA",
|
|
1912
|
+
"wcagTitle": "Audio Description (Prerecorded)",
|
|
1913
|
+
"wcagVersion": "2.0",
|
|
1914
|
+
"en301549Criteria": "9.1.2.5",
|
|
1915
|
+
"en301549Title": "Audio description (prerecorded)",
|
|
1916
|
+
"en301549Chapter": 9,
|
|
1917
|
+
"dosLagenApplies": true,
|
|
1918
|
+
"dosLagenReference": "PSBAR 2018, WCAG 2.1 AA required",
|
|
1919
|
+
"remediation": {
|
|
1920
|
+
"description": "Prerecorded video content must have audio description if visual information is critical.",
|
|
1921
|
+
"technicalGuidance": "Provide an alternative audio track or version describing what happens visually.",
|
|
1922
|
+
"component": null,
|
|
1923
|
+
"wcagTechnique": [
|
|
1924
|
+
"G78"
|
|
1925
|
+
]
|
|
1926
|
+
},
|
|
1927
|
+
"holmdigitalInsight": {
|
|
1928
|
+
"diggRisk": "medium",
|
|
1929
|
+
"eaaImpact": "low",
|
|
1930
|
+
"commonMistakes": [
|
|
1931
|
+
"Video missing audio description despite important visual info"
|
|
1932
|
+
],
|
|
1933
|
+
"ukInterpretation": "Video conveying information visually must be described for those who cannot see the screen."
|
|
1934
|
+
},
|
|
1935
|
+
"testability": {
|
|
1936
|
+
"automated": false,
|
|
1937
|
+
"requiresManualCheck": true,
|
|
1938
|
+
"pseudoAutomation": false,
|
|
1939
|
+
"complexity": "hard"
|
|
1940
|
+
},
|
|
1941
|
+
"tags": [
|
|
1942
|
+
"wcag2aa",
|
|
1943
|
+
"wcag125"
|
|
1944
|
+
]
|
|
1945
|
+
}
|
|
1946
|
+
]
|