-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
327 lines (312 loc) · 14.3 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
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Accessibility Meetup: role=drinks</title>
<link rel="stylesheet" href="drinks.css">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@roledrinks">
<meta name="twitter:creator" content="@roledrinks">
<meta name="twitter:title" content="role=drinks in November 12th">
<meta name="twitter:description" content="What on Earth is a role=drinks? It’s an accessibility meet-up with lightning talks and more than enough time to grab a drink.">
<meta name="twitter:image" content="http://roledrinks.uk/images/twitter-card.png">
<meta name="twitter:image:alt" content="role=drinks, Brighton, November 12th 🍻">
</head>
<body>
<a href="#main">Skip to content</a>
<header>
<div class="✨">
<div>
<h1>
<svg viewBox="0 0 120 120" class="♿️" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role-drinks"></use>
</svg>
role=drinks
</h1>
<p>We make <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">POUR</a> choices 🍻</p>
<p>
What on Earth is a role=drinks?
It’s an accessibility meetup!
The event features lightning talks by accessibility specialist, time to talk to the speakers and fellow attendees, and more than enough time to grab a drink.
</p>
</div>
<svg viewBox="0 0 120 120" class="♿️" aria-label="role=drinks logo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role-drinks"></use>
</svg>
</div>
</header>
<div class="😭" role="alert">
<p><strong>Cancelled:</strong> we had to cancel role=drinks in Brighton; we’re so sorry 😭</p>
</div>
<nav aria-label="Page">
<ul>
<li>
<a href="#blahblahblah">
<span aria-hidden="true">📢</span>
Speakers
</a>
</li>
<li>
<a href="#fellow-drinkers">
<span aria-hidden="true">👥</span>
Attendees
</a>
</li>
<li>
<a href="#thank-you">
<span aria-hidden="true">💰</span>
Sponsors
</a>
</li>
<li>
<a href="#children">
<span aria-hidden="true">💖</span>
Rules
</a>
</li>
</ul>
</nav>
<main id="main">
<section>
<div class="✨">
<h2>Details</h2>
<p>
<strong>So when is it?</strong> 12th of November, 14:00 👌🏾.<br>
<strong>Cool 🙌🏼 When does it end?</strong> 18:00, there usually is some sort of after-party though.<br>
<strong>Where is it 🤔?</strong> <a href="http://www.caxtonarms.co.uk">Caxton Arms</a> in Brighton 🍻
(<a href="https://goo.gl/maps/jzRBr4gBKfF2">location on Google Maps</a>)<br>
<strong>Costs?</strong> We will cover the venue, some snacks, and your first two drinks 👍🏿.
</p>
<p>
Sounds good right?
If you want to come, <a href="https://twitter.com/roledrinks">tell us on Twitter</a> or <a href="mailto:michiel@roledrinks.com">send Michiel an e-mail</a>.
We also have a few people give a so called lightning talk—these are short talks that last anywhere between 5 and 10 minutes.
If all goes as planned, these lightning talks will start around 14:30.
</p>
<p>All links for people go to their Twitter profile.</p>
</div>
</section>
<section id="blahblahblah">
<div class="✨">
<h2>Speakers</h2>
<p>If you’re interested in giving a talk <a href="mailto:hello@roledrinks.com">let us know</a>!</p>
<ul class="👥 📢">
<li>
<a href="https://twitter.com/cfq">
<img src="images/Mehmet.jpg" alt="">
<div>
<span>Mehmet Duran</span>
<i><abbr title="Government Digital Service">GDS</abbr></i>
</div>
</a>
<p>Mehmet will tell us about automated accessibility testing tools.</p>
</li>
<li>
<a href="https://twitter.com/LeonieWatson">
<img src="images/Léonie.jpg" alt="">
<div>
<span>Léonie Watson</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
<p>Léonie gives us a lightening guide to accessibility mechanics.</p>
</li>
<li>
<a href="https://twitter.com/adactio">
<img src="images/Jeremy.jpg" alt="">
<div>
<span>Jeremy Keith</span>
<i><abbr>Clearleft</abbr></i>
</div>
</a>
<p>Jeremy will talk about using progressive enhancement as a strategy for creating robust, resilient websites.</p>
</li>
<li>
<a href="https://twitter.com/matatk">
<img src="images/Matt.jpg" alt="">
<div>
<span>Matthew Tylee Atkinson</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
<p>Matthew has chartered some of our time to talk about charts and how to make them accessible to people with vision impairments.</p>
</li>
<li>
<a href="https://twitter.com/MichielBijl">
<img src="images/Michiel.jpg" alt="">
<div>
<span>Michiel Bijl</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
<p>Michiel describes images in 140 characters.</p>
</li>
</ul>
</div>
</section>
<section id="fellow-drinkers">
<div class="✨">
<h2>Attendees</h2>
<p>If you want to yak about accessibility, #!</p>
<ul class="👥">
<li>
<a href="https://twitter.com/benharris___">
<img src="https://pbs.twimg.com/profile_images/674933155741192192/bXI55taq_400x400.jpg" alt="">
<div>
<span>Ben Harris</span>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/iheni">
<img src="https://pbs.twimg.com/profile_images/441344212748214272/B6TMRWWI_400x400.jpeg" alt="">
<div>
<span>Henny Swan</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/IanPouncey">
<img src="https://pbs.twimg.com/profile_images/827838043/twitter_2010-04-16_400x400.jpg" alt="">
<div>
<span>Ian Pouncey</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/brudil">
<img src="https://pbs.twimg.com/profile_images/493495184307785729/EAZiX1eP_400x400.jpeg" alt="">
<div>
<span>James Canning</span>
<i><abbr>Students’ Union</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/adactio">
<img src="images/Jeremy.jpg" alt="">
<div>
<span>Jeremy Keith</span>
<i><abbr>Clearleft</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/joshr">
<img src="https://pbs.twimg.com/profile_images/616226892497051648/2kexRXay_400x400.jpg" alt="">
<div>
<span>Josh Russell</span>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/LeonieWatson">
<img src="https://pbs.twimg.com/profile_images/1701895352/tink-twitter-avatar_400x400.png" alt="">
<div>
<span>Léonie Watson</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/matatk">
<img src="https://pbs.twimg.com/profile_images/2117631843/joy-square_400x400.png" alt="">
<div>
<span>Matthew Tylee Atkinson</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/cfq">
<img src="images/Mehmet.jpg" alt="">
<div>
<span>Mehmet Duran</span>
<i><abbr title="Government Digital Service">GDS</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/MichielBijl">
<img src="images/Michiel.jpg" alt="">
<div>
<span>Michiel Bijl</span>
<i><abbr title="The Paciello Group">TPG</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/NickColley">
<img src="https://pbs.twimg.com/profile_images/2343633753/icrfu5us12l1mcw46gay_400x400.png" alt="">
<div>
<span>Nick Colley</span>
<i><abbr title="Government Digital Service">GDS</abbr></i>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/paulrobertlloyd">
<img src="https://pbs.twimg.com/profile_images/526405732330004483/Cq5RGV8S_400x400.png" alt="">
<div>
<span>Paul Lloyd</span>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/zaccolley">
<img src="https://pbs.twimg.com/profile_images/720717012406808576/eA6XQ6Xe_400x400.jpg" alt="">
<div>
<span>Zac Colley</span>
<i>Songkick</i>
</div>
</a>
</li>
</ul>
</div>
</section>
<section id="children">
<div class="✨">
<h2>Code of Conduct</h2>
<p>As Léonie says: <q>Play nice with the other children!</q> If you need more information on how to behave, please have a look at <a href="http://www.peace.ca/kindergarten.htm">these basic rules</a>.</p>
<p>Don't hesitate to contact us if something does happen! You can <a href="tel:+447480558828">call us at +44 7480 55 88 28</a>, <a href="https://twitter.com/roledrinks">tweet us at @roledrinks</a>, or <a href="mailto:hello@roledrinks.com">send us an e-mail</a>.
</div>
</section>
<section id="thank-you">
<div class="✨">
<h2>Who paid for all of this?</h2>
<p>We blackmailed some people into paying for your drink:</p>
<ul class="💰">
<li><a href="https://fronteers.nl"><img src="images/fronteers.svg" alt="Fronteers"></a></li>
</ul>
</div>
</section>
</main>
<footer>
<div class="✨">
<p>Part of <a href="http://roledrinks.com">role=drinks</a>.</p>
</div>
</footer>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" preserveAspectRatio="xMidYMid meet" style="display: none">
<defs>
<g id="role-drinks" aria-labelledby="title" aria-describedby="desc" role="img">
<title id="title">role=drinks</title>
<desc id="desc">The universal design icon where the man is holding a bottle and a cocktail and some bubbles are coming from his head.</desc>
<path d="M120 58C119 26.6 93.4 1 62 0 27.3-1.1-1.1 27.3 0 62c1 31.4 26.6 57 58 58 34.7 1.1 63.1-27.3 62-62zm-7.2 5.4c-1.7 26.4-23 47.7-49.4 49.4C31.5 114.8 5 88.3 7 56.4 8.7 30 30 8.7 56.4 7c31.9-2 58.4 24.5 56.4 56.4z"/>
<path d="M57.6 15h-.7c-.1.4-.6.8-1.1.8-.4 0-.8-.2-1-.6-21.7 2.4-38.9 20.4-40 42.4-1.3 26.8 20.6 48.7 47.3 47.3 22.9-1.2 41.5-19.8 42.7-42.7 1.5-26.6-20.4-48.6-47.2-47.2zm2.4 2.3c.1 0 .3.1.3.3 0 .1-.1.3-.3.3s-.3-.1-.3-.3c0-.2.2-.3.3-.3zm-.5 2.4c.3 0 .6.3.6.6s-.3.6-.6.6-.6-.3-.6-.6.3-.6.6-.6zM56.7 17c.5 0 .9.4.9.9s-.4.9-.9.9-.9-.4-.9-.9.4-.9.9-.9zm-4.8 14.7c.4-3.8 3.5-6.8 7.2-7.2 5.2-.5 9.5 3.8 9 9-.4 3.8-3.5 6.8-7.3 7.2-5.1.5-9.4-3.8-8.9-9zm43.4 2.1c.3 0 .6.1.8.4l.3-.2.2.1-.3.3c.1.2.2.3.2.5s-.1.4-.2.6l.4.2c.1.1.2.2.1.3-1.4 1.1-8.4 6.2-8.4 6.2 0 .1-.1.1-.1.2 1.4 0 2.1.6 2.6 1.5.4.9.3 3.5-1.9 4.1-.9.2-1.8.4-2.6.6-.1.3-.1.5-.2.7-.1.2 0 .4.2.5.7.5 2.5 1.7 2.3 2.5-.3 1.1-2.3 1.2-4.6.5-1.7-.5-3.5-1.9-3.4-3-3.2.7-6.3 1.3-9.6 2.2-.9.3-2.5 1.6-2.6 2.6-1.6 13 2.3 27.5 4.7 34.6l.6 1.4c.9 2.2.8 4.7-1.4 5.6-.5.2-1 .3-1.5.3-1.7 0-2.7-1-3.4-2.8l-.5-1.3c-1.8-4.6-2.9-9.1-5.3-16.6-.2-.5-.7-1.7-1.2-1.7h-1c-.5 0-1.3 2-1.4 2.5-2.5 7.6-2.9 11.2-4.8 15.8l-.5 1.4c-.7 1.7-1.7 2.8-3.4 2.8-.5 0-1.1-.1-1.5-.3-2.2-.9-2.5-3.3-1.6-5.6l.6-1.4c2.7-6.9 6-21.9 4.9-34.4-.1-1-1.6-2.4-2.6-2.7-3.8-1.1-7.5-1.8-11.4-2.6l1.1 3.1c.1.3-.1.7-.4.8l-2.8.9-2.8 1.1c-.3.1-.7 0-.8-.4l-4.5-12c-.2-.6-.2-1.2.1-1.7l.4-.8c.2-.4.3-.8.2-1.2 0 0-1.2-4.4-1.5-5.9 0-.1-.3 0-.3-.2-.1-.3-.1-.8-.2-1.1-.2-.2-.3-.2-.3-.2-.1-.1-.2 0-.2-.4l1.3-.5 1.3-.5c.3.3.2.3.1.4 0 .1-.1.1-.1.2.1.3.5.7.6 1 .1.1-.2.2-.1.3.6 1.3 2.6 5.5 2.6 5.5.2.4.5.7.9.8l.8.4c.5.2 1 .7 1.2 1.3l.8 2.3c9.2 1.1 16.8 1.3 24.8 1.3 8.5 0 17-.2 26.5-1.5.1-.4.2-.7.2-.9 0 0-2.2-8.5-2.5-10.2 0-.1.1-.3.3-.2l9.7 3.5c.1-.5.5-1 1.1-1z"/>
</g>
</defs>
</svg>
<script>
(function () {
var alert = document.getElementsByClassName('😭')[0];
setTimeout(function () {
//alert.setAttribute('role', 'alert');
alert.innerHTML = alert.innerHTML + ' ';
}, 1000);
})();
</script>
</body>
</html>