nicolas/slidev-theme-narduin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ede9c49e9f
slidev-theme-narduin/slides.md

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

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

L'accessibilité numérique 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

  • Associez toujours un label aux champs input, select, textarea, meter, progress
  • Indiquez clairement les champs obligatoires
  • Ne désactivez pas le bouton d'envoi
// [!code word:name]
<form>
	<label for="name">Nom (obligatoire)</label>
	<input id="name" type="text" required/>
</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;
}

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>

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

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 (carousel much?, tabs much?)
  • 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

layout: title-image image: marmotte.jpg

​7. Chouchoutez les images et vidéos

images

  • ajoutez systématiquement l'attribut alt
    • alt="" si l'image est décorative
    • alt="[DESCRIPTION]" si l'image est porteuse d'information
  • renseignez si possible les attributs width et height pour éviter le "layout shift"
  • redimensionnez, optimisez et convertissez dans des formats récents (ex. webp, avif)

vidéos

layout: title-image image: tigre.avif image-align: right

​8. Éléments obligatoires

  • ajoutez systématiquement les attributs :
    <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).

Astuce : créez une classe correspondant à chaque niveau de titre afin de garder la hiérarchie intacte.

/* [!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

​9. Trucs en plus

  • Designez pour 320px de large au minimum
  • Ajoutez au moins un lien d'évitement
  • Ne changez pas l'ordre de tabulation de la page
  • Capturez le focus 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

    Les pages d'accueil avec de l'ARIA affichent en moyenne 34,2 % d'erreurs (détectées) en plus que celles sans ARIA.
    source

layout: title-image image: field.jpg ratio: 1fr 1fr

​10. (in)Formez-vous

Formations

Ressources

Conférences

layout: quote

::quote::

Rien n'est accessible à tout le monde. Par conséquent, tout ce que vous ajoutez à votre interface ne peut que la rendre moins accessible. La simplicité (sobriété) est le seule remède.

::default::

Heydon Pickering The Folly of Chasing Demographics

src: ./pages/eco.md hide: false