content
This commit is contained in:
parent
c364a03d2f
commit
90445cc837
7
setup/shiki.ts
Normal file
7
setup/shiki.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineShikiSetup } from '@slidev/types'
|
||||
|
||||
export default defineShikiSetup(() => {
|
||||
return {
|
||||
theme: 'one-dark-pro',
|
||||
}
|
||||
})
|
||||
123
slides.md
123
slides.md
@ -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
|
||||
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)
|
||||
title: Introduction à l'accessibilité numérique
|
||||
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
|
||||
|
||||
<Toc maxDepth="1"></Toc>
|
||||
|
||||
---
|
||||
|
||||
layout: intro-image-right
|
||||
image: '/images/ours.jpg'
|
||||
|
||||
---
|
||||
|
||||
# l'Accessibilité Numérique
|
||||
@ -51,10 +59,8 @@ image: '/images/ours.jpg'
|
||||
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. ”
|
||||
@ -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 -->
|
||||
|
||||
---
|
||||
|
||||
layout: fact
|
||||
hideInToc: true
|
||||
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
---
|
||||
|
||||
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. ”
|
||||
@ -88,10 +90,8 @@ hideInToc: true
|
||||
Access 42
|
||||
|
||||
---
|
||||
|
||||
layout: bullets
|
||||
hideInToc: true
|
||||
|
||||
---
|
||||
|
||||
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
|
||||
@ -104,11 +104,11 @@ hideInToc: true
|
||||
- oraux
|
||||
- visuels
|
||||
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
|
||||
## layout: center
|
||||
|
||||
## Exemples de technologies d'assistance
|
||||
# Exemples de technologies d'assistance
|
||||
|
||||
<div grid="~ cols-2 gap-4">
|
||||
<Youtube id="nw6-eDJXWzY" />
|
||||
@ -119,20 +119,77 @@ hideInToc: true
|
||||
|
||||
---
|
||||
|
||||
# Bonnes pratiques
|
||||
# Bonnes pratiques en bref
|
||||
|
||||
- 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
|
||||
- [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
|
||||
- structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
|
||||
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
|
||||
- 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](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é
|
||||
└── h1 Titre principal
|
||||
├── h2 Titre secondaire
|
||||
@ -146,8 +203,9 @@ Erroné
|
||||
│ └── h3 Titre tertiaire
|
||||
└── h1 Titre principal
|
||||
```
|
||||
::right::
|
||||
|
||||
```text {none|all}
|
||||
```md {none|all}{lines: false}
|
||||
Correct
|
||||
└── h1 Titre principal
|
||||
├── h2 Titre secondaire
|
||||
@ -167,10 +225,8 @@ Correct
|
||||
<!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) -->
|
||||
|
||||
---
|
||||
|
||||
layout: center
|
||||
hideInToc: true
|
||||
|
||||
---
|
||||
|
||||
# les Formulaires
|
||||
@ -178,8 +234,8 @@ hideInToc: true
|
||||
C'est si simple de faire n'importe quoi 🤪
|
||||
|
||||
---
|
||||
|
||||
## layout: two-cols
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
<div class="form">
|
||||
<h2>Mauvais exemple :</h2>
|
||||
@ -190,6 +246,7 @@ C'est si simple de faire n'importe quoi 🤪
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
::right::
|
||||
|
||||
<div class="form">
|
||||
@ -222,10 +279,8 @@ C'est si simple de faire n'importe quoi 🤪
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
layout: image-right
|
||||
image: https://cover.sli.dev
|
||||
|
||||
---
|
||||
|
||||
# Code
|
||||
|
||||
42
snippets/index.html
Normal file
42
snippets/index.html
Normal 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
1
styles/index.ts
Normal file
@ -0,0 +1 @@
|
||||
import './style.css'
|
||||
52
styles/style.css
Executable file
52
styles/style.css
Executable 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user