-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
651 lines (568 loc) · 30.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accessibility Guidelines Summary</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<p>This document is in beta. Help us by <a href="https://github.com/theappbusiness/accessibility-guidelines">reporting issues via Github</a> or <a href="mailto:a11y@kinandcarta.com">email</a>.</p>
<h1>Accessibility Guidelines Summary</h1>
<p>This document provided by <a href="https://www.kinandcarta.com/">Kin + Carta Create</a> will help you quickly get up to speed with the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a>, and avoid common accessibility mistakes.</p>
<p>It only covers <span class="badge badge--level">Level A</span> and <span class="badge badge--level">Level AA</span> requirements, which are referenced in <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">public sector procurement laws in the UK</a>, <a href="https://en.wikipedia.org/wiki/Section_508_Amendment_to_the_Rehabilitation_Act_of_1973">US <span class="!visually-hidden">public sector procurement laws</span></a>, <a href="http://mandate376.standards.eu/standard/technical-requirements/#9">EU <span class="!visually-hidden">public sector procurement laws</span></a> and <a href="https://www.w3.org/WAI/policies/"><span class="!visually-hidden">public sector procurement laws </span>around the world</a>.
<p>These guidelines apply to both native apps and web-based apps, except for three which are labelled <span class="badge badge--web-only">Web only</span>.</p>
<p>This summary is a simplification. If you're not sure how a guideline applies, check the official <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a>.</p>
</header>
<main>
<section aria-labelledby="principle_1_header">
<h2 id="principle_1_header">1. Easy to perceive</h2>
<p>Your website/app must present information in ways that people can recognise and use, no matter how they consume content (for example if they have low vision, or use assistive technologies like screen readers).</p>
<h3 id="1_1_heading">1.1. Provide text alternatives for images</h3>
<ul aria-labelledby="1_1_heading">
<li class="guideline">
<a href="./guidelines/1.1.1.html">Text alternatives for images</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--content">Content</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Provide an alternative text description for images. Make sure the description conveys the same message or functionality.</div>
</li>
</ul>
<h3 id="1_2_heading">1.2. Provide alternatives for audio content, videos and presentations</h3>
<ul aria-labelledby="1_2_heading">
<li class="guideline">
<a href="./guidelines/1.2.1-audio-only.html">Transcript <span class="!font-weight-400">for pre-recorded audio-only content</span></a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--content">Content</li>
</ul>
<div>For audio content that has no video (like a podcast), provide a transcript.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.2.2.html">Captions <span class="!font-weight-400">for pre-recorded videos</span></a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--content">Content</li>
</ul>
<div>Provide captions for videos that are pre-recorded.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.2.3.html">Text or audio description <span class="!font-weight-400">for pre-recorded videos</span></a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--content">Content</li>
</ul>
<div>For videos that are pre-recorded, provide an equivalent text description, or audio description of what happens on screen.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.2.4.html">Captions <span class="!font-weight-400">for live videos and presentations</span></a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--content">Content</li>
</ul>
<div>Provide captions for videos and presentations that are performed live.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.2.5.html">Audio description <span class="!font-weight-400">for pre-recorded videos</span></a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--content">Content</li>
</ul>
<div>For videos that are pre-recorded, provide audio description of what happens on screen, even if you've already provided a text description.</div>
</li>
</ul>
<h3 id="1_3_heading">1.3. Create content that can be presented in different ways</h3>
<ul aria-labelledby="1_3_heading">
<li class="guideline">
<a href="./guidelines/1.3.1.html">Information and relationships</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that information and relationships that are conveyed visually (like distinct sections within a page, or a label next to a checkbox) are also identified in code.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.3.2.html">Order of elements in code</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that elements appear in a logical reading order in code, so that they are presented in a meaningful order to screen reader users.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.3.3.html">Instructions don't rely on sensory characteristics</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If you give tips or instructions, do not assume that users can perceive colour, size, shape, sound or the location of elements on screen.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.3.4.html">Orientation</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure a page's view is not locked to either portrait or landscape mode, unless this is essential.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.3.5.html">Purpose of text fields</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--code">Code</li>
</ul>
<div>If a text input field collects information about the user, identify its specific purpose in code (for example email, password or given name).</div>
</li>
</ul>
<h3 id="1_4_heading">1.4. Make content easy for people to see and hear</h3>
<ul aria-labelledby="1_4_heading">
<li class="guideline">
<a href="./guidelines/1.4.1.html">Use of colour</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Do not use colour as the only way to convey any piece of information.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.2.html">Audio control</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If any audio content plays automatically for more than three seconds, give people a way to stop it.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.3.html">Text contrast</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Make sure that text has enough contrast against the background colour.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.11.html">Non-text contrast</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Make sure that visual information that identifies important graphics, interactive controls and their state has enough contrast against adjacent colours.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.4.html">Resize text</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure it is possible to complete all tasks when text is resized up to 200%.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.10.html">Reflow</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure users can access all information and functionality on a screen that's as wide as on the iPhone5, without needing to scroll in both directions.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.5.html">Images of text</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Use real text rather than images of text.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.12.html">Text spacing</a>
<ul class="badges">
<span class="badge badge--web-only">Web only</span>
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Ensure that no information or functionality gets lost if users increase the space between lines, paragraphs, letters and words.</div>
</li>
<li class="guideline">
<a href="./guidelines/1.4.13.html">Extra content on hover or focus</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>If content (like a tooltip) appears when users hover over an element with their mouse (or tab to it with their keyboard), it must be easy to dismiss, easy to reach and remain visible.</div>
</li>
</ul>
</section>
<section aria-labelledby="principle_2_header">
<h2 id="principle_2_header">2. Easy to operate</h2>
<p>Your website/app must be easy to navigate and use, no matter how someone interacts with it.</p>
<p>For example people who do not use a mouse may use their voice, or press the 'Tab' key to move their keyboard's focus to interactive controls.</p>
<h3 id="2_1_heading">2.1. Make all functionality work with a keyboard</h3>
<ul aria-labelledby="2_1_heading">
<li class="guideline">
<a href="./guidelines/2.1.1.html">Keyboard</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure every task can be completed using just a keyboard.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.1.2.html">No keyboard trap</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that keyboard-only users do not get trapped within any element.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.1.4.html">Character key shortcuts</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If you've added custom keyboard shortcuts, provide a way to switch off or remap these shortcuts.</div>
</li>
</ul>
<h3 id="2_2_heading">2.2. Give people enough time to read and use content</h3>
<ul aria-labelledby="2_2_heading">
<li class="guideline">
<a href="./guidelines/2.2.1.html">Timing adjustable</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If there is any time limit (like a session timeout), give people an easy way to extend it.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.2.2.html">Visual distractions</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Do not show anything that automatically blinks, scrolls, animates or updates frequently if it lasts more than 5 seconds. Or give people a way to stop it.</div>
</li>
</ul>
<h3 id="2_3_heading">2.3. Make sure it won't trigger seizures</h3>
<ul aria-labelledby="2_3_heading">
<li class="guideline">
<a href="./guidelines/2.3.1.html">Flashes</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--content">Content</li>
</ul>
<div>Do not show anything that flashes more than three times a second.</div>
</li>
</ul>
<h3 id="2_4_heading">2.4. Help people navigate and find content</h3>
<ul aria-labelledby="2_4_heading">
<li class="guideline">
<a href="./guidelines/2.4.1.html">Skip to main content</a>
<ul class="badges">
<li class="badge badge--web-only">Web only</li>
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Give keyboard and screen reader users a way to go directly to the page's main content.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.2.html">Page title</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Give every page a unique and helpful title that indicates the purpose of the page.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.3.html">Focus order</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that interactive controls receive focus in an order that makes sense, when users navigate through them with the keyboard.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.4.html">Link purpose</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure the purpose of every link is clear from the link text alone, or together with associated content (if screen readers recognise the association).</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.5.html">Multiple ways to find a page</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Give people different ways of finding each page (like searching or browsing links), unless the page is a step in a process.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.6.html">Headings and labels</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Headings and form labels should help people find content and complete tasks.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.4.7.html">Focus visible</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that keyboard-only users can clearly see which interactive control is focused when they tab through them.</div>
</li>
</ul>
<h3 id="2_5_heading">2.5. Make it work with other input methods beyond keyboard</h3>
<ul aria-labelledby="2_5_heading">
<li class="guideline">
<a href="./guidelines/2.5.1.html">Complex gestures</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Do not require complex gestures or using more than one finger to do things.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.5.2.html">Touch or click cancellation</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure that custom buttons or links do not activate as soon as they are touched, so that users can slide their finger or mouse away to cancel the action.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.5.3.html">Label in name</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>When an interactive control has a name on screen, make sure that assistive technologies (like Voice Control) know it by the same name (or a name that includes the name on screen).</div>
</li>
<li class="guideline">
<a href="./guidelines/2.5.4.html">Device motion</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>If a feature uses the device's motion (like shaking or tilting), make sure that responses to these motions can be turned off, and that the feature can be used in another way.</div>
</li>
</ul>
<h3 id="2_6_heading">2.6. Make it work in touchscreens</h3>
<ul aria-labelledby="2_6_heading">
<li class="guideline">
<a href="./guidelines/2.6.1.html">Touch Target Size and Spacing</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
<li class="badge badge--guidance">Guidance</li>
</ul>
<div>Make sure that touch targets are big enough and have enough distance from each other.</div>
</li>
<li class="guideline">
<a href="./guidelines/2.6.2.html">Touchscreen gestures</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
<li class="badge badge--guidance">Guidance</li>
</ul>
<div>Gestures made on a touchscreen should be made as easy as possible, without forcing the users to commit to an action.</div>
</li>
</ul>
</section>
<section aria-labelledby="principle_3_heading">
<h2 id="principle_3_heading">3. Easy to understand</h2>
<p>Your website/app must make it easy for people to understand information and how to complete tasks.</p>
<h3 id="3_1_heading">3.1. Make text easy to understand</h3>
<ul aria-labelledby="3_1_heading">
<li class="guideline">
<a href="./guidelines/3.1.1.html">Language of page</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--content">Content</li>
<li class="badge badge--code">Code</li>
</ul>
<div>In code, identify the language that the content of the page is written in (English for example).</div>
</li>
<li class="guideline">
<a href="./guidelines/3.1.2.html">Language of parts</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--content">Content</li>
<li class="badge badge--code">Code</li>
</ul>
<div>If the page has content in more than one language (for example, if a page in English has a button labelled in Welsh), identify the language of each part in code.</div>
</li>
</ul>
<h3 id="3_2_heading">3.2. Make things appear and behave in consistent, predictable ways</h3>
<ul aria-labelledby="3_2_heading">
<li class="guideline">
<a href="./guidelines/3.2.1.html">Changes on focus</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Just navigating to an interactive control with the keyboard shouldn't trigger any action, and shouldn't move the keyboard focus somewhere else.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.2.2.html">Changes on input</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Just changing the state of a form input (like a radio button) must not cause anything surprising to happen, like submitting a form, significantly changing the content on the page, or moving the keyboard focus.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.2.3.html">Consistent navigation</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>Make sure that navigation controls that appear on multiple pages (like links in a header) are consistent across pages.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.2.4.html">Consistent feature names</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If a user interface component exists on multiple pages, make sure that the way it looks and the way it is named is consistent across pages.</div>
</li>
</ul>
<h3 id="3_3_heading">3.3. Help people avoid and correct mistakes</h3>
<ul aria-labelledby="3_3_heading">
<li class="guideline">
<a href="./guidelines/3.3.1.html">Error identification</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>When someone makes an error while filling in a form, describe the error with text and clearly identify where the error is.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.3.2.html">Form labels and instructions</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Provide labels to make it clear how users should fill in a form, and optionally provide extra hints to help them avoid errors.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.3.3.html">Error suggestions</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>When someone makes an error while filling in a form, give them suggestions on how to correct it.</div>
</li>
<li class="guideline">
<a href="./guidelines/3.3.4.html">Error prevention (legal, financial, data)</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
</ul>
<div>If users are making a legal commitment, a financial transaction or updating personal data, give them a way to review and check that the information they've entered before submitting it.</div>
</li>
</ul>
</section>
<section aria-labelledby="principle_4_heading">
<h2 id="principle_4_heading">4. Robust and compatible</h2>
<p>Your website/app must work with different web browsers and/or assistive technologies.</p>
<ul aria-labelledby="principle_4_heading">
<li class="guideline">
<a href="./guidelines/4.1.1.html">Valid HTML</a>
<ul class="badges">
<li class="badge badge--web-only">Web only</li>
<li class="badge badge--level">Level A</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure the HTML does not contain markup errors that are known to cause conflicts with assistive technologies (such as incorrect nesting of elements, or duplicate <code>id</code>s).</div>
</li>
<li class="guideline">
<a href="./guidelines/4.1.2.html">Name, Role and State of interactive components</a>
<ul class="badges">
<li class="badge badge--level">Level A</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>The code should enable assistive technologies to understand the name, role and state of every user interface component.</div>
</li>
<li class="guideline">
<a href="./guidelines/4.1.3.html">Status messages</a>
<ul class="badges">
<li class="badge badge--level">Level AA</li>
<li class="badge badge--design">Design</li>
<li class="badge badge--code">Code</li>
</ul>
<div>Make sure status messages are identified in code, so that assistive technologies can convey them to users.</div>
</li>
</ul>
</section>
</main>
<footer>
<h2 id="contributors_list">Key contributors</h2>
<ul aria-describedby="contributors_list">
<li>
<a href="https://www.linkedin.com/in/jfhector/">Jean-Francois Hector</a>
</li>
<li>
<a href="https://www.linkedin.com/in/kanecheshire/">Kane Cheshire</a>
</li>
<li>
<a href="https://www.linkedin.com/in/robert-kinder-40175411a/">Robert Kinder</a>
</li>
<li>
<a href="https://www.linkedin.com/in/georgi-eftimov-b079095b/">Georgi Eftimov</a>
</li>
<li>
<a href="https://www.linkedin.com/in/talia-craiu/">Talia Craiu</a>
</li>
<li>
<a>Jacek Kulinski</a>
</li>
</ul>
<h2 id="sources_list">Main sources</h2>
<ul aria-describedby="sources_list">
<li>
<a href="https://www.w3.org/TR/WCAG21/">W3C Web Content Accessibility Guidelines</a>
</li>
<li>
<a href="https://github.com/alphagov/wcag-primer">Government Digital Service</a>
</li>
<li>
<a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile">BBC</a>
</li>
</ul>
<h2 id="sources_list">Document version</h2>
<p>v0.8.0</p>
</footer>
</body>
</html>