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 |
L'accessibilité numérique en 10 étapes
hideInToc: true layout: bullets
Sommaire
layout: content
Contexte
“ 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
“ 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
The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.
W3C WAI
layout: fact hideInToc: true
30 % de la population française
Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
layout: bullets hideInToc: true hide: 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: auto-grid columns: 2
Exemples de technologies d'assistance
::content::
layout: bullets
Bonnes pratiques en bref
- 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 HTML 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: auto-grid columns: 2
Structure des titres
::content::
Erroné
└── h1 Titre principal
├── h2 Titre secondaire // [!code --]
├── h4 Titre niveau 4 // [!code error]
│ └── 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
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]
)
)