Skip to content

Commit b4b92e1

Browse files
felixgiraultfelixgirault
committed
Fixed accessibility issues on the website
1 parent d2dd5f3 commit b4b92e1

3 files changed

Lines changed: 69 additions & 23 deletions

File tree

‎site/assets/logo-boscop.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎site/index.html‎

Lines changed: 26 additions & 5 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,13 +311,13 @@ <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

@@ -313,6 +327,7 @@ <h2 id="support">Need a hand?</h2>
313327
id="SupportForm-name"
314328
type="text"
315329
name="name"
330+
aria-describedby="mandatory"
316331
required
317332
/>
318333

@@ -323,14 +338,18 @@ <h2 id="support">Need a hand?</h2>
323338
id="SupportForm-email"
324339
type="email"
325340
name="email"
341+
aria-describedby="mandatory"
326342
required
343+
oninvalid="this.setCustomValidity('Please enter a valid email address, for example muriel.tramis@email.com')"
344+
oninput="this.setCustomValidity('')"
327345
/>
328346

329347
<label for="SupportForm-message">Your message</label>
330348
<textarea
331349
id="SupportForm-message"
332350
name="message"
333351
rows="5"
352+
aria-describedby="mandatory"
334353
required
335354
></textarea>
336355

@@ -392,6 +411,8 @@ <h3>Migrating from V2 to V3</h3>
392411
<footer
393412
class="Footer Section Section--padding-l Surface Theme--tertiary"
394413
role="contentinfo"
414+
id="footer"
415+
tabindex="-1"
395416
>
396417
<div class="Container">
397418
<p lang="fr">

‎site/legal.html‎

Lines changed: 38 additions & 18 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>
277+
<dt><span aria-hidden="true">✉️</span> By mail</dt>
260278
<dd>
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)
⚡