2024-12-13 14:30:22 +01:00
---
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
---
2024-12-16 23:40:18 +01:00
# <span class="highlight">L'accessibilité numérique</span> en 10 étapes
2024-12-13 14:30:22 +01:00
< div class = "abs-br m-6" >
< a href = "https://www.nardu.in" rel = "noreferer noopener" > Nico,< / a > Décembre 2024.< br > licence : < 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 >
---
2024-12-16 23:40:18 +01:00
layout: content
2024-12-13 14:30:22 +01:00
---
2024-12-16 23:40:18 +01:00
# Contexte
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
> “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
Tim Berners-Lee, Directeur du < abbr title = "World Wide Web Consortium" > W3C< / abbr > et inventeur du World Wide Web
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
> “ 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. ”
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
Access 42
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
> 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.
< abbr title = "World Wide Web Consortium" > W3C< / abbr > < abbr title = "Web Accessibility Initiative" > WAI< / abbr >
2024-12-13 14:30:22 +01:00
---
layout: fact
hideInToc: true
---
2024-12-16 23:40:18 +01:00
# 30 % de la population française
Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
< cite > [Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)< / cite >
2024-12-13 14:30:22 +01:00
2024-12-16 21:25:03 +01:00
<!--
certains sont temporaires, certains arrivent avec l'âge
-->
2024-12-13 14:30:22 +01:00
---
2024-12-16 21:25:03 +01:00
layout: bullets
hideInToc: true
2024-12-16 23:40:18 +01:00
hide: true
2024-12-16 21:25:03 +01:00
---
2024-12-13 14:30:22 +01:00
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
- auditifs
- cognitifs
- neurologiques
- physiques
- psychologiques
- oraux
- visuels
---
2024-12-16 21:25:03 +01:00
layout: auto-grid
2024-12-16 23:40:18 +01:00
columns: 2
2024-12-17 12:59:36 +01:00
rows: 250px
2024-12-16 21:25:03 +01:00
---
2024-12-13 14:30:22 +01:00
# Exemples de technologies d'assistance
2024-12-16 21:25:03 +01:00
::content::
< Youtube id = "nw6-eDJXWzY" / >
< Youtube id = "N9Q8oF0Lx2M" / >
< Youtube id = "SlxIEPEC_Qc" / >
< Youtube id = "LHUyDhutx80" / >
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
---
layout: bullets
2024-12-13 14:30:22 +01:00
---
# 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
2024-12-17 12:59:36 +01:00
---
layout: content
2024-12-13 14:30:22 +01:00
---
2024-12-16 23:40:18 +01:00
# Éléments HTML sémantiques
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
````md magic-move {lines: false}
2024-12-13 14:30:22 +01:00
```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 >
```
````
---
2024-12-16 23:40:18 +01:00
layout: auto-grid
columns: 2
2024-12-16 21:25:03 +01:00
---
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
# Structure des titres
2024-12-13 14:30:22 +01:00
2024-12-16 23:40:18 +01:00
::content::
2024-12-13 14:30:22 +01:00
```md {all|2|3|4|none}{lines: false}
Erroné
└── h1 Titre principal
2024-12-17 12:59:36 +01:00
├── h2 Titre secondaire
2024-12-16 23:40:18 +01:00
├── h4 Titre niveau 4 // [!code error]
2024-12-13 14:30:22 +01:00
│ └── 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
```
2024-12-17 12:59:36 +01:00
::after::
Add-on HeadingsMap : [firefox ](https://addons.mozilla.org/fr/firefox/addon/headingsmap/ ), [chrome ](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm )
2024-12-13 14:30:22 +01:00
---
2024-12-17 12:59:36 +01:00
layout: content
2024-12-16 21:25:03 +01:00
---
2024-12-13 14:30:22 +01:00
2024-12-17 12:59:36 +01:00
# Formulaires
2024-12-13 14:30:22 +01:00
2024-12-17 12:59:36 +01:00
**Toujours** associer un `label` aux champs `input` , `select` , `textarea` , `meter` , `progress` .
2024-12-13 14:30:22 +01:00
2024-12-17 12:59:36 +01:00
```html{2,3}
// [!code word:name]
< form >
< label for = "name" > Nom< / label >
< input id = "name" type = "text" / >
< / form >
2024-12-13 14:30:22 +01:00
```
2024-12-17 12:59:36 +01:00
< div v-click >
2024-12-13 14:30:22 +01:00
2024-12-17 12:59:36 +01:00
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;
2024-12-13 14:30:22 +01:00
}
```
< / div >
2024-12-17 12:59:36 +01:00
< a class = "abs-br m-6" href = "https://briefs.video/videos/what-happened-to-text-inputs/" rel = "noreferer noopener" > Qu'est-il arrivé au champ texte ? < small > Vidéo en anglais.< / small > < / a >
2024-12-13 14:30:22 +01:00
---
2024-12-17 12:59:36 +01:00
layout: content
2024-12-13 14:30:22 +01:00
---
2024-12-17 12:59:36 +01:00
Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur.
2024-12-13 14:30:22 +01:00
---
layout: center
class: text-center
---
# Learn More
[Documentation ](https://sli.dev ) · [GitHub ](https://github.com/slidevjs/slidev ) · [Showcases ](https://sli.dev/resources/showcases )
< PoweredBySlidev mt-10 / >