-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
346 lines (329 loc) · 18.8 KB
/
index.html
File metadata and controls
346 lines (329 loc) · 18.8 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
<!Doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Take the email #a11y survey to help us understand how you use email.">
<meta property="og:url" content="http://www.emailforall.co.uk" />
<meta property="og:title" content="Email for all - Action Rocket & Beyond the envelope" />
<meta property="og:description" content="The importance of email accessiblity" />
<meta property="og:image" content="https://arcdn.net/ActionRocket/email-for-all/website/html/EmailForAll.jpg" />
<link rel="canonical" href="https://www.emailforall.co.uk" />
<link rel="icon" type="image/x-icon" href="https://arcdn.net/ActionRocket/email-for-all/favicons/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title>Email for all</title>
<style>
body {font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;}
.wrapper {width: 100%;}
.content {margin: 0 auto; max-width: 1000px;}
h1 {font-size: 3rem; color: #cc0033;margin: 0;}
h2 {color: #000;font-size: 2rem;}
main {margin: 1.25rem;}
footer {margin: 1.25rem;}
.section h2 {color: #cc0033; margin-bottom: 0; font-size: 1.5rem;}
p {margin: 0;}
h3 {padding-top: 60px; margin: 0;}
.subhead {font-size:1.1rem; color: #cc0033;margin:0;font-weight: 400;}
.tagline {color: #cc0033;margin:1.5rem 0;font-weight: 700;font-size: 1.15rem;}
hr {background-color: #cc0033; border: solid 1px #cc0033; width: 6.25rem; margin: 1.5rem;}
.example {display: inline-block; margin: 1.25rem; width: 20rem; vertical-align: top;}
span.textLink:hover {padding-bottom:2px !important; border-bottom:1px dotted #ee0000 !important;}
.intro {padding: 0.5rem 1.25rem 2rem;}
.intro p, footer p {text-align: left; margin: 1.5rem 0;}
.intro button, footer button {border: none; background-color: #cc0033; height: 3rem;width: 12rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;}
.a11ylink {color: inherit;text-decoration: none; border-bottom: 1px solid; padding-bottom: 1px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<header>
<div align="center">
<img src="https://arcdn.net/ActionRocket/email-for-all/website/html/images/logo.png" style="width: 75px; height: 70px;" alt="Email for all logo.">
<h1>Email for All</h1>
<p class="subhead">ActionRocket & Beyond the Envelope™</p>
<hr>
<p class="tagline">Email accessibility made real</p>
</div>
<div align="center" class="intro">
<h2>Take our Accessibility Survey</h2>
<p> <a href="https://actionrocket.co/" class="a11ylink">ActionRocket</a> & <a href="https://beyondtheenvelope.co.uk/" class="a11ylink">Beyond the Envelope™</a> have come together in their shared passion for and commitment to accessibility, with the aim of making it real for recipients.</p>
<p>We’ve created a short survey to help us understand the value of the accessibility implementations we make. We aim to replace what we think will improve the recipient experience with what will actually improve the recipient experience when it comes to implementing accessibility in email.</p>
<a href="https://actionrocket.typeform.com/to/sv8ntzlY"><button>Take our survey</button></a>
</div>
</header>
<main>
<div class="section">
<h2>Section 2 - For reference</h2>
<h3 id="q8">Question 8</h3>
<p>Which of these paragraphs, in their respective font families, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="font-family: 'Roboto';">An elephant slept in his bunk,<br>
And in slumber his chest rose and sunk.<br>
But he snored — how he snored!<br>
All the other beasts roared,<br>
So his wife tied a knot in his trunk.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="font-family: 'Dancing Script';">There was an old man with a beard,<br>
Who said, “It is just as I feared!<br>Two owls and a hen,<br>Four larks and a wren,<br>Have all built their nests in my beard!”</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="font-family: 'Roboto slab';">A creature of charm is the gerbil<br>Its diet’s exclusively herbal;<br>It grazes all day<br>On bunches of hay<br>Passing gas with an elegant burble.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="font-family: 'Roboto mono';">A circus performer named Brian<br>Once smiled as he rode on a lion.<br>They came back from the ride<br>But with Brian inside,<br>And the smile on the face of the lion.</p>
</div>
</div>
<h3 id="q9">Question 9</h3>
<p>Which of these paragraphs, in their respective font sizes, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="font-size: 14px;">An elephant slept in his bunk,<br>
And in slumber his chest rose and sunk.<br>
But he snored — how he snored!<br>
All the other beasts roared,<br>
So his wife tied a knot in his trunk.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="font-size: 16px;">There was an old man with a beard,<br>
Who said, “It is just as I feared!<br>Two owls and a hen,<br>Four larks and a wren,<br>Have all built their nests in my beard!”</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="font-size: 12px;">A creature of charm is the gerbil<br>Its diet’s exclusively herbal;<br>It grazes all day<br>On bunches of hay<br>Passing gas with an elegant burble.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="font-size: 10px;">A circus performer named Brian<br>Once smiled as he rode on a lion.<br>They came back from the ride<br>But with Brian inside,<br>And the smile on the face of the lion.</p>
</div>
</div>
<h3 id="q10">Question 10</h3>
<p>Which of these paragraphs, in their respective font weights, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="font-weight: 400;">An elephant slept in his bunk,<br>
And in slumber his chest rose and sunk.<br>
But he snored — how he snored!<br>
All the other beasts roared,<br>
So his wife tied a knot in his trunk.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="font-weight: 200;">There was an old man with a beard,<br>
Who said, “It is just as I feared!<br>Two owls and a hen,<br>Four larks and a wren,<br>Have all built their nests in my beard!”</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="font-weight: 700;">A creature of charm is the gerbil<br>Its diet’s exclusively herbal;<br>It grazes all day<br>On bunches of hay<br>Passing gas with an elegant burble.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="font-weight: 900;">A circus performer named Brian<br>Once smiled as he rode on a lion.<br>They came back from the ride<br>But with Brian inside,<br>And the smile on the face of the lion.</p>
</div>
</div>
<h3 id="q11">Question 11</h3>
<p>Which of these paragraphs, in their respective alignments, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="text-align: right;">The original. The timeless. The spiced hammiest of all SPAM® varieties. This is the taste that started it all back in 1937. Like a true original, SPAM® Classic is the variety that has captured hearts and taste buds by consistently bringing deliciousness and creativity to a wide range of meals.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="text-align: left;">The original. The timeless. The spiced hammiest of all SPAM® varieties. This is the taste that started it all back in 1937. Like a true original, SPAM® Classic is the variety that has captured hearts and taste buds by consistently bringing deliciousness and creativity to a wide range of meals.</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="text-align: center;">The original. The timeless. The spiced hammiest of all SPAM® varieties. This is the taste that started it all back in 1937. Like a true original, SPAM® Classic is the variety that has captured hearts and taste buds by consistently bringing deliciousness and creativity to a wide range of meals.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="text-align:justify;">The original. The timeless. The spiced hammiest of all SPAM® varieties. This is the taste that started it all back in 1937. Like a true original, SPAM® Classic is the variety that has captured hearts and taste buds by consistently bringing deliciousness and creativity to a wide range of meals.</p>
</div>
</div>
<h3 id="q12">Question 12</h3>
<p>Which of these paragraphs, in their respective foreground and background colours, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="color: #fff; background-color: #FD8A10; padding: 10px;">An elephant slept in his bunk,<br>
And in slumber his chest rose and sunk.<br>
But he snored — how he snored!<br>
All the other beasts roared,<br>
So his wife tied a knot in his trunk.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="color: #fff; background-color: #B1610B; padding: 10px;">There was an old man with a beard,<br>
Who said, “It is just as I feared!<br>Two owls and a hen,<br>Four larks and a wren,<br>Have all built their nests in my beard!”</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="color: #fff; background-color: #864908; padding: 10px;">A creature of charm is the gerbil<br>Its diet’s exclusively herbal;<br>It grazes all day<br>On bunches of hay<br>Passing gas with an elegant burble.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="color: #fff; background-color: #ffb400; padding: 10px;">A circus performer named Brian<br>Once smiled as he rode on a lion.<br>They came back from the ride<br>But with Brian inside,<br>And the smile on the face of the lion.</p>
</div>
</div>
<h3 id="q13">Question 13</h3>
<p>Which of these paragraphs, with their respective line spacing, can you read easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="line-height: 1;">An elephant slept in his bunk,<br>
And in slumber his chest rose and sunk.<br>
But he snored — how he snored!<br>
All the other beasts roared,<br>
So his wife tied a knot in his trunk.</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="line-height: 1.5;">There was an old man with a beard,<br>
Who said, “It is just as I feared!<br>Two owls and a hen,<br>Four larks and a wren,<br>Have all built their nests in my beard!”</p>
</div>
<div class="example">
<p><strong>C</strong></p>
<p style="line-height: 1.2;">A creature of charm is the gerbil<br>Its diet’s exclusively herbal;<br>It grazes all day<br>On bunches of hay<br>Passing gas with an elegant burble.</p>
</div>
<div class="example">
<p><strong>D</strong></p>
<p style="line-height: 2;">A circus performer named Brian<br>Once smiled as he rode on a lion.<br>They came back from the ride<br>But with Brian inside,<br>And the smile on the face of the lion.</p>
</div>
</div>
<h3 id="q14">Question 14</h3>
<p>Which of these, the link or the button, can you see more easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="padding: 10px;text-decoration: underline;">I'm a link</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width: 12rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;"><p>I'm a link</p></button>
</div>
</div>
<h3 id="q15">Question 15</h3>
<p>Which of these, the link or the button, can you select more easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="padding: 10px;"><a href="#q8" style="padding: 10px;text-decoration: underline;color:inherit;">I'm a link</a></p>
</div>
<div class="example">
<p><strong>B</strong></p>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width: 12rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;"><p>I'm a link</p></button>
</div>
</div>
<h3 id="q16">Question 16</h3>
<p>Which of these links, in their respective colours, are easier to identify as links?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p>For three days and nights the internet was out, With intense and sleepless boredom I did bout, An old book I did <a href="#q9" style="text-decoration: underline;color:inherit;">spot</a>, Many words I knew not, Sadly, I was a dictionary without</p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p>For three days and nights the internet was out, With intense and sleepless boredom I did bout, An old book I did <a href="#q9" style="text-decoration: underline;color:blue;">spot</a>, Many words I knew not, Sadly, I was a dictionary without</p>
</div>
</div>
<h3 id="q17">Question 17</h3>
<p>Of these animations, which ones distract you from their content, based on their speed?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<img src="https://arcdn.net/ActionRocket/email-for-all/website/html/images/arrows-1.gif" width="240" height="240" alt="Arrows animation A">
</div>
<div class="example">
<p><strong>B</strong></p>
<img src="https://arcdn.net/ActionRocket/email-for-all/website/html/images/arrows-001.gif" width="240" height="240" alt="Arrows animation b">
</div>
<div class="example">
<p><strong>C</strong></p>
<img src="https://arcdn.net/ActionRocket/email-for-all/website/html/images/arrows-05.gif" width="240" height="240" alt="Arrows animation c">
</div>
<div class="example">
<p><strong>D</strong></p>
<img src="https://arcdn.net/ActionRocket/email-for-all/website/html/images/arrows-005.gif" width="240" height="240" alt="Arrows animation d">
</div>
</div>
<h3 id="q18">Question 18</h3>
<p>Which of these layouts are the easiest to understand?</p>
<div class="wrapper">
<div class="example" align="center">
<p align="left"><strong>A</strong></p>
<div>
<img src="https://placebear.com/250/125" style="width: 18rem;" alt="Bear!!">
<h4 style="text-align: center; margin: 0.8rem 0;">Heading</h4>
<p style="text-align: left; margin: 0.8rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, aliquam. Culpa ad debitis similique numquam voluptatem quibusdam, tempora id. Odio, ad, accusamus! Natus odio magni, eos sit magnam, voluptas error.</p>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width: 12rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5; margin-top: 2rem;"><p>Link</p></button></div>
</div>
<div class="example">
<p><strong>B</strong></p>
<div>
<div style="display: inline-block;">
<img src="https://placebear.com/125/200" style="width: 9rem;" alt="Swimming bear."></div>
<div style="display: inline-block; vertical-align: top" align="center">
<h4 style="text-align: center; margin: 0;">Heading</h4>
<p style="text-align: left; margin: 0.8rem;">Lorem ipsum dolor<br>sit amet consect<br> adipisicing elit.<br> Amet possimus.</p>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width:6rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;"><p>Link</p></button></div></div>
</div>
<div class="example" >
<p><strong>C</strong></p>
<div>
<div style="display: inline-block; vertical-align: top" align="center">
<h4 style="text-align: center; margin: 0;">Heading</h4>
<p style="text-align: left; margin: 0.8rem;">Lorem ipsum dolor<br>sit amet consect<br> adipisicing elit.<br> Amet possimus.</p>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width:6rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;"><p>Link</p></button></div>
<div style="display: inline-block;">
<img src="https://placebear.com/125/200" style="width: 9rem;" alt="Same bear swimming?"></div></div>
</div>
<div class="example" align="center">
<p align="left"><strong>D</strong></p>
<div>
<div style="display: inline-block;">
<img src="https://placebear.com/125/200" style="width: 9rem;" alt="Swimming bear."><h4 style="text-align: center; margin: 0;">Heading</h4></div>
<div style="display: inline-block; vertical-align: top" align="center">
<p style="text-align: left; margin: 0.8rem;">Lorem ipsum dolor<br>sit amet consect<br> adipisicing elit.<br> Amet possimus.</p></div>
<button style="border: 2px solid #000; border-radius: 5px;text-align: center; height: 3rem;width:12rem; font-size:1rem; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 1.5;"><p>Link</p></button></div>
</div>
</div>
<h3 id="q19">Question 19</h3>
<p>Which of these links, can you read more easily?</p>
<div class="wrapper">
<div class="example">
<p><strong>A</strong></p>
<p style="padding: 10px;"><a href="#q12" style="padding: 10px;text-decoration: underline;color:inherit;text-decoration-color:#ee0000;">Text link</a></p>
</div>
<div class="example">
<p><strong>B</strong></p>
<p style="padding: 10px;"><a href="q12" style="color:#000000; text-decoration:none;"><span class="textLink" style="padding-bottom:2px; border-bottom:1px solid #ee0000;">Text Link</span></a></p>
</div>
</div>
</div>
</main>
<footer>
<div align="center">
<h2>Accessiblity resources</h2>
<p>Check out our library of helpful accessibility resources. Ranging from Q&A's with leading industry experts, to tips from the Action Rocket design and code teams.</p>
<a href="https://www.actionrocket.co/search?q=accessibility"><button>Resources</button></a>
<p style="text-align: center; padding-top: 60px;">©2021 Action Rocket Ltd. & Beyond the Envelope™ All rights reserved.</p>
</div>
</footer>
</div>
</div>
</body>
</html>