-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (62 loc) · 2.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>WCAG 2.2 - What is it?</h1>
<h2>Subtitle</h2>
<div>
<div role="img" aria-labelledby="star_id">
<img src="star.png" alt="4 out of 5 stars" />
<img src="star.png" alt=""/>
<img src="star.png" alt=""/>
<img src="star.png" alt=""/>
<img src="unstar.png" alt=""/>
</div>
<div id="star_id">4 out of 5 stars</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sit asperiores ratione dolore. Laudantium aut, mollitia voluptatibus, quo perspiciatis natus similique animi delectus laboriosam nisi earum quibusdam nobis, quaerat molestiae non doloribus et architecto corrupti officia nam facilis! Facere debitis impedit porro nihil, quisquam sequi placeat distinctio deleniti voluptatum. Facere laboriosam saepe accusantium vero exercitationem laudantium velit alias veritatis similique! Beatae iusto eum sequi assumenda expedita, hic maxime, maiores eius ea numquam nam. Dolores dolore officia laborum ab odit, similique est sunt ea dolorum architecto provident sint cupiditate praesentium quae reprehenderit rem corrupti voluptatem harum aperiam. Temporibus numquam vel nulla?</p>
<p>I smiled at my friend and said
<span aria-label="you" role="img">👉🏾</span>
<span aria-label="rock" role="img">🤘🏾</span>!
</p>
<h1>The second header</h1>
<!-- In case of long description on the same page: longdesc="index.html#desc" -->
<img src="art.png" aria-describedby="p1" longdesc="otherpage.html" />
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by
Jean-Guy Millome, and represents ...</p>
<h3>Equation</h3>
<div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="https://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div>
<h3>A cool video I have</h3>
<video poster="screenshot.jpg" controls>
<source src="somevideo.mp4" srclang="en" type="video/mp4">
<track src="somevideo_subtitles_en.vtt" kind="descriptions" srclang="en" label="English">
<track src="somevideo_subtitles_fr.vtt" kind="descriptions" srclang="fr" label="French">
</video>
<h3>Doughnut Selection</h3>
<form action="/buy-doughnuts" method="post">
<fieldset>
<legend>Pick the doughnut you would like</legend>
<input id="dn-choc" name="flavor" type="radio" value="chocolate">
<label for="dn-choc">Chocolate</label>
<input id="dn-cream" name="flavor" type="radio" value="cream">
<label for="dn-cream">Cream Filled</label>
<input id="dn-raspberry" name="flavor" type="radio" value="raspberry">
<label for="dn-raspberry">Raspberry Filled</label>
</fieldset>
<input type="submit" value="Purchase Your Doughnut">
</form>
</body>
</html>