feat(content): added much content

2024-12-19 14:07:20 +01:00 · 2024-12-19 14:07:20 +01:00 · ede9c49e9f
commit ede9c49e9f
parent cc899c587f
7 changed files with 141 additions and 20 deletions
--- a/layouts/quote.vue
+++ b/layouts/quote.vue
@ -1,5 +1,17 @@
 <template>
  <div class="slidev-layout place-content-center">
+    <blockquote>
+      <slot name="quote" />
+    </blockquote>
    <slot />
  </div>
 </template>
+
+<style scoped>
+blockquote {
+  padding: 0;
+  margin: var(--space-s) 0;
+  border: initial;
+  background: initial;
+}
+</style>
--- a/layouts/title-image.vue
+++ b/layouts/title-image.vue
@ -5,6 +5,14 @@ const props = defineProps({
  image: {
    type: String,
    required: true
+  },
+  ratio: {
+    type: String,
+    default: '3fr 2fr'
+  },
+  imageAlign: {
+    type: String,
+    default: 'center'
  }
 })

@ -14,7 +22,7 @@ const image = imageSrc(props.image)
 <template>
  <div class="slidev-layout h-full title">
    <div class="grid h-full gap-4">
-      <div class="place-self-center">
+      <div>
        <slot />
      </div>
      <div class="image"></div>
@ -24,12 +32,12 @@ const image = imageSrc(props.image)

 <style scoped>
 .grid {
-  grid-template-columns: 3fr 2fr;
+  grid-template-columns: v-bind(ratio);
 }
 .image {
  block-size: 100%;
  background-image: v-bind(image);
  background-size: cover;
-  background-position: center;
+  background-position: v-bind(imageAlign);
 }
 </style>
--- a/pages/eco.md
+++ b/pages/eco.md
@ -0,0 +1,6 @@
+---
+layout: title-image
+image: brumm.avif
+---
+
+# <span class="highlight">Sobriété</span> et performances
--- a/public/images/field.jpg
+++ b/public/images/field.jpg
--- a/public/images/surricate.jpg
+++ b/public/images/surricate.jpg
--- a/slides.md
+++ b/slides.md
@ -33,13 +33,9 @@ layout: intro
 # <span class="highlight">L'accessibilité numérique</span> en 10 étapes

 <div class="abs-br m-6">
-    <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
+    <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferer noopener">CC BY-SA</a>
 </div>

-<!--
-The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->
-
 ---
 hideInToc: true
 layout: bullets
@ -122,10 +118,9 @@ certains sont temporaires, certains arrivent avec l'âge
 ---
 layout: bullets
 hideInToc: true
-hide: true
 ---

-## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
+## L'accessibilité numérique englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:

 - auditifs
 - cognitifs
@ -251,13 +246,15 @@ image: ours.jpg

 # &#8203;3. <span class="highlight">Formulaires</span>

-**Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.
+- Associez **toujours** un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`
+- Indiquez clairement les champs obligatoires
+- Ne désactivez pas le bouton d'envoi

 ```html{2,3}
 // [!code word:name]
 <form>
-	<label for="name">Nom</label>
-	<input id="name" type="text" />
+	<label for="name">Nom (obligatoire)</label>
+	<input id="name" type="text" required/>
 </form>
 ```

@ -279,8 +276,6 @@ Si le `label` doit être masqué, utilisez une classe CSS `visually-hidden` (ou

 </div>

-[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
 ---
@ -307,6 +302,8 @@ Proposez du remplissage automatique et des claviers adaptés si besoin.
 </form>
 ```

+<small>[Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small>](https://briefs.video/videos/what-happened-to-text-inputs/)</small>
+
 </div>

 ---
@ -349,23 +346,121 @@ 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
+- ne cachez pas le contenu ([carousel much?](https://shouldiuseacarousel.com/), [tabs much?](https://www.youtube.com/live/XntrwuBjE5c?feature=shared&t=1582))
 - 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
+- faites des phrases courtes et [faciles à comprendre](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile)

 ---
 layout: title-image
 image: marmotte.jpg
 ---

-# &#8203;7. Chouchoutez <span class="highlight">les images</span>
+# &#8203;7. Chouchoutez <span class="highlight">les images</span> et vidéos
+
+## images

 - ajoutez systématiquement l'attribut `alt`
  - `alt=""` si l'image est décorative
-  - `alt="[...]"` si l'image est porteuse d'information
+  - `alt="[DESCRIPTION]"` 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`)
+- [redimensionnez, optimisez et convertissez](https://squoosh.app/) dans des formats récents (ex. `webp`, `avif`)
+
+## vidéos
+
+- ne lancez pas la lecture automatiquement
+- [redimensionnez, optimisez et convertissez](https://handbrake.fr/) dans des formats récents (ex. `h265`, `av1`)
+
+---
+layout: title-image
+image: tigre.avif
+image-align: right
+---
+
+# &#8203;8. Éléments <span class="highlight">obligatoires</span>
+
+- ajoutez systématiquement les attributs&nbsp;:  
+  `<html lang="[langue de la page]" dir="[sens de lecture]">`
+- signalez les changements de langue dans le contenu avec `lang`
+- renseignez un `title` pour chaque page
+- n'utilisez pas une balise pour faire de la mise en forme (ex. `h3` à la place d'un `h2` pour le rendre plus petit).
+
+<small>**Astuce&nbsp;:** créez une classe correspondant à chaque niveau de titre afin de garder la hiérarchie intacte.</small>
+
+```css
+/* [!code word:.h2] */
+h2,
+.h2 {
+  font-size: 4rem;
+  font-weight: bold;
+}
+/* [!code word:.h3] */
+h3,
+.h3 {
+  font-size: 3rem;
+  font-weight: 300;
+}
+```
+
+---
+layout: title-image
+image: surricate.jpg
+---
+
+# &#8203;9. Trucs <span class="highlight">en plus</span>
+
+- Designez pour `320px` de large au minimum
+- Ajoutez au moins un [lien d'évitement](https://accessibilite.numerique.gouv.fr/methode/glossaire/#liens-d-evitement-ou-d-acces-rapide)
+- Ne changez pas [l'ordre de tabulation](https://accessibilite.numerique.gouv.fr/methode/glossaire/#ordre-de-tabulation) de la page
+- Capturez le <span lang="en">focus</span> dans les fenêtre modale/menu
+- Proposez au moins deux systèmes de navigation (menu, plan du site, moteur de recherche)
+- [N'abusez pas d'ARIA](https://briefs.video/videos/what-is-aria-even-for/)
+  > Les pages d'accueil avec de l'ARIA affichent en moyenne 34,2 % d'erreurs (détectées) en plus que celles sans ARIA.  
+  > <small>[source](https://webaim.org/projects/million/#:~:text=Home%20pages%20with%20ARIA%20present%20averaged%2034.2%25%20more%20detected%20errors%20than%20those%20without%20ARIA)</small>
+
+---
+layout: title-image
+image: field.jpg
+ratio: 1fr 1fr
+---
+
+# &#8203;10. (in)<span class="highlight">Formez-vous</span>
+
+## Formations
+
+- [Access42](https://formations.access42.net/formations/)
+- [<span lang="en">Practical Accessibility</span>](https://practical-accessibility.today/)
+
+## Ressources
+
+- [Référentiel général d’amélioration de l’accessibilité (RGAA)](https://accessibilite.numerique.gouv.fr/)
+- [Blog Access42](https://access42.net/blog/)
+- [Webbed Briefs](https://briefs.video/) (vidéo, anglais)
+- [Adrian Rosseli](https://adrianroselli.com/) (blog, anglais)
+
+## Conférences
+
+- [Paris Web](https://www.paris-web.fr/)
+- [a11y Paris](https://www.a11yparis.org/)
+- [CSS Day](https://cssday.nl)
+
+---
+layout: quote
+---
+
+::quote::
+
+# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seule remède.
+
+::default::
+
+Heydon Pickering <cite>[The Folly of Chasing Demographics](https://www.youtube.com/watch?v=XntrwuBjE5c)</cite>
+
+---
+src: ./pages/eco.md
+hide: false
+---
--- a/styles/base.css
+++ b/styles/base.css
@ -30,7 +30,7 @@ body {
  text-wrap: balance;
 }
 :is(h1, h2, h3, h4, .h2, .h3, .h4) + * {
-  margin-block-start: var(--space-s);
+  margin-block-start: var(--space-xs);
 }
 :is(h1) {
  max-inline-size: 20ch;