prez-a11y/slides.md

508 lines
10 KiB
Markdown
Raw Normal View History

2024-12-12 15:22:05 +01:00
---
# You can also start simply with 'default'
theme: apple-basic
# 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&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
# 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
---
# “&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;”
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
---
# “&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;”
Access 42
---
layout: bullets
hideInToc: true
---
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
- 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
- HTML sémantique
- structure du contenu (titres)
- contrastes des couleurs
- taille des polices
- intitulés de formulaire
- messages derreur
- supprimer les animations/le mouvement (carousel, vidéo, scroll, etc.)
- écrire simplement et clairement
---
```text {all|2|3|4|none}
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
```
```text {none|all}
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&nbsp;:</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&nbsp;:</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&nbsp;? <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 />