--- # 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
Nico, Décembre 2024.
licence : CC BY-NC
--- ## 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 - HTML sémantique - structure du contenu (titres) - contrastes des couleurs - taille des polices - intitulés de formulaire - messages d’erreur - 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 ``` --- layout: center hideInToc: true --- # les Formulaires C'est si simple de faire n'importe quoi 🤪 --- ## layout: two-cols

Mauvais exemple :

::right::

Bon exemple :

Il y a 2 erreurs de saisie dans le formulaire.

  1. Veuillez renseigner un nom.
  2. L'email renseigné n'est pas valide.

Format attendu: nom@email.fr

Qu'est-il arrivé au champ texte ? Vidéo en anglais.
--- 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 --- ```
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.
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)