@holmdigital/standards 1.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/LICENSE +59 -0
- package/README.md +41 -0
- package/data/ict-manual-checks.json +189 -0
- package/data/rules.de.json +1945 -0
- package/data/rules.en.json +1946 -0
- package/data/rules.es.json +1945 -0
- package/data/rules.fr.json +1945 -0
- package/data/rules.sv.json +1946 -0
- package/data/wcag-to-en301549.json +1946 -0
- package/dist/index.d.mts +117 -0
- package/dist/index.d.ts +117 -0
- package/dist/index.js +10223 -0
- package/dist/index.mjs +10181 -0
- package/package.json +62 -0
- package/schema/convergence-schema.json +191 -0
|
@@ -0,0 +1,1945 @@
|
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
13
|
+
"remediation": {
|
|
14
|
+
"description": "Text und Bilder von Text müssen ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text) haben.",
|
|
15
|
+
"technicalGuidance": "Verwenden Sie Tools wie den WebAIM Contrast Checker zur Überprüfung. Passen Sie Farben an oder fügen Sie Hintergrundtransparenz hinzu, um den korrekten Kontrast zu erreichen.",
|
|
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
|
+
"germanInterpretation": "Einer der häufigsten Gründe für Beanstandungen durch Aufsichtsbehörden. Besonders wichtig für öffentliche Sektoren.",
|
|
28
|
+
"commonMistakes": [
|
|
29
|
+
"Grauer Text auf weißem Hintergrund (#777 auf #FFF)",
|
|
30
|
+
"Hellblaue Links ohne Unterstreichung",
|
|
31
|
+
"Platzhaltertext mit zu geringem Kontrast"
|
|
32
|
+
],
|
|
33
|
+
"diggPrecedent": "Regulators often cite poor contrast in primary navigation elements.",
|
|
34
|
+
"priorityRationale": "Critical for users with low vision. Affects readability for all users in varying lighting conditions."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
61
|
+
"remediation": {
|
|
62
|
+
"description": "Alle Funktionen müssen per Tastatur zugänglich sein.",
|
|
63
|
+
"technicalGuidance": "Verwenden Sie semantische HTML-Elemente (button, a, input) anstelle von div/span mit Click-Handlern. Stellen Sie sicher, dass tabindex korrekt verwendet wird.",
|
|
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
|
+
"germanInterpretation": "Tastaturbedienung ist grundlegend und nicht verhandelbar. Höchste Priorität bei Prüfungen.",
|
|
75
|
+
"commonMistakes": [
|
|
76
|
+
"Verwendung von div/span für klickbare Elemente",
|
|
77
|
+
"Benutzerdefinierte Dropdown-Menüs ohne Tastaturunterstützung",
|
|
78
|
+
"Modale Dialoge, die den Fokus nicht korrekt fangen"
|
|
79
|
+
],
|
|
80
|
+
"diggPrecedent": "Auditors have issued fines for sites where core functions (e.g. forms, navigation) are not keyboard accessible.",
|
|
81
|
+
"priorityRationale": "Critical for users with motor disabilities and screen reader users."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
107
|
+
"remediation": {
|
|
108
|
+
"description": "Alle Bilder müssen beschreibenden Alternativtext haben.",
|
|
109
|
+
"technicalGuidance": "Fügen Sie alt-Attribute zu allen img-Elementen hinzu. Für dekorative Bilder verwenden Sie alt=\"\". Für informative Bilder beschreiben Sie den Inhalt prägnant.",
|
|
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
|
+
"germanInterpretation": "Besonders wichtig für Logos und informative Grafiken. Wird häufig in Prüfungen kontrolliert.",
|
|
121
|
+
"commonMistakes": [
|
|
122
|
+
"Fehlender Alt-Text",
|
|
123
|
+
"Alt-Text, der nur 'Bild' oder 'Icon' sagt",
|
|
124
|
+
"Dateiname als Alt-Text (z.B. 'IMG_1234.jpg')",
|
|
125
|
+
"Dekorative Bilder mit unnötiger Beschreibung"
|
|
126
|
+
],
|
|
127
|
+
"diggPrecedent": "Audits frequently cite missing alt text, especially for vital infographics.",
|
|
128
|
+
"priorityRationale": "Critical for screen reader users to access visual information."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
154
|
+
"remediation": {
|
|
155
|
+
"description": "Formularfelder müssen klare Beschriftungen oder Anweisungen haben.",
|
|
156
|
+
"technicalGuidance": "Verwenden Sie Label-Elemente, die über for/id mit dem Input verknüpft sind. Für komplexe Formulare verwenden Sie fieldset und legend. Nutzen Sie aria-describedby für zusätzliche Anweisungen.",
|
|
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
|
+
"germanInterpretation": "Formulare sind kritisch für E-Services. Die Einhaltung wird bei Anwendungen des öffentlichen Sektors streng kontrolliert.",
|
|
170
|
+
"commonMistakes": [
|
|
171
|
+
"Nur Platzhalter ohne Label",
|
|
172
|
+
"Label und Input nicht über for/id verknüpft",
|
|
173
|
+
"Fehlermeldungen ohne aria-describedby",
|
|
174
|
+
"Pflichtfelder nicht deutlich gekennzeichnet"
|
|
175
|
+
],
|
|
176
|
+
"diggPrecedent": "Audit decisions often criticize poor form accessibility, especially for application and contact forms.",
|
|
177
|
+
"priorityRationale": "Critical for users to successfully use e-services and submit information."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
203
|
+
"remediation": {
|
|
204
|
+
"description": "Jede Webseite muss einen beschreibenden Titel haben.",
|
|
205
|
+
"technicalGuidance": "Verwenden Sie das title-Element im Kopfbereich. Der Titel sollte für jede Seite eindeutig sein und ihren Zweck beschreiben. Format: 'Seitenname - Websitename'.",
|
|
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
|
+
"germanInterpretation": "Wichtig für die Navigation, besonders in SPAs, wo der Titel dynamisch aktualisiert werden muss.",
|
|
216
|
+
"commonMistakes": [
|
|
217
|
+
"Gleicher Titel auf allen Seiten",
|
|
218
|
+
"Titel wird in SPAs nicht aktualisiert",
|
|
219
|
+
"Zu langer oder zu kurzer Titel",
|
|
220
|
+
"Titel fehlt gänzlich"
|
|
221
|
+
],
|
|
222
|
+
"diggPrecedent": "Audits have noted missing page titles, especially in Single Page Applications.",
|
|
223
|
+
"priorityRationale": "Important for screen reader navigation and SEO."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
249
|
+
"remediation": {
|
|
250
|
+
"description": "Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch bestimmt werden oder stehen im Text zur Verfügung.",
|
|
251
|
+
"technicalGuidance": "Verwenden Sie semantisches HTML: <header>, <nav>, <main>, <footer>, <h1>-<h6>, <ul>/ <ol>, <table>. Verwenden Sie keine visuellen Stile, um 'falsche' Überschriften oder Listen zu erstellen.",
|
|
252
|
+
"component": null,
|
|
253
|
+
"wcagTechnique": [
|
|
254
|
+
"H42",
|
|
255
|
+
"H48",
|
|
256
|
+
"G115"
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
"holmdigitalInsight": {
|
|
260
|
+
"diggRisk": "high",
|
|
261
|
+
"eaaImpact": "high",
|
|
262
|
+
"germanInterpretation": "Semantische Struktur ist entscheidend, damit Screenreader effektiv navigieren können. Prüfer bemängeln oft 'Div-Suppe', die wie Struktur aussieht, aber keine Semantik hat.",
|
|
263
|
+
"commonMistakes": [
|
|
264
|
+
"Verwendung von fettem Text anstelle von <h1>-<h6>",
|
|
265
|
+
"Verwendung von <br> für Listen anstelle von <ul>",
|
|
266
|
+
"Tabellen für Layout"
|
|
267
|
+
],
|
|
268
|
+
"priorityRationale": "Fundamental for all assistive technology navigation."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
294
|
+
"remediation": {
|
|
295
|
+
"description": "Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Handlung anzuzeigen, eine Reaktion zu veranlassen oder ein visuelles Element zu unterscheiden.",
|
|
296
|
+
"technicalGuidance": "Ergänzen Sie Farbe mit Text, Symbolen oder Unterstreichungen. Z. B. müssen Links Unterstreichungen oder eine andere visuelle Markierung neben der Farbe haben. Fehlermeldungen benötigen Text/Symbol, nicht nur einen roten Rahmen.",
|
|
297
|
+
"component": "@holmdigital/components/FormField",
|
|
298
|
+
"wcagTechnique": [
|
|
299
|
+
"G14",
|
|
300
|
+
"G182",
|
|
301
|
+
"G183"
|
|
302
|
+
]
|
|
303
|
+
},
|
|
304
|
+
"holmdigitalInsight": {
|
|
305
|
+
"diggRisk": "medium",
|
|
306
|
+
"eaaImpact": "medium",
|
|
307
|
+
"germanInterpretation": "Häufiges Problem in Diagrammen und Karten, wo nur Farbcodierung verwendet wird.",
|
|
308
|
+
"commonMistakes": [
|
|
309
|
+
"Links, die sich nur durch Farbe vom Fließtext unterscheiden",
|
|
310
|
+
"Fehlermeldungen nur rot markiert",
|
|
311
|
+
"Diagramme, in denen nur Farbe Datenpunkte unterscheidet"
|
|
312
|
+
],
|
|
313
|
+
"priorityRationale": "Crucial for color blind users."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
339
|
+
"remediation": {
|
|
340
|
+
"description": "Inhalte müssen ohne Scrollen in zwei Dimensionen bis zu einer Breite von 320px darstellbar sein.",
|
|
341
|
+
"technicalGuidance": "Verwenden Sie responsives Design (CSS Media Queries, Flexbox, Grid). Vermeiden Sie feste Breiten in Pixeln. Stellen Sie sicher, dass Tabellen und Bilder korrekt skalieren.",
|
|
342
|
+
"component": null,
|
|
343
|
+
"wcagTechnique": [
|
|
344
|
+
"C32",
|
|
345
|
+
"C31"
|
|
346
|
+
]
|
|
347
|
+
},
|
|
348
|
+
"holmdigitalInsight": {
|
|
349
|
+
"diggRisk": "high",
|
|
350
|
+
"eaaImpact": "high",
|
|
351
|
+
"germanInterpretation": "Eine moderne Anforderung (WCAG 2.1), kritisch für die mobile Nutzung und vergrößerten Text. Aufsichtsbehörden haben null Toleranz für horizontales Scrollen auf vertikalen Seiten.",
|
|
352
|
+
"commonMistakes": [
|
|
353
|
+
"Feste Breiten auf Containern",
|
|
354
|
+
"Tabellen, die nicht responsiv sind",
|
|
355
|
+
"Bilder, die breiter als der Bildschirm sind"
|
|
356
|
+
],
|
|
357
|
+
"priorityRationale": "Critical for low vision users who zoom in heavily."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
383
|
+
"remediation": {
|
|
384
|
+
"description": "Die visuelle Darstellung von Benutzeroberflächenkomponenten und grafischen Objekten muss ein Kontrastverhältnis von mindestens 3:1 zu angrenzenden Farben haben.",
|
|
385
|
+
"technicalGuidance": "Gilt für Schaltflächen, Eingaberahmen, Symbole und Fokusindikatoren. Stellen Sie sicher, dass alle interaktiven Elemente klar vom Hintergrund sichtbar sind.",
|
|
386
|
+
"component": "@holmdigital/components/Button",
|
|
387
|
+
"wcagTechnique": [
|
|
388
|
+
"G195",
|
|
389
|
+
"G207"
|
|
390
|
+
]
|
|
391
|
+
},
|
|
392
|
+
"holmdigitalInsight": {
|
|
393
|
+
"diggRisk": "low",
|
|
394
|
+
"eaaImpact": "low",
|
|
395
|
+
"germanInterpretation": "Oft übersehener Aspekt in Bezug auf Fokusringe und inaktive (aber sichtbare) Komponenten. Wichtig für das Verständnis der Schnittstelle.",
|
|
396
|
+
"commonMistakes": [
|
|
397
|
+
"Ausgegraute Schaltflächen mit zu geringem Kontrast"
|
|
398
|
+
],
|
|
399
|
+
"priorityRationale": "Important for distinguishing interactive elements."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
425
|
+
"remediation": {
|
|
426
|
+
"description": "Inhalt oder Funktionalität darf nicht verloren gehen, wenn der Benutzer die Textabstände ändert (Zeilenhöhe, Absatzabstand usw.).",
|
|
427
|
+
"technicalGuidance": "Vermeiden Sie feste Höhen auf Textcontainern. Lassen Sie Container mit dem Inhalt wachsen. Testen Sie mit dem Text Spacing Bookmarklet.",
|
|
428
|
+
"component": null,
|
|
429
|
+
"wcagTechnique": [
|
|
430
|
+
"C36"
|
|
431
|
+
]
|
|
432
|
+
},
|
|
433
|
+
"holmdigitalInsight": {
|
|
434
|
+
"diggRisk": "low",
|
|
435
|
+
"eaaImpact": "medium",
|
|
436
|
+
"germanInterpretation": "Wichtig für Legasthenie-Anpassungen.",
|
|
437
|
+
"commonMistakes": [
|
|
438
|
+
"Feste Zeilenhöhe in Pixeln",
|
|
439
|
+
"Textcontainer, der nicht wächst"
|
|
440
|
+
],
|
|
441
|
+
"priorityRationale": "Important for readability during 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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
466
|
+
"remediation": {
|
|
467
|
+
"description": "Inhalte, die bei Hover/Fokus angezeigt werden (z. B. Tooltips), müssen ausblendbar, überfahrbar und dauerhaft sein.",
|
|
468
|
+
"technicalGuidance": "Stellen Sie sicher, dass Tooltips nicht verschwinden, wenn der Mauszeiger vom Auslöser auf den Tooltip selbst bewegt wird. Ermöglichen Sie ESC zum Schließen.",
|
|
469
|
+
"component": null,
|
|
470
|
+
"wcagTechnique": [
|
|
471
|
+
"SCR39"
|
|
472
|
+
]
|
|
473
|
+
},
|
|
474
|
+
"holmdigitalInsight": {
|
|
475
|
+
"diggRisk": "medium",
|
|
476
|
+
"eaaImpact": "medium",
|
|
477
|
+
"germanInterpretation": "Häufiges Problem bei benutzerdefinierten Tooltips und Mega-Menüs.",
|
|
478
|
+
"commonMistakes": [
|
|
479
|
+
"Tooltips, die nicht mit der Maus erreicht werden können",
|
|
480
|
+
"Menüs, die zu schnell schließen",
|
|
481
|
+
"Inhalt, der nicht ohne Fokusbewegung ausgeblendet werden kann"
|
|
482
|
+
],
|
|
483
|
+
"priorityRationale": "Important for users with magnification and motor difficulties."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
509
|
+
"remediation": {
|
|
510
|
+
"description": "Untertitel müssen für alle voraufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt werden.",
|
|
511
|
+
"technicalGuidance": "Verwenden Sie das <track>-Element mit WebVTT-Dateien für HTML5-Video. Stellen Sie sicher, dass Untertitel bei Social-Media-Einbettungen aktiviert sind.",
|
|
512
|
+
"component": null,
|
|
513
|
+
"wcagTechnique": [
|
|
514
|
+
"G87",
|
|
515
|
+
"G93"
|
|
516
|
+
]
|
|
517
|
+
},
|
|
518
|
+
"holmdigitalInsight": {
|
|
519
|
+
"diggRisk": "high",
|
|
520
|
+
"eaaImpact": "high",
|
|
521
|
+
"germanInterpretation": "Einer der häufigsten Mängel im öffentlichen Sektor. Die gesetzliche Anforderung ist strikt: Video mit Audio MUSS Untertitel haben.",
|
|
522
|
+
"commonMistakes": [
|
|
523
|
+
"Automatisch generierte Untertitel, die niemanden zufriedenstellen",
|
|
524
|
+
"Untertitel fehlen gänzlich",
|
|
525
|
+
"Untertitel eingebrannt (nicht durchsuchbar/übersetzbar)"
|
|
526
|
+
],
|
|
527
|
+
"priorityRationale": "Critical for deaf and hard of hearing users."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
553
|
+
"remediation": {
|
|
554
|
+
"description": "Audiodeskription muss für alle voraufgezeichneten Videoinhalte bereitgestellt werden.",
|
|
555
|
+
"technicalGuidance": "Entweder als separate Tonspur, als alternative Version des Videos oder (bei 'Talking Heads') sicherstellen, dass alle Infos im Audio vermittelt werden.",
|
|
556
|
+
"component": null,
|
|
557
|
+
"wcagTechnique": [
|
|
558
|
+
"G78",
|
|
559
|
+
"G69"
|
|
560
|
+
]
|
|
561
|
+
},
|
|
562
|
+
"holmdigitalInsight": {
|
|
563
|
+
"diggRisk": "medium",
|
|
564
|
+
"eaaImpact": "medium",
|
|
565
|
+
"germanInterpretation": "Kann oft durch 'integrierte Beschreibung' gelöst werden (Sprechen über das, was gesehen wird), was kosteneffizienter ist.",
|
|
566
|
+
"commonMistakes": [
|
|
567
|
+
"Informationen, die nur visuell gezeigt werden (Grafiken, Textschilder), ohne im Audio erwähnt zu werden"
|
|
568
|
+
],
|
|
569
|
+
"priorityRationale": "Critical for blind video users."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
595
|
+
"remediation": {
|
|
596
|
+
"description": "Inhalte dürfen ihre Ansicht und Bedienung nicht auf eine einzige Displayausrichtung beschränken, es sei denn, eine bestimmte Ausrichtung ist notwendig.",
|
|
597
|
+
"technicalGuidance": "Sperren Sie den Bildschirm nicht per CSS oder JS-Manifest auf Hoch- oder Querformat. Verwenden Sie CSS Media Queries, um Layoutänderungen zu handhaben.",
|
|
598
|
+
"component": null,
|
|
599
|
+
"wcagTechnique": [
|
|
600
|
+
"F97"
|
|
601
|
+
]
|
|
602
|
+
},
|
|
603
|
+
"holmdigitalInsight": {
|
|
604
|
+
"diggRisk": "low",
|
|
605
|
+
"eaaImpact": "medium",
|
|
606
|
+
"germanInterpretation": "Wichtig für Tablets und Nutzer, die das Gerät montiert haben (z. B. Rollstuhl).",
|
|
607
|
+
"commonMistakes": [
|
|
608
|
+
"Apps/Websites, die die Oberfläche gegen den Willen des Nutzers um 90 Grad drehen"
|
|
609
|
+
],
|
|
610
|
+
"priorityRationale": "Important for users who cannot rotate their device."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
636
|
+
"remediation": {
|
|
637
|
+
"description": "Der Zweck jedes Eingabefeldes, das Informationen über den Benutzer sammelt, kann programmatisch bestimmt werden.",
|
|
638
|
+
"technicalGuidance": "Verwenden Sie das 'autocomplete'-Attribut für Eingabefelder mit persönlichen Daten (Name, E-Mail, Tel, Adresse usw.).",
|
|
639
|
+
"component": "@holmdigital/components/FormField",
|
|
640
|
+
"wcagTechnique": [
|
|
641
|
+
"H98"
|
|
642
|
+
]
|
|
643
|
+
},
|
|
644
|
+
"holmdigitalInsight": {
|
|
645
|
+
"diggRisk": "medium",
|
|
646
|
+
"eaaImpact": "high",
|
|
647
|
+
"germanInterpretation": "Macht das Ausfüllen verwirrender Formulare viel einfacher (Autofill).",
|
|
648
|
+
"commonMistakes": [
|
|
649
|
+
"Fehlendes autocomplete-Attribut",
|
|
650
|
+
"Falscher autocomplete-Wert",
|
|
651
|
+
"Unnötiges Abschalten von autocomplete (autocomplete='off')"
|
|
652
|
+
],
|
|
653
|
+
"priorityRationale": "Reduces cognitive load and motor requirements."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
678
|
+
"remediation": {
|
|
679
|
+
"description": "Wenn der Fokus mit einer Tastaturschnittstelle auf eine Komponente der Seite bewegt werden kann, muss der Fokus auch nur mit einer Tastaturschnittstelle wieder von dieser Komponente wegbewegt werden können.",
|
|
680
|
+
"technicalGuidance": "Seien Sie vorsichtig bei JS-Widgets, die den Fokus fangen (z. B. Modalfenster). Sorgen Sie immer für einen Ausweg (z. B. ESC oder Shift+Tab).",
|
|
681
|
+
"component": null,
|
|
682
|
+
"wcagTechnique": [
|
|
683
|
+
"G21"
|
|
684
|
+
]
|
|
685
|
+
},
|
|
686
|
+
"holmdigitalInsight": {
|
|
687
|
+
"diggRisk": "critical",
|
|
688
|
+
"eaaImpact": "critical",
|
|
689
|
+
"germanInterpretation": "Eine Tastaturfalle ist ein 'Blocker', der die Website unbenutzbar macht. Schwerer Fehler.",
|
|
690
|
+
"commonMistakes": [
|
|
691
|
+
"Benutzerdefinierte Widgets, die den Fokus unendlich schleifen",
|
|
692
|
+
"Eingebettete Komponenten von Drittanbietern (Karten, Chats) ohne Ausgang"
|
|
693
|
+
],
|
|
694
|
+
"priorityRationale": "Critical: The user gets stuck and must restart the browser."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
719
|
+
"remediation": {
|
|
720
|
+
"description": "Wenn ein Tastaturkürzel aus nur einem Zeichen (Buchstabe, Zahl, Symbol) besteht, muss es eine Möglichkeit geben, es auszuschalten, neu zuzuordnen oder es darf nur bei Fokus aktiv sein.",
|
|
721
|
+
"technicalGuidance": "Vermeiden Sie Einzeltasten-Shortcuts, wenn möglich. Falls erforderlich, stellen Sie sicher, dass sie nicht mit Sprachsteuerung oder versehentlichem Tippen in Konflikt geraten.",
|
|
722
|
+
"component": null,
|
|
723
|
+
"wcagTechnique": [
|
|
724
|
+
"G217"
|
|
725
|
+
]
|
|
726
|
+
},
|
|
727
|
+
"holmdigitalInsight": {
|
|
728
|
+
"diggRisk": "medium",
|
|
729
|
+
"eaaImpact": "medium",
|
|
730
|
+
"germanInterpretation": "Wichtig für Nutzer von Sprachsteuerung (Dragon etc.), bei denen einzelne Wörter versehentlich Befehle auslösen können.",
|
|
731
|
+
"commonMistakes": [
|
|
732
|
+
"Gmail-ähnliche Shortcuts, die standardmäßig aktiviert sind, ohne Option zum Deaktivieren"
|
|
733
|
+
],
|
|
734
|
+
"priorityRationale": "Important to avoid accidental activation."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
759
|
+
"remediation": {
|
|
760
|
+
"description": "Wenn ein Zeitlimit (Sitzung, Lesezeit) festgelegt ist, muss der Benutzer in der Lage sein, es auszuschalten, anzupassen oder zu verlängern.",
|
|
761
|
+
"technicalGuidance": "Geben Sie eine Warnung aus, bevor die Sitzung abläuft, mit einer Schaltfläche 'Sitzung verlängern'. Das Zeitlimit muss mindestens 20 Sekunden betragen.",
|
|
762
|
+
"component": null,
|
|
763
|
+
"wcagTechnique": [
|
|
764
|
+
"SCR16",
|
|
765
|
+
"G180"
|
|
766
|
+
]
|
|
767
|
+
},
|
|
768
|
+
"holmdigitalInsight": {
|
|
769
|
+
"diggRisk": "high",
|
|
770
|
+
"eaaImpact": "high",
|
|
771
|
+
"germanInterpretation": "Kritisch für E-Services/Banking. Nutzer, die langsam lesen oder assistive Technologien verwenden, benötigen mehr Zeit.",
|
|
772
|
+
"commonMistakes": [
|
|
773
|
+
"Logout ohne Warnung",
|
|
774
|
+
"Zeitlimits, die nicht verlängert werden können"
|
|
775
|
+
],
|
|
776
|
+
"priorityRationale": "Critical to avoid losing entered data."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
801
|
+
"remediation": {
|
|
802
|
+
"description": "Für sich automatisch bewegende, blinkende oder scrollende Inhalte, die (1) automatisch starten, (2) länger als 5 Sekunden dauern und (3) parallel zu anderen Inhalten angezeigt werden, muss es eine Möglichkeit geben, sie anzuhalten, zu stoppen oder auszublenden.",
|
|
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
|
+
"germanInterpretation": "Wichtig für Nutzer mit Konzentrationsschwierigkeiten (ADHS/Autismus), die durch Bewegung abgelenkt werden.",
|
|
814
|
+
"commonMistakes": [
|
|
815
|
+
"Karussells ohne Pausentaste",
|
|
816
|
+
"Automatische Bildwechsel, die zu schnell sind"
|
|
817
|
+
],
|
|
818
|
+
"priorityRationale": "Important for cognitive accessibility."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
844
|
+
"remediation": {
|
|
845
|
+
"description": "Webseiten dürfen nichts enthalten, was mehr als dreimal pro Sekunde blitzt.",
|
|
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
|
+
"germanInterpretation": "Ernstes Gesundheitsrisiko für Menschen mit lichtempfindlicher Epilepsie.",
|
|
856
|
+
"commonMistakes": [
|
|
857
|
+
"Videoinhalte mit Stroboskopeffekten ohne Warnung",
|
|
858
|
+
"Falsche Verwendung von blinkenden Fehlermeldungen"
|
|
859
|
+
],
|
|
860
|
+
"priorityRationale": "Critical safety risk."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
886
|
+
"remediation": {
|
|
887
|
+
"description": "Es gibt einen Mechanismus, um Inhaltsblöcke zu überspringen, die sich auf mehreren Webseiten wiederholen.",
|
|
888
|
+
"technicalGuidance": "Fügen Sie einen 'Zum Inhalt springen'-Link als erstes fokussierbares Element auf der Seite hinzu. Verwenden Sie Landmarks (header, nav, main, aside, footer), um Screenreader-Navigation zu ermöglichen.",
|
|
889
|
+
"component": null,
|
|
890
|
+
"wcagTechnique": [
|
|
891
|
+
"G1",
|
|
892
|
+
"H69"
|
|
893
|
+
]
|
|
894
|
+
},
|
|
895
|
+
"holmdigitalInsight": {
|
|
896
|
+
"diggRisk": "medium",
|
|
897
|
+
"eaaImpact": "medium",
|
|
898
|
+
"germanInterpretation": "Standard auf fast allen Behörden-Websites. Ermöglicht schnelles Navigieren zum Hauptinhalt.",
|
|
899
|
+
"commonMistakes": [
|
|
900
|
+
"Fehlender 'Skip-Link'",
|
|
901
|
+
"Skip-Link ist nicht sichtbar bei Fokus",
|
|
902
|
+
"Landmarks fehlen"
|
|
903
|
+
],
|
|
904
|
+
"priorityRationale": "Important for efficient navigation."
|
|
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": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
930
|
+
"remediation": {
|
|
931
|
+
"description": "Focus order must be logical and follow meaning/structure.",
|
|
932
|
+
"technicalGuidance": "Die DOM-Reihenfolge bestimmt die Fokus-Reihenfolge. Passen Sie nicht tab-index (> 0) manuell an. Ordnen Sie Elemente im HTML logisch an.",
|
|
933
|
+
"component": null,
|
|
934
|
+
"wcagTechnique": [
|
|
935
|
+
"G59",
|
|
936
|
+
"C27"
|
|
937
|
+
]
|
|
938
|
+
},
|
|
939
|
+
"holmdigitalInsight": {
|
|
940
|
+
"diggRisk": "high",
|
|
941
|
+
"eaaImpact": "high",
|
|
942
|
+
"germanInterpretation": "Logische Tab-Reihenfolge folgt der Leserichtung. Wichtig für Tastaturnutzer.",
|
|
943
|
+
"commonMistakes": [
|
|
944
|
+
"Modale Dialoge am Ende des DOMs ohne Fokus-Management",
|
|
945
|
+
"Verwendung von float/flex-order, die die visuelle Reihenfolge von der DOM-Reihenfolge unterscheidet"
|
|
946
|
+
],
|
|
947
|
+
"priorityRationale": "Critical for keyboard navigation and understanding."
|
|
948
|
+
},
|
|
949
|
+
"testability": {
|
|
950
|
+
"automated": false,
|
|
951
|
+
"requiresManualCheck": true,
|
|
952
|
+
"pseudoAutomation": true,
|
|
953
|
+
"complexity": "moderate"
|
|
954
|
+
},
|
|
955
|
+
"tags": [
|
|
956
|
+
"focus",
|
|
957
|
+
"keyboard",
|
|
958
|
+
"navigation",
|
|
959
|
+
"wcag2a"
|
|
960
|
+
]
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"ruleId": "link-purpose",
|
|
964
|
+
"wcagCriteria": "2.4.4",
|
|
965
|
+
"wcagLevel": "A",
|
|
966
|
+
"wcagTitle": "Link Purpose (In Context)",
|
|
967
|
+
"wcagVersion": "2.0",
|
|
968
|
+
"en301549Criteria": "9.2.4.4",
|
|
969
|
+
"en301549Title": "Link purpose (in context)",
|
|
970
|
+
"en301549Chapter": 9,
|
|
971
|
+
"dosLagenApplies": true,
|
|
972
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
973
|
+
"remediation": {
|
|
974
|
+
"description": "Der Zweck jedes Links kann aus dem Linktext allein oder aus dem Linktext zusammen mit seinem programmatisch bestimmten Linkkontext bestimmt werden.",
|
|
975
|
+
"technicalGuidance": "Vermeiden Sie 'Klicken Sie hier' oder 'Mehr lesen'. Der Linktext sollte sagen, wohin er führt (z. B. 'Lesen Sie mehr über unsere Dienstleistungen').",
|
|
976
|
+
"component": null,
|
|
977
|
+
"wcagTechnique": [
|
|
978
|
+
"G91",
|
|
979
|
+
"H30"
|
|
980
|
+
]
|
|
981
|
+
},
|
|
982
|
+
"holmdigitalInsight": {
|
|
983
|
+
"diggRisk": "medium",
|
|
984
|
+
"eaaImpact": "medium",
|
|
985
|
+
"germanInterpretation": "Einer der häufigsten redaktionellen Fehler. Links müssen verständlich sein, wenn sie aus dem Kontext gerissen werden (z. B. in einer 'Linkliste').",
|
|
986
|
+
"commonMistakes": [
|
|
987
|
+
"Mehrfach vorkommende 'Mehr lesen'-Links mit verschiedenen Zielen",
|
|
988
|
+
"Links mit URL als Text"
|
|
989
|
+
],
|
|
990
|
+
"priorityRationale": "Important for efficient navigation."
|
|
991
|
+
},
|
|
992
|
+
"testability": {
|
|
993
|
+
"automated": true,
|
|
994
|
+
"requiresManualCheck": true,
|
|
995
|
+
"pseudoAutomation": false,
|
|
996
|
+
"complexity": "simple"
|
|
997
|
+
},
|
|
998
|
+
"tags": [
|
|
999
|
+
"links",
|
|
1000
|
+
"navigation",
|
|
1001
|
+
"copywriting",
|
|
1002
|
+
"wcag2a"
|
|
1003
|
+
]
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
"ruleId": "multiple-ways",
|
|
1007
|
+
"wcagCriteria": "2.4.5",
|
|
1008
|
+
"wcagLevel": "AA",
|
|
1009
|
+
"wcagTitle": "Multiple Ways",
|
|
1010
|
+
"wcagVersion": "2.0",
|
|
1011
|
+
"en301549Criteria": "9.2.4.5",
|
|
1012
|
+
"en301549Title": "Multiple ways",
|
|
1013
|
+
"en301549Chapter": 9,
|
|
1014
|
+
"dosLagenApplies": true,
|
|
1015
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1016
|
+
"remediation": {
|
|
1017
|
+
"description": "Es muss mehr als einen Weg geben, eine Webseite innerhalb einer Reihe von Webseiten zu finden.",
|
|
1018
|
+
"technicalGuidance": "Mindestens zwei von: Menü, Suche, Sitemap, Links im Inhalt.",
|
|
1019
|
+
"component": null,
|
|
1020
|
+
"wcagTechnique": [
|
|
1021
|
+
"G125",
|
|
1022
|
+
"G126"
|
|
1023
|
+
]
|
|
1024
|
+
},
|
|
1025
|
+
"holmdigitalInsight": {
|
|
1026
|
+
"diggRisk": "low",
|
|
1027
|
+
"eaaImpact": "low",
|
|
1028
|
+
"germanInterpretation": "Oft erfüllt durch Menü + Suche. Sitemap ist Best Practice.",
|
|
1029
|
+
"commonMistakes": [
|
|
1030
|
+
"Fehlende Suchfunktion auf Seiten mit vielen Unterseiten"
|
|
1031
|
+
],
|
|
1032
|
+
"priorityRationale": "Facilitates different navigation strategies."
|
|
1033
|
+
},
|
|
1034
|
+
"testability": {
|
|
1035
|
+
"automated": false,
|
|
1036
|
+
"requiresManualCheck": true,
|
|
1037
|
+
"pseudoAutomation": false,
|
|
1038
|
+
"complexity": "simple"
|
|
1039
|
+
},
|
|
1040
|
+
"tags": [
|
|
1041
|
+
"navigation",
|
|
1042
|
+
"search",
|
|
1043
|
+
"sitemap",
|
|
1044
|
+
"wcag2aa"
|
|
1045
|
+
]
|
|
1046
|
+
},
|
|
1047
|
+
{
|
|
1048
|
+
"ruleId": "headings-and-labels",
|
|
1049
|
+
"wcagCriteria": "2.4.6",
|
|
1050
|
+
"wcagLevel": "AA",
|
|
1051
|
+
"wcagTitle": "Headings and Labels",
|
|
1052
|
+
"wcagVersion": "2.0",
|
|
1053
|
+
"en301549Criteria": "9.2.4.6",
|
|
1054
|
+
"en301549Title": "Headings and labels",
|
|
1055
|
+
"en301549Chapter": 9,
|
|
1056
|
+
"dosLagenApplies": true,
|
|
1057
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1058
|
+
"remediation": {
|
|
1059
|
+
"description": "Überschriften und Beschriftungen müssen das Thema oder den Zweck beschreiben.",
|
|
1060
|
+
"technicalGuidance": "Schreiben Sie klare, beschreibende Überschriften, die dem darunter liegenden Inhalt Sinn verleihen. Formularbeschriftungen müssen verständlich sein.",
|
|
1061
|
+
"component": null,
|
|
1062
|
+
"wcagTechnique": [
|
|
1063
|
+
"G130"
|
|
1064
|
+
]
|
|
1065
|
+
},
|
|
1066
|
+
"holmdigitalInsight": {
|
|
1067
|
+
"diggRisk": "medium",
|
|
1068
|
+
"eaaImpact": "medium",
|
|
1069
|
+
"germanInterpretation": "Handelt von redaktioneller Qualität und Verständlichkeit.",
|
|
1070
|
+
"commonMistakes": [
|
|
1071
|
+
"Kryptische Überschriften",
|
|
1072
|
+
"Beschriftungen, die nicht zu dem passen, was ausgefüllt werden soll"
|
|
1073
|
+
],
|
|
1074
|
+
"priorityRationale": "Important for cognitive accessibility."
|
|
1075
|
+
},
|
|
1076
|
+
"testability": {
|
|
1077
|
+
"automated": false,
|
|
1078
|
+
"requiresManualCheck": true,
|
|
1079
|
+
"pseudoAutomation": false,
|
|
1080
|
+
"complexity": "simple"
|
|
1081
|
+
},
|
|
1082
|
+
"tags": [
|
|
1083
|
+
"content",
|
|
1084
|
+
"headings",
|
|
1085
|
+
"labels",
|
|
1086
|
+
"wcag2aa"
|
|
1087
|
+
]
|
|
1088
|
+
},
|
|
1089
|
+
{
|
|
1090
|
+
"ruleId": "focus-visible",
|
|
1091
|
+
"wcagCriteria": "2.4.7",
|
|
1092
|
+
"wcagLevel": "AA",
|
|
1093
|
+
"wcagTitle": "Focus Visible",
|
|
1094
|
+
"wcagVersion": "2.0",
|
|
1095
|
+
"en301549Criteria": "9.2.4.7",
|
|
1096
|
+
"en301549Title": "Focus visible",
|
|
1097
|
+
"en301549Chapter": 9,
|
|
1098
|
+
"dosLagenApplies": true,
|
|
1099
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1100
|
+
"remediation": {
|
|
1101
|
+
"description": "Jede Benutzeroberfläche, die mit der Tastatur bedient werden kann, muss einen sichtbaren Fokusindikator haben.",
|
|
1102
|
+
"technicalGuidance": "Entfernen Sie niemals die Outline mit CSS (outline: none), ohne sie durch einen deutlichen visuellen Indikator zu ersetzen. Stellen Sie sicher, dass der Kontrast des Fokusrings ausreichend ist (siehe 1.4.11).",
|
|
1103
|
+
"component": "@holmdigital/components/Button",
|
|
1104
|
+
"wcagTechnique": [
|
|
1105
|
+
"G149",
|
|
1106
|
+
"G165",
|
|
1107
|
+
"C15"
|
|
1108
|
+
]
|
|
1109
|
+
},
|
|
1110
|
+
"holmdigitalInsight": {
|
|
1111
|
+
"diggRisk": "high",
|
|
1112
|
+
"eaaImpact": "high",
|
|
1113
|
+
"germanInterpretation": "Einer der häufigsten Fehler. Oft, weil Designer den 'blauen Ring' nicht mögen.",
|
|
1114
|
+
"commonMistakes": [
|
|
1115
|
+
"outline: none im CSS-Reset",
|
|
1116
|
+
"Benutzerdefinierte Schaltflächen ohne :focus-Stil"
|
|
1117
|
+
],
|
|
1118
|
+
"priorityRationale": "Critical: Without visible focus, the keyboard user doesn't know where they are."
|
|
1119
|
+
},
|
|
1120
|
+
"testability": {
|
|
1121
|
+
"automated": true,
|
|
1122
|
+
"requiresManualCheck": true,
|
|
1123
|
+
"pseudoAutomation": true,
|
|
1124
|
+
"complexity": "simple"
|
|
1125
|
+
},
|
|
1126
|
+
"tags": [
|
|
1127
|
+
"focus",
|
|
1128
|
+
"visual",
|
|
1129
|
+
"keyboard",
|
|
1130
|
+
"wcag2aa"
|
|
1131
|
+
]
|
|
1132
|
+
},
|
|
1133
|
+
{
|
|
1134
|
+
"ruleId": "language-of-page",
|
|
1135
|
+
"wcagCriteria": "3.1.1",
|
|
1136
|
+
"wcagLevel": "A",
|
|
1137
|
+
"wcagTitle": "Language of Page",
|
|
1138
|
+
"wcagVersion": "2.0",
|
|
1139
|
+
"en301549Criteria": "9.3.1.1",
|
|
1140
|
+
"en301549Title": "Language of page",
|
|
1141
|
+
"en301549Chapter": 9,
|
|
1142
|
+
"dosLagenApplies": true,
|
|
1143
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1144
|
+
"remediation": {
|
|
1145
|
+
"description": "Die Standardsprache jeder Webseite muss programmatisch bestimmt werden können.",
|
|
1146
|
+
"technicalGuidance": "Setzen Sie das 'lang'-Attribut im <html>-Element. Z. B. <html lang='de'> für Deutsch.",
|
|
1147
|
+
"component": null,
|
|
1148
|
+
"wcagTechnique": [
|
|
1149
|
+
"H57"
|
|
1150
|
+
]
|
|
1151
|
+
},
|
|
1152
|
+
"holmdigitalInsight": {
|
|
1153
|
+
"diggRisk": "high",
|
|
1154
|
+
"eaaImpact": "high",
|
|
1155
|
+
"germanInterpretation": "Grundlegend für Screenreader. Ohne dies rät der Screenreader die Sprache, was oft zu falscher Aussprache führt.",
|
|
1156
|
+
"commonMistakes": [
|
|
1157
|
+
"Lang-Attribut fehlt",
|
|
1158
|
+
"Falscher Sprachcode (z. B. 'en' auf einer deutschen Seite)"
|
|
1159
|
+
],
|
|
1160
|
+
"priorityRationale": "Critical for screen reader users."
|
|
1161
|
+
},
|
|
1162
|
+
"testability": {
|
|
1163
|
+
"automated": true,
|
|
1164
|
+
"requiresManualCheck": false,
|
|
1165
|
+
"pseudoAutomation": false,
|
|
1166
|
+
"complexity": "simple"
|
|
1167
|
+
},
|
|
1168
|
+
"tags": [
|
|
1169
|
+
"content",
|
|
1170
|
+
"language",
|
|
1171
|
+
"wcag2a"
|
|
1172
|
+
]
|
|
1173
|
+
},
|
|
1174
|
+
{
|
|
1175
|
+
"ruleId": "language-of-parts",
|
|
1176
|
+
"wcagCriteria": "3.1.2",
|
|
1177
|
+
"wcagLevel": "AA",
|
|
1178
|
+
"wcagTitle": "Language of Parts",
|
|
1179
|
+
"wcagVersion": "2.0",
|
|
1180
|
+
"en301549Criteria": "9.3.1.2",
|
|
1181
|
+
"en301549Title": "Language of parts",
|
|
1182
|
+
"en301549Chapter": 9,
|
|
1183
|
+
"dosLagenApplies": true,
|
|
1184
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1185
|
+
"remediation": {
|
|
1186
|
+
"description": "Die menschliche Sprache jedes Abschnitts oder jeder Phrase im Inhalt muss programmatisch bestimmt werden können.",
|
|
1187
|
+
"technicalGuidance": "Verwenden Sie das lang-Attribut für Elemente, die sich von der Hauptsprache der Seite unterscheiden. Z. B. <span lang='fr'>Bonjour</span>.",
|
|
1188
|
+
"component": null,
|
|
1189
|
+
"wcagTechnique": [
|
|
1190
|
+
"H58"
|
|
1191
|
+
]
|
|
1192
|
+
},
|
|
1193
|
+
"holmdigitalInsight": {
|
|
1194
|
+
"diggRisk": "low",
|
|
1195
|
+
"eaaImpact": "low",
|
|
1196
|
+
"germanInterpretation": "Selten ein kritischer Fehler, es sei denn, er behindert das Verständnis erheblich.",
|
|
1197
|
+
"commonMistakes": [
|
|
1198
|
+
"Fremdsprachige Zitate im Text ohne Auszeichnung"
|
|
1199
|
+
],
|
|
1200
|
+
"priorityRationale": "Important for correct pronunciation."
|
|
1201
|
+
},
|
|
1202
|
+
"testability": {
|
|
1203
|
+
"automated": false,
|
|
1204
|
+
"requiresManualCheck": true,
|
|
1205
|
+
"pseudoAutomation": true,
|
|
1206
|
+
"complexity": "moderate"
|
|
1207
|
+
},
|
|
1208
|
+
"tags": [
|
|
1209
|
+
"content",
|
|
1210
|
+
"language",
|
|
1211
|
+
"wcag2aa"
|
|
1212
|
+
]
|
|
1213
|
+
},
|
|
1214
|
+
{
|
|
1215
|
+
"ruleId": "on-focus",
|
|
1216
|
+
"wcagCriteria": "3.2.1",
|
|
1217
|
+
"wcagLevel": "A",
|
|
1218
|
+
"wcagTitle": "On Focus",
|
|
1219
|
+
"wcagVersion": "2.0",
|
|
1220
|
+
"en301549Criteria": "9.3.2.1",
|
|
1221
|
+
"en301549Title": "On focus",
|
|
1222
|
+
"en301549Chapter": 9,
|
|
1223
|
+
"dosLagenApplies": true,
|
|
1224
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1225
|
+
"remediation": {
|
|
1226
|
+
"description": "Wenn eine Komponente den Fokus erhält, darf sie keine Änderung des Kontexts auslösen.",
|
|
1227
|
+
"technicalGuidance": "Öffnen Sie keine neuen Fenster, senden Sie keine Formulare ab und verschieben Sie den Fokus nicht automatisch, nur weil der Benutzer zu einem Feld tabbt.",
|
|
1228
|
+
"component": null,
|
|
1229
|
+
"wcagTechnique": [
|
|
1230
|
+
"G107"
|
|
1231
|
+
]
|
|
1232
|
+
},
|
|
1233
|
+
"holmdigitalInsight": {
|
|
1234
|
+
"diggRisk": "high",
|
|
1235
|
+
"eaaImpact": "high",
|
|
1236
|
+
"germanInterpretation": "Sehr verwirrend für Benutzer. Erzeugt ein Gefühl von Kontrollverlust.",
|
|
1237
|
+
"commonMistakes": [
|
|
1238
|
+
"Dropdowns, die bei Auswahl sofort navigieren (ohne 'Los'-Button)",
|
|
1239
|
+
"Formulare, die beim Fokus auf das letzte Feld automatisch gesendet werden"
|
|
1240
|
+
],
|
|
1241
|
+
"priorityRationale": "Important for predictability."
|
|
1242
|
+
},
|
|
1243
|
+
"testability": {
|
|
1244
|
+
"automated": false,
|
|
1245
|
+
"requiresManualCheck": true,
|
|
1246
|
+
"pseudoAutomation": true,
|
|
1247
|
+
"complexity": "moderate"
|
|
1248
|
+
},
|
|
1249
|
+
"tags": [
|
|
1250
|
+
"interaction",
|
|
1251
|
+
"focus",
|
|
1252
|
+
"predictability",
|
|
1253
|
+
"wcag2a"
|
|
1254
|
+
]
|
|
1255
|
+
},
|
|
1256
|
+
{
|
|
1257
|
+
"ruleId": "on-input",
|
|
1258
|
+
"wcagCriteria": "3.2.2",
|
|
1259
|
+
"wcagLevel": "A",
|
|
1260
|
+
"wcagTitle": "On Input",
|
|
1261
|
+
"wcagVersion": "2.0",
|
|
1262
|
+
"en301549Criteria": "9.3.2.2",
|
|
1263
|
+
"en301549Title": "On input",
|
|
1264
|
+
"en301549Chapter": 9,
|
|
1265
|
+
"dosLagenApplies": true,
|
|
1266
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1267
|
+
"remediation": {
|
|
1268
|
+
"description": "Die Änderung der Einstellung einer Komponente verursacht nicht automatisch eine Änderung des Kontexts, es sei denn, der Benutzer wurde vor der Verwendung der Komponente auf das Verhalten hingewiesen.",
|
|
1269
|
+
"technicalGuidance": "Informieren Sie den Benutzer, dass die Auswahl in einer Liste die Seite neu lädt. Fügen Sie vorzugsweise eine Schaltfläche hinzu, um die Auswahl zu bestätigen.",
|
|
1270
|
+
"component": null,
|
|
1271
|
+
"wcagTechnique": [
|
|
1272
|
+
"G13",
|
|
1273
|
+
"H32"
|
|
1274
|
+
]
|
|
1275
|
+
},
|
|
1276
|
+
"holmdigitalInsight": {
|
|
1277
|
+
"diggRisk": "medium",
|
|
1278
|
+
"eaaImpact": "medium",
|
|
1279
|
+
"germanInterpretation": "Häufig bei Filterfunktionen.",
|
|
1280
|
+
"commonMistakes": [
|
|
1281
|
+
"Checkboxen, die die Seite sofort neu laden",
|
|
1282
|
+
"Filterung, die den Fokus verschiebt"
|
|
1283
|
+
],
|
|
1284
|
+
"priorityRationale": "Important for predictability."
|
|
1285
|
+
},
|
|
1286
|
+
"testability": {
|
|
1287
|
+
"automated": false,
|
|
1288
|
+
"requiresManualCheck": true,
|
|
1289
|
+
"pseudoAutomation": true,
|
|
1290
|
+
"complexity": "moderate"
|
|
1291
|
+
},
|
|
1292
|
+
"tags": [
|
|
1293
|
+
"interaction",
|
|
1294
|
+
"input",
|
|
1295
|
+
"predictability",
|
|
1296
|
+
"wcag2a"
|
|
1297
|
+
]
|
|
1298
|
+
},
|
|
1299
|
+
{
|
|
1300
|
+
"ruleId": "consistent-navigation",
|
|
1301
|
+
"wcagCriteria": "3.2.3",
|
|
1302
|
+
"wcagLevel": "AA",
|
|
1303
|
+
"wcagTitle": "Consistent Navigation",
|
|
1304
|
+
"wcagVersion": "2.0",
|
|
1305
|
+
"en301549Criteria": "9.3.2.3",
|
|
1306
|
+
"en301549Title": "Consistent navigation",
|
|
1307
|
+
"en301549Chapter": 9,
|
|
1308
|
+
"dosLagenApplies": true,
|
|
1309
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1310
|
+
"remediation": {
|
|
1311
|
+
"description": "Navigationsmechanismen, die auf mehreren Webseiten wiederholt werden, treten jedes Mal in derselben relativen Reihenfolge auf, wenn sie wiederholt werden.",
|
|
1312
|
+
"technicalGuidance": "Hauptmenü sollte auf allen Seiten gleich aussehen und an derselben Stelle sein. Suchfunktion ebenfalls.",
|
|
1313
|
+
"component": null,
|
|
1314
|
+
"wcagTechnique": [
|
|
1315
|
+
"G61"
|
|
1316
|
+
]
|
|
1317
|
+
},
|
|
1318
|
+
"holmdigitalInsight": {
|
|
1319
|
+
"diggRisk": "medium",
|
|
1320
|
+
"eaaImpact": "medium",
|
|
1321
|
+
"germanInterpretation": "Vorhersehbarkeit ist der Schlüssel zur kognitiven Barrierefreiheit.",
|
|
1322
|
+
"commonMistakes": [
|
|
1323
|
+
"Menüs, die auf verschiedenen Seiten Platz oder Reihenfolge ändern"
|
|
1324
|
+
],
|
|
1325
|
+
"priorityRationale": "Facilitates learning."
|
|
1326
|
+
},
|
|
1327
|
+
"testability": {
|
|
1328
|
+
"automated": false,
|
|
1329
|
+
"requiresManualCheck": true,
|
|
1330
|
+
"pseudoAutomation": false,
|
|
1331
|
+
"complexity": "simple"
|
|
1332
|
+
},
|
|
1333
|
+
"tags": [
|
|
1334
|
+
"navigation",
|
|
1335
|
+
"design",
|
|
1336
|
+
"consistency",
|
|
1337
|
+
"wcag2aa"
|
|
1338
|
+
]
|
|
1339
|
+
},
|
|
1340
|
+
{
|
|
1341
|
+
"ruleId": "consistent-identification",
|
|
1342
|
+
"wcagCriteria": "3.2.4",
|
|
1343
|
+
"wcagLevel": "AA",
|
|
1344
|
+
"wcagTitle": "Consistent Identification",
|
|
1345
|
+
"wcagVersion": "2.0",
|
|
1346
|
+
"en301549Criteria": "9.3.2.4",
|
|
1347
|
+
"en301549Title": "Consistent identification",
|
|
1348
|
+
"en301549Chapter": 9,
|
|
1349
|
+
"dosLagenApplies": true,
|
|
1350
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1351
|
+
"remediation": {
|
|
1352
|
+
"description": "Komponenten, die die gleiche Funktionalität innerhalb einer Reihe von Webseiten haben, werden konsistent identifiziert.",
|
|
1353
|
+
"technicalGuidance": "Nennen Sie die Suche nicht auf einer Seite 'Suche' und auf einer anderen 'Finden'. Verwenden Sie das gleiche Symbol für die gleiche Funktion.",
|
|
1354
|
+
"component": null,
|
|
1355
|
+
"wcagTechnique": [
|
|
1356
|
+
"G197"
|
|
1357
|
+
]
|
|
1358
|
+
},
|
|
1359
|
+
"holmdigitalInsight": {
|
|
1360
|
+
"diggRisk": "low",
|
|
1361
|
+
"eaaImpact": "low",
|
|
1362
|
+
"germanInterpretation": "Wichtig für die Benutzerfreundlichkeit.",
|
|
1363
|
+
"commonMistakes": [
|
|
1364
|
+
"Inkonsistente Benennung",
|
|
1365
|
+
"Unterschiedliche Icons für Drucken/Download"
|
|
1366
|
+
],
|
|
1367
|
+
"priorityRationale": "Reduces cognitive load."
|
|
1368
|
+
},
|
|
1369
|
+
"testability": {
|
|
1370
|
+
"automated": false,
|
|
1371
|
+
"requiresManualCheck": true,
|
|
1372
|
+
"pseudoAutomation": false,
|
|
1373
|
+
"complexity": "simple"
|
|
1374
|
+
},
|
|
1375
|
+
"tags": [
|
|
1376
|
+
"content",
|
|
1377
|
+
"icons",
|
|
1378
|
+
"consistency",
|
|
1379
|
+
"wcag2aa"
|
|
1380
|
+
]
|
|
1381
|
+
},
|
|
1382
|
+
{
|
|
1383
|
+
"ruleId": "error-identification",
|
|
1384
|
+
"wcagCriteria": "3.3.1",
|
|
1385
|
+
"wcagLevel": "A",
|
|
1386
|
+
"wcagTitle": "Error Identification",
|
|
1387
|
+
"wcagVersion": "2.0",
|
|
1388
|
+
"en301549Criteria": "9.3.3.1",
|
|
1389
|
+
"en301549Title": "Error identification",
|
|
1390
|
+
"en301549Chapter": 9,
|
|
1391
|
+
"dosLagenApplies": true,
|
|
1392
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1393
|
+
"remediation": {
|
|
1394
|
+
"description": "Wenn ein Eingabefehler automatisch erkannt wird, wird das fehlerhafte Element identifiziert und der Fehler dem Benutzer in Textform beschrieben.",
|
|
1395
|
+
"technicalGuidance": "Zeigen Sie die Fehlermeldung in der Nähe des Feldes an. Verknüpfen Sie sie mit aria-describedby oder schließen Sie sie in das Label ein. Färben Sie das Feld nicht nur rot.",
|
|
1396
|
+
"component": "@holmdigital/components/FormField",
|
|
1397
|
+
"wcagTechnique": [
|
|
1398
|
+
"G83",
|
|
1399
|
+
"SCR18"
|
|
1400
|
+
]
|
|
1401
|
+
},
|
|
1402
|
+
"holmdigitalInsight": {
|
|
1403
|
+
"diggRisk": "high",
|
|
1404
|
+
"eaaImpact": "high",
|
|
1405
|
+
"germanInterpretation": "Kritisch für den Abschluss von Aufgaben. Generische Fehlermeldungen ('Etwas ist schief gelaufen') werden nicht akzeptiert, wenn der Fehler spezifisch ist.",
|
|
1406
|
+
"commonMistakes": [
|
|
1407
|
+
"'Ungültiger Wert' ohne Erklärung",
|
|
1408
|
+
"Fehlermeldung für Screenreader nicht sichtbar"
|
|
1409
|
+
],
|
|
1410
|
+
"priorityRationale": "Critical for error handling."
|
|
1411
|
+
},
|
|
1412
|
+
"testability": {
|
|
1413
|
+
"automated": false,
|
|
1414
|
+
"requiresManualCheck": true,
|
|
1415
|
+
"pseudoAutomation": true,
|
|
1416
|
+
"complexity": "moderate"
|
|
1417
|
+
},
|
|
1418
|
+
"tags": [
|
|
1419
|
+
"forms",
|
|
1420
|
+
"errors",
|
|
1421
|
+
"wcag2a"
|
|
1422
|
+
]
|
|
1423
|
+
},
|
|
1424
|
+
{
|
|
1425
|
+
"ruleId": "error-suggestion",
|
|
1426
|
+
"wcagCriteria": "3.3.3",
|
|
1427
|
+
"wcagLevel": "AA",
|
|
1428
|
+
"wcagTitle": "Error Suggestion",
|
|
1429
|
+
"wcagVersion": "2.0",
|
|
1430
|
+
"en301549Criteria": "9.3.3.3",
|
|
1431
|
+
"en301549Title": "Error suggestion",
|
|
1432
|
+
"en301549Chapter": 9,
|
|
1433
|
+
"dosLagenApplies": true,
|
|
1434
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1435
|
+
"remediation": {
|
|
1436
|
+
"description": "Wenn ein Eingabefehler automatisch erkannt wird und Vorschläge zur Korrektur bekannt sind, werden die Vorschläge dem Benutzer zur Verfügung gestellt.",
|
|
1437
|
+
"technicalGuidance": "Wenn der Benutzer 'Okt' für einen Monat eingibt und das System 'Oktober' erwartet, schlagen Sie 'Oktober' vor. Wenn das Datumsformat falsch ist, zeigen Sie das erwartete Format (JJJJ-MM-TT) an. Bieten Sie Rechtschreibvorschläge für die Suche an ('Meinten Sie...?').",
|
|
1438
|
+
"component": "@holmdigital/components/FormField",
|
|
1439
|
+
"wcagTechnique": [
|
|
1440
|
+
"G177"
|
|
1441
|
+
]
|
|
1442
|
+
},
|
|
1443
|
+
"holmdigitalInsight": {
|
|
1444
|
+
"diggRisk": "medium",
|
|
1445
|
+
"eaaImpact": "medium",
|
|
1446
|
+
"germanInterpretation": "Hilft Benutzern, Fehler schneller zu korrigieren.",
|
|
1447
|
+
"commonMistakes": [
|
|
1448
|
+
"Fehlermeldung sagt nur 'Fehler', erklärt aber nicht das erwartete Format"
|
|
1449
|
+
],
|
|
1450
|
+
"priorityRationale": "Facilitates correction."
|
|
1451
|
+
},
|
|
1452
|
+
"testability": {
|
|
1453
|
+
"automated": false,
|
|
1454
|
+
"requiresManualCheck": true,
|
|
1455
|
+
"pseudoAutomation": true,
|
|
1456
|
+
"complexity": "moderate"
|
|
1457
|
+
},
|
|
1458
|
+
"tags": [
|
|
1459
|
+
"forms",
|
|
1460
|
+
"errors",
|
|
1461
|
+
"guidance",
|
|
1462
|
+
"wcag2aa"
|
|
1463
|
+
]
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"ruleId": "error-prevention",
|
|
1467
|
+
"wcagCriteria": "3.3.4",
|
|
1468
|
+
"wcagLevel": "AA",
|
|
1469
|
+
"wcagTitle": "Error Prevention (Legal, Financial, Data)",
|
|
1470
|
+
"wcagVersion": "2.0",
|
|
1471
|
+
"en301549Criteria": "9.3.3.4",
|
|
1472
|
+
"en301549Title": "Error prevention (legal, financial, data)",
|
|
1473
|
+
"en301549Chapter": 9,
|
|
1474
|
+
"dosLagenApplies": true,
|
|
1475
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1476
|
+
"remediation": {
|
|
1477
|
+
"description": "Für Webseiten, die rechtliche Verpflichtungen oder finanzielle Transaktionen bewirken, müssen die Daten umkehrbar sein, überprüft werden oder bestätigt werden.",
|
|
1478
|
+
"technicalGuidance": "Verwenden Sie eine Bestätigungsseite vor dem endgültigen Absenden (Bestellübersicht). Erlauben Sie Benutzern, Bestellungen innerhalb eines bestimmten Zeitrahmens zu stornieren.",
|
|
1479
|
+
"component": null,
|
|
1480
|
+
"wcagTechnique": [
|
|
1481
|
+
"G164",
|
|
1482
|
+
"G98"
|
|
1483
|
+
]
|
|
1484
|
+
},
|
|
1485
|
+
"holmdigitalInsight": {
|
|
1486
|
+
"diggRisk": "high",
|
|
1487
|
+
"eaaImpact": "high",
|
|
1488
|
+
"germanInterpretation": "Standard im E-Commerce und E-Government. Kritisch, um teure Fehler zu vermeiden.",
|
|
1489
|
+
"commonMistakes": [
|
|
1490
|
+
"Keine Bestätigungsseite vor dem Absenden einer wichtigen Aktion",
|
|
1491
|
+
"Submission of binding contracts without review"
|
|
1492
|
+
],
|
|
1493
|
+
"priorityRationale": "Critical to avoid serious consequences of mistakes."
|
|
1494
|
+
},
|
|
1495
|
+
"testability": {
|
|
1496
|
+
"automated": false,
|
|
1497
|
+
"requiresManualCheck": true,
|
|
1498
|
+
"pseudoAutomation": false,
|
|
1499
|
+
"complexity": "moderate"
|
|
1500
|
+
},
|
|
1501
|
+
"tags": [
|
|
1502
|
+
"forms",
|
|
1503
|
+
"legal",
|
|
1504
|
+
"financial",
|
|
1505
|
+
"wcag2aa"
|
|
1506
|
+
]
|
|
1507
|
+
},
|
|
1508
|
+
{
|
|
1509
|
+
"ruleId": "parsing",
|
|
1510
|
+
"wcagCriteria": "4.1.1",
|
|
1511
|
+
"wcagLevel": "A",
|
|
1512
|
+
"wcagTitle": "Parsing",
|
|
1513
|
+
"wcagVersion": "2.0",
|
|
1514
|
+
"en301549Criteria": "9.4.1.1",
|
|
1515
|
+
"en301549Title": "Parsing",
|
|
1516
|
+
"en301549Chapter": 9,
|
|
1517
|
+
"dosLagenApplies": true,
|
|
1518
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1519
|
+
"remediation": {
|
|
1520
|
+
"description": "In Inhalten, die mit Markup-Sprachen implementiert sind, müssen Elemente vollständige Start- und End-Tags haben, gemäß den Spezifikationen verschachtelt sein, keine doppelten Attribute enthalten und alle IDs müssen eindeutig sein.",
|
|
1521
|
+
"technicalGuidance": "Verwenden Sie einen HTML-Validator. 'ID must be unique' ist der häufigste Fehler. Doppelte IDs zerstören aria-describedby und Label-Verbindungen.",
|
|
1522
|
+
"component": null,
|
|
1523
|
+
"wcagTechnique": [
|
|
1524
|
+
"H88"
|
|
1525
|
+
]
|
|
1526
|
+
},
|
|
1527
|
+
"holmdigitalInsight": {
|
|
1528
|
+
"diggRisk": "low",
|
|
1529
|
+
"eaaImpact": "low",
|
|
1530
|
+
"germanInterpretation": "Strukturiert die Seite und bestätigt dem Benutzer, wo er sich befindet.",
|
|
1531
|
+
"commonMistakes": [
|
|
1532
|
+
"Doppelte IDs (oft durch Copy-Paste)",
|
|
1533
|
+
"Falsch verschachtelte Tags (z. B. <div> innerhalb von <span>)"
|
|
1534
|
+
],
|
|
1535
|
+
"priorityRationale": "Technical hygiene factor."
|
|
1536
|
+
},
|
|
1537
|
+
"testability": {
|
|
1538
|
+
"automated": true,
|
|
1539
|
+
"requiresManualCheck": false,
|
|
1540
|
+
"pseudoAutomation": false,
|
|
1541
|
+
"complexity": "simple"
|
|
1542
|
+
},
|
|
1543
|
+
"tags": [
|
|
1544
|
+
"code",
|
|
1545
|
+
"html",
|
|
1546
|
+
"parsing",
|
|
1547
|
+
"wcag2a"
|
|
1548
|
+
]
|
|
1549
|
+
},
|
|
1550
|
+
{
|
|
1551
|
+
"ruleId": "name-role-value",
|
|
1552
|
+
"wcagCriteria": "4.1.2",
|
|
1553
|
+
"wcagLevel": "A",
|
|
1554
|
+
"wcagTitle": "Name, Role, Value",
|
|
1555
|
+
"wcagVersion": "2.0",
|
|
1556
|
+
"en301549Criteria": "9.4.1.2",
|
|
1557
|
+
"en301549Title": "Name, role, value",
|
|
1558
|
+
"en301549Chapter": 9,
|
|
1559
|
+
"dosLagenApplies": true,
|
|
1560
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1561
|
+
"remediation": {
|
|
1562
|
+
"description": "Für alle Benutzeroberflächenkomponenten können Name und Rolle programmatisch bestimmt werden; Werte können gesetzt werden; und Benachrichtigungen über Änderungen sind verfügbar.",
|
|
1563
|
+
"technicalGuidance": "Use native HTML elements when possible. If custom components are used, ARIA (role, aria-label, aria-valuenow) must be used correctly.",
|
|
1564
|
+
"component": null,
|
|
1565
|
+
"wcagTechnique": [
|
|
1566
|
+
"ARIA4",
|
|
1567
|
+
"ARIA5"
|
|
1568
|
+
]
|
|
1569
|
+
},
|
|
1570
|
+
"holmdigitalInsight": {
|
|
1571
|
+
"diggRisk": "critical",
|
|
1572
|
+
"eaaImpact": "critical",
|
|
1573
|
+
"germanInterpretation": "Der technisch komplexeste Teil der WCAG. Hier scheitern die meisten modernen JavaScript-Frameworks, wenn Entwickler ARIA nicht verstehen.",
|
|
1574
|
+
"commonMistakes": [
|
|
1575
|
+
"Clickable <div> ohne role='button' oder tabindex",
|
|
1576
|
+
"Akkordeons ohne aria-expanded",
|
|
1577
|
+
"Tabs ohne korrekte aria-Attribute"
|
|
1578
|
+
],
|
|
1579
|
+
"priorityRationale": "Absolutely critical for compatibility."
|
|
1580
|
+
},
|
|
1581
|
+
"testability": {
|
|
1582
|
+
"automated": true,
|
|
1583
|
+
"requiresManualCheck": true,
|
|
1584
|
+
"pseudoAutomation": true,
|
|
1585
|
+
"complexity": "complex"
|
|
1586
|
+
},
|
|
1587
|
+
"tags": [
|
|
1588
|
+
"code",
|
|
1589
|
+
"aria",
|
|
1590
|
+
"interaction",
|
|
1591
|
+
"wcag2a"
|
|
1592
|
+
]
|
|
1593
|
+
},
|
|
1594
|
+
{
|
|
1595
|
+
"ruleId": "status-messages",
|
|
1596
|
+
"wcagCriteria": "4.1.3",
|
|
1597
|
+
"wcagLevel": "AA",
|
|
1598
|
+
"wcagTitle": "Status Messages",
|
|
1599
|
+
"wcagVersion": "2.1",
|
|
1600
|
+
"en301549Criteria": "9.4.1.3",
|
|
1601
|
+
"en301549Title": "Status messages",
|
|
1602
|
+
"en301549Chapter": 9,
|
|
1603
|
+
"dosLagenApplies": true,
|
|
1604
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1605
|
+
"remediation": {
|
|
1606
|
+
"description": "Statusmeldungen sollen dem Benutzer ohne Fokus (über Screenreader) präsentiert werden können.",
|
|
1607
|
+
"technicalGuidance": "Verwenden Sie aria-live-Regionen für Toast-Nachrichten, Suchergebnisse oder Warenkorb-Updates. aria-live='polite' ist meistens am besten.",
|
|
1608
|
+
"component": null,
|
|
1609
|
+
"wcagTechnique": [
|
|
1610
|
+
"ARIA19",
|
|
1611
|
+
"ARIA22"
|
|
1612
|
+
]
|
|
1613
|
+
},
|
|
1614
|
+
"holmdigitalInsight": {
|
|
1615
|
+
"diggRisk": "medium",
|
|
1616
|
+
"eaaImpact": "medium",
|
|
1617
|
+
"germanInterpretation": "Kritisch für dynamische Anwendungen (SPA), wo sich Inhalte ändern, ohne dass die Seite neu geladen wird.",
|
|
1618
|
+
"commonMistakes": [
|
|
1619
|
+
"Fehlermeldungen, die visuell erscheinen, aber nicht vorgelesen werden",
|
|
1620
|
+
"Warenkorb-Updates, die stillschweigend erfolgen"
|
|
1621
|
+
],
|
|
1622
|
+
"priorityRationale": "Provides feedback to users without sight."
|
|
1623
|
+
},
|
|
1624
|
+
"testability": {
|
|
1625
|
+
"automated": false,
|
|
1626
|
+
"requiresManualCheck": true,
|
|
1627
|
+
"pseudoAutomation": true,
|
|
1628
|
+
"complexity": "moderate"
|
|
1629
|
+
},
|
|
1630
|
+
"tags": [
|
|
1631
|
+
"aria",
|
|
1632
|
+
"updates",
|
|
1633
|
+
"feedback",
|
|
1634
|
+
"wcag21aa"
|
|
1635
|
+
]
|
|
1636
|
+
},
|
|
1637
|
+
{
|
|
1638
|
+
"ruleId": "landmark-one-main",
|
|
1639
|
+
"wcagCriteria": "1.3.1",
|
|
1640
|
+
"wcagLevel": "A",
|
|
1641
|
+
"wcagTitle": "Info and Relationships",
|
|
1642
|
+
"wcagVersion": "2.0",
|
|
1643
|
+
"en301549Criteria": "9.1.3.1",
|
|
1644
|
+
"en301549Title": "Info and relationships",
|
|
1645
|
+
"en301549Chapter": 9,
|
|
1646
|
+
"dosLagenApplies": true,
|
|
1647
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1648
|
+
"remediation": {
|
|
1649
|
+
"description": "Die Seite muss genau eine Haupt-Landmark haben.",
|
|
1650
|
+
"technicalGuidance": "Verwenden Sie das <main>-Element, um den Hauptinhalt der Seite zu umschließen. Es sollte nur ein sichtbares <main>-Element geben.",
|
|
1651
|
+
"wcagTechnique": [
|
|
1652
|
+
"ARIA11",
|
|
1653
|
+
"H97"
|
|
1654
|
+
]
|
|
1655
|
+
},
|
|
1656
|
+
"holmdigitalInsight": {
|
|
1657
|
+
"diggRisk": "medium",
|
|
1658
|
+
"eaaImpact": "medium",
|
|
1659
|
+
"germanInterpretation": "Ermöglicht Benutzern, direkt zum Hauptinhalt zu springen.",
|
|
1660
|
+
"commonMistakes": [
|
|
1661
|
+
"Using <div id='main'> instead of <main>",
|
|
1662
|
+
"Having multiple <main> elements"
|
|
1663
|
+
]
|
|
1664
|
+
},
|
|
1665
|
+
"testability": {
|
|
1666
|
+
"automated": true,
|
|
1667
|
+
"requiresManualCheck": false,
|
|
1668
|
+
"pseudoAutomation": true,
|
|
1669
|
+
"complexity": "simple"
|
|
1670
|
+
},
|
|
1671
|
+
"tags": [
|
|
1672
|
+
"wcag2a",
|
|
1673
|
+
"wcag131",
|
|
1674
|
+
"landmark"
|
|
1675
|
+
]
|
|
1676
|
+
},
|
|
1677
|
+
{
|
|
1678
|
+
"ruleId": "page-has-heading-one",
|
|
1679
|
+
"wcagCriteria": "1.3.1",
|
|
1680
|
+
"wcagLevel": "A",
|
|
1681
|
+
"wcagTitle": "Info and Relationships",
|
|
1682
|
+
"wcagVersion": "2.0",
|
|
1683
|
+
"en301549Criteria": "9.1.3.1",
|
|
1684
|
+
"en301549Title": "Info and relationships",
|
|
1685
|
+
"en301549Chapter": 9,
|
|
1686
|
+
"dosLagenApplies": true,
|
|
1687
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1688
|
+
"remediation": {
|
|
1689
|
+
"description": "Die Seite muss eine Überschrift der Ebene 1 haben.",
|
|
1690
|
+
"technicalGuidance": "Stellen Sie sicher, dass es genau ein <h1> gibt, das den einzigartigen Inhalt der Seite beschreibt.",
|
|
1691
|
+
"wcagTechnique": [
|
|
1692
|
+
"H42"
|
|
1693
|
+
]
|
|
1694
|
+
},
|
|
1695
|
+
"holmdigitalInsight": {
|
|
1696
|
+
"diggRisk": "high",
|
|
1697
|
+
"eaaImpact": "high",
|
|
1698
|
+
"germanInterpretation": "Ein klares <h1> ist entscheidend, damit Benutzer verstehen, wo sie gelandet sind. Es ist oft das Erste, wonach ein Screenreader-Benutzer sucht.",
|
|
1699
|
+
"commonMistakes": [
|
|
1700
|
+
"Überschriften mit <h2> beginnen",
|
|
1701
|
+
"Logo als einziges <h1> ohne Text verwenden"
|
|
1702
|
+
]
|
|
1703
|
+
},
|
|
1704
|
+
"testability": {
|
|
1705
|
+
"automated": true,
|
|
1706
|
+
"requiresManualCheck": false,
|
|
1707
|
+
"pseudoAutomation": true,
|
|
1708
|
+
"complexity": "simple"
|
|
1709
|
+
},
|
|
1710
|
+
"tags": [
|
|
1711
|
+
"wcag2a",
|
|
1712
|
+
"wcag131",
|
|
1713
|
+
"heading"
|
|
1714
|
+
]
|
|
1715
|
+
},
|
|
1716
|
+
{
|
|
1717
|
+
"ruleId": "heading-order",
|
|
1718
|
+
"wcagCriteria": "1.3.1",
|
|
1719
|
+
"wcagLevel": "A",
|
|
1720
|
+
"wcagTitle": "Info and Relationships",
|
|
1721
|
+
"wcagVersion": "2.0",
|
|
1722
|
+
"en301549Criteria": "9.1.3.1",
|
|
1723
|
+
"en301549Title": "Info and relationships",
|
|
1724
|
+
"en301549Chapter": 9,
|
|
1725
|
+
"dosLagenApplies": true,
|
|
1726
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1727
|
+
"remediation": {
|
|
1728
|
+
"description": "Überschriften müssen einer logischen Reihenfolge folgen (h1 -> h2 -> h3).",
|
|
1729
|
+
"technicalGuidance": "Folgen Sie auf ein <h1> mit <h2>, nicht <h3> oder <h4>. Die Struktur sollte logisch sein.",
|
|
1730
|
+
"wcagTechnique": [
|
|
1731
|
+
"G141"
|
|
1732
|
+
]
|
|
1733
|
+
},
|
|
1734
|
+
"holmdigitalInsight": {
|
|
1735
|
+
"diggRisk": "medium",
|
|
1736
|
+
"eaaImpact": "medium",
|
|
1737
|
+
"germanInterpretation": "Erstellt eine logische Gliederung für Screenreader-Benutzer.",
|
|
1738
|
+
"commonMistakes": [
|
|
1739
|
+
"Überspringen von Ebenen aus visuellen Gründen (z. B. <h1> dann <h4>)"
|
|
1740
|
+
]
|
|
1741
|
+
},
|
|
1742
|
+
"testability": {
|
|
1743
|
+
"automated": true,
|
|
1744
|
+
"requiresManualCheck": false,
|
|
1745
|
+
"pseudoAutomation": true,
|
|
1746
|
+
"complexity": "simple"
|
|
1747
|
+
},
|
|
1748
|
+
"tags": [
|
|
1749
|
+
"wcag2a",
|
|
1750
|
+
"wcag131",
|
|
1751
|
+
"heading"
|
|
1752
|
+
]
|
|
1753
|
+
},
|
|
1754
|
+
{
|
|
1755
|
+
"ruleId": "landmark-banner-is-top-level",
|
|
1756
|
+
"wcagCriteria": "1.3.1",
|
|
1757
|
+
"wcagLevel": "A",
|
|
1758
|
+
"wcagTitle": "Info and Relationships",
|
|
1759
|
+
"wcagVersion": "2.0",
|
|
1760
|
+
"en301549Criteria": "9.1.3.1",
|
|
1761
|
+
"en301549Title": "Info and relationships",
|
|
1762
|
+
"en301549Chapter": 9,
|
|
1763
|
+
"dosLagenApplies": true,
|
|
1764
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1765
|
+
"remediation": {
|
|
1766
|
+
"description": "Das Banner (<header>) muss auf der obersten Ebene sein.",
|
|
1767
|
+
"technicalGuidance": "Platzieren Sie den <header> (mit role 'banner', implizit) nicht innerhalb von <main> oder anderen Landmarks. Er sollte ein direktes Kind des Body oder eines Wrapper-Divs sein.",
|
|
1768
|
+
"wcagTechnique": [
|
|
1769
|
+
"ARIA11"
|
|
1770
|
+
]
|
|
1771
|
+
},
|
|
1772
|
+
"holmdigitalInsight": {
|
|
1773
|
+
"diggRisk": "medium",
|
|
1774
|
+
"eaaImpact": "medium",
|
|
1775
|
+
"germanInterpretation": "Stellt sicher, dass der Header als globaler Bereich erkannt wird.",
|
|
1776
|
+
"commonMistakes": [
|
|
1777
|
+
"Header innerhalb von Main verschachtelt"
|
|
1778
|
+
]
|
|
1779
|
+
},
|
|
1780
|
+
"testability": {
|
|
1781
|
+
"automated": true,
|
|
1782
|
+
"requiresManualCheck": false,
|
|
1783
|
+
"pseudoAutomation": true,
|
|
1784
|
+
"complexity": "simple"
|
|
1785
|
+
},
|
|
1786
|
+
"tags": [
|
|
1787
|
+
"wcag2a",
|
|
1788
|
+
"wcag131",
|
|
1789
|
+
"landmark"
|
|
1790
|
+
]
|
|
1791
|
+
},
|
|
1792
|
+
{
|
|
1793
|
+
"ruleId": "landmark-no-duplicate-banner",
|
|
1794
|
+
"wcagCriteria": "1.3.1",
|
|
1795
|
+
"wcagLevel": "A",
|
|
1796
|
+
"wcagTitle": "Info and Relationships",
|
|
1797
|
+
"wcagVersion": "2.0",
|
|
1798
|
+
"en301549Criteria": "9.1.3.1",
|
|
1799
|
+
"en301549Title": "Info and relationships",
|
|
1800
|
+
"en301549Chapter": 9,
|
|
1801
|
+
"dosLagenApplies": true,
|
|
1802
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1803
|
+
"remediation": {
|
|
1804
|
+
"description": "Die Seite darf nur eine 'Banner'-Landmark (normalerweise <header>) haben.",
|
|
1805
|
+
"technicalGuidance": "Stellen Sie sicher, dass Sie nur einen <header> auf der obersten Ebene haben.",
|
|
1806
|
+
"wcagTechnique": [
|
|
1807
|
+
"ARIA11"
|
|
1808
|
+
]
|
|
1809
|
+
},
|
|
1810
|
+
"holmdigitalInsight": {
|
|
1811
|
+
"diggRisk": "medium",
|
|
1812
|
+
"eaaImpact": "medium",
|
|
1813
|
+
"germanInterpretation": "Mehrere Banner verwirren die Navigation. Es sollte nur einen Top-Header geben.",
|
|
1814
|
+
"commonMistakes": [
|
|
1815
|
+
"Header sowohl oben als auch unten haben"
|
|
1816
|
+
]
|
|
1817
|
+
},
|
|
1818
|
+
"testability": {
|
|
1819
|
+
"automated": true,
|
|
1820
|
+
"requiresManualCheck": false,
|
|
1821
|
+
"pseudoAutomation": true,
|
|
1822
|
+
"complexity": "simple"
|
|
1823
|
+
},
|
|
1824
|
+
"tags": [
|
|
1825
|
+
"wcag2a",
|
|
1826
|
+
"wcag131",
|
|
1827
|
+
"landmark"
|
|
1828
|
+
]
|
|
1829
|
+
},
|
|
1830
|
+
{
|
|
1831
|
+
"ruleId": "landmark-unique",
|
|
1832
|
+
"wcagCriteria": "1.3.1",
|
|
1833
|
+
"wcagLevel": "A",
|
|
1834
|
+
"wcagTitle": "Info and Relationships",
|
|
1835
|
+
"wcagVersion": "2.0",
|
|
1836
|
+
"en301549Criteria": "9.1.3.1",
|
|
1837
|
+
"en301549Title": "Info and relationships",
|
|
1838
|
+
"en301549Chapter": 9,
|
|
1839
|
+
"dosLagenApplies": true,
|
|
1840
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1841
|
+
"remediation": {
|
|
1842
|
+
"description": "Landmarks müssen eindeutige Rollen oder Beschriftungen haben.",
|
|
1843
|
+
"technicalGuidance": "Wenn Sie mehrere <nav>-Elemente haben, geben Sie ihnen eindeutige 'aria-label' (z. B. 'Hauptmenü', 'Fußzeilenmenü').",
|
|
1844
|
+
"wcagTechnique": [
|
|
1845
|
+
"ARIA11"
|
|
1846
|
+
]
|
|
1847
|
+
},
|
|
1848
|
+
"holmdigitalInsight": {
|
|
1849
|
+
"diggRisk": "medium",
|
|
1850
|
+
"eaaImpact": "medium",
|
|
1851
|
+
"germanInterpretation": "Der Benutzer muss zwischen verschiedenen Menüs/Regionen unterscheiden können. Geben Sie ihnen Namen.",
|
|
1852
|
+
"commonMistakes": [
|
|
1853
|
+
"Mehrere nav-Elemente ohne aria-label"
|
|
1854
|
+
]
|
|
1855
|
+
},
|
|
1856
|
+
"testability": {
|
|
1857
|
+
"automated": true,
|
|
1858
|
+
"requiresManualCheck": false,
|
|
1859
|
+
"pseudoAutomation": true,
|
|
1860
|
+
"complexity": "simple"
|
|
1861
|
+
},
|
|
1862
|
+
"tags": [
|
|
1863
|
+
"wcag2a",
|
|
1864
|
+
"wcag131",
|
|
1865
|
+
"landmark"
|
|
1866
|
+
]
|
|
1867
|
+
},
|
|
1868
|
+
{
|
|
1869
|
+
"ruleId": "region",
|
|
1870
|
+
"wcagCriteria": "1.3.1",
|
|
1871
|
+
"wcagLevel": "A",
|
|
1872
|
+
"wcagTitle": "Info and Relationships",
|
|
1873
|
+
"wcagVersion": "2.0",
|
|
1874
|
+
"en301549Criteria": "9.1.3.1",
|
|
1875
|
+
"en301549Title": "Info and relationships",
|
|
1876
|
+
"en301549Chapter": 9,
|
|
1877
|
+
"dosLagenApplies": true,
|
|
1878
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 A erforderlich",
|
|
1879
|
+
"remediation": {
|
|
1880
|
+
"description": "Alle Inhalte auf der Seite müssen in Landmarks (Regionen) enthalten sein.",
|
|
1881
|
+
"technicalGuidance": "Stellen Sie sicher, dass alle Inhalte in <main>, <header>, <nav>, <footer> oder <aside> enthalten sind.",
|
|
1882
|
+
"component": null,
|
|
1883
|
+
"wcagTechnique": [
|
|
1884
|
+
"ARIA11"
|
|
1885
|
+
]
|
|
1886
|
+
},
|
|
1887
|
+
"holmdigitalInsight": {
|
|
1888
|
+
"diggRisk": "medium",
|
|
1889
|
+
"eaaImpact": "medium",
|
|
1890
|
+
"germanInterpretation": "Damit Screenreader-Benutzer effektiv navigieren können, muss die Seite in logische Regionen unterteilt sein.",
|
|
1891
|
+
"commonMistakes": [
|
|
1892
|
+
"Inhalt direkt im <body> ohne Container",
|
|
1893
|
+
"Zu viele Landmarks verwenden"
|
|
1894
|
+
]
|
|
1895
|
+
},
|
|
1896
|
+
"testability": {
|
|
1897
|
+
"automated": true,
|
|
1898
|
+
"requiresManualCheck": false,
|
|
1899
|
+
"pseudoAutomation": true,
|
|
1900
|
+
"complexity": "simple"
|
|
1901
|
+
},
|
|
1902
|
+
"tags": [
|
|
1903
|
+
"wcag2a",
|
|
1904
|
+
"wcag131"
|
|
1905
|
+
]
|
|
1906
|
+
},
|
|
1907
|
+
{
|
|
1908
|
+
"ruleId": "audio-description",
|
|
1909
|
+
"wcagCriteria": "1.2.5",
|
|
1910
|
+
"wcagLevel": "AA",
|
|
1911
|
+
"wcagTitle": "Audio Description (Prerecorded)",
|
|
1912
|
+
"wcagVersion": "2.0",
|
|
1913
|
+
"en301549Criteria": "9.1.2.5",
|
|
1914
|
+
"en301549Title": "Audio description (prerecorded)",
|
|
1915
|
+
"en301549Chapter": 9,
|
|
1916
|
+
"dosLagenApplies": true,
|
|
1917
|
+
"dosLagenReference": "BITV 2.0, Anlage 1, WCAG 2.1 AA erforderlich",
|
|
1918
|
+
"remediation": {
|
|
1919
|
+
"description": "Voraufgezeichnete Videoinhalte müssen eine Audiodeskription haben, wenn visuelle Informationen kritisch sind.",
|
|
1920
|
+
"technicalGuidance": "Stellen Sie eine alternative Tonspur oder Version bereit, die beschreibt, was visuell passiert.",
|
|
1921
|
+
"component": null,
|
|
1922
|
+
"wcagTechnique": [
|
|
1923
|
+
"G78"
|
|
1924
|
+
]
|
|
1925
|
+
},
|
|
1926
|
+
"holmdigitalInsight": {
|
|
1927
|
+
"diggRisk": "medium",
|
|
1928
|
+
"eaaImpact": "low",
|
|
1929
|
+
"germanInterpretation": "Video, das Informationen visuell vermittelt, muss für diejenigen beschrieben werden, die den Bildschirm nicht sehen können.",
|
|
1930
|
+
"commonMistakes": [
|
|
1931
|
+
"Video fehlt Audiodeskription trotz wichtiger visueller Infos"
|
|
1932
|
+
]
|
|
1933
|
+
},
|
|
1934
|
+
"testability": {
|
|
1935
|
+
"automated": false,
|
|
1936
|
+
"requiresManualCheck": true,
|
|
1937
|
+
"pseudoAutomation": false,
|
|
1938
|
+
"complexity": "hard"
|
|
1939
|
+
},
|
|
1940
|
+
"tags": [
|
|
1941
|
+
"wcag2aa",
|
|
1942
|
+
"wcag125"
|
|
1943
|
+
]
|
|
1944
|
+
}
|
|
1945
|
+
]
|