♿ Accessibilité HTML : le Web est pour tout le monde

aria-label est bien plus important que tu ne le penses ! 😎

Bonjour bel humain, mon/ma chéri·e passionné·e d’accessibilité 💖
Aujourd’hui, je débarque avec un mélange de HTML, une pincée d’empathie, et plein de moments
« Pourquoi je n’ai pas fait ça plus tôt ? ».

Imagine un site web :

• Le design est sublime ✨
• Les animations volent 🛸
• Le code est propre, les indentations parfaitement alignées 🧼

Mais ensuite…

• 👩‍🦯 Un utilisateur de lecteur d’écran se perd sur le site
• ⌨️ Un utilisateur au clavier n’arrive pas à atteindre le bouton
• 🧠 Une personne ayant des difficultés de lecture ne comprend pas le contenu

À ce moment-là, le site semble dire :

« Je ne suis pas fait pour tout le monde. » 😬

Mais nous, qu’est-ce qu’on dit ?

Le Web est pour tout le monde. ♿💙

Si tu es prêt·e, plongeons dans le monde de l’accessibilité HTML 🚀

🤔 Qu’est-ce que l’accessibilité ? (Et pour qui ?)

L’accessibilité (en abrégé a11y, à cause des 11 lettres entre le a et le y 😄) vise à rendre les sites web utilisables par tout le monde.

Pour qui ?

• Les personnes malvoyantes 👁️‍🦯
• Les personnes malentendantes 👂
• Les personnes ayant des capacités motrices limitées 🖐️
• Les personnes ayant des troubles de l’attention ou de la lecture 🧠

Petite surprise 🎁

L’accessibilité n’est pas réservée aux personnes en situation de handicap :

• Les personnes essayant de lire un écran en plein soleil ☀️
• Les utilisateurs avec une souris cassée ⌨️
• Les personnes âgées 👵
• Les utilisateurs avec une connexion lente 🐢

Un site accessible = une meilleure expérience utilisateur 😌

🧠 Pourquoi l’accessibilité est-elle si cruciale ?

Parce que :

• ❌ Un site inaccessible est abandonné
• ❌ Les utilisateurs se frustrent
• ❌ Google fait la tête 😐

Mais un site accessible, c’est :

• ✔️ Un meilleur SEO
• ✔️ Un temps de visite plus long
• ✔️ Plus d’utilisateurs

Le langage d’amour secret de Google :
l’expérience utilisateur ❤️

🏗️ 1. HTML sémantique : la base de l’accessibilité

La toute première étape de l’accessibilité : utiliser la bonne balise au bon endroit.

❌ Mauvaise utilisation

<div onclick="goHome()">Home</div>

Ce que pense un lecteur d’écran :

« Une div… mais elle sert à quoi ? » 🤨

✅ Bonne utilisation

<button>Home</button>

Pourquoi ?

• Les lecteurs d’écran la reconnaissent
• Elle est accessible au clavier
• Les navigateurs savent exactement ce que c’est

Les balises sémantiques les plus importantes

<header>
<nav>
<main>
<section>
<article>
<footer>

HTML sémantique = code qui s’explique tout seul 🗣️

🖼️ 2. Images et alt : voir pour celles et ceux qui ne peuvent pas

❌ L’erreur la plus courante

<img src="product.jpg">

❌ Encore pire

<img src="product.jpg" alt="image">

✅ Bonne utilisation

<img src="product.jpg" alt="Un ordinateur portable noir posé sur une table en bois">

Images décoratives

<img src="line.png" alt="">

Le texte alt = l’histoire de l’image 📖

🏷️ 3. aria-label : invisible mais vital

Quand faut-il utiliser aria-label ?

• Les boutons sans texte visible
• Les liens composés uniquement d’icônes
• Les éléments dont le sens n’est pas clair via le symbole

❌ Exemple problématique

<button>🔍</button>

✅ Exemple accessible

<button aria-label="Rechercher">🔍</button>

aria-label = un secret chuchoté aux lecteurs d’écran 💌

⚠️ Attention :
N’utilise pas aria-label inutilement.
D’abord le HTML sémantique, ensuite ARIA.

⌨️ 4. Accessibilité clavier : la vie existe sans souris

Pose-toi la question :

« Puis-je utiliser ce site sans souris ? » 🤔

❌ Mauvais

<div onclick="submitForm()">Submit</div>

✅ Bon

<button type="submit">Submit</button>

Le problème du focus

button:focus {
  outline: 3px solid #000;
}

Supprimer le focus = laisser l’utilisateur dans le noir 🌑

🎨 5. Couleurs, contrastes et la réalité du daltonisme

❌ Mauvaise approche

• « Rouge = erreur, vert = succès »

✅ Bonne approche

• Couleur + icône + texte

<span class="error">❌ Une erreur est survenue</span>

La couleur seule n’est pas un message 🎨

🧾 6. Accessibilité des formulaires : rendons-les moins douloureux

❌ Mauvais

<input type="email" placeholder="Email">

✅ Bon

<label for="email">Email</label>
<input id="email" type="email">

Exemple de message d’erreur

<p id="error" role="alert">L’email est obligatoire</p>

Les placeholders sont temporaires, les labels sont éternels ❤️

🧪 7. Mini check-list d’accessibilité

• ✔️ Les textes alt sont-ils renseignés ?
• ✔️ L’ordre des titres est-il correct ? (h1 → h2)
• ✔️ Peut-on tout naviguer au clavier ?
• ✔️ aria-label est-il vraiment nécessaire ?
• ✔️ Le contraste est-il suffisant ?

Chaque ✔️ = un Web plus juste 🌍

🎯 Le grand résumé (code + conscience)

• L’accessibilité n’est pas optionnelle
• Le HTML est la base de tout
• aria-label n’est pas une décoration, c’est une nécessité
• Un site accessible = un site de qualité

Si tu ne construis pas le Web pour tout le monde,
tu le construis de manière incomplète, mon/ma chéri·e ♿💙