slidev-theme-narduin/slides.md

---
author: Nicolas Arduin
download: false
exportFilename: introduction-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-sa/4.0/" rel="noreferer noopener">CC BY-SA</a>
</div>

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

# Sommaire

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

<style>
	:deep(li) {
		font-size: var(--size--1);
		margin-block-start: var(--space-3xs);
	}
</style>

---
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;”

Access42

</div>

<div v-click>

> La vision du W3C est que le Web et les technologies connexes soient accessibles afin que toutes les personnes handicapées du monde entier puissent participer au monde numérique sur un pied d'égalité.

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

</div>

---
layout: content
---

# Législation

**Obligations actuelle&nbsp;:**

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

<div v-click>

**À partir de Juin 2025&nbsp;:**

> 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'Access42](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
---

## L'accessibilité numérique 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: 220px
---

# 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: true}
```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{*|2,10|3,9|4-8|11,17|13,16|18,20|*}
<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>

- Associez **toujours** un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`
- Indiquez clairement les champs obligatoires
- Ne désactivez pas le bouton d'envoi

```html{2,3}
// [!code word:name]
<form>
	<label for="name">Nom (obligatoire)</label>
	<input id="name" type="text" required/>
</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>

---
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>
```

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

</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 ([carousel much?](https://shouldiuseacarousel.com/), [tabs much?](https://www.youtube.com/live/XntrwuBjE5c?feature=shared&t=1582))
- 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
- faites des phrases courtes et [faciles à comprendre](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile)

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

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

## images

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

## vidéos

- ne lancez pas la lecture automatiquement
- [redimensionnez, optimisez et convertissez](https://handbrake.fr/) dans des formats récents (ex. `h265`, `av1`)

---
layout: title-image
image: tigre.avif
image-align: right
---

# &#8203;8. Éléments <span class="highlight">obligatoires</span>

- ajoutez systématiquement les attributs&nbsp;:  
  `<html lang="[langue de la page]" dir="[sens de lecture]">`
- signalez les changements de langue dans le contenu avec `lang`
- renseignez un `title` pour chaque page
- n'utilisez pas une balise pour faire de la mise en forme (ex. `h3` à la place d'un `h2` pour le rendre plus petit).

<small>**Astuce&nbsp;:** créez une classe correspondant à chaque niveau de titre afin de garder la hiérarchie intacte.</small>

```css
/* [!code word:.h2] */
h2,
.h2 {
  font-size: 4rem;
  font-weight: bold;
}
/* [!code word:.h3] */
h3,
.h3 {
  font-size: 3rem;
  font-weight: 300;
}
```

---
layout: title-image
image: surricate.jpg
---

# &#8203;9. Trucs <span class="highlight">en plus</span>

- Designez pour `320px` de large au minimum
- Ajoutez au moins un [lien d'évitement](https://accessibilite.numerique.gouv.fr/methode/glossaire/#liens-d-evitement-ou-d-acces-rapide)
- Ne changez pas [l'ordre de tabulation](https://accessibilite.numerique.gouv.fr/methode/glossaire/#ordre-de-tabulation) de la page
- Capturez le <span lang="en">focus</span> dans les fenêtres modales/menus
- Proposez au moins deux systèmes de navigation (menu, plan du site, moteur de recherche)
- N'utilisez pas [d'outil de surcouche](https://briefs.video/videos/what-are-accessibility-overlays/) "accessible"
- [N'abusez pas d'ARIA](https://briefs.video/videos/what-is-aria-even-for/)
  > Les pages d'accueil avec de l'ARIA affichent en moyenne 34,2 % d'erreurs (détectées) en plus que celles sans ARIA.  
  > <small>[source](https://webaim.org/projects/million/#:~:text=Home%20pages%20with%20ARIA%20present%20averaged%2034.2%25%20more%20detected%20errors%20than%20those%20without%20ARIA)</small>

---
layout: title-image
image: field.jpg
ratio: 1fr 1fr
---

# &#8203;10. (in)<span class="highlight">Formez-vous</span>

## Formations

- [Access42](https://formations.access42.net/formations/)
- [<span lang="en">Practical Accessibility</span>](https://practical-accessibility.today/)

## Ressources

- [Référentiel général d’amélioration de l’accessibilité (RGAA)](https://accessibilite.numerique.gouv.fr/)
- [Blog Access42](https://access42.net/blog/)
- [Webbed Briefs](https://briefs.video/) (vidéo, anglais)
- [Adrian Rosseli](https://adrianroselli.com/) (blog, anglais)

## Conférences

- [Paris Web](https://www.paris-web.fr/)
- [a11y Paris](https://www.a11yparis.org/)
- [CSS Day](https://cssday.nl)

---
layout: quote
hideInToc: true
---

::quote::

# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seul remède.

::default::

Heydon Pickering <cite>[The Folly of Chasing Demographics](https://www.youtube.com/watch?v=XntrwuBjE5c)</cite>

---
src: ./pages/eco.md
hide: false
---