-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
45 lines (43 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Be a11y</title>
</head>
<body>
<div class="wrapper">
<h1>Be accessibility</h1>
<ul class="grid">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 752"><g fill-rule="evenodd"><path d="M553.59 213.21a7.401 7.401 0 0 0-7.398-7.398h-340.39a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h340.39a7.401 7.401 0 0 0 7.398-7.398zm-340.39 7.398v66.598h325.59v-66.598z"/><path d="M553.59 213.21a7.401 7.401 0 0 0-7.398-7.398h-96.195a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h96.195a7.401 7.401 0 0 0 7.398-7.398zm-96.195 7.398v66.598h81.398v-66.598z"/><path d="M457.4 294.61a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598z"/><path d="M457.4 376a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598z"/><path d="M457.4 457.4a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598zM501.8 228.01c-12.254 0-22.199 9.945-22.199 22.199 0 12.254 9.945 22.199 22.199 22.199s22.199-9.945 22.199-22.199c0-12.254-9.945-22.199-22.199-22.199zm0 14.801a7.401 7.401 0 0 1 7.398 7.398 7.401 7.401 0 0 1-7.398 7.399 7.401 7.401 0 0 1-7.398-7.399 7.401 7.401 0 0 1 7.398-7.398z"/><path d="m481.77 259.77-7.398 7.398a7.406 7.406 0 0 0 0 10.465 7.406 7.406 0 0 0 10.465 0l7.398-7.398a7.406 7.406 0 0 0 0-10.465 7.406 7.406 0 0 0-10.465 0zM235.41 331.6h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 413h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399A7.401 7.401 0 0 0 235.41 413zM235.41 494.4h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 353.8H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 435.2H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 516.6H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398z"/></g></svg>
<a href="examples/accessible-accordion/index.html">Accordion</a>
</li>
<li>
<svg viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M553.59 213.21a7.401 7.401 0 0 0-7.398-7.398h-340.39a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h340.39a7.401 7.401 0 0 0 7.398-7.398zm-340.39 7.398v66.598h325.59v-66.598z"/><path d="M553.59 213.21a7.401 7.401 0 0 0-7.398-7.398h-96.195a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h96.195a7.401 7.401 0 0 0 7.398-7.398zm-96.195 7.398v66.598h81.398v-66.598z"/><path d="M457.4 294.61a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598z"/><path d="M457.4 376a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598z"/><path d="M457.4 457.4a7.401 7.401 0 0 0-7.398-7.398h-244.19a7.401 7.401 0 0 0-7.399 7.398v81.398a7.401 7.401 0 0 0 7.399 7.398h244.19a7.401 7.401 0 0 0 7.398-7.398zm-244.19 7.398v66.598H442.6v-66.598zM498.1 253.45l12.816-15.375c2.613-3.137 7.281-3.566 10.418-.945 3.137 2.613 3.566 7.28.945 10.418l-18.5 22.199a7.393 7.393 0 0 1-11.367 0l-18.5-22.2a7.393 7.393 0 0 1 .945-10.417 7.393 7.393 0 0 1 10.418.945l12.816 15.375z"/><path d="M235.41 516.6h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 435.2h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 353.8h51.797a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 494.4H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM235.41 413H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399A7.401 7.401 0 0 0 235.41 413zM235.41 331.6H405.6a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H235.41a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398z"/></g></svg>
<a href="examples/accessible-dropdown/index.html">Dropdown</a>
</li>
<li>
<svg viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M553.59 294.61a7.401 7.401 0 0 0-7.398-7.398h-340.39a7.401 7.401 0 0 0-7.399 7.398V501.8a7.401 7.401 0 0 0 7.399 7.398h340.39a7.401 7.401 0 0 0 7.398-7.398zm-340.39 7.398v192.39h325.59v-192.39z"/><path d="M553.59 250.21a7.401 7.401 0 0 0-7.398-7.398h-340.39a7.401 7.401 0 0 0-7.399 7.398v44.398a7.401 7.401 0 0 0 7.399 7.398h340.39a7.401 7.401 0 0 0 7.398-7.398zm-340.39 7.398v29.598h325.59v-29.598z"/><path d="M235.41 272.41a7.399 7.399 0 1 1-14.797 0 7.399 7.399 0 0 1 14.797 0M265.01 272.41a7.402 7.402 0 0 1-7.402 7.398 7.399 7.399 0 0 1 0-14.796 7.402 7.402 0 0 1 7.402 7.398M294.61 272.41a7.4 7.4 0 0 1-7.402 7.398 7.399 7.399 0 0 1 0-14.796 7.4 7.4 0 0 1 7.402 7.398M464.8 450v-81.398a7.401 7.401 0 0 1 7.398-7.398 7.401 7.401 0 0 1 7.399 7.398v88.797a7.401 7.401 0 0 1-7.399 7.398h-192.39a7.401 7.401 0 0 1-7.398-7.398v-111a7.401 7.401 0 0 1 7.398-7.398h170.19a7.401 7.401 0 0 1 7.399 7.398 7.401 7.401 0 0 1-7.399 7.398h-162.79v96.195h177.59z"/><path d="M468.5 324.2c-14.297 0-25.898 11.602-25.898 25.898 0 14.297 11.602 25.898 25.898 25.898s25.898-11.602 25.898-25.898c0-14.297-11.602-25.898-25.898-25.898zm0 14.801c6.129 0 11.098 4.973 11.098 11.098 0 6.129-4.973 11.098-11.098 11.098-6.129 0-11.098-4.973-11.098-11.098 0-6.129 4.973-11.098 11.098-11.098zM316.8 390.8h118.39a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H316.8a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM339 427.8h73.996a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H339a7.401 7.401 0 0 0-7.398 7.399A7.401 7.401 0 0 0 339 427.8z"/></g></svg>
<a href="examples/accessible-modal/index.html">Modal</a>
</li>
<li>
<svg viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M294.61 279.8H546.2a7.401 7.401 0 0 1 7.398 7.398v214.59a7.401 7.401 0 0 1-7.398 7.399H205.81a7.401 7.401 0 0 1-7.398-7.399v-251.59a7.401 7.401 0 0 1 7.398-7.398h81.398a7.401 7.401 0 0 1 7.398 7.398zm-14.801-22.199h-66.598v236.79h325.59v-199.79h-251.59a7.401 7.401 0 0 1-7.398-7.398z"/><path d="M376 250.21a7.401 7.401 0 0 0-7.398-7.398h-81.398a7.401 7.401 0 0 0-7.399 7.398v37a7.401 7.401 0 0 0 7.399 7.398h81.398A7.401 7.401 0 0 0 376 287.21zm-81.398 7.398v22.2H361.2v-22.2z"/><path d="M457.4 250.21a7.401 7.401 0 0 0-7.398-7.398h-81.398a7.401 7.401 0 0 0-7.399 7.398v37a7.401 7.401 0 0 0 7.399 7.398h81.398a7.401 7.401 0 0 0 7.398-7.398zm-81.398 7.398v22.2H442.6v-22.2zM265.01 353.8H487a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H265.01a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM265.01 383.4H487a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H265.01a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398zM265.01 413h174.42a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H265.01a7.401 7.401 0 0 0-7.398 7.399A7.401 7.401 0 0 0 265.01 413zM265.01 442.6h134.78a7.401 7.401 0 0 0 7.398-7.398 7.401 7.401 0 0 0-7.398-7.399H265.01a7.401 7.401 0 0 0-7.398 7.399 7.401 7.401 0 0 0 7.398 7.398z"/></g></svg>
<a href="examples/accessible-tabs/index.html">Tabs</a>
</li>
<li>
<svg viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M287.2 198.41c-49.008 0-88.797 39.789-88.797 88.797 0 49.008 39.789 88.797 88.797 88.797s88.797-39.789 88.797-88.797c0-49.008-39.789-88.797-88.797-88.797zm0 14.801c40.84 0 73.996 33.156 73.996 73.996 0 40.84-33.156 73.996-73.996 73.996s-73.996-33.156-73.996-73.996c0-40.84 33.156-73.996 73.996-73.996zM464.8 376c-49.008 0-88.797 39.789-88.797 88.797s39.789 88.797 88.797 88.797 88.797-39.789 88.797-88.797S513.808 376 464.8 376zm0 14.801c40.84 0 73.996 33.156 73.996 73.996s-33.156 73.996-73.996 73.996-73.996-33.156-73.996-73.996 33.156-73.996 73.996-73.996z"/><path d="M349.98 228.01a7.405 7.405 0 0 0-6.695 4.246 7.393 7.393 0 0 0 .992 7.867c10.574 12.793 16.93 29.2 16.93 47.086s-6.356 34.29-16.93 47.086a7.401 7.401 0 0 0-.992 7.867 7.41 7.41 0 0 0 6.695 4.247H494.4a59.199 59.199 0 0 0 41.859-17.336 59.2 59.2 0 0 0 17.336-41.86 59.199 59.199 0 0 0-17.336-41.858 59.2 59.2 0 0 0-41.859-17.336H349.98zm14.125 14.801c7.57 13.059 11.898 28.23 11.898 44.398s-4.328 31.336-11.898 44.398h130.29a44.426 44.426 0 0 0 31.398-13 44.426 44.426 0 0 0 13-31.398 44.426 44.426 0 0 0-13-31.398 44.426 44.426 0 0 0-31.398-13zm-165.7 44.051v-.023c.031-4.086 3.352-7.38 7.438-7.356 4.085.023 7.378 3.344 7.363 7.422v.61c.015 4.077-3.277 7.398-7.363 7.421-4.086.024-7.407-3.27-7.438-7.355zM407.73 417.71a7.401 7.401 0 0 0 .992-7.867 7.41 7.41 0 0 0-6.695-4.246h-144.42c-15.703 0-30.762 6.238-41.86 17.336s-17.335 26.156-17.335 41.859 6.238 30.762 17.336 41.859 26.156 17.336 41.859 17.336h144.42a7.405 7.405 0 0 0 6.695-4.246 7.393 7.393 0 0 0-.992-7.868c-10.574-12.793-16.93-29.199-16.93-47.086s6.355-34.289 16.93-47.086zm-19.832 2.688h-130.29a44.426 44.426 0 0 0-31.398 13 44.426 44.426 0 0 0-13 31.397 44.426 44.426 0 0 0 13 31.398 44.426 44.426 0 0 0 31.398 13h130.29c-7.57-13.058-11.898-28.23-11.898-44.397s4.328-31.336 11.898-44.398zm165.7 44.397v.372c-.031 4.085-3.352 7.378-7.438 7.355-4.085-.023-7.378-3.344-7.363-7.422v-.61c-.015-4.077 3.277-7.398 7.363-7.421 4.086-.024 7.407 3.27 7.438 7.355z"/></g></svg>
<a href="examples/accessible-toggle/index.html">Toggle</a>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform:scale(.75)"><path d="M645.2 331.4a42.8 42.8 0 0 0-32.5 14L531 448.7c-5 6.1-16.4 2.1-21.7-1l-73.2-46.1a54.3 54.3 0 0 0-29.4-10.4 41.8 41.8 0 0 0-32 13l-98.2 111c-13.3 14.8 9 34.8 22.2 19.9L397 424c6.5-7 16-1.5 22.8 2.4l73.3 46.3.4.2a56.2 56.2 0 0 0 29.5 7.6c10.1.2 21.2-.8 29.4-10.7l82.4-104.4c6.5-7.8 16-4.2 22.2 1.2l67.3 50.4c15.7 14.2 35.9-11.2 18.5-23.3l-67.2-50.4a49 49 0 0 0-30.4-11.9zM287.3 570h447.4a14.9 14.9 0 0 1 14.9 15 14.9 14.9 0 0 1-15 14.8H287.4a14.9 14.9 0 0 1-14.9-14.9 14.9 14.9 0 0 1 15-14.9zm104.4-357.9a59.8 59.8 0 0 0-59.6 59.7 59.8 59.8 0 0 0 59.6 59.6 59.8 59.8 0 0 0 59.7-59.6 59.8 59.8 0 0 0-59.7-59.7zm0 29.9c16.7 0 29.8 13.1 29.8 29.8s-13.1 29.8-29.8 29.8a29.6 29.6 0 0 1-29.8-29.8 29.6 29.6 0 0 1 29.8-29.8zm417.5 581.5a15 15 0 0 1-14.9 15 15 15 0 0 1 0-30 15 15 0 0 1 15 15zm-566.6 0a15 15 0 0 1-14.9 15 15 15 0 0 1 0-30 15 15 0 0 1 15 15zM511 778.8a59.8 59.8 0 0 0-59.6 59.6c0 32.8 26.8 59.7 59.6 59.7s59.7-26.9 59.7-59.7a59.8 59.8 0 0 0-59.7-59.6zm0 29.8c16.8 0 29.8 13 29.8 29.8s-13 29.8-29.8 29.8-29.8-13-29.8-29.8 13-29.8 29.8-29.8zm343-656.1c-19.9 0-19.4 29.8 0 29.8h59.6c8.5 0 15 6.4 15 15v417.4c0 8.6-6.5 15-15 15H854c-19.5 0-19.7 29.8 0 29.8h59.6a45 45 0 0 0 44.7-44.8V197.2a45 45 0 0 0-44.7-44.7H854zm-745.6 0a45 45 0 0 0-44.7 44.7v417.5a45 45 0 0 0 44.7 44.8h59.7c19.6 0 19.8-29.8 0-29.8h-59.7c-8.5 0-14.9-6.4-14.9-15V197.2c0-8.5 6.4-14.9 15-14.9H168c19.6 0 19.6-29.8 0-29.8h-59.7zm149.1-29.8a45 45 0 0 0-44.7 44.7v477.2a45 45 0 0 0 44.7 44.7h507a45 45 0 0 0 44.7-44.7V167.4a45 45 0 0 0-44.7-44.7h-507zm0 29.8h507c8.5 0 15 6.4 15 15v477c0 8.6-6.5 15-15 15h-507c-8.5 0-14.9-6.4-14.9-15v-477c0-8.6 6.4-15 15-15z"/></svg>
<a href="examples/accessible-slider/index.html">Slider</a>
</li>
</ul>
</div>
<script type="module">
import './src/css/index.css'
</script>
</body>
</html>