<ahref="https://www.nardu.in"rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence : <ahref="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)
# “ 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 :
<ahref="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!
[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 -->
<scriptsetup>
const author = {
name: "John Doe",
books: [
"Vue 2 - Advanced Guide",
"Vue 3 - Basic Guide",
"Vue 4 - The Mystery",
],
};
</script>
```
````
---
# Components
<divgrid="~ 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
<Tweetid="1390115482657726468"/>
```
<Tweetid="1390115482657726468"scale="0.65"/>
</div>
</div>
<!--
Presenter note with **bold**, *italic*, and ~~striked~~ text.
Also, HTML elements are valid:
<divclass="flex w-full">
<spanstyle="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:
