6.5 KiB
| author | download | exportFilename | lineNumbers | remoteAssets | htmlAttrs | theme | title | info | drawings | transition | mdc | selectable | overviewSnapshots | hideInToc | layout | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Nicolas Arduin | true | intriduction-accessibilite-numerique | true | true |
|
./ | Introduction à l'accessibilité numérique | ## Commencer avec l'accessibilité Pourquoi, pour qui et comment ? Learn more at [Sli.dev](https://sli.dev) |
|
fade-out | true | true | true | true | 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.
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)
- contrastes des couleurs (outil)
- 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)
- simplifier l'interface utilisateur
layout: content
Éléments HTML sémantiques
```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
Structure des titres
::content::
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
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, chrome
layout: content
Formulaires
Toujours associer un label aux champs input, select, textarea, meter, progress.
// [!code word:name]
<form>
<label for="name">Nom</label>
<input id="name" type="text" />
</form>
Si le label doit être masqué, utiliser une classe CSS visually-hidden (ou sr-only).
.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.