---
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
---
# L'accessibilité numérique en 10 étapes
---
hideInToc: true
layout: bullets
---
# Sommaire
---
layout: content
---
# Contexte
> “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
> “ 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. ”
Access 42
> 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.
W3C WAI
---
layout: fact
hideInToc: true
---
# 30 % de la population française
Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)
---
layout: bullets
hideInToc: true
hide: true
---
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
- auditifs
- cognitifs
- neurologiques
- physiques
- psychologiques
- oraux
- visuels
---
layout: auto-grid
columns: 2
rows: 250px
---
# Exemples de technologies d'assistance
::content::
---
layout: bullets
---
# Bonnes pratiques en bref
- structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
- taille et unités des polices
- formulaire
- intitulés
- aide à la saisie
- messages d’erreur
- animations/mouvement (carousel, vidéo, scroll, etc.)
- écrire simplement et clairement ([FALC](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile))
- simplifier l'interface utilisateur
---
layout: content
---
# Éléments HTML sémantiques
````md magic-move {lines: false}
```html
Titre de la page
Titre de la section
Contenu de la page
```
```html
Titre de la page
Titre de la section
Contenu de la page
```
````
---
layout: auto-grid
columns: 2
---
# Structure 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: content
---
# Formulaires
**Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.
```html{2,3}
// [!code word:name]
```
Si le `label` doit être masqué, utiliser 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;
}
```
Qu'est-il arrivé au champ texte ? Vidéo en anglais.
---
layout: content
---
Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur.
---
layout: center
class: text-center
---
# Learn More
[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)