Quelle est la différence entre sémantique et…

La sémantique aide les machines (navigateurs, analyseurs, robots de recherche) à comprendre la structure et le sens du contenu. L'accessibilité (a11y) vise à rendre le contenu compréhensible et utilisable par des personnes ayant diverses limitations physiques ou cognitives utilisant des technologies d'assistance.

Balises sémantiques

L'utilisation de balises HTML sémantiques, telles que <article>, <nav>, <aside>, <footer>, <h1>-<h6>, donne un sens aux éléments de la page. Par exemple:

<article>
  <h2>Titre de l'article</h2>
  <p>Texte de l'article...</p>
</article>

Cela aide les navigateurs à interpréter correctement la structure du document.

Accessibilité (a11y)

L'accessibilité couvre de nombreux aspects:

Sémantique: L'utilisation correcte des balises sémantiques fait déjà partie de l'accessibilité, car elle aide les technologies d'assistance (lecteurs d'écran) à comprendre la structure et la fonction des éléments.
Attributs ARIA: Des attributs supplémentaires, tels que aria-label, aria-describedby, aria-hidden, role, fournissent des informations supplémentaires pour les technologies d'assistance lorsque la sémantique HTML n'est pas suffisante.
```
<button aria-label="Fermer la fenêtre de dialogue">
  <img src="close.svg" alt="">
</button>
```
Contraste: Contraste suffisant entre le texte et l'arrière-plan pour les personnes malvoyantes.
Navigation au clavier: Capacité à naviguer sur la page et à interagir avec les éléments en utilisant uniquement le clavier.
Texte alternatif pour les images (alt): Description du contenu de l'image pour les utilisateurs qui ne la voient pas.
```
<img src="cat.jpg" alt="Chat noir dormant sur le rebord de la fenêtre.">
```
Structure des titres: Hiérarchie logique des titres (<h1> - <h6>) pour faciliter la navigation avec les lecteurs d'écran.

Relation

La sémantique est une base importante pour l'accessibilité. Une page bien structurée avec des éléments sémantiques est beaucoup plus facile à rendre accessible. Cependant, la sémantique seule ne suffit pas pour une accessibilité complète – des mesures supplémentaires telles que les attributs ARIA, la gestion du focus et l'assurance d'un contraste suffisant sont souvent nécessaires.

Aspect	Sémantique	Accessibilité (a11y)
Objectif	Donner un sens aux éléments	Assurer la compréhension et l'utilisation du contenu par tous
Outils	Balises HTML (`<nav>`, `<article>`, `<h1>`...)	Sémantique, ARIA, contraste, focus, texte `alt`, etc.
Utilisateur	Navigateurs, analyseurs, moteurs de recherche	Personnes avec divers besoins, technologies d'assistance

Quelle est la différence entre sémantique et accessibilité (a11y) ?