Skip to content

Commit cbfc953

Browse files
felixgiraultfelixgirault
authored
Merge pull request #123 from boscop-fr/fix-site-a11y
Fixed accessibility issues on the website
2 parents 3ac1a7a + 740b712 commit cbfc953

4 files changed

Lines changed: 99 additions & 26 deletions

File tree

‎site/assets/logo-boscop.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎site/assets/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ iframe {
3333
height: 2lh;
3434
}
3535

36+
.Form-error {
37+
display: none;
38+
}
39+
40+
label:has(.Form-error):has(+ :user-invalid) .Form-error {
41+
display: block;
42+
}
43+
3644
.MigrationForm-output {
3745
margin-top: var(--spacing-block--l);
3846
}
@@ -52,11 +60,17 @@ iframe {
5260
font-size: 0.875rem;
5361
}
5462

63+
.ExamplePage .orejime-Purpose-input {
64+
accent-color: var(--orejime-color-interactive);
65+
}
66+
5567
.ExampleMain {
5668
padding: var(--spacing-block--l) var(--spacing-inline--xl);
5769
}
5870

5971
.ExampleReset {
72+
--orejime-color-interactive: royalblue;
73+
--orejime-color-on-interactive: white;
6074
display: none;
6175
position: fixed;
6276
right: 1.4em;

‎site/index.html‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,22 @@
1616
</head>
1717

1818
<body>
19+
<ul class="SkipLinks Theme--secondary">
20+
<li>
21+
<a class="SkipLinks-link Button" href="#main">Skip to content</a>
22+
</li>
23+
<li>
24+
<a class="SkipLinks-link Button" href="#footer">Skip to footer</a>
25+
</li>
26+
</ul>
27+
1928
<div class="Surface Theme--primary">
2029
<div class="Container">
2130
<div class="Header">
2231
<header class="Header-banner" role="banner">
2332
<img
2433
class="Header-logo"
25-
src="https://boscop.fr/wp-content/themes/boscop/dist/design-system/logo-horizontal-borderless.svg"
34+
src="./assets/logo-boscop.svg"
2635
alt="boscop"
2736
/>
2837
</header>
@@ -69,7 +78,12 @@ <h1>Orejime</h1>
6978
</div>
7079
</div>
7180

72-
<main class="Section Section--padding-xl" role="main">
81+
<main
82+
class="Section Section--padding-xl"
83+
role="main"
84+
id="main"
85+
tabindex="-1"
86+
>
7387
<div class="Container">
7488
<div class="RichText">
7589
<h2 id="features">Features</h2>
@@ -297,40 +311,58 @@ <h2 id="support">Need a hand?</h2>
297311
</p>
298312

299313
<div class="Notice Theme--info">
300-
<strong>All fields are mandatory</strong>
301314
<p>
315+
<strong id="mandatory">All fields are mandatory.</strong>
316+
<br />
302317
Boscop only processes the collected data to respond to your
303318
request. To learn more about how we manage your personal
304319
data and to exercise your GDPR rights, you can consult our
305-
<a href="/legal">data privacy policy</a>
306-
.
320+
<a href="/legal">data privacy policy</a>.
307321
</p>
308322
</div>
309323

310324
<form method="POST" name="support" data-netlify="true">
311-
<label for="SupportForm-name">Your name</label>
325+
<label for="SupportForm-name">
326+
Your name
327+
<span class="Form-error">Please fill out your name</span>
328+
</label>
329+
312330
<input
313331
id="SupportForm-name"
314332
type="text"
315333
name="name"
334+
aria-describedby="mandatory"
335+
autocomplete="name"
316336
required
317337
/>
318338

319339
<label for="SupportForm-email">
320340
Your email address (i.e. company@example.org)
341+
<span class="Form-error">
342+
Please enter a valid email address, for example
343+
muriel.tramis@email.com
344+
</span>
321345
</label>
346+
322347
<input
323348
id="SupportForm-email"
324349
type="email"
325350
name="email"
351+
aria-describedby="mandatory"
352+
autocomplete="email"
326353
required
327354
/>
328355

329-
<label for="SupportForm-message">Your message</label>
356+
<label for="SupportForm-message">
357+
Your message
358+
<span class="Form-error">Please write a message</span>
359+
</label>
360+
330361
<textarea
331362
id="SupportForm-message"
332363
name="message"
333364
rows="5"
365+
aria-describedby="mandatory"
334366
required
335367
></textarea>
336368

@@ -392,6 +424,8 @@ <h3>Migrating from V2 to V3</h3>
392424
<footer
393425
class="Footer Section Section--padding-l Surface Theme--tertiary"
394426
role="contentinfo"
427+
id="footer"
428+
tabindex="-1"
395429
>
396430
<div class="Container">
397431
<p lang="fr">

‎site/legal.html‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,22 @@
1616
</head>
1717

1818
<body>
19+
<ul class="SkipLinks Theme--secondary">
20+
<li>
21+
<a class="SkipLinks-link Button" href="#main">Skip to content</a>
22+
</li>
23+
<li>
24+
<a class="SkipLinks-link Button" href="#footer">Skip to footer</a>
25+
</li>
26+
</ul>
27+
1928
<div class="Surface Theme--primary">
2029
<div class="Container">
2130
<div class="Header">
2231
<header class="Header-banner" role="banner">
2332
<img
2433
class="Header-logo"
25-
src="https://boscop.fr/wp-content/themes/boscop/dist/design-system/logo-horizontal-borderless.svg"
34+
src="./assets/logo-boscop.svg"
2635
alt="boscop"
2736
/>
2837
</header>
@@ -34,7 +43,7 @@ <h1>Legal information & privacy policy</h1>
3443

3544
<div class="Grid Grid--m">
3645
<div>
37-
<p>
46+
<p lang="fr">
3847
BOSCOP
3948
<br />
4049
11, rue des Noyers
@@ -101,7 +110,12 @@ <h1>Legal information & privacy policy</h1>
101110
</div>
102111
</div>
103112

104-
<main class="Section Section--padding-xl" role="main">
113+
<main
114+
class="Section Section--padding-xl"
115+
role="main"
116+
id="main"
117+
tabindex="-1"
118+
>
105119
<div class="Container">
106120
<div class="RichText">
107121
<h2>Privacy policy</h2>
@@ -124,12 +138,13 @@ <h4>Action logging (logs)</h4>
124138
<p>
125139
First and foremost, like on any website, technical traces of
126140
your visit are recorded when you load a page or resources
127-
(commonly known as the TCP-IP protocol ☝️). Simply put, in
128-
order to display an image in your browser, our host's servers
129-
need to retrieve your IP address to send you the requested
130-
resource. In doing so, what we call "logs" are recorded on our
131-
host's servers, including the timestamp of the action and your
132-
IP address.
141+
(commonly known as the TCP-IP protocol
142+
<span aria-hidden="true">☝️</span>). Simply put, in order to
143+
display an image in your browser, our host's servers need to
144+
retrieve your IP address to send you the requested resource.
145+
In doing so, what we call "logs" are recorded on our host's
146+
servers, including the timestamp of the action and your IP
147+
address.
133148
</p>
134149

135150
<p>
@@ -146,7 +161,10 @@ <h4>Action logging (logs)</h4>
146161
practice.
147162
</p>
148163

149-
<p>⌛ These logs are automatically deleted after one year.</p>
164+
<p>
165+
<span aria-hidden="true">⌛</span> These logs are
166+
automatically deleted after one year.
167+
</p>
150168

151169
<h4>Cookies</h4>
152170

@@ -214,11 +232,11 @@ <h4>Contact Form</h4>
214232
</p>
215233

216234
<p>
217-
⌛ The duration for which we keep your data depends on the
218-
nature of your request and any contractual relationship that
219-
may follow. For example, 3 years after an inquiry about our
220-
services, or, if we collaborate, for the duration of the
221-
contract + 5 years.
235+
<span aria-hidden="true">⌛</span> The duration for which we
236+
keep your data depends on the nature of your request and any
237+
contractual relationship that may follow. For example, 3 years
238+
after an inquiry about our services, or, if we collaborate,
239+
for the duration of the contract + 5 years.
222240
</p>
223241

224242
<h3>Who will have access to my data?</h3>
@@ -240,7 +258,7 @@ <h3>How can I get more information or exercise my rights?</h3>
240258
<p>
241259
First, you can visit the CNIL website to learn more about your
242260
rights under the French Data Protection Act and how to
243-
exercise them. ⚖️
261+
exercise them. <span aria-hidden="true">⚖️</span>
244262
</p>
245263

246264
<p>
@@ -256,15 +274,15 @@ <h3>How can I get more information or exercise my rights?</h3>
256274
</p>
257275

258276
<dl>
259-
<dt>✉️ By mail</dt>
260-
<dd>
277+
<dt><span aria-hidden="true">✉️</span> By mail</dt>
278+
<dd lang="fr">
261279
DPO – Boscop
262280
<br />
263281
11, rue des Noyers
264282
<br />
265283
49000 ANGERS
266284
</dd>
267-
<dt>📧 By email</dt>
285+
<dt><span aria-hidden="true">📧</span> By email</dt>
268286
<dd>
269287
<a href="mailto:privacy@boscop.fr">privacy@boscop.fr</a>
270288
</dd>
@@ -281,6 +299,8 @@ <h3>How can I get more information or exercise my rights?</h3>
281299
<footer
282300
class="Footer Section Section--padding-l Surface Theme--tertiary"
283301
role="contentinfo"
302+
id="footer"
303+
tabindex="-1"
284304
>
285305
<div class="Container">
286306
<p lang="fr">

0 commit comments

Comments
 (0)
⚡