slidev-theme-narduin/slides.md

---
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-sa/4.0/" rel="noreferer noopener">CC BY-SA</a>
</div>

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

## 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: 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>

- 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être modale/menu
- Proposez au moins deux systèmes de navigation (menu, plan du site, moteur de recherche)
- [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
---

::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 seule 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
---