563 lines
12 KiB
Markdown
563 lines
12 KiB
Markdown
---
|
||
author: Nicolas Arduin
|
||
download: true
|
||
exportFilename: intriduction-accessibilite-numerique
|
||
lineNumbers: true
|
||
remoteAssets: true
|
||
colorSchema: light
|
||
htmlAttrs:
|
||
dir: ltr
|
||
lang: fr
|
||
theme: apple-basic
|
||
fonts:
|
||
sans: 'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif'
|
||
local: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||
# 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
|
||
# take snapshot for each slide in the overview
|
||
overviewSnapshots: true
|
||
hideInToc: true
|
||
layout: intro
|
||
---
|
||
|
||
# Introduction à l'accessibilité numérique
|
||
|
||
<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
|
||
---
|
||
# Sommaire
|
||
|
||
<Toc maxDepth="1"></Toc>
|
||
|
||
---
|
||
layout: intro-image-right
|
||
image: '/images/ours.jpg'
|
||
---
|
||
|
||
# l'Accessibilité Numérique
|
||
|
||
Pourquoi, pour qui, comment ?
|
||
|
||
---
|
||
layout: quote
|
||
hideInToc: true
|
||
---
|
||
|
||
# “ 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
|
||
|
||
<!-- Accès universel (accessible) dès la création de l'outil -->
|
||
|
||
---
|
||
layout: fact
|
||
hideInToc: true
|
||
---
|
||
|
||
# 1 personne sur 5 est handicapée
|
||
|
||
La majorité des handicaps sont invisibles.
|
||
|
||
<!-- certains sont temporaires, certains arrivent avec l'âge -->
|
||
|
||
---
|
||
layout: quote
|
||
hideInToc: true
|
||
---
|
||
|
||
# “ 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
|
||
|
||
---
|
||
layout: bullets
|
||
hideInToc: 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: center
|
||
---
|
||
|
||
# Exemples de technologies d'assistance
|
||
|
||
<div grid="~ cols-2 gap-4">
|
||
<Youtube id="nw6-eDJXWzY" />
|
||
<Youtube id="N9Q8oF0Lx2M" />
|
||
<Youtube id="SlxIEPEC_Qc" />
|
||
<Youtube id="LHUyDhutx80" />
|
||
</div>
|
||
|
||
---
|
||
|
||
# Bonnes pratiques en bref
|
||
|
||
- [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
|
||
- 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
|
||
|
||
---
|
||
|
||
# Éléments sémantiques
|
||
|
||
````md magic-move {lines: true}
|
||
```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: two-cols-header
|
||
---
|
||
|
||
## Structure du contenu
|
||
|
||
::left::
|
||
|
||
```md {all|2|3|4|none}{lines: false}
|
||
Erroné
|
||
└── h1 Titre principal
|
||
├── h2 Titre secondaire
|
||
├── h4 Titre niveau 4
|
||
│ └── 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
|
||
```
|
||
::right::
|
||
|
||
```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
|
||
```
|
||
|
||
<img v-click="[3,4]" class="absolute top-25 right-56 z-1" src="/images/cross.svg" width="20" height="20">
|
||
|
||
<!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) -->
|
||
|
||
---
|
||
layout: center
|
||
hideInToc: true
|
||
---
|
||
|
||
# les Formulaires
|
||
|
||
C'est si simple de faire n'importe quoi 🤪
|
||
|
||
---
|
||
layout: two-cols
|
||
---
|
||
|
||
<div class="form">
|
||
<h2>Mauvais exemple :</h2>
|
||
<form class="nul">
|
||
<input type="text" placeholder="nom*">
|
||
<input type="text" placeholder="email*">
|
||
<button>Envoyer</button>
|
||
</form>
|
||
</div>
|
||
|
||
|
||
::right::
|
||
|
||
<div class="form">
|
||
<h2>Bon exemple :</h2>
|
||
<form class="cool">
|
||
<div v-click role="group" aria-labelledby="error-summary-title">
|
||
<h3 id="error-summary-title" tabindex="-1">
|
||
Il y a 2 erreurs de saisie dans le formulaire.
|
||
</h3>
|
||
<ol>
|
||
<li class="error">
|
||
<a href="#input-name">Veuillez renseigner un nom.</a>
|
||
</li>
|
||
<li class="error">
|
||
<a href="#input-email">L'email renseigné n'est pas valide.</a>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<label for="name">Nom (obligatorie)</label>
|
||
<input id="name" type="text" required>
|
||
<label for="email">Email (obligatoire)</label>
|
||
<input id="email" type="email" aria-describedby="email-description" required>
|
||
<p id="email-description">Format attendu: nom@email.fr</p>
|
||
<button>Envoyer</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="absolute bottom-10">
|
||
<a 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>
|
||
</div>
|
||
|
||
---
|
||
layout: image-right
|
||
image: https://cover.sli.dev
|
||
---
|
||
|
||
# Code
|
||
|
||
Use code snippets and get the highlighting directly, and even types hover!
|
||
|
||
```ts {all|5|7|7-8|10|all} twoslash
|
||
// TwoSlash enables TypeScript hover information
|
||
// and errors in markdown code blocks
|
||
// More at https://shiki.style/packages/twoslash
|
||
|
||
import { computed, ref } from "vue";
|
||
|
||
const count = ref(0);
|
||
const doubled = computed(() => count.value * 2);
|
||
|
||
doubled.value = 2;
|
||
```
|
||
|
||
<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
|
||
|
||
<!-- This allow you to embed external code blocks -->
|
||
|
||
<<< @/snippets/external.ts#snippet
|
||
|
||
<!-- Footer -->
|
||
|
||
[Learn more](https://sli.dev/features/line-highlighting)
|
||
|
||
<!-- Inline style -->
|
||
<style>
|
||
.footnotes-sep {
|
||
@apply mt-5 opacity-10;
|
||
}
|
||
.footnotes {
|
||
@apply text-sm opacity-75;
|
||
}
|
||
.footnote-backref {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<!--
|
||
Notes can also sync with clicks
|
||
|
||
[click] This will be highlighted after the first click
|
||
|
||
[click] Highlighted with `count = ref(0)`
|
||
|
||
[click:3] Last click (skip two clicks)
|
||
-->
|
||
|
||
---
|
||
|
||
## level: 2
|
||
|
||
# Shiki Magic Move
|
||
|
||
Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
|
||
|
||
Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
|
||
|
||
````md magic-move {lines: true}
|
||
```ts {*|2|*}
|
||
// step 1
|
||
const author = reactive({
|
||
name: "John Doe",
|
||
books: [
|
||
"Vue 2 - Advanced Guide",
|
||
"Vue 3 - Basic Guide",
|
||
"Vue 4 - The Mystery",
|
||
],
|
||
});
|
||
```
|
||
|
||
```ts {*|1-2|3-4|3-4,8}
|
||
// step 2
|
||
export default {
|
||
data() {
|
||
return {
|
||
author: {
|
||
name: "John Doe",
|
||
books: [
|
||
"Vue 2 - Advanced Guide",
|
||
"Vue 3 - Basic Guide",
|
||
"Vue 4 - The Mystery",
|
||
],
|
||
},
|
||
};
|
||
},
|
||
};
|
||
```
|
||
|
||
```ts
|
||
// step 3
|
||
export default {
|
||
data: () => ({
|
||
author: {
|
||
name: "John Doe",
|
||
books: [
|
||
"Vue 2 - Advanced Guide",
|
||
"Vue 3 - Basic Guide",
|
||
"Vue 4 - The Mystery",
|
||
],
|
||
},
|
||
}),
|
||
};
|
||
```
|
||
|
||
Non-code blocks are ignored.
|
||
|
||
```vue
|
||
<!-- step 4 -->
|
||
<script setup>
|
||
const author = {
|
||
name: "John Doe",
|
||
books: [
|
||
"Vue 2 - Advanced Guide",
|
||
"Vue 3 - Basic Guide",
|
||
"Vue 4 - The Mystery",
|
||
],
|
||
};
|
||
</script>
|
||
```
|
||
````
|
||
|
||
---
|
||
|
||
# Components
|
||
|
||
<div grid="~ cols-2 gap-4">
|
||
<div>
|
||
|
||
You can use Vue components directly inside your slides.
|
||
|
||
We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
|
||
|
||
```html
|
||
<Counter :count="10" />
|
||
```
|
||
|
||
<!-- ./components/Counter.vue -->
|
||
<Counter :count="10" m="t-4" />
|
||
|
||
Check out [the guides](https://sli.dev/builtin/components.html) for more.
|
||
|
||
</div>
|
||
<div>
|
||
|
||
```html
|
||
<Tweet id="1390115482657726468" />
|
||
```
|
||
|
||
<Tweet id="1390115482657726468" scale="0.65" />
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
Presenter note with **bold**, *italic*, and ~~striked~~ text.
|
||
|
||
Also, HTML elements are valid:
|
||
<div class="flex w-full">
|
||
<span style="flex-grow: 1;">Left content</span>
|
||
<span>Right content</span>
|
||
</div>
|
||
-->
|
||
|
||
---
|
||
|
||
## class: px-20
|
||
|
||
# Themes
|
||
|
||
Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
|
||
|
||
<div grid="~ cols-2 gap-2" m="t-2">
|
||
|
||
```yaml
|
||
---
|
||
theme: default
|
||
---
|
||
```
|
||
|
||
```yaml
|
||
---
|
||
theme: seriph
|
||
---
|
||
```
|
||
|
||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
|
||
|
||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
|
||
|
||
</div>
|
||
|
||
Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
|
||
check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
|
||
|
||
---
|
||
|
||
# Clicks Animations
|
||
|
||
You can add `v-click` to elements to add a click animation.
|
||
|
||
<div v-click>
|
||
|
||
This shows up when you click the slide:
|
||
|
||
```html
|
||
<div v-click>This shows up when you click the slide.</div>
|
||
```
|
||
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<v-click>
|
||
|
||
The <span v-mark.red="3"><code>v-mark</code> directive</span>
|
||
also allows you to add
|
||
<span v-mark.circle.orange="4">inline marks</span>
|
||
, powered by [Rough Notation](https://roughnotation.com/):
|
||
|
||
```html
|
||
<span v-mark.underline.orange>inline markers</span>
|
||
```
|
||
|
||
</v-click>
|
||
|
||
<div mt-20 v-click>
|
||
|
||
[Learn more](https://sli.dev/guide/animations#click-animation)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
# Monaco Editor
|
||
|
||
Slidev provides built-in Monaco Editor support.
|
||
|
||
Add `{monaco}` to the code block to turn it into an editor:
|
||
|
||
```ts {monaco}
|
||
import { ref } from "vue";
|
||
import { emptyArray } from "./external";
|
||
|
||
const arr = ref(emptyArray(10));
|
||
```
|
||
|
||
Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
|
||
|
||
```ts {monaco-run}
|
||
import { version } from "vue";
|
||
import { emptyArray, sayHello } from "./external";
|
||
|
||
sayHello();
|
||
console.log(`vue ${version}`);
|
||
console.log(
|
||
emptyArray<number>(10).reduce(
|
||
(fib) => [...fib, fib.at(-1)! + fib.at(-2)!],
|
||
[1, 1]
|
||
)
|
||
);
|
||
```
|
||
|
||
---
|
||
|
||
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 />
|