diff --git a/setup/shiki.ts b/setup/shiki.ts new file mode 100644 index 0000000..817df43 --- /dev/null +++ b/setup/shiki.ts @@ -0,0 +1,7 @@ +import { defineShikiSetup } from '@slidev/types' + +export default defineShikiSetup(() => { + return { + theme: 'one-dark-pro', + } +}) diff --git a/slides.md b/slides.md index 5c2835f..ba3a493 100644 --- a/slides.md +++ b/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 --- - 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 --- - layout: fact hideInToc: true - --- # 1 personne sur 5 est handicapée @@ -77,10 +81,8 @@ 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. ” @@ -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
@@ -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 + +
+
+ Accueil + À propos + Contact +
+
+
+

Titre de la page

+

Titre de la section

+

Contenu de la page

+
+
+

Pied de page

+
+ +``` +```html + +
+ +
+
+

Titre de la page

+
+

Titre de la section

+

Contenu de la page

+
+
+
+

Pied de page

+
+ +``` +```` +--- +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 --- - 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 +---

Mauvais exemple :

@@ -190,6 +246,7 @@ C'est si simple de faire n'importe quoi 🤪
+ ::right::
@@ -222,10 +279,8 @@ C'est si simple de faire n'importe quoi 🤪
--- - layout: image-right image: https://cover.sli.dev - --- # Code diff --git a/snippets/index.html b/snippets/index.html new file mode 100644 index 0000000..403ba80 --- /dev/null +++ b/snippets/index.html @@ -0,0 +1,42 @@ + + +
+
+ Accueil + À propos + Contact +
+
+
+

Titre de la page

+

Titre de la section

+

Contenu de la page

+
+
+

Pied de page

+
+ + + + +
+ +
+
+

Titre de la page

+
+

Titre de la section

+

Contenu de la page

+
+
+
+

Pied de page

+
+ + \ No newline at end of file diff --git a/styles/index.ts b/styles/index.ts new file mode 100644 index 0000000..c875cdc --- /dev/null +++ b/styles/index.ts @@ -0,0 +1 @@ +import './style.css' \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100755 index 0000000..4484e8b --- /dev/null +++ b/styles/style.css @@ -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; +} \ No newline at end of file