nicolas/prez-a11y
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

content

Browse Source
This commit is contained in:
nicolas arduin 2024-12-12 18:31:47 +01:00
parent c364a03d2f
commit 90445cc837
5 changed files with 191 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
setup/shiki.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
theme: 'one-dark-pro',
}
})

123
slides.md
View File

@ -1,6 +1,17 @@
--- ---
# You can also start simply with 'default' author: Nicolas Arduin
download: true
exportFilename: intriduction-accessibilite-numerique
lineNumbers: true
remoteAssets: true
colorSchema: light
htmlAttrs:
dir: ltr
lang: fr
theme: apple-basic theme: apple-basic
fonts:
sans: 'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif'
local: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
# some information about your slides (markdown enabled) # some information about your slides (markdown enabled)
title: Introduction à l'accessibilité numérique title: Introduction à l'accessibilité numérique
info: | info: |
@ -32,18 +43,15 @@ The last comment block of each slide will be treated as slide notes. It will be
--> -->
--- ---
hideInToc: true
## hideInToc: true ---
# Sommaire # Sommaire
<Toc maxDepth="1"></Toc> <Toc maxDepth="1"></Toc>
--- ---
layout: intro-image-right layout: intro-image-right
image: '/images/ours.jpg' image: '/images/ours.jpg'
--- ---
# l'Accessibilité Numérique # l'Accessibilité Numérique
@ -51,10 +59,8 @@ image: '/images/ours.jpg'
Pourquoi, pour qui, comment ? Pourquoi, pour qui, comment ?
--- ---
layout: quote layout: quote
hideInToc: true 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;” # “&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;”
@ -64,10 +70,8 @@ Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
<!-- Accès universel (accessible) dès la création de l'outil --> <!-- Accès universel (accessible) dès la création de l'outil -->
--- ---
layout: fact layout: fact
hideInToc: true hideInToc: true
--- ---
# 1 personne sur 5 est handicapée # 1 personne sur 5 est handicapée
@ -77,10 +81,8 @@ La majorité des handicaps sont invisibles.
<!-- certains sont temporaires, certains arrivent avec l'âge --> <!-- certains sont temporaires, certains arrivent avec l'âge -->
--- ---
layout: quote layout: quote
hideInToc: true hideInToc: true
--- ---
# “&nbsp;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.&nbsp;” # “&nbsp;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.&nbsp;”
@ -88,10 +90,8 @@ hideInToc: true
Access 42 Access 42
--- ---
layout: bullets layout: bullets
hideInToc: true hideInToc: true
--- ---
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;: ## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
@ -104,11 +104,11 @@ hideInToc: true
- oraux - oraux
- visuels - visuels
---
layout: center
--- ---
## layout: center # Exemples de technologies d'assistance
## Exemples de technologies d'assistance
<div grid="~ cols-2 gap-4"> <div grid="~ cols-2 gap-4">
<Youtube id="nw6-eDJXWzY" /> <Youtube id="nw6-eDJXWzY" />
@ -119,20 +119,77 @@ hideInToc: true
--- ---
# Bonnes pratiques # Bonnes pratiques en bref
- HTML sémantique - [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
- structure du contenu (titres) - structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
- contrastes des couleurs - contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
- taille des polices - taille et unités des polices
- intitulés de formulaire - formulaire
- messages d’erreur - intitulés
- supprimer les animations/le mouvement (carousel, vidéo, scroll, etc.) - aide à la saisie
- écrire simplement et clairement - messages d’erreur
- animations/mouvement (carousel, vidéo, scroll, etc.)
- écrire simplement et clairement ([FALC](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile))
- simplifier l'interface utilisateur
--- ---
```text {all|2|3|4|none} # Éléments sémantiques
````md magic-move {lines: true}
```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::
```md {all|2|3|4|none}{lines: false}
Erroné Erroné
└── h1 Titre principal └── h1 Titre principal
├── h2 Titre secondaire ├── h2 Titre secondaire
@ -146,8 +203,9 @@ Erroné
│ └── h3 Titre tertiaire │ └── h3 Titre tertiaire
└── h1 Titre principal └── h1 Titre principal
``` ```
::right::
```text {none|all} ```md {none|all}{lines: false}
Correct Correct
└── h1 Titre principal └── h1 Titre principal
├── h2 Titre secondaire ├── h2 Titre secondaire
@ -167,10 +225,8 @@ Correct
<!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) --> <!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) -->
--- ---
layout: center layout: center
hideInToc: true hideInToc: true
--- ---
# les Formulaires # les Formulaires
@ -178,8 +234,8 @@ hideInToc: true
C'est si simple de faire n'importe quoi 🤪 C'est si simple de faire n'importe quoi 🤪
--- ---
layout: two-cols
## layout: two-cols ---
<div class="form"> <div class="form">
<h2>Mauvais exemple&nbsp;:</h2> <h2>Mauvais exemple&nbsp;:</h2>
@ -190,6 +246,7 @@ C'est si simple de faire n'importe quoi 🤪
</form> </form>
</div> </div>
::right:: ::right::
<div class="form"> <div class="form">
@ -222,10 +279,8 @@ C'est si simple de faire n'importe quoi 🤪
</div> </div>
--- ---
layout: image-right layout: image-right
image: https://cover.sli.dev image: https://cover.sli.dev
--- ---
# Code # Code

42
snippets/index.html Normal file
View File

@ -0,0 +1,42 @@
<!-- #region incorrect -->
<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>
<!-- #endregion incorrect -->
<!-- #region correct -->
<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>
<!-- #endregion correct -->

1
styles/index.ts Normal file
View File

@ -0,0 +1 @@
import './style.css'

52
styles/style.css Executable file
View File

@ -0,0 +1,52 @@
.slidev-layout a {
text-decoration: underline;
border: 0;
}
.slidev-layout a:hover {
color: inherit;
text-decoration: none;
}
.slidev-layout ul ul {
margin-top: 0
}
.slidev-layout ul ul > li {
list-style-type: circle;
}
li + li {
margin-top: .3rem;
}
.form form {
margin-top: 1rem;
display: flex;
flex-direction: column;
align-items: start;
gap: .5rem;
}
.form span {
font-size: .8rem;
}
.form label {
font-size: .9rem;
}
.form input {
padding: 4px 6px;
font-size: .8rem;
border: 1px solid black;
border-radius: 6px;
}
.nul input:focus, .nul button:focus {
outline: none;
}
.form button {
padding: .2rem .3rem;
font-size: .9rem;
border-radius: 6px;
color: white;
background-color: #222;
}
.form .error {
font-size: .8rem;
color: red;
}