-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (56 loc) · 4.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="monetization" content="$ilp.uphold.com/dPdrQinmELyw">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demonstrations</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" media="all" href="css/fonts.css" onload="this.media='all'">
</head>
<body>
<!-- <a class="[ skip-link ] [ button ]" href="#main-content">Skip to content</a> -->
<header class="[ site-head ] [ ender ]">
<div class="wrapper">
<div class="splitter">
<a href="https://tink.uk/" aria-label="Tink - Léonie Watson - On technology, food & life in the digital age" class="site-head__brand">
<svg aria-hidden="true" focusable="false" fill="currentColor" width="2em" height="2em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 648.38 801.79"><path d="M86.45 567.05v54.72h33.1v6.73h-33.1v140.2c0 4.29.78 7.37 2.36 9.29s4.16 2.86 7.76 2.86a22.23 22.23 0 008.79-2.2 25.35 25.35 0 009.46-7.58l5.06 4a55.41 55.41 0 01-18.69 19.47q-11.65 7.25-29.22 7.25a66.09 66.09 0 01-20.09-2.86 35.77 35.77 0 01-14.69-8.62 34 34 0 01-9.45-18.39q-2-11-2-28.55V628.54H0v-6.73h25.66v-39.85a139.22 139.22 0 0032.59-3.54 106.83 106.83 0 0028.2-11.37zM206.33 618.05v147.6q0 14.19 4.21 19.27t14.65 5.06v7.07q-6.75-.33-20.25-.86t-27.7-.49q-14.19 0-28.69.49t-22 .86v-7.09q10.47 0 14.69-5.06t4.21-19.27v-107q0-15.21-4-22.45t-14.85-7.26v-7.09q10.8 1 20.94 1 16.88 0 31.58-1.18a247.64 247.64 0 0027.21-3.6zm-32.42-85.08q17.53 0 27.18 7.25t9.63 21.8q0 14.5-9.63 21.76t-27.18 7.27q-17.57 0-27.19-7.26t-9.62-21.74q0-14.55 9.62-21.8t27.19-7.26zM371.47 617.05c10.34 0 18.51 1.32 24.47 3.9s10.53 5.8 13.69 9.62c3.36 4 5.85 9.45 7.42 16.21s2.36 15.86 2.36 27.35v91.52q0 14.19 4.23 19.27c2.8 3.38 7.71 5.06 14.69 5.06v7.07q-6.76-.33-20.43-.86t-26.85-.49q-14.19 0-27.69.49c-9 .36-15.76.64-20.27.86v-7.09q8.77 0 12.16-5.06t3.38-19.27V655.92a35.3 35.3 0 00-1.69-11.82 13.86 13.86 0 00-5.23-7.12c-2.37-1.56-5.58-2.36-9.62-2.36a24.38 24.38 0 00-16.9 6.76q-7.44 6.76-7.43 17.56v106.71q0 14.19 3.54 19.27t12 5.06v7.07q-6.44-.33-18.92-.86t-25.67-.49q-14.19 0-28.69.49t-22 .86v-7.09q10.47 0 14.69-5.06t4.22-19.27v-107q0-15.21-4.06-22.45t-14.85-7.26v-7.09q10.8 1 20.94 1 16.88 0 31.58-1.18a247.64 247.64 0 0027.23-3.6v24.33a46.58 46.58 0 0121.78-19.41q13.64-5.92 31.92-5.92zM527.81 532.99v232.66c0 9.46 1.4 15.89 4.24 19.27s7.7 5.06 14.68 5.06v7.07q-6.75-.33-20.26-.86t-27.69-.49q-14.19 0-28.71.49t-22 .86v-7.09q10.47 0 14.69-5.06t4.24-19.27V573.5q0-15.18-4.06-22.46t-14.87-7.25v-7.09q10.83 1 21 1 16.88 0 31.57-1.19a259.43 259.43 0 0027.17-3.52zm112.13 88.82v6.73a85.71 85.71 0 00-24.66 11.82 174.33 174.33 0 00-25.33 21.3l-11.82 11.82 2.37-4.4 54.37 103.33c1.8 3.38 3.71 6.71 5.74 9.95a21.87 21.87 0 007.77 7.62v7.07c-3.84-.22-9.62-.5-17.4-.86s-15.58-.49-23.47-.49q-13.5 0-27.18.49t-20.43.86v-7.09q6.76 0 8.94-3c1.47-2 1.3-4.84-.5-8.44l-29.71-62.8q-2.37-4.74-5.4-6.1a17.78 17.78 0 00-7.11-1.35v-6.4a41.73 41.73 0 008.78-.85 14.66 14.66 0 007.44-4.23l26-24.3q11.82-10.8 12-20.45a19.61 19.61 0 00-7.43-16q-7.59-6.42-19.75-7.45v-6.73c6.53.22 13.55.44 21.11.66s14 .33 19.41.33q7.1 0 16.21-.16l17.39-.33q8.26-.21 12.66-.55zM580.28 245.94a1.43 1.43 0 011.26 2.51c-45.53 33.85-353.15 254-549 174.48 0 0-45.8-6.61 104.12-138.69a1.3 1.3 0 00.47-.85c1.23-9.48 20.35-155.61 38.54-207.44a1.39 1.39 0 01.9-.87l214.4-71.76c1.63-.55 28.17-4 26.69-3.18L239.38 97.71a1.42 1.42 0 00-.49 2c6 9.32 41.56 69.49-13.18 117.86a1.4 1.4 0 00-.48 1.05v77.43a1.4 1.4 0 001 1.38c9.39 2.43 85.17 17.28 354.05-51.49z"></path></svg>
</a>
</div>
</div>
</header>
<div class="expander">
<div class="wrapper">
<div class="[ post ] [ flow ] [ flow-space-700 text-500 ]">
<div class="[ post__body ] [ flow ] [ flow-space-700 pad-top-700 pad-bottom-700 ]">
<h1>Demonstrations</h1>
<p>Demonstrations of accessible HTML, CSS, JavaScript, and ARIA design patterns.</p>
<h2>ARIA</h2>
<ul>
<li><a href="aria-controls/index.html">The aria-controls attribute</a></li>
<li><a href="aria-current/index.html">The aria-current attribute</a></li>
</ul>
<h2>HTML demos
<ul>
<li><a href="html-table/index.html">HTML Data table</a></li>
</ul>
<h2>SVG demos</h2>
<ul>
<li><a href="svg-flowchart/index.html">SVG flowchart</a></li>
<li><a href="svg-line-graph/index.html">SVG line graph</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer class="[ site-foot ] [ ender ]">
<div class="wrapper">
<div class="splitter">
<p>© Léonie Watson Carpe diem</p>
</div>
</div>
</footer>
</body>
</html>