-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathHTML_PATTERNS.html
More file actions
1261 lines (1079 loc) · 61.3 KB
/
HTML_PATTERNS.html
File metadata and controls
1261 lines (1079 loc) · 61.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Accessible HTML Content Patterns</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Start of #section-project-link -->
<aside id="section-project-link">
<a href="https://github.com/ericwbailey/accessible-html-content-patterns">
<svg aria-labelledby="project-title project-description" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" role="img" style="position: absolute; top: 0; right: 0">
<title id="project-title" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">View project repository on GitHub</title>
<!--[if !IE]> --><desc id="project-description" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">A ribbon banner featuring a silhouette of GitHub's logo, the Octocat.</desc><!-- <![endif]-->
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#000000"/>
<path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/>
<path class="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
</svg>
</a>
</aside>
<!-- End of #section-project-link -->
<!-- Start of #section-table-of-contents -->
<nav id="section-table-of-contents" aria-labelledby="title-table-of-contents">
<h1>Accessible HTML Content Patterns</h1>
<h2 id="title-table-of-contents">Table of Contents</h2>
<ol>
<li><a href="#section-about">About</a></li>
<li><a href="#section-headings">Headings</a></li>
<li><a href="#section-text-level">Text-level</a>
<ol>
<li><a href="#subsection-content">Content</a></li>
<li><a href="#subsection-lists">Lists</a></li>
<li><a href="#subsection-links">Links</a></li>
<li><a href="#subsection-code">Code</a></li>
<li><a href="#subsection-symbols">Symbols</a></li>
<li><a href="#subsection-emoji">Emoji</a></li>
</ol>
</li>
<li><a href="#section-tables">Tables</a></li>
<li><a href="#section-interactive">Interactive</a>
<ol>
<li><a href="#subsection-details">Details</a></li>
<li><a href="#subsection-dialog">Dialog</a></li>
</ol>
</li>
<li><a href="#section-embedded">Embedded</a>
<ol>
<li><a href="#subsection-image">Image</a></li>
<li><a href="#subsection-broken-image">Broken Image</a></li>
<li><a href="#subsection-figure-with-caption">Figure with Caption</a></li>
<li><a href="#subsection-inline-svg">Inline <abbr>SVG</abbr></a></li>
<li><a href="#subsection-picture">Picture</a></li>
<li><a href="#subsection-image-with-srcset-and-sizes">Image with Srcset and Sizes</a></li>
<li><a href="#subsection-iframe">Iframe</a></li>
<li><a href="#subsection-audio">Audio</a></li>
<li><a href="#subsection-video">Video</a></li>
<li><a href="#subsection-object">Object</a></li>
<li><a href="#subsection-canvas">Canvas</a></li>
</ol>
</li>
<li><a href="#section-forms">Forms</a>
<ol>
<li><a href="#subsection-text-input">Text Input</a></li>
<li><a href="#subsection-non-text-input">Non-text Input</a></li>
<li><a href="#subsection-select">Select</a></li>
<li><a href="#subsection-checkboxes-and-radios">Checkboxes and Radio Buttons</a></li>
<li><a href="#subsection-buttons">Buttons</a></li>
<li><a href="#subsection-output">Output</a></li>
<li><a href="#subsection-lockup">Lockup</a></li>
<li><a href="#subsection-states-and-validation">States and Validation</a></li>
<li><a href="#subsection-autocomplete">Autocomplete</a></li>
</ol>
</li>
<li><a href="#section-credit">Credit</a></li>
</ol>
</nav>
<!-- End of #section-table-of-contents -->
<hr />
<!-- Start of #section-about -->
<aside id="section-about" aria-labelledby="title-about">
<h2 id="title-about">About</h2>
<p>
Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code translate="no"><command></code> and <code translate="no"><menu></code> tags.
</p>
<p>
Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
</p>
</aside>
<!-- End of #section-about -->
<hr />
<!-- Start of #main -->
<main id="main" tabindex="-1">
<!-- Start of #section-headings -->
<section id="section-headings" aria-labelledby="title-headings">
<h2 id="title-headings">Headings</h2>
<h1>First Header h1</h1>
<p>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
</p>
<h2>Second header h2</h2>
<p>
"What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.
</p>
<h3>Third header h3</h3>
<p>
Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.
</p>
<h4>Fourth header h4</h4>
<p>
"Oh, God", he thought, "what a strenuous career it is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell!" He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so that he could lift his head better; found where the itch was, and saw that it was covered with lots of little white spots which he didn't know what to make of; and when he tried to feel the place with one of his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder.
</p>
<h5>Fifth header h5</h5>
<p>
He slid back into his former position. "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are always still sitting there eating their breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe that would be the best thing for me.
</p>
<h6>Sixth header h6</h6>
<p>
If I didn't have my parents to think about I'd have given in my notice a long time ago, I'd have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He'd fall right off his desk! And it's a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there's still some hope; once I've got the money together to pay off my parents' debt to him - another five or six years I suppose - that's definitely what I'll do. That's when I'll make the big change. First of all though, I've got to get up, my train leaves at five."
</p>
<h2 id="title-subtitles">Subtitles</h2>
<h2>
Title<br />
<span>Subtitle</span>
</h2>
<header>
<h2>Title</h2>
<p>Subtitle</p>
</header>
<header>
<h2>Title</h2>
<p role="doc-subtitle">Subtitle</p>
</header>
<h2 id="notes-headings">Notes:</h2>
<ul>
<li><small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code translate="no"><h2 class="type-size-medium color-blue-dark">Our services</h2></code> ).</small></li>
<li><small><code translate="no">role="doc-subtitle"</code> is used to alternate title for the work, but still has limited support.</small></li>
</ul>
</section><!-- End of #section-headings -->
<hr />
<!-- Start of #section-text-level -->
<section id="section-text-level" aria-labelledby="title-text-level">
<h2 id="title-text-level">Text-level</h2>
<!-- Start of #subsection-content -->
<div id="subsection-content" aria-labelledby="subtitle-content">
<h3 id="subtitle-content">Content</h3>
<p>
And he <em>looked</em> over at <strong>the alarm clock</strong>, ticking on the <i>chest</i> of <b>drawers</b>. "God in <u>Heaven</u>!" he <s>thought</s>. It was <small>half past six</small> and the <abbr>hands</abbr> were <q>quietly moving forwards</q>, it was even later <cite>than half past</cite>, more <dfn>like quarter to seven</dfn>. Had the <sub>alarm</sub> clock not <sup>rung</sup>? He <time>could</time> see from the <code>bed that it had been set</code> for four <kbd>o'clock</kbd> as it <samp>should</samp> have <var>been</var>; it <mark>certainly</mark> must have rung.
</p>
<blockquote>
<p>
"Yes, mother, yes, thank-you, I'm getting up now."
</p>
<footer>
<cite>Gregor Samsa</cite>
</footer>
</blockquote>
<p>
Yes, but was it <bdi>possible</bdi> to <bdo>quietly</bdo> sleep <ruby>through</ruby> that <rt>furniture-rattling</rt> noise? <rp>True</rp>, he <span>had not slept</span> peacefully, but <del>probably</del> all the more <ins>deeply</ins> because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively.
</p>
<p>
The French phrase, <cite lang="fr" translate="no">C'est le ton qui fait la chanson</cite>, might apply here.
</p>
<h4 id="notes-ins-del">Notes:</h4>
<ul>
<li>
<small><code translate="no"><mark></code>, <code translate="no"><ins></code>, <code translate="no"><del></code>, and <code translate="no"><s></code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
</li>
<li>
<small>Use the <code translate="no">translate</code> attribute to control <a rel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small>
</li>
</ul>
</div>
<!-- End of #subsection-content -->
<!-- Start of #subsection-links -->
<div id="subsection-links" aria-labelledby="subtitle-links">
<h3 id="subtitle-links">Links</h3>
<p>
And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external noopener">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external noopener">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.
</p>
<a href="#">
<h2>Block-level link title</h2>
<p>
He was still hurriedly thinking all this through, unable to decide to get out of the bed, when the clock struck quarter to seven. There was a cautious knock at the door near his head. "Gregor", somebody called - it was his mother - "it's quarter to seven. Didn't you want to go somewhere?
</p>
</a>
</div>
<!-- End of #subsection-links -->
<!-- Start of #subsection-lists -->
<div id="subsection-lists" aria-labelledby="subtitle-lists">
<h3 id="subtitle-lists">Lists</h3>
<h4>Unordered List</h4>
<ul>
<li>Apple</li>
<li>Apricot</li>
<li>Avocado
<ul>
<li>Fuerte</li>
<li>Gwen</li>
<li>Hass</li>
<li>Pinkerton</li>
<li>Reed</li>
</ul>
</li>
<li>Banana
<ol>
<li>Cavendish</li>
<li>Red Dacca</li>
<li>Gros Michel</li>
<li>East African Highland</li>
<li>Bodles Altafort</li>
</ol>
</li>
<li>Bilberry</li>
<li>Blackberry</li>
<li>Blackcurrant</li>
</ul>
<h5 id="notes-lists">Notes:</h5>
<p>
<small>VoiceOver will not <a rel="external noopener" href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">announce unordered lists properly when either the list-style-type is set to none or display is set to inline</a>.</small>
</p>
<h4>Ordered List</h4>
<ol>
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona
<ul>
<li>Phoenix</li>
<li>Tucson</li>
<li>Mesa</li>
<li>Chandler</li>
<li>Glendale</li>
</ul>
</li>
<li>Arkansas</li>
<li>California</li>
<li>Colorado</li>
<li>Connecticut
<ol>
<li>Bridgeport</li>
<li>New Haven</li>
<li>Hartford</li>
<li>Stamford</li>
<li>Waterbury</li>
</ol>
</li>
<li>Delaware </li>
<li>Florida</li>
<li>Georgia</li>
</ol>
<h4>Definition List</h4>
<dl>
<dt>Alternate Character/Glyph</dt>
<dd>
A non-standard (sometimes decorative) variation of a character that comes as an extra option with a font file.
</dd>
<dt>Baseline</dt>
<dd>
The imaginary line on which most letters and other characters sit.
</dd>
<dt>Character</dt>
<dd>
An individual symbol of the full character set that makes up a typeface; may take the form of a letter, number, punctuation mark, etc.
</dd>
<dt>Serif</dt>
<dd>
A short line or stroke attached to or extending from the open ends of a letterform; also refers to the general category of typefaces that have been designed with this feature.
</dd>
<dt>Sans-Serif</dt>
<dd>
Literally “without line”; the general category of typefaces (or an individual typeface) designed without serifs.
</dd>
</dl>
</div>
<!-- End of #subsection-lists -->
<!-- Start of #subsection-code -->
<div id="subsection-code" aria-labelledby="subtitle-code">
<h3 id="subtitle-code">Code</h3>
<code translate="no">
<pre>
sudo ipfw pipe 1 config bw 256KByte/s
sudo ipfw add 1 pipe 1 src-port 3000
</pre>
</code>
<samp translate="no">
<pre>
~/Sites/boilerplate
❦ ☢ ☭ ☂ ♞
$ <kbd>ls -gto</kbd>
total 88
-rw-r--r-- 1 eric staff 6148 Mar 24 11:50 .DS_Store
drwxr-xr-x 9 eric staff 306 Mar 24 13:36 .git/
-rw-rw-r-- 1 eric staff 862 Oct 13 14:38 .gitignore
-rw-r--r-- 1 eric staff 472 Feb 22 20:58 .htmlhintrc
-rw-r--r-- 1 eric staff 1068 Mar 24 10:57 LICENSE
-rw-r--r-- 1 eric staff 4865 Mar 24 13:34 README.md
-rw-r--r-- 1 eric staff 58601 Mar 24 11:50 index.html
</pre>
</samp>
<h4 id="notes-code">Notes:</h4>
<p>
<small>Apply <code translate="no">translate="no"</code> to markup that contains code examples to prevent keywords from being automatically translated.</small>
</p>
</div>
<!-- End of #subsection-code -->
<!-- Start of #subsection-symbols -->
<div id="subsection-symbols" aria-labelledby="subtitle-symbols">
<h3 id="subtitle-symbols">Symbols</h3>
<ul>
<li>+</li>
<li>−</li>
<li>±</li>
<li>÷</li>
<li>×</li>
<li><</li>
<li>≤</li>
<li>></li>
<li>≥</li>
<li>=</li>
<li>≈</li>
<li>≠</li>
</ul>
<h4 id="notes-symbols">Notes:</h4>
<p>
<small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small>
</p>
</div>
<!-- End of #subsection-symbols -->
<!-- Start of #subsection-emoji -->
<div id="subsection-emoji" aria-labelledby="subtitle-emoji">
<h3 id="subtitle-emoji">Emoji</h3>
<ul>
<li>😺</li>
<li>🎩</li>
<li>⛄️</li>
<li>🍺</li>
<li><span role="img" aria-label="A butt.">🍑</span></li>
</ul>
<h4 id="notes-emoji">Notes:</h4>
<ul>
<li>
<small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small>
</li>
<li>
<small>Use <code translate="no">role="img"</code> in conjunction with <code translate="no">aria-label</code> to <a rel="external noopener" href="https://tink.uk/accessible-emoji/">expose an emoji as an image in the accessibility tree</a>, with the label providing author intent.</small>
</li>
</ul>
</div>
<!-- End of #subsection-emoji -->
</section>
<!-- End of #section-text-level -->
<hr />
<!-- Start of #section-tables -->
<section id="section-tables" aria-labelledby="title-tables">
<h2 id="title-tables">Tables</h2>
<table>
<caption>
Academy Awards for Best Picture
<span class="table__summary">Descriptions of the film title, production company(s), and producers for the years 1980-1989.</span>
</caption>
<colgroup>
<col />
<col />
<col span="2" />
</colgroup>
<thead>
<tr>
<th scope="col">Film</th>
<th scope="col">Year</th>
<th scope="col">Production Company(s)</th>
<th scope="col">Producer(s)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ordinary People</th>
<td>1980</td>
<td>Paramount</td>
<td>Ronald L. Schwary</td>
</tr>
<tr>
<th scope="row">Chariots of Fire</th>
<td>1981</td>
<td>Enigma Film Productions</td>
<td>David Puttnam</td>
</tr>
<tr>
<th scope="row">Gandhi</th>
<td>1982</td>
<td>Columbia</td>
<td>Richard Attenborough</td>
</tr>
<tr>
<th scope="row">Terms of Endearment</th>
<td>1983</td>
<td>Paramount</td>
<td>James L. Brooks</td>
</tr>
<tr>
<th scope="row">Amadeus</th>
<td>1984</td>
<td>Orion</td>
<td>Saul Zaentz</td>
</tr>
<tr>
<th scope="row">Out of Africa</th>
<td>1985</td>
<td>Universal, Mirage Enterprises</td>
<td>Sydney Pollack</td>
</tr>
<tr>
<th scope="row">Platoon</th>
<td>1986</td>
<td>Orion, Hemdale</td>
<td>Arnold Kopelson</td>
</tr>
<tr>
<th scope="row">The Last Emperor</th>
<td>1987</td>
<td>Recorded Picture Company, Yanco Films, TAO Films, AAA, Soprofilms</td>
<td>Jeremy Thomas</td>
</tr>
<tr>
<th scope="row">Rain Man</th>
<td>1988</td>
<td>United Artists</td>
<td>Mark Johnson</td>
</tr>
<tr>
<th scope="row">Driving Miss Daisy</th>
<td>1989</td>
<td>Warner Bros.</td>
<td>Richard D. Zanuck, Lili Fini Zanuck</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">For the first six ceremonies, the eligibility period spanned two calendar years.</td>
</tr>
</tfoot>
</table>
<h3 id="notes-tables">Notes:</h3>
<p>
<small>Use <code translate="no">id</code> and <code translate="no">header</code> attributes for tables with complicated markup (colspans, row headers, etc.).</small>
</p>
</section>
<!-- End of #section-tables -->
<hr />
<!-- Start of #section-interactive -->
<section id="section-interactive" aria-labelledby="title-interactive">
<h2 id="title-interactive">Interactive</h2>
<!-- Start of #subsection-details -->
<h3 id="subsection-details">Details</h3>
<details>
<summary>What payment options do you accept?</summary>
<p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
</details>
<h4 id="notes-details">Notes:</h4>
<p>
<small>The <code translate="no">details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small>
</p>
<!-- End of #subsection-details -->
<!-- Start of #subsection-dialog -->
<h3 id="subsection-dialog">Dialog</h3>
<dialog
open
id="dialog">
<h2>This is a dialog title</h2>
<p>This is dialog content.</p>
<button type="button">
Close
</button>
</dialog>
<h4 id="notes-dialog">Notes:</h4>
<p>
<small>The <code translate="no">dialog</code>'s interactivity needs to be controlled with JavaScript.</small>
</p>
<!-- End of #subsection-dialog -->
</section>
<!-- End of #section-interactive -->
<hr />
<!-- Start of #section-embedded -->
<section id="section-embedded" aria-labelledby="title-embedded">
<h2 id="title-embedded">Embedded</h2>
<!-- Start of #subsection-image -->
<h3 id="subsection-image">Image</h3>
<img
src="http://placehold.it/600x400?text=Image+Example"
alt="Image Example" />
<!-- End of #subsection-image -->
<!-- Start of #subsection-broken-image -->
<h3 id="subsection-broken-image">Broken Image</h3>
<img
src="nope"
alt="Broken Image" />
<!-- End of #subsection-broken-image -->
<!-- Start of #subsection-figure-with-caption -->
<h3 id="subsection-figure-with-caption">Figure with Caption</h3>
<figure>
<img
src="http://placehold.it/400x250?text=Figure+Example"
alt="Figure Example" />
<figcaption>
An example figure caption.
</figcaption>
</figure>
<!-- End of #subsection-figure-with-caption -->
<!-- Start of #subsection-inline-svg -->
<h3 id="subsection-inline-svg">Inline SVG</h3>
<figure>
<svg
aria-labelledby="svg-title svg-description"
role="img"
focusable="false"
height="162"
width="168"
viewBox="0 0 28 27"
xmlns="http://www.w3.org/2000/svg">
<title id="svg-title">A crab</title>
<!--[if !IE]> --><desc id="svg-description">A solid black illustration of a crab.</desc><!-- <![endif]-->
<path fill="#000000" d="M28.044,16.791 C26.087,18.748 23.728,18.633 22.257,18.285 C22.405,17.861 22.53,17.441 22.632,17.033 C22.798,17.043 22.961,17.058 23.139,17.058 C25.093,17.058 27.603,16.308 28.96,12.913 C29.075,12.626 28.935,12.3 28.647,12.186 C28.362,12.071 28.034,12.209 27.919,12.497 C26.723,15.487 24.497,16.018 22.852,15.946 C22.905,15.626 22.946,15.317 22.968,15.032 C23.967,14.782 29.374,11.151 28.999,5.999 C28.773,2.892 25.811,-0.282 22.245,0.753 C22.561,0.915 25.731,2.304 24.933,6.958 C24.933,6.958 21.65,5.677 21.27,2.999 C21.27,2.999 18.375,6.958 24.19,11.329 C24.19,11.329 22.142,13.261 19.046,11.12 C18.826,10.911 18.598,10.718 18.36,10.54 L18.36,9 L17.24,9 L17.24,9.869 C16.538,9.541 15.786,10.08 15,10.08 C14.214,10.08 13.462,9.541 12.761,9.869 L12.761,9 L11.641,9 L11.641,10.541 C11.402,10.719 11.173,10.912 10.953,11.121 C7.858,13.262 5.81,11.33 5.81,11.33 C11.624,6.959 8.729,3 8.729,3 C8.349,5.678 5.067,6.959 5.067,6.959 C4.267,2.305 7.437,0.916 7.753,0.754 C4.187,-0.281 1.226,2.893 0.999,6 C0.624,11.152 6.031,14.783 7.03,15.033 C7.053,15.318 7.094,15.627 7.146,15.947 C5.501,16.019 3.275,15.488 2.079,12.498 C1.965,12.211 1.637,12.072 1.351,12.187 C1.064,12.3 0.924,12.626 1.038,12.914 C2.395,16.309 4.906,17.059 6.859,17.059 C7.037,17.059 7.2,17.043 7.366,17.034 C7.468,17.442 7.594,17.862 7.741,18.286 C6.27,18.634 3.911,18.749 1.954,16.792 C1.735,16.573 1.381,16.573 1.162,16.792 C0.943,17.011 0.943,17.364 1.162,17.583 C2.721,19.142 4.511,19.587 6.043,19.587 C6.845,19.587 7.561,19.462 8.151,19.316 C8.233,19.5 8.317,19.681 8.409,19.861 C6.471,20.74 4.358,22.316 4.358,25.029 C4.358,25.338 4.609,25.588 4.917,25.588 C5.227,25.588 5.478,25.338 5.478,25.029 C5.478,22.9 7.272,21.609 8.938,20.863 C9.049,21.045 9.182,21.213 9.332,21.369 C9.434,21.506 9.543,21.639 9.652,21.769 C8.879,22.156 8.108,22.73 7.851,23.576 C7.572,24.502 7.958,25.502 9.001,26.545 C9.11,26.654 9.254,26.709 9.397,26.709 C9.541,26.709 9.683,26.654 9.793,26.545 C10.012,26.326 10.012,25.971 9.793,25.752 C9.064,25.023 8.772,24.4 8.923,23.902 C9.09,23.345 9.783,22.918 10.465,22.629 C11.622,23.666 13.111,24.356 14.997,24.356 C16.883,24.356 18.372,23.667 19.53,22.629 C20.212,22.918 20.904,23.346 21.071,23.902 C21.222,24.4 20.929,25.023 20.201,25.752 C19.982,25.971 19.982,26.326 20.201,26.545 C20.31,26.654 20.454,26.709 20.596,26.709 C20.74,26.709 20.883,26.654 20.992,26.545 C22.036,25.502 22.423,24.502 22.142,23.576 C21.885,22.73 21.114,22.156 20.341,21.769 C20.45,21.638 20.56,21.505 20.661,21.369 C20.81,21.213 20.944,21.045 21.055,20.863 C22.722,21.609 24.515,22.9 24.515,25.029 C24.515,25.338 24.766,25.588 25.076,25.588 C25.386,25.588 25.636,25.338 25.636,25.029 C25.636,22.316 23.523,20.74 21.585,19.861 C21.677,19.681 21.762,19.5 21.843,19.316 C22.434,19.462 23.15,19.587 23.951,19.587 C25.484,19.587 27.273,19.142 28.832,17.583 C29.051,17.364 29.051,17.011 28.832,16.792 C28.617,16.572 28.263,16.572 28.044,16.791 Z" transform="translate(-1)" opacity=".9"/>
</svg>
<figcaption>
<a rel="external noopener" href="https://thenounproject.com/search/?q=crab&i=583446">Crab by Hea Poh Lin</a> from the Noun Project
</figcaption>
</figure>
<h3 id="notes-inline-svg">Notes:</h3>
<ul>
<li>
<small>Be sure to provide values for the <code translate="no">height</code> and <code translate="no">width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small>
</li>
<li>
<a>Different implementations of <abbr>SVG</abbr> have different approaches for being made accessible. Reference these articles by <a rel="external noopener" href="https://css-tricks.com/accessible-svgs/"></a>Heather Migliorisi</a> and <a rel="external noopener" href="https://www.deque.com/blog/creating-accessible-svgs/">Carie Fisher</a>.</small>
</li>
<li>
<small>Add whitespace around the <code translate="no">use</code> element in a <abbr>SVG</abbr> icon system to <a rel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small>
</li>
</ul>
<!-- End of #subsection-inline-svg -->
<!-- Start of #subsection-picture -->
<h3 id="subsection-picture">Picture</h3>
<picture>
<source
media="(min-width: 40em)"
srcset="http://placehold.it/800x450/7ED321/ffffff/?text=1x+Source+w/Breakpoint+Example 1x,
http://placehold.it/800x600/7ED321/ffffff/?text=2x+Source+w/Breakpoint+Example 2x" />
<source
srcset="http://placehold.it/500x250/F5A623/ffffff/?text=1x+Source+Example 1x,
http://placehold.it/500x250/F5A623/ffffff/?text=2x+Source+Example 2x" />
<img
src="http://placehold.it/600x400?text=Img+Fallback"
alt="Picture Element" />
</picture>
<!-- End of #subsection-picture -->
<!-- Start of #subsection-image-with-srcset-and-sizes -->
<h3 id="subsection-image-with-srcset-and-sizes">Image with Srcset and Sizes</h3>
<img
srcset="http://placehold.it/1024x768/7ED321/ffffff/?text=Large 1024w,
http://placehold.it/1024x768/F5A623/ffffff/?text=Medium 640w,
http://placehold.it/320x240/50E3C2/ffffff/?text=Small 320w"
sizes="(min-width: 36em) 50vw, 100vw"
src="http://placehold.it/600x400?text=Img+Fallback"
alt="Image with Srcset and Sizes Example" />
<!-- End of #subsection-image-with-srcset-and-sizes -->
<!-- Start of #subsection-iframe -->
<h3 id="subsection-iframe">Iframe</h3>
<iframe
src="about:blank"
title="Example blank iframe"
name="iframe">
</iframe>
<!-- End of #subsection-iframe -->
<!-- Start of #subsection-audio -->
<h3 id="subsection-audio">Audio</h3>
<audio controls>
<source
src="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3"
type="audio/mp3" />
<source
src="http://www.noiseaddicts.com/samples_1w72b820/4353.ogg"
type="audio/ogg" />
<source
src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav"
type="audio/wav" />
<track
src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav/caption.en.vtt"
label="English"
srclang="en"
kind="captions" />
Your browser does not support the <code translate="no"><audio></code> element.
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
</audio>
<!-- End of #subsection-audio -->
<!-- Start of #subsection-video -->
<h3 id="subsection-video">Video</h3>
<video
controls
poster="http://placehold.it/854x480?text=Video+Poster">
<source
src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
type="video/mp4" />
<source
src="http://clips.vorwaerts-gmbh.de/VfE.webm"
type="video/webm" />
<source
src="http://clips.vorwaerts-gmbh.de/VfE.ogv"
type="video/ogg" />
<track
src="https://archive.org/download/WebmVp8Vorbis/caption.en.vtt"
label="English"
srclang="en"
kind="captions" />
Your browser does not support the <code translate="no"><video></code> element.
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
</video>
<h3 id="notes-video">Notes:</h3>
<p>
<small>Accessibility errors concerning the video's missing audio description should go away once the <code translate="no"><track></code>'s source is linked to a valid caption file.</small>
</p>
<!-- End of #subsection-video -->
<!-- Start of #subsection-object -->
<h3 id="subsection-object">Object</h3>
<object>
<param
name="movie"
value="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&hl=en_GB">
</param>
<param
name="wmode"
value="window">
</param>
<param
name="allowFullScreen"
value="true">
</param>
<param
name="allowscriptaccess"
value="always">
</param>
<embed
src="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&hl=en_GB"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="640"
height="390">
</embed>
Your browser does not support the <code translate="no"><object></code> element.
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
</object>
<!-- End of #subsection-object -->
<!-- Start of #subsection-canvas -->
<h3 id="subsection-canvas">Canvas</h3>
<canvas
id="myCanvas"
width="400"
height="400">
Your browser does not support the <code translate="no"><canvas></code> element.
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
</canvas>
<h3 id="notes-canvas">Notes:</h3>
<p>
<small>Add <code translate="no">role="presentation"</code> to <code translate="no"><track></code> to <a rel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.</small>
</p>
<!-- End of #subsection-canvas -->
</section>
<!-- End of #section-embedded -->
<hr />
<!-- Start of #section-forms -->
<section id="section-forms" aria-labelledby="title-forms">
<h2 id="title-forms">Forms</h2>
<form>
<!-- Start of #subsection-text-input -->
<fieldset id="subsection-text-input">
<legend>
<h3 id="subtitle-text-input">Text Input</h3>
</legend>
<label for="input-text">Text</label>
<input id="input-text" name="text" type="text" />
<label for="input-text-with-placeholder">Text with Placeholder</label>
<input id="input-text-with-placeholder" name="placeholder" placeholder="Placeholder" type="text" />
<label for="input-email">Email</label>
<input id="input-email" name="email" placeholder="name@example.com" autocapitalize="off" autocorrect="off" spellcheck="false" type="email" />
<label for="input-password">Password</label>
<input id="input-password" name="password" autocapitalize="off" autocorrect="off" spellcheck="false" type="password" />
<label for="input-url">URL</label>
<input id="input-url" name="url" autocapitalize="off" spellcheck="false" type="url" />
<label for="input-telephone">Telephone</label>
<input id="input-telephone" name="telephone" autocorrect="off" autocomplete="tel" spellcheck="false" type="tel" />
<label for="input-number" >Number</label>
<input id="input-number" type="text" inputmode="numeric" pattern="[0-9]*" />
<label for="input-search">Search</label>
<input id="input-search" name="search" spellcheck="false" type="search" />
<label for="input-date">Date</label>
<input id="input-date" name="date" type="date" />
<label for="input-datetime-local">Datetime-local</label>
<input id="input-datetime-local" name="datetime-local" type="datetime-local" />
<label for="input-month">Month</label>
<input id="input-month" name="month" type="month" />
<label for="input-time">Time</label>
<input id="input-time" name="time" type="time" />
<label for="input-week">Week</label>
<input id="input-week" name="week" type="week" />
<label for="input-datalist">Datalist</label>
<input list="dog-breeds" id="input-datalist" name="datalist" type="text">
<datalist id="dog-breeds">
<option value="Beagles"></option>
<option value="Boxers"></option>
<option value="Bulldogs"></option>
<option value="Dachshunds"></option>
<option value="French Bulldogs"></option>
<option value="German Shepherds"></option>
<option value="German Shorthaired Pointers"></option>
<option value="Golden Retrievers"></option>
<option value="Labrador Retrievers"></option>
<option value="Poodles"></option>
<option value="Rottweilers"></option>
<option value="Siberian Huskies"></option>
<option value="Yorkshire Terriers"></option>
</datalist>
</input>
<label for="input-textarea">Textarea</label>
<textarea id="input-textarea" name="textarea" dir="auto"></textarea>
<h4 id="notes-text-input">Notes:</h4>
<ul>
<li>
<small>Avoid nesting <code translate="no">input</code> elements inside of <code translate="no">label</code> elements for better support for <a rel="external noopener" href="https://www.nuance.com/dragon.html">Dragon Speech Recognition</a>.</small>
</li>
<li>
<small>Add <code translate="no">autocomplete="new-password"</code> to <code><input></code> elements with a type of <code translate="no">password</code> to <a rel="external noopener" href="https://twitter.com/mmatuzo/status/1189041007117176832">make supporting browsers suggest secure passwords</a>.</small>
</li>
<li>
<small><code><input type="number"></code> has <a rel="external noopener" href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">numerous issues with Dragon Naturally Speaking and NVDA</a>.</small>
</li>
</ul>
</fieldset>
<!-- End of #subsection-text-input -->
<!-- Start of #subsection-non-text-input -->
<fieldset id="subsection-non-text-input">
<legend>
<h3 id="subtitle-non-text-input">Non-text Input</h3>
</legend>
<label for="input-color">Color</label>
<input id="input-color" name="color" type="color" />
<label for="input-file">File Input</label>
<input id="input-file" name="file" type="file" />
<label for="input-range">Range Input</label>
<input id="input-range" name="range" type="range" />
<h4 id="notes-non-text-input">Notes:</h4>
<p>
<small>Some pointers on <a rel="external noopener"
href="https://css-tricks.com/sliding-nightmare-understanding-range-input/">styling the range input</a>.</small>
</p>
</fieldset>
<!-- End of #subsection-non-text-input -->
<!-- Start of #subsection-select -->
<fieldset id="subsection-select">
<legend>
<h3 id="subtitle-select">Select</h3>
</legend>
<label for="input-select" >Select</label>
<select id="input-select" name="select">
<option value="corgis">Corgis</option>
<option value="dachshunds">Dachshunds</option>
<option value="shiba-inus">Shiba Inus</option>
</select>
<label for="input-select-with-optgroup">Select with Optgroup</label>
<select id="input-select-with-optgroup" name="select-with-optgroup">
<optgroup label="Dog Breeds">
<option value="affenpinscher">Affenpinscher</option>
<option value="afghan-hound">Afghan Hound</option>
<option value="afghan-shepherd">Afghan Shepherd</option>
<option value="aidi">Aidi</option>
</optgroup>
<optgroup label="Cat Breeds">
<option value="abyssinian">Abyssinian</option>
<option value="aegean">Aegean</option>
<option value="american-curl">American Curl</option>
<option value="american-bobtail">American Bobtail</option>
</optgroup>
</select>
<label for="input-multiple-select">Multiple Select</label>
<select multiple id="input-multiple-select" name="multiple-select">
<option value="beagle">Beagle</option>
<option value="bernese-mountain-dog">Bernese Mountain Dog</option>
<option value="kuvasz">Kuvasz</option>
<option value="newfoundland">Newfoundland</option>
<option value="old-english-sheepdog">Old English Sheepdog</option>
<option value="rottweiler">Rottweiler</option>
<option value="schnauzer">Schnauzer</option>
</select>
<h4 id="notes-select">Notes:</h4>
<p>
<small>The <code>optgroup</code> element has <a rel="external noopener"
href="https://a11ysupport.io/tests/tech__html__select">mixed support with assistive technology</a>.</small>
</p>
</fieldset>
<!-- End of #subsection-select -->
<!-- Start of #subsection-checkboxes-and-radios -->
<fieldset id="subsection-checkboxes-and-radios">
<legend>
<h3 id="subtitle-checkboxes-and-radio-buttons">Checkboxes and Radio Buttons</h3>
</legend>
<label for="input-checkbox">Checkbox</label>
<input id="input-checkbox" name="checkbox" type="checkbox" />
<label for="input-checked-checkbox">Checked Checkbox</label>
<input checked id="input-checked-checkbox" name="checked-checkbox" type="checkbox" />
<label for="input-indeterminate-checkbox" >Indeterminate Checkbox</label>
<input indeterminate id="input-indeterminate-checkbox" name="indeterminate-checkbox" type="checkbox" />
<fieldset>
<legend>Pizza Toppings</legend>
<label for="ham">Ham</label>
<input id="ham" name="toppings" type="checkbox" />
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="toppings" type="checkbox" />
<label for="mushrooms">Mushrooms</label>
<input id="mushrooms" name="toppings" type="checkbox" />
<label for="olives">Olives</label>
<input id="olives" name="toppings" type="checkbox" />
</fieldset>
<label for="input-radio">Radio Button</label>
<input id="input-radio" name="radio" type="radio" />
<label for="input-checked-radio">Checked Radio Button</label>
<input checked id="input-checked-radio" name="checked-radio" type="radio" />
<fieldset>
<legend>Beverage Size</legend>
<label for="small">Small</label>
<input id="small" name="beverage" type="radio" />
<label for="medium">Medium</label>
<input id="medium" name="beverage" type="radio" />
<label for="large">Large</label>
<input id="large" name="beverage" type="radio" />
<label for="x-large">Extra Large</label>
<input id="x-large" name="beverage" type="radio" />
</fieldset>
</fieldset>
<!-- End of #subsection-checkboxes-and-radios -->
<!-- Start of #subsection-buttons -->
<fieldset id="subsection-buttons">
<legend>
<h3 id="subtitle-buttons">Buttons</h3>
</legend>
<button type="button">
Button
</button>
<button data-button-priority="primary" type="button">
Primary Button
</button>
<button data-button-priority="secondary" type="button">
Secondary Button
</button>
<input name="button" value="Input Button" type="button" />
<input name="enterkeyhint" value="enterkeyhint Button" enterkeyhint="done" type="button" />
<button type="button" aria-label="Icon Button">
☎
</button>
<button type="button">
<svg aria-hidden="true" height="16" width="16" focusable="false" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" fill-rule="evenodd"
d="M8,16 C12.418278,16 16,12.418278 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 Z M8.28116557,3 C8.58745219,3 8.8466139,3.10719871 9.05865848,3.32159934 C9.27070306,3.53599997 9.37672376,3.79398367 9.37672376,4.09555819 C9.37672376,4.3971327 9.26952505,4.6539384 9.05512442,4.86598298 C8.84072379,5.07802756 8.58274009,5.18404826 8.28116557,5.18404826 C7.97959106,5.18404826 7.72278536,5.07802756 7.51074078,4.86598298 C7.2986962,4.6539384 7.1926755,4.3971327 7.1926755,4.09555819 C7.1926755,3.79398367 7.2986962,3.53599997 7.51074078,3.32159934 C7.72278536,3.10719871 7.97959106,3 8.28116557,3 Z M9.270702,6.20185716 L9.270702,11.4393321 C9.270702,11.9058302 9.32489036,12.2038662 9.4332687,12.333449 C9.54164704,12.4630318 9.75368844,12.5372462 10.0693993,12.5560947 L10.0693993,12.8105469 L6.5,12.8105469 L6.5,12.5560947 C6.79215031,12.5466704 7.00890374,12.4618539 7.1502668,12.3016424 C7.24450883,12.1932641 7.29162914,11.9058302 7.29162914,11.4393321 L7.29162914,7.58014004 C7.29162914,7.11364196 7.23744078,6.81560599 7.12906244,6.6860232 C7.0206841,6.5564404 6.81099872,6.48222591 6.5,6.4633775 L6.5,6.20185716 L9.270702,6.20185716 Z" />
</svg>
Button with <abbr>SVG</abbr> icon
</button>
<span role="button" tabindex="0">
Text Button
</span>
<h4 id="notes-buttons">Notes:</h4>
<ul>
<li>
<small>Add <code translate="no">type="button"</code> to <code translate="no"><button></code> elements placed outside of forms to prevent some browsers from attempting to submit form data.</small>
</li>
<li>
<small>Add <code translate="no">pointer-events: none;</code> to <a rel="external noopener" href="https://twitter.com/stowball/status/857707052545613824">inline SVG icons placed in buttons</a>.</small>
</li>
<li>
<small>Add <code translate="no">focusable="false"</code> to SVG inside of a focusable element (links, buttons, etc.) to prevent <a rel="external noopener" href="https://simplyaccessible.com/article/7-solutions-svgs#acc-heading-4">a bug with Internet Explorer</a>.</small>
</li>
<li>
<small>Use <code translate="no">tabindex="0"</code> in conjunction with <code translate="no">role="button"</code> to ensure that the text button is focusable. Use <code translate="no">cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <a rel="external noopener" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
</li>
<li>
<small>Use <code translate="no"><a href="https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute">enterkeyhint</a></code> to manipulate the enter key on a virtual keyboard.</small>
</li>
</ul>
</fieldset>
<!-- End of #subsection-buttons -->
<!-- Start of #subsection-output -->
<fieldset id="subsection-output">
<legend>