nicolas/slidev-theme-narduin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cc899c587f
slidev-theme-narduin/slides.md
nico cc899c587f
feat(content): more content
2024-12-17 22:50:34 +01:00

9.9 KiB
Raw Blame History

author download exportFilename lineNumbers remoteAssets htmlAttrs theme title info drawings transition mdc selectable overviewSnapshots hideInToc layout
Nicolas Arduin true intriduction-accessibilite-numerique true true
dir lang
ltr fr
./ Introduction à l'accessibilité numérique ## Commencer avec l'accessibilité Pourquoi, pour qui et comment ? Learn more at [Sli.dev](https://sli.dev)
persist
false
fade-out true true true true intro

L'accessibilité numérique en 10 étapes

Nico, Décembre 2024.
licence : CC BY-NC

hideInToc: true layout: bullets

Sommaire

layout: content

Contexte

“ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”

Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web

“ 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. ”

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.

W3C WAI

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

À 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.

article L412-13 du Code de la consommation (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

layout: fact hideInToc: true

30 % de la population française rencontre des difficultés au quotidien


Rapport 2024 de la DREES.

La majorité des handicaps sont invisibles.

layout: bullets hideInToc: true hide: true

L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :

  • auditifs
  • cognitifs
  • neurologiques
  • physiques
  • psychologiques
  • oraux
  • visuels

layout: auto-grid columns: 2 rows: 250px

Exemples de technologies d'assistance

::content::

layout: content

​1. Éléments HTML sémantiques

```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: auto-grid columns: 2

​2. Structure des titres

::content::

Erroné
└── h1 Titre principal
├── h2 Titre secondaire
├── h4 Titre niveau 4 // [!code error]
│ └── h5 Titre niveau 5
├── h2 Titre secondaire
│ ├── h2 Titre secondaire
│ ├── h3 Titre tertiaire
│ │ ├── h4 Titre niveau 4
│ │ │ └── h6 Titre niveau 6
│ └── h3 Titre tertiaire
└── h1 Titre principal

Correct
└── h1 Titre principal
├── h2 Titre secondaire
├── h2 Titre secondaire
│ └── h3 Titre tertiaire
├── h2 Titre secondaire
│ ├── h3 Titre tertiaire
│ ├── h3 Titre tertiaire
│ │ ├── h4 Titre niveau 4
│ │ │ └── h5 Titre niveau 5
│ └── h3 Titre tertiaire
└── h2 Titre secondaire

::after:: Add-on HeadingsMap : firefox, chrome

layout: title-image image: ours.jpg

​3. Formulaires

Toujours associer un label aux champs input, select, textarea, meter, progress.

// [!code word:name]
<form>
	<label for="name">Nom</label>
	<input id="name" type="text" />
</form>

Si le label doit être masqué, utilisez une classe CSS visually-hidden (ou sr-only).

.visually-hidden {
  position: absolute;
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

Qu'est-il arrivé au champ texte ? Vidéo en anglais.

layout: content

Facilitez le remplissage des champs avec des instructions claires, des exemples et des messages d'erreur.

Proposez du remplissage automatique et des claviers adaptés si besoin.

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

layout: content

​4. Polices et typographie

  • unités
    • utilisez des unités relatives (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
  • 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, Luciole)
    • ou conservez le choix utilisateur font-family: system-ui, FALLBACK;

layout: title-image image: fleur.jpg

​5. Vérifiez les contrastes

Sujet complexe car l'algorithme du WCAG repose uniquement sur des calculs et pas sur des tests visuels de perception.

  • Calculateur WCAG officiellement intégré dans le standard d'accessibilité
  • Calculateur APC plus précis mais expérimental et non intégré à un quelconque standard.

layout: title-image image: pierre.jpeg

​6. Simplifiez l'interface, privilégiez le contenu

  • 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

​7. Chouchoutez les images

  • 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 "layout shift"
  • optimisez et convertissez dans des formats récents (ex. webp, avif)