---
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
---
hideInToc: true
---
# Sommaire
---
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
---
layout: fact
hideInToc: true
---
# 1 personne sur 5 est handicapée
La majorité des handicaps sont invisibles.
---
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
---
# 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
Titre de la page
Titre de la section
Contenu de la page
```
```html
Titre de la page
Titre de la section
Contenu de la page
```
````
---
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
```
---
layout: center
hideInToc: true
---
# les Formulaires
C'est si simple de faire n'importe quoi 🤪
---
layout: two-cols
---
Mauvais exemple :
::right::
---
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;
```
<<< @/snippets/external.ts#snippet
[Learn more](https://sli.dev/features/line-highlighting)
---
## 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 ````md magic-move (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
```
````
---
# Components
You can use Vue components directly inside your slides.
We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy.
```html
```
Check out [the guides](https://sli.dev/builtin/components.html) for more.
```html
```
---
## 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:
```yaml
---
theme: default
---
```
```yaml
---
theme: seriph
---
```
This shows up when you click the slide:
```html
This shows up when you click the slide.
```
The v-mark directive
also allows you to add
inline marks
, powered by [Rough Notation](https://roughnotation.com/):
```html
inline markers
```
[Learn more](https://sli.dev/guide/animations#click-animation)
---
# 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(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)