279 lines
6.5 KiB
Markdown
279 lines
6.5 KiB
Markdown
---
|
||
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 : <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>
|
||
|
||
---
|
||
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 <abbr title="World Wide Web Consortium">W3C</abbr> 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.
|
||
|
||
<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
|
||
|
||
---
|
||
layout: fact
|
||
hideInToc: true
|
||
---
|
||
|
||
# 30 % de la population française
|
||
|
||
Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
|
||
|
||
<cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>
|
||
|
||
<!--
|
||
certains sont temporaires, certains arrivent avec l'âge
|
||
-->
|
||
|
||
---
|
||
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::
|
||
|
||
<Youtube id="nw6-eDJXWzY" />
|
||
<Youtube id="N9Q8oF0Lx2M" />
|
||
<Youtube id="SlxIEPEC_Qc" />
|
||
<Youtube id="LHUyDhutx80" />
|
||
|
||
---
|
||
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
|
||
<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::
|
||
|
||
```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]
|
||
<form>
|
||
<label for="name">Nom</label>
|
||
<input id="name" type="text" />
|
||
</form>
|
||
```
|
||
|
||
<div v-click>
|
||
|
||
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;
|
||
}
|
||
```
|
||
|
||
</div>
|
||
|
||
<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>
|
||
|
||
---
|
||
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)
|
||
|
||
<PoweredBySlidev mt-10 />
|