Accessibilité avec Wordpress : Structure sémantique et ARIA

L’accessibilité est une considération importante pour tout site Web d’entreprise. Les développeurs Web qui comprennent comment utiliser une structure sémantique appropriée et des attributs ARIA pour fournir un contenu facilement navigable peuvent garantir que leurs sites Web sont optimisés pour les personnes de toutes capacités. En mettant en œuvre ces meilleures pratiques, les entreprises peuvent mieux servir leurs clients avec une expérience numérique plus inclusive – une expérience qui non seulement accorde l’accès, mais qui fait aussi que les utilisateurs se sentent valorisés et respectés. Dans cet article de blogue, vous apprendrez pourquoi ces stratégies sont importantes et comment elles permettent d’offrir une meilleure expérience à tous les visiteurs.

Qu’est-ce que la structure sémantique?

La structure sémantique dans le domaine du Web, également appelée « balisage sémantique », est l’utilisation de balises précises à l’intérieur du code HTML afin de spécifier le rôle et le sens d’une section au sein d’une page Web ou d’un élément au sein de cette même section. En effet, bien qu’il soit possible de construire un site Web entier avec les balises de base <div> et <span> (avec en plus les balises de texte riche telles que <p>, <i>, <b>, <h1>, etc), la structure des pages de ce site ne sera pas très évocatrice, ni pour les technologies d’assistances, ni pour les engins de recherche.

Plusieurs nouvelles balises sont disponibles depuis l’arrivée de HTML5, dont la première version a été complétée en 2014 (en tant que recommandation du W3C). Ces balises permettent de rendre la structure des pages Web plus significative. Voici quelques exemples composés des balises sémantiques les plus communes:

• <header> et <footer>, qui dénotent respectivement l’en-tête et le pied de page d’une page ou d’une section.
• <section>, qui comme son nom l’indique dénote une section à l’intérieur d’une page. Sémantiquement parlant, une section devrait représenter un sous-thème à l’intérieur d’un thème général, par exemple une section dans une page entière. Une section est dépendante de son contexte, mais énonce tout de même son propre sous-concept de manière indépendante. Sauf exception, un en-tête devrait être présente dans une section, sous la forme d’une balise de titre (<h1>, <h2>) ou d’une balise <header> qui contiendrait entre autres sa propre balise de titre.
• <article> désigne un élément complet, indépendant et autonome qui peut être placé dans n’importe quel contexte ou sur n’importe quel site Web et entièrement garder son sens. Cela inclut par exemple un article de blogue, une critique de film ou même un tweet. Le site HTML5 Doctor donne ce truc pour déterminer si un élément devrait être un article ou non: « Aurait-il du sens dans un fil RSS? ». Si oui, il s’agit d’un article.
• <nav> représente un groupe de liens permettant de naviguer à l’intérieur d’un contexte. Toute liste de liens ne devrait pas nécessairement être placée dans une balise nav. En effet, le rôle de ces liens est important: ils doivent bien permettre de naviguer à l’intérieur du contexte dans lequel ils sont placés. Nous parlons donc par exemple de la liste de liens dans l’en-tête de ce site qui permet de naviguer à l’intérieur du site, ou la petite boîte bleue dans le haut de cet article qui sert à naviguer à l’intérieur de l’article.
• <aside>, selon les spécifications officielles, peut remplir deux rôles. Originalement, il devait servir à présenter du contenu lié tangentiellement au contexte dans lequel il est placé, mais présenté d’une manière séparée du reste du contenu. Prenez, par exemple, un boitier « Saviez-vous que… » qui serait placé à l’intérieur d’un article de blogue et qui présenterait un fait divers lié au sujet de l’article. Les citations tirées du texte et montrées en plus grand, nommées « pull quotes » en anglais, sont aussi un exemple de contenu qui devrait être ajouté dans une balise <aside>. Par la suite, la balise aside a été redéclarée pour inclure tout contenu qui pourrait être placé sur le côté d’un article, comme une liste d’articles connexes ou même des publicités.

Mentionnons aussi que plusieurs balises sémantiques existaient avant l’arrivée de HTML5, notamment les balises liées aux formulaires, telles que <form> et ses divers types de balises de champ. Ces balises sont effectivement aussi sémantiques puisqu’elles indiquent les rôles de chacun des éléments du formulaire.

Lorsque les balises sont insuffisantes: les attributs role et ARIA

Bien que les balises sémantiques soient utiles pour décrire la structure générale d’une page Web et de ses composants, ils ne sont pas tout à fait suffisant pour décrire le rôle des élément individuels, surtout s’ils sont interactifs. Si la fonction d’un élément interactif n’est représentée que visuellement, comme par exemple avec une icône, son rôle ne pourra pas être communiqué aux utilisateurs malvoyants. Ce rôle devrait être également disponible de manière textuelle. C’est ici que l’attribut role et la famille d’attributs ARIA entrent en jeu.

L’attribut role permet de représenter en un seul mot le rôle d’un élément s’il ne peut pas être représenté par une balise sémantique. En effet, si une telle balise existe, il est préférable de simplement utiliser cette balise plutôt que d’utiliser un div et de lui ajouter le rôle correspondant.

La liste des valeurs possibles pour cet attribut est exhaustive. Plusieurs de ces rôles sont d’ailleurs déconseillés à l’utilisation puisque, pour faire écho au point précédent, ils peuvent facilement être remplacés par une balise sémantique. Voici quelques exemples de rôles pertinents:

• toolbar: Un groupe de boutons compacts, ne comportant souvent que des icônes.
• tooltip: Un conseil ou une indication par rapport à un élément, souvent représenté par une bulle flottant au-dessus de l’élément
• switch: Un interrupteur, représentant une de deux valeurs, soit activé ou désactivé.
• tab, tablist et tabpanel: Dans le cadre d’un composant présentant plusieurs sections de contenu dont seulement une section est affichée à la fois, tab est chaque onglet permettant de choisir la section affichée, tablist est l’ensemble de ces onglets et tabpanel est chacune des sections.
• tree: Une liste hiérarchique dont chaque élément parent peut être développé pour afficher ses enfants. Pensez à une structure de fichiers, par exemple.
• dialog et alertdialog sont des fenêtres de type « popup » interrompant l’activité de l’utilisateur. alertdialog devrait être utilisé lorsqu’un choix doit être fait par l’utilisateur en interagissant avec un élément interactif à l’intérieur de la fenêtre. Un élément portant le rôle dialog peut quant à lui ne contenir qu’un simple message.

Les attributs ARIA existent quant à eux pour fournir de l’information concernant les éléments qui ne peuvent pas être représentés par un simple mot, contrairement aux balises sémantiques et aux rôles. Notamment, à l’opposé des rôles qui sont configurés une seule fois comme des constantes, plusieurs attributs ARIA peuvent communiquer des états d’éléments variables. Leurs valeurs doivent alors être modifiées à l’aide de JavaScript.

Tout comme les balises sémantiques et les rôles, il ne faut pas abuser de ces attributs. Ils servent à représenter textuellement une information qui n’est normalement représentée que graphiquement, afin d’aider les personnes malvoyantes à naviguer sur le site et consommer son contenu. Si l’information est déjà présente textuellement, il ne faut pas utiliser ces attributs, sinon l’information devient redondante et cela nuit à l’expérience utilisateur.

La liste des attributs étant elle aussi plutôt longue, voici pour terminer une sélection des attributs les plus pertinents:

• aria-label: Permet d’ajouter un libellé invisible à un élément qui n’est autrement pas décrit textuellement. Prenez par exemple un bouton amenant vers une page Facebook représenté par le logo du réseau social; l’attribut aria-label avec la valeur « Visitez ma page Facebook » pourrait être ajouté à ce bouton.
• aria-labelledby: Il est possible qu’il y ait déjà un libellé textuel visible pour un élément, mais que ce libellé soit éloigné de l’élément qu’il indique à l’intérieur du code HTML. L’attribut aria-labelledby permet d’indiquer que cet élément est bel et bien identifié par ce libellé.
• aria-current: Indique que l’élément est, au sein de son composant parent, l’élément actuellement activé ou sélectionné. Par exemple dans une navigation, où la page actuelle peut être indiquée par une couleur différente, elle devrait aussi être indiquée par cet attribut. Sa valeur peut être plus spécifique que true ou false, selon le contexte dans lequel il est utilisé. Consultez cette ressource pour plus de détails.
• aria-describedby et aria-details: À l’instar de aria-labelledby, permet d’indiquer si un texte déjà présent dans la page décrit un élément interactif. Alors que aria-label n’est conçu que pour contenir un libellé de quelques mots, aria-describedby sert plutôt à décrire l’élément avec une phrase complète. aria-details devrait quant à lui être utilisé lorsque le texte de description est composé de plusieurs phrases.
• aria-disabled: Indique qu’un élément est désactivé.
• aria-expanded: Indique qu’un élément est « étendu », comme par exemple une section de contenu s’ouvrant comme un accordéon.
• aria-hidden: Indique que l’élément devrait être caché aux outils d’accessibilité. Cet attribut devrait être appliqué aux éléments purement décoratifs afin de diminuer les informations superflues aux outils d’accessibilité.
• aria-haspopup: Désigne un élément qui ouvre une fenêtre popup lorsqu’il est sélectionné. La valeur ajoutée indique de quel type de fenêtre popup il s’agit. Consultez cette ressource pour plus de détails.
• aria-modal: En lien avec l’attribut précédent, lorsque cet attribut est ajouté et configuré à true sur une fenêtre popup, il indique que la fenêtre popup est modale, c’est-à-dire qu’elle bloque le contrôle de tout ce qui est situé derrière celle-ci. Cela communique aux outils d’accessibilité que la fenêtre doit être fermée pour reprendre le contrôle.
• aria-pressed: À ajouter spécifiquement à un bouton de type «interrupteur», indique que celui-ci est activé.

Nous ne pouvons ignorer l’importance d’un site Web construit avec une bonne sémantique. La construction d’une page avec une structure sémantique optimale présente clairement des avantages pour l’accessibilité du Web, tels qu’une meilleure convivialité, une meilleure expérience utilisateur et une conformité accrue à l’accessibilité. Les attributs ARIA peuvent également être d’une grande utilité à cet égard, en apportant davantage de clarté aux instructions et aux informations véhiculées sur un site Web. Les avantages de l’utilisation d’une bonne sémantique sont clairs et indéniables. Tous les sites Web WordPress devraient être construits dans le but ultime de contribuer à créer un environnement numérique plus accessible pour tous les utilisateurs, quels que soient leurs capacités ou leurs handicaps. Si vous avez besoin d’aide pour créer un site Web optimisé pour l’accessibilité et la convivialité, ne cherchez pas plus loin que l’équipe d’experts de l’agence web Chocolat Média. Contactez-nous dès aujourd’hui et nous commencerons à vous proposer un site Web exceptionnel, conçu et réalisé avec la meilleure sémantique possible !