slidev-theme-narduin/example.md

279 lines
6.5 KiB
Markdown
Raw Normal View History

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&nbsp;: <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
> “&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;”
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
> “&nbsp;Laccessibilité numérique est un droit fondamental. Cest la possibilité pour toutes et tous dutiliser les outils informatiques, quelle que soit leur façon dy accéder.&nbsp;”
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&nbsp;:
- 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 derreur
- 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&nbsp;? <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 />