feat(content): more content

layouts/auto-grid.vue

@@ -25,9 +25,13 @@ defineProps<{
   grid-template-columns: repeat(var(--columns, 2), 1fr);
   grid-auto-rows: var(--rows, auto);
   gap: var(--space-xs);
-}
-.auto-grid > * {
+
+  & > * {
     inline-size: 100%;
     block-size: 100%;
+  }
+  & > :deep(img) {
+    block-size: auto;
+  }
 }
 </style>

layouts/title-image.vue

@@ -13,7 +13,7 @@ const image = imageSrc(props.image)
 
 <template>
   <div class="slidev-layout h-full title">
-    <div class="grid grid-cols-2 h-full">
+    <div class="grid h-full gap-4">
       <div class="place-self-center">
         <slot />
       </div>
@@ -23,6 +23,9 @@ const image = imageSrc(props.image)
 </template>
 
 <style scoped>
+.grid {
+  grid-template-columns: 3fr 2fr;
+}
 .image {
   block-size: 100%;
   background-image: v-bind(image);

package.json

@@ -10,18 +10,18 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build": "slidev build example.md",
-    "dev": "slidev example.md",
-    "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png"
+    "build": "slidev build slides.md",
+    "dev": "slidev slides.md",
+    "export": "slidev export slides.md",
+    "screenshot": "slidev export slides.md --format png"
   },
   "dependencies": {
-    "@slidev/types": "^0.50.0-beta.10",
+    "@slidev/types": "^0.50.0-beta.11",
     "@unocss/reset": "^0.65.1"
   },
   "devDependencies": {
     "@shikijs/transformers": "^1.24.2",
-    "@slidev/cli": "^0.50.0-beta.10",
+    "@slidev/cli": "^0.50.0-beta.11",
     "prettier": "3.4.2",
     "prettier-plugin-slidev": "^1.0.5"
   },

public/images/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 32 32"><path fill="#9e0000" fill-rule="evenodd" d="M21.657 20.24a1.002 1.002 0 1 1-1.415 1.42l-4.236-4.24-4.266 4.27c-.394.39-1.032.39-1.426 0a1.015 1.015 0 0 1 0-1.43l4.266-4.27-4.236-4.23a1.006 1.006 0 0 1 0-1.42 1 1 0 0 1 1.414 0l4.236 4.24 4.298-4.3a1.014 1.014 0 0 1 1.425 0c.393.4.393 1.03 0 1.43l-4.297 4.3 4.237 4.23ZM16 0C7.163 0 0 7.16 0 16s7.163 16 16 16 16-7.16 16-16S24.837 0 16 0Z"/></svg>

slides.md

@@ -59,25 +59,62 @@ layout: content
 
 Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web
 
+<div v-click>
+
 > “&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;”
 
 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.
+</div>
+
+<div v-click>
+
+> <span lang="en">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.</span>
 
 <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
 
+</div>
+
+---
+layout: content
+---
+
+# Législation
+
+**Obligation actuelle :**
+
+- les personnes morales de droit public
+- les personnes morales délégataires d’une mission de service public
+- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros
+
+<div v-click>
+
+**À partir de Juin 2025 :**
+
+> Les entreprises employant moins de dix personnes qui fournissent des services et dont le chiffre d'affaires annuel n'excède pas deux millions d'euros.
+
+<cite>[article L412-13 du Code de la consommation](https://www.legifrance.gouv.fr/codes/id/LEGISCTA000047284903)</cite> (applicable au 28 juin 2025)
+
+> Tous les sites et plateformes de commerce électronique doivent être accessibles pour les nouveaux services à partir de 2025 et pour l’existant à partir de 2030.
+
+Plus de détails dans [cet article d'Access 42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)
+
+</div>
+
 ---
 layout: fact
 hideInToc: true
 ---
 
-# 30 % de la population française
-
-Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
+# <span class="highlight">30 %</span> de la population française <span class="visually-hidden">rencontre des difficultés au quotidien</span>
 
+<span aria-hidden="true">rencontre des difficultés (limitations fonctionnelles ou restrictions importantes) au quotidien.</span>  
 <cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>
 
+<hr>
+
+**La majorité des handicaps sont invisibles.**
+
 <!--
 certains sont temporaires, certains arrivent avec l'âge
 -->
@@ -104,7 +141,7 @@ columns: 2
 rows: 250px
 ---
 
-# Exemples de technologies d'assistance
+# Exemples de <span class="highlight">technologies d'assistance</span>
 
 ::content::
 
@@ -113,28 +150,11 @@ rows: 250px
 <Youtube id="SlxIEPEC_Qc" />
 <Youtube id="LHUyDhutx80" />
 
----
-layout: bullets
----
-
-# Bonnes pratiques en bref
-
-- 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
-
 ---
 layout: content
 ---
 
-# Éléments HTML sémantiques
+# &#8203;1. Éléments <span class="highlight">HTML sémantiques</span>
 
 ````md magic-move {lines: false}
 ```html
@@ -187,7 +207,7 @@ layout: auto-grid
 columns: 2
 ---
 
-# Structure des titres
+# &#8203;2. <span class="highlight">Structure</span> des titres
 
 ::content::
 
@@ -225,10 +245,11 @@ Correct
 Add-on HeadingsMap : [firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/), [chrome](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm)
 
 ---
-layout: content
+layout: title-image
+image: ours.jpg
 ---
 
-# Formulaires
+# &#8203;3. <span class="highlight">Formulaires</span>
 
 **Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.
 
@@ -242,7 +263,7 @@ layout: content
 
 <div v-click>
 
-Si le `label` doit être masqué, utiliser une classe CSS `visually-hidden` (ou `sr-only`).
+Si le `label` doit être masqué, utilisez une classe CSS `visually-hidden` (ou `sr-only`).
 
 ```css
 .visually-hidden {
@@ -258,21 +279,93 @@ Si le `label` doit être masqué, utiliser une classe CSS `visually-hidden` (ou
 
 </div>
 
-<a class="abs-br m-6" href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small></a>
+[Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small>](https://briefs.video/videos/what-happened-to-text-inputs/)
 
 ---
 layout: content
 ---
 
-Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur.
+<figure class="mb-4">
+	<figcaption>Facilitez le remplissage des champs avec des instructions claires, des exemples et des messages d'erreur.</figcaption>
+	<div class="grid cols-2 gap-4">
+		<img src="/images/form-1.png" alt="" />
+		<img src="/images/form-1-error.png" alt="" />
+	</div>
+</figure>
+
+<div v-click>
+
+Proposez du remplissage automatique et des claviers adaptés si besoin.
+
+```html{2-3,5-6}
+<form>
+	<label for="phone">Numéro de téléphone</label>
+	<input id="phone" type="tel" autocomplete="tel" inputmode="tel" />
+
+	<label for="email">Email</label>
+	<input id="email" type="email" autocomplete="email" inputmode="email" />
+</form>
+```
+
+</div>
 
 ---
-layout: center
-class: text-center
+layout: content
 ---
 
-# Learn More
+# &#8203;4. Polices et <span class="highlight">typographie</span>
 
-[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
+- unités
+  - utilisez des [unités relatives](https://whatunit.com/) (ex. `em`, `rem`, `lh`, `ex`) pour permettre aux utilisateurs de modifier la taille des polices
+  - ou des fonctions de calcul CSS (ex. `clamp()`, `calc()`)
+- taille des polices
+  - minimum `16px` (équivalent) pour le corps de texte
+  - créez une [échelle typographique fluide](https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12)
+- alignement du texte
+  - ne **JAMAIS** justifier le texte
+  - limitez les textes centrés
+  - évitez les sauts de ligne forcés `<br>`
+  - `text-wrap: balance;` sur les titres
+- familles
+  - préférez des polices travaillées pour leur lisibilité (ex. [Atkinson Hyperlegible](https://brailleinstitute.org/freefont), [Luciole](https://luciole-vision.com/))
+  - ou conservez le choix utilisateur `font-family: system-ui, FALLBACK;`
 
-<PoweredBySlidev mt-10 />
+---
+layout: title-image
+image: fleur.jpg
+---
+
+# &#8203;5. Vérifiez les <span class="highlight">contrastes</span>
+
+Sujet complexe car l'algorithme du WCAG repose uniquement sur des calculs et pas sur des tests visuels de perception.
+
+- [Calculateur WCAG](https://coolors.co/contrast-checker) officiellement intégré dans le standard d'accessibilité
+- [Calculateur APC](https://www.myndex.com/BPCA/) plus précis mais expérimental et non intégré à un quelconque standard.
+
+---
+layout: title-image
+image: pierre.jpeg
+---
+
+# &#8203;6. <span class="highlight">Simplifiez</span> l'interface, privilégiez <span class="highlight">le contenu</span>
+
+- ne cachez pas le contenu
+- n'animez pas (trop) le contenu  
+  `@media (prefers-reduced-motion: no-preference) { go crazy 🤪 }`
+- ne gênez pas le contenu
+- soulignez les liens, ne soulignez rien d'autre
+- ne supprimez pas le focus
+- n'utilisez pas uniquement la couleur pour indiquer un état
+
+---
+layout: title-image
+image: marmotte.jpg
+---
+
+# &#8203;7. Chouchoutez <span class="highlight">les images</span>
+
+- ajoutez systématiquement l'attribut `alt`
+  - `alt=""` si l'image est décorative
+  - `alt="[...]"` si l'image est porteuse d'information
+- renseignez si possible les attributs `width` et `height` pour éviter le "<span lang="en">layout shift</span>"
+- optimisez et convertissez dans des formats récents (ex. `webp`, `avif`)

styles/base.css

@@ -22,6 +22,7 @@ body {
   color: var(--color-dark);
   background-color: var(--color-light-white);
   accent-color: var(--color-brique);
+  text-wrap: pretty;
 }
 
 :is(h1, h2, h3, h4, .h2, .h3, .h4) {
@@ -85,16 +86,27 @@ hr.small {
   block-size: 2px;
 }
 
-ul:not([role='list']),
-ol:not([role='list']) {
-  padding-inline-start: 1rem;
+ul,
+ol {
+  padding-inline-start: 1em;
+  margin-block: var(--space-xs);
+  list-style-type: disc;
 }
 
-ul:not([role='list']) > li + li,
-ol:not([role='list']) > li + li {
+ul > li + li,
+ol > li + li {
   margin-block-start: var(--space-xs);
 }
 
+ul ul {
+  list-style-type: circle;
+}
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+  margin-block-start: var(--space-2xs);
+}
 .visually-hidden {
   position: absolute;
   overflow: hidden;
@@ -204,8 +216,12 @@ blockquote cite {
   line-height: 1.2;
 }
 
+figure > * + * {
+  margin-block-start: var(--space-xs);
+}
+
+/* GRID WRAPPER */
 .wrapper {
-  /* GRID WRAPPER */
   display: grid;
   grid-template-columns: var(--grid-wrapper);
   --_content-padding: var(--content-padding, var(--space-s));
@@ -226,11 +242,6 @@ blockquote cite {
   grid-column: full;
 }
 
-ul:not([role='list']),
-ol:not([role='list']) {
-  padding-inline-start: 1em;
-}
-
 :where(.slidev-layout > * + *) {
   margin-block-start: var(--space-xs);
 }

utils/imageHelper.ts

@@ -1,3 +1,3 @@
 export function imageSrc(src: string) {
-  return src.startsWith('http') ? `url(${src})` : `/images/${src}`
+  return src.startsWith('http') ? `url(${src})` : `url(/images/${src})`
 }