12 KiB
| author | download | exportFilename | lineNumbers | remoteAssets | htmlAttrs | theme | title | info | drawings | transition | mdc | selectable | overviewSnapshots | hideInToc | layout | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Nicolas Arduin | true | intriduction-accessibilite-numerique | true | true |
|
./ | Introduction à l'accessibilité numérique | ## Commencer avec l'accessibilité Pourquoi, pour qui et comment ? Learn more at [Sli.dev](https://sli.dev) |
|
fade-out | true | true | true | true | intro |
Introduction à l'accessibilité numérique
hideInToc: true layout: bullets
Sommaire
layout: title-image image: https://cover.sli.dev
l'Accessibilité Numérique
Pourquoi, pour qui, comment ?
layout: quote level: 2 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
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
- structure du contenu (titres)
- contrastes des couleurs (outil)
- 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)
- simplifier l'interface utilisateur
Éléments sémantiques
```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::
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::
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 :
Envoyer::right::
layout: image-right image: https://cover.sli.dev
Code
Use code snippets and get the highlighting directly, and even types hover!
// 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
level: 2
Shiki Magic Move
Powered by shiki-magic-move, 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:
```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
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.
<Counter :count="10" />
Check out the guides for more.
<Tweet id="1390115482657726468" />
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:
---
theme: default
---
---
theme: seriph
---
Read more about How to use a theme and check out the Awesome Themes Gallery.
Clicks Animations
You can add v-click to elements to add a click animation.
This shows up when you click the slide:
<div v-click>This shows up when you click the slide.</div>
The v-mark directive
also allows you to add
inline marks
, powered by Rough Notation:
<span v-mark.underline.orange>inline markers</span>
Monaco Editor
Slidev provides built-in Monaco Editor support.
Add {monaco} to the code block to turn it into an editor:
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:
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