---
author: Nicolas Arduin
download: true
exportFilename: intriduction-accessibilite-numerique
lineNumbers: true
remoteAssets: true
htmlAttrs:
  dir: ltr
  lang: fr
theme: ./
# some information about your slides (markdown enabled)
title: Introduction à l'accessibilité numérique
info: |
  ## Commencer avec l'accessibilité
  Pourquoi, pour qui et comment ?

  Learn more at [Sli.dev](https://sli.dev)
# https://sli.dev/features/drawing
drawings:
  persist: false
# slide transition: https://sli.dev/guide/animations.html#slide-transitions
transition: fade-out
# enable MDC Syntax: https://sli.dev/features/mdc
mdc: true
# make slide text selectable
selectable: true
# take snapshot for each slide in the overview
overviewSnapshots: true
hideInToc: true
layout: intro
---

# <span class="highlight">L'accessibilité numérique</span> en 10 étapes

<div class="abs-br m-6">
    <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
</div>

<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->

---
hideInToc: true
layout: bullets
---

# Sommaire

<Toc maxDepth="1"></Toc>

---
layout: content
---

# Contexte

> “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”

Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web

<div v-click>

> “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”

Access 42

</div>

<div v-click>

> <span lang="en">The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.</span>

<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>

</div>

---
layout: content
---

# Législation

**Obligation actuelle :**

- les personnes morales de droit public
- les personnes morales délégataires d’une mission de service public
- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros

<div v-click>

**À partir de Juin 2025 :**

> Les entreprises employant moins de dix personnes qui fournissent des services et dont le chiffre d'affaires annuel n'excède pas deux millions d'euros.

<cite>[article L412-13 du Code de la consommation](https://www.legifrance.gouv.fr/codes/id/LEGISCTA000047284903)</cite> (applicable au 28 juin 2025)

> Tous les sites et plateformes de commerce électronique doivent être accessibles pour les nouveaux services à partir de 2025 et pour l’existant à partir de 2030.

Plus de détails dans [cet article d'Access 42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)

</div>

---
layout: fact
hideInToc: true
---

# <span class="highlight">30 %</span> de la population française <span class="visually-hidden">rencontre des difficultés au quotidien</span>

<span aria-hidden="true">rencontre des difficultés (limitations fonctionnelles ou restrictions importantes) au quotidien.</span>  
<cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>

<hr>

**La majorité des handicaps sont invisibles.**

<!--
certains sont temporaires, certains arrivent avec l'âge
-->

---
layout: bullets
hideInToc: true
hide: true
---

## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:

- auditifs
- cognitifs
- neurologiques
- physiques
- psychologiques
- oraux
- visuels

---
layout: auto-grid
columns: 2
rows: 250px
---

# Exemples de <span class="highlight">technologies d'assistance</span>

::content::

<Youtube id="nw6-eDJXWzY" />
<Youtube id="N9Q8oF0Lx2M" />
<Youtube id="SlxIEPEC_Qc" />
<Youtube id="LHUyDhutx80" />

---
layout: content
---

# &#8203;1. Éléments <span class="highlight">HTML sémantiques</span>

````md magic-move {lines: false}
```html
<body>
  <div class="header">
    <div class="nav">
      <a href="#">Accueil</a>
      <a href="#">À propos</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div class="main">
    <h1>Titre de la page</h1>
    <h2>Titre de la section</h2>
    <p>Contenu de la page</p>
  </div>
  <div class="footer">
    <p>Pied de page</p>
  </div>
</body>
```

```html
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Titre de la page</h1>
    <section>
      <h2>Titre de la section</h2>
      <p>Contenu de la page</p>
    </section>
  </main>
  <footer>
    <p>Pied de page</p>
  </footer>
</body>
```
````

---
layout: auto-grid
columns: 2
---

# &#8203;2. <span class="highlight">Structure</span> des titres

::content::

```md {all|2|3|4|none}{lines: false}
Erroné
└── h1 Titre principal
├── h2 Titre secondaire
├── h4 Titre niveau 4 // [!code error]
│ └── h5 Titre niveau 5
├── h2 Titre secondaire
│ ├── h2 Titre secondaire
│ ├── h3 Titre tertiaire
│ │ ├── h4 Titre niveau 4
│ │ │ └── h6 Titre niveau 6
│ └── h3 Titre tertiaire
└── h1 Titre principal
```

```md {none|all}{lines: false}
Correct
└── h1 Titre principal
├── h2 Titre secondaire
├── h2 Titre secondaire
│ └── h3 Titre tertiaire
├── h2 Titre secondaire
│ ├── h3 Titre tertiaire
│ ├── h3 Titre tertiaire
│ │ ├── h4 Titre niveau 4
│ │ │ └── h5 Titre niveau 5
│ └── h3 Titre tertiaire
└── h2 Titre secondaire
```

::after::
Add-on HeadingsMap : [firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/), [chrome](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm)

---
layout: title-image
image: ours.jpg
---

# &#8203;3. <span class="highlight">Formulaires</span>

**Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.

```html{2,3}
// [!code word:name]
<form>
	<label for="name">Nom</label>
	<input id="name" type="text" />
</form>
```

<div v-click>

Si le `label` doit être masqué, utilisez une classe CSS `visually-hidden` (ou `sr-only`).

```css
.visually-hidden {
  position: absolute;
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}
```

</div>

[Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small>](https://briefs.video/videos/what-happened-to-text-inputs/)

---
layout: content
---

<figure class="mb-4">
	<figcaption>Facilitez le remplissage des champs avec des instructions claires, des exemples et des messages d'erreur.</figcaption>
	<div class="grid cols-2 gap-4">
		<img src="/images/form-1.png" alt="" />
		<img src="/images/form-1-error.png" alt="" />
	</div>
</figure>

<div v-click>

Proposez du remplissage automatique et des claviers adaptés si besoin.

```html{2-3,5-6}
<form>
	<label for="phone">Numéro de téléphone</label>
	<input id="phone" type="tel" autocomplete="tel" inputmode="tel" />

	<label for="email">Email</label>
	<input id="email" type="email" autocomplete="email" inputmode="email" />
</form>
```

</div>

---
layout: content
---

# &#8203;4. Polices et <span class="highlight">typographie</span>

- unités
  - utilisez des [unités relatives](https://whatunit.com/) (ex. `em`, `rem`, `lh`, `ex`) pour permettre aux utilisateurs de modifier la taille des polices
  - ou des fonctions de calcul CSS (ex. `clamp()`, `calc()`)
- taille des polices
  - minimum `16px` (équivalent) pour le corps de texte
  - créez une [échelle typographique fluide](https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12)
- alignement du texte
  - ne **JAMAIS** justifier le texte
  - limitez les textes centrés
  - évitez les sauts de ligne forcés `<br>`
  - `text-wrap: balance;` sur les titres
- familles
  - préférez des polices travaillées pour leur lisibilité (ex. [Atkinson Hyperlegible](https://brailleinstitute.org/freefont), [Luciole](https://luciole-vision.com/))
  - ou conservez le choix utilisateur `font-family: system-ui, FALLBACK;`

---
layout: title-image
image: fleur.jpg
---

# &#8203;5. Vérifiez les <span class="highlight">contrastes</span>

Sujet complexe car l'algorithme du WCAG repose uniquement sur des calculs et pas sur des tests visuels de perception.

- [Calculateur WCAG](https://coolors.co/contrast-checker) officiellement intégré dans le standard d'accessibilité
- [Calculateur APC](https://www.myndex.com/BPCA/) plus précis mais expérimental et non intégré à un quelconque standard.

---
layout: title-image
image: pierre.jpeg
---

# &#8203;6. <span class="highlight">Simplifiez</span> l'interface, privilégiez <span class="highlight">le contenu</span>

- ne cachez pas le contenu
- n'animez pas (trop) le contenu  
  `@media (prefers-reduced-motion: no-preference) { go crazy 🤪 }`
- ne gênez pas le contenu
- soulignez les liens, ne soulignez rien d'autre
- ne supprimez pas le focus
- n'utilisez pas uniquement la couleur pour indiquer un état

---
layout: title-image
image: marmotte.jpg
---

# &#8203;7. Chouchoutez <span class="highlight">les images</span>

- ajoutez systématiquement l'attribut `alt`
  - `alt=""` si l'image est décorative
  - `alt="[...]"` si l'image est porteuse d'information
- renseignez si possible les attributs `width` et `height` pour éviter le "<span lang="en">layout shift</span>"
- optimisez et convertissez dans des formats récents (ex. `webp`, `avif`)