Qu'est-ce que le HTML sémantique ?

What is Semantic HTML?

Chaque élément HTML a un but. Le but est véhiculé par sa signification sémantique. Savoir quand utiliser quel élément pour transmettre avec précision le sens n'est pas une tâche facile.

À titre d'exemple rapide, la signification sémantique d'un élément de lien est transmise par "lien". Un élément de bouton est transmis comme "bouton". En conséquence, les gens comprendront comment interagir avec ces éléments et obtiendront un résultat attendu lorsqu'ils interagissent avec ces éléments.

Le HTML sémantique est la base d'une expérience accessible

L'écriture de HTML sémantique est vraiment la base ou le "plan directeur" de la création d'une expérience accessible. Cela signifie utiliser des éléments et des contrôles natifs du navigateur afin de transmettre le sens, la structure et le but de notre contenu.

C'est ainsi que les personnes qui utilisent et dépendent des lecteurs d'écran et d'autres technologies d'assistance savent comment naviguer et utiliser le contenu de votre site et à quoi s'attendre lorsqu'elles interagissent avec un élément.

Ce faisant, vous répondez à la question de l'utilisateur…

Qu'est-ce que c'est et que fait-il ?

La sémantique d'un élément est très importante à garder à l'esprit lors de l'écriture de HTML. Comprendre quand et comment utiliser les éléments HTML n'est pas toujours facile, mais une mise en œuvre correcte se traduira par une expérience utilisateur positive et réussie pour les personnes qui dépendent de la technologie d'assistance.

La sémantique comprend…

Certaines informations doivent être présentes lorsqu'un élément reçoit le focus du clavier pour qu'une personne utilisant un lecteur d'écran puisse naviguer et consommer ce contenu.

Par exemple, les éléments naturellement focalisables incluent des liens, des boutons et d'autres contrôles de formulaire, et lorsque l'élément est en focus, son contenu textuel et les attributs associés sont lus à haute voix aux utilisateurs de lecteurs d'écran, décrivant ce avec quoi ils interagissent actuellement.

Ce qui est annoncé c'est :

  • Le nom accessible de l'élément ou son équivalent textuel
  • Le rôle de l'élément
  • L'état actuel de l'élément (le cas échéant)

Le nom/libellé/équivalent textuel accessible

Le nom accessible est la partie qui décrit à quoi sert l'élément, sa raison d'être.

Il s'agit généralement du contenu entre les balises de début et de fin d'un élément HTML. Il peut également s'agir de la valeur de texte alternative d'un attribut alt d'image ou de l'étiquette associée à une input de formulaire .

Prenons, par exemple, un lien. Cet élément a du texte entre sa balise de début et sa balise de fin. Ce texte est lu à haute voix par un lecteur d'écran lorsqu'il reçoit le focus du clavier. Ce faisant, cela donne un contexte sur ce qui devrait se passer ou où le navigateur devrait aller lorsque ce lien est activé.

Par exemple, un lien avec le nom accessible "Contactez-nous" indiquerait que, si vous activez ce lien, il chargera une page avec des informations de contact ; peut-être un numéro de téléphone ou une adresse, et éventuellement un formulaire où quelqu'un pourrait envoyer un message.

 <a href="contact.html"> Contact Us <!-- 👈 Accessible name, 🗣 "Conact us" --> </a>

Le rôle de l'élément

Le rôle de l'élément informe l'utilisateur de certaines choses, y compris ce que fait l'élément et comment interagir avec lui.

Pour en revenir à l'exemple de lien, le rôle annoncé lorsque le lien reçoit le focus du clavier serait "lien", car les liens sont structurés avec l'ouverture et la fermeture a balise et incluent un attribut href valide. Le résultat attendu ou "ce qu'il fait" serait que le navigateur charge une nouvelle page ou passe à une autre section de la même page, en déplaçant le focus vers un élément différent. Comment interagir avec le lien serait pour l'utilisateur d'appuyer sur la touche Enter , car cela fait également partie de la sémantique d'un lien.

 <a href="contact.html"> <!-- 👈 Role derived from opening… --> Contact Us </a> <!-- 👈 … and closing tag: 🗣 "Contact us, link" -->

Divers rôles d'éléments s'accompagnent d'attentes sur la façon de les utiliser. Selon le rôle, un utilisateur peut s'attendre à devoir appuyer sur la touche Enter pour continuer (comme c'est le cas avec un lien), utiliser la touche Space pour activer un button , ou peut-être utiliser les touches fléchées vers le Up ou Down pour faire une sélection lors de l'interaction avec un élément de select .

L'état actuel

En plus du nom et du rôle, selon l'élément à portée de main, il pourrait également y avoir une annonce d'état.

L'annonce de l'état aide à transmettre l'état actuel de l'élément, si une interaction est nécessaire et ce qui pourrait se produire lorsque l'interaction a lieu.

Par exemple, les cases à cocher et les boutons radio ont un état "coché" ou "décoché" et un état "sélectionné" ou "non sélectionné", respectivement.

<label> <input type="checkbox" /> Apples <!-- 🗣 "Apples, checkbox" --> </label> <label> <input type="checkbox" checked /> Oranges <!-- 🗣 "Oranges, checkbox, checked" --> </label>

Un widget de style accordéon aurait un état "développé" ou "réduit", indiquant si le contenu est à l'écran et disponible pour la consommation (développé), ou si la section de contenu sera simplement ignorée lorsque la navigation se poursuit (réduite).

Pourquoi utiliser des éléments natifs est préférable

Comme nous le verrons plus tard, il est possible de créer des éléments personnalisés et de définir une signification sémantique et une interaction à l'aide d'une variété d'attributs HTML et de code JavaScript. Toutefois, tenez compte des éléments suivants avant de créer un élément personnalisé :

  • Les éléments natifs fournissent une signification sémantique par défaut ; pas besoin de s'inquiéter de la façon dont une personne utilisant une technologie d'assistance pourrait comprendre ce qu'est l'élément ou comment interagir avec lui
  • Les éléments natifs fournissent toutes les fonctionnalités de clavier attendues dès la sortie de la boîte ; pas de temps et d'efforts supplémentaires consacrés à l'écriture de code pour capturer les frappes
  • Le style par défaut est cohérent et familier à vos utilisateurs ; les gens s'habituent à l'apparence de leur système d'exploitation et de leur navigateur - créez une expérience utilisateur confortable en utilisant des éléments natifs

L'utilisation du HTML sémantique permet à vos utilisateurs de réussir

La sémantique transmet le message de ce qu'est l'élément actuellement ciblé, ce qu'il pourrait faire et comment interagir avec lui. Afin de créer une expérience inclusive, il est important de comprendre la signification sémantique des éléments HTML, de savoir quand le contexte approprié est de les utiliser et comment transmettre avec précision le message à l'utilisateur sur la raison d'être de l'élément.

Voir MDN : référence des éléments HTML pour plus de détails sur chaque élément HTML natif.

L'arbre d'accessibilité

On ne peut pas parler de HTML sémantique sans mentionner l'arbre d'accessibilité ! Il s'agit d'une structure arborescente d'éléments qui ressemble étroitement au DOM, mais contient plus d'informations, telles que la signification sémantique, comme indiqué précédemment.

Capture d'écran de la page d'accueil de Shopify.com avec les outils de la console ouverts montrant l'arborescence d'accessibilité d'un bouton.

Imaginez un instant, un site Web sans aucun attribut de style ou CSS appliqué. Cette sortie brute de contenu ressemble étroitement à ce qu'est l'arborescence d'accessibilité, qui est interprétée par une technologie d'assistance telle qu'un lecteur d'écran.

Le DOM est aux navigateurs ce que l'arbre d'accessibilité est aux lecteurs d'écran

Lorsque le lecteur d'écran pourra utiliser les informations stockées dans l'arbre d'accessibilité pour annoncer avec précision la sémantique de l'élément en question ; son rôle, le nom ou l'étiquette et l'état de l'élément. Toutes ces informations font partie de l'API d'accessibilité que la plupart des technologies d'assistance utilisent pour transmettre des informations à l'utilisateur final.

Si vous souhaitez jeter un coup d'œil à l'arborescence d'accessibilité d'un site Web, Chrome l'a disponible dans ses outils de développement sous l'onglet Accessibilité.

Critères de réussite WCAG

Cela revient à 1.3.1 Infos et relations qui stipule :

"Les informations, la structure et les relations véhiculées par la présentation peuvent être déterminées par programme ou sont disponibles dans le texte."

Ressources:

Retour au blog