Skip to content

Fixed accessibility issues on the website #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
felixgirault merged 7 commits into from
Apr 15, 2025
Merged

Fixed accessibility issues on the website #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f03be26
Added skip links
felixgirault Apr 11, 2025
6e18d2f
Fixed logo colors
felixgirault Apr 11, 2025
ee2e4d7
Added language changes
felixgirault Apr 11, 2025
94caacb
Removed emojis from the accessibility tree
felixgirault Apr 11, 2025
28c25f0
Fixed buttons contrast
felixgirault Apr 11, 2025
614738d
Fixed required fields indicator
felixgirault Apr 11, 2025
740b712
Improved validation errors
felixgirault Apr 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions site/assets/logo-boscop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions site/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ iframe {
height: 2lh;
}

.Form-error {
display: none;
}

label:has(.Form-error):has(+ :user-invalid) .Form-error {
display: block;
}

.MigrationForm-output {
margin-top: var(--spacing-block--l);
}
Expand All @@ -52,11 +60,17 @@ iframe {
font-size: 0.875rem;
}

.ExamplePage .orejime-Purpose-input {
accent-color: var(--orejime-color-interactive);
}

.ExampleMain {
padding: var(--spacing-block--l) var(--spacing-inline--xl);
}

.ExampleReset {
--orejime-color-interactive: royalblue;
--orejime-color-on-interactive: white;
display: none;
position: fixed;
right: 1.4em;
Expand Down
48 changes: 41 additions & 7 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,22 @@
</head>

<body>
<ul class="SkipLinks Theme--secondary">
<li>
<a class="SkipLinks-link Button" href="#main">Skip to content</a>
</li>
<li>
<a class="SkipLinks-link Button" href="#footer">Skip to footer</a>
</li>
</ul>

<div class="Surface Theme--primary">
<div class="Container">
<div class="Header">
<header class="Header-banner" role="banner">
<img
class="Header-logo"
src="https://boscop.fr/wp-content/themes/boscop/dist/design-system/logo-horizontal-borderless.svg"
src="./assets/logo-boscop.svg"
alt="boscop"
/>
</header>
Expand Down Expand Up @@ -69,7 +78,12 @@ <h1>Orejime</h1>
</div>
</div>

<main class="Section Section--padding-xl" role="main">
<main
class="Section Section--padding-xl"
role="main"
id="main"
tabindex="-1"
>
<div class="Container">
<div class="RichText">
<h2 id="features">Features</h2>
Expand Down Expand Up @@ -297,40 +311,58 @@ <h2 id="support">Need a hand?</h2>
</p>

<div class="Notice Theme--info">
<strong>All fields are mandatory</strong>
<p>
<strong id="mandatory">All fields are mandatory.</strong>
<br />
Boscop only processes the collected data to respond to your
request. To learn more about how we manage your personal
data and to exercise your GDPR rights, you can consult our
<a href="/legal">data privacy policy</a>
.
<a href="/legal">data privacy policy</a>.
</p>
</div>

<form method="POST" name="support" data-netlify="true">
<label for="SupportForm-name">Your name</label>
<label for="SupportForm-name">
Your name
<span class="Form-error">Please fill out your name</span>
</label>

<input
id="SupportForm-name"
type="text"
name="name"
aria-describedby="mandatory"
autocomplete="name"
required
/>

<label for="SupportForm-email">
Your email address (i.e. company@example.org)
<span class="Form-error">
Please enter a valid email address, for example
muriel.tramis@email.com
</span>
</label>

<input
id="SupportForm-email"
type="email"
name="email"
aria-describedby="mandatory"
autocomplete="email"
required
/>

<label for="SupportForm-message">Your message</label>
<label for="SupportForm-message">
Your message
<span class="Form-error">Please write a message</span>
</label>

<textarea
id="SupportForm-message"
name="message"
rows="5"
aria-describedby="mandatory"
required
></textarea>

Expand Down Expand Up @@ -392,6 +424,8 @@ <h3>Migrating from V2 to V3</h3>
<footer
class="Footer Section Section--padding-l Surface Theme--tertiary"
role="contentinfo"
id="footer"
tabindex="-1"
>
<div class="Container">
<p lang="fr">
Expand Down
58 changes: 39 additions & 19 deletions site/legal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,22 @@
</head>

<body>
<ul class="SkipLinks Theme--secondary">
<li>
<a class="SkipLinks-link Button" href="#main">Skip to content</a>
</li>
<li>
<a class="SkipLinks-link Button" href="#footer">Skip to footer</a>
</li>
</ul>

<div class="Surface Theme--primary">
<div class="Container">
<div class="Header">
<header class="Header-banner" role="banner">
<img
class="Header-logo"
src="https://boscop.fr/wp-content/themes/boscop/dist/design-system/logo-horizontal-borderless.svg"
src="./assets/logo-boscop.svg"
alt="boscop"
/>
</header>
Expand All @@ -34,7 +43,7 @@ <h1>Legal information & privacy policy</h1>

<div class="Grid Grid--m">
<div>
<p>
<p lang="fr">
BOSCOP
<br />
11, rue des Noyers
Expand Down Expand Up @@ -101,7 +110,12 @@ <h1>Legal information & privacy policy</h1>
</div>
</div>

<main class="Section Section--padding-xl" role="main">
<main
class="Section Section--padding-xl"
role="main"
id="main"
tabindex="-1"
>
<div class="Container">
<div class="RichText">
<h2>Privacy policy</h2>
Expand All @@ -124,12 +138,13 @@ <h4>Action logging (logs)</h4>
<p>
First and foremost, like on any website, technical traces of
your visit are recorded when you load a page or resources
(commonly known as the TCP-IP protocol ☝️). Simply put, in
order to display an image in your browser, our host's servers
need to retrieve your IP address to send you the requested
resource. In doing so, what we call "logs" are recorded on our
host's servers, including the timestamp of the action and your
IP address.
(commonly known as the TCP-IP protocol
<span aria-hidden="true">☝️</span>). Simply put, in order to
display an image in your browser, our host's servers need to
retrieve your IP address to send you the requested resource.
In doing so, what we call "logs" are recorded on our host's
servers, including the timestamp of the action and your IP
address.
</p>

<p>
Expand All @@ -146,7 +161,10 @@ <h4>Action logging (logs)</h4>
practice.
</p>

<p>⌛ These logs are automatically deleted after one year.</p>
<p>
<span aria-hidden="true">⌛</span> These logs are
automatically deleted after one year.
</p>

<h4>Cookies</h4>

Expand Down Expand Up @@ -214,11 +232,11 @@ <h4>Contact Form</h4>
</p>

<p>
⌛ The duration for which we keep your data depends on the
nature of your request and any contractual relationship that
may follow. For example, 3 years after an inquiry about our
services, or, if we collaborate, for the duration of the
contract + 5 years.
<span aria-hidden="true">⌛</span> The duration for which we
keep your data depends on the nature of your request and any
contractual relationship that may follow. For example, 3 years
after an inquiry about our services, or, if we collaborate,
for the duration of the contract + 5 years.
</p>

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

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

<dl>
<dt>✉️ By mail</dt>
<dd>
<dt><span aria-hidden="true">✉️</span> By mail</dt>
<dd lang="fr">
DPO – Boscop
<br />
11, rue des Noyers
<br />
49000 ANGERS
</dd>
<dt>📧 By email</dt>
<dt><span aria-hidden="true">📧</span> By email</dt>
<dd>
<a href="mailto:privacy@boscop.fr">privacy@boscop.fr</a>
</dd>
Expand All @@ -281,6 +299,8 @@ <h3>How can I get more information or exercise my rights?</h3>
<footer
class="Footer Section Section--padding-l Surface Theme--tertiary"
role="contentinfo"
id="footer"
tabindex="-1"
>
<div class="Container">
<p lang="fr">
Expand Down
Loading
⚡