10.1 Accessibilité
L'accessibilité (accessibility) du contenu web est une partie importante du design web moderne. Elle vise à s'assurer que tous les utilisateurs, y compris les personnes ayant des limitations, peuvent facilement interagir avec les pages web.
Un des outils clés pour atteindre cet objectif sont les attributs ARIA (Accessible Rich Internet Applications), qui améliorent l'accessibilité du contenu web, le rendant plus compréhensible et accessible pour les technologies d'assistance, telles que les lecteurs d'écran.
Qu'est-ce que ARIA ?
ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs spéciaux que tu peux ajouter aux éléments HTML pour améliorer leur accessibilité. Ces attributs fournissent des informations supplémentaires sur la structure et le comportement des éléments, ce qui aide les technologies d'assistance à mieux interpréter et interagir avec le contenu web.
Les principaux attributs ARIA pour améliorer la lisibilité du texte :
Attribut aria-label
L'attribut aria-label est utilisé pour fournir une étiquette textuelle à un élément, qui sera lue par un lecteur d'écran. Cet attribut est utile lorsque l'élément n'a pas d'étiquette visible ou lorsqu'une description plus détaillée est nécessaire.
Exemple d'utilisation :
<button aria-label="Fermer la fenêtre de dialogue">X</button>
Attribut aria-labelledby
L'attribut aria-labelledby associe un élément à une autre étiquette sur la page, en utilisant l'id de l'étiquette. C'est utile, lorsque tu dois associer un élément à une étiquette déjà existante, fournissant contexte et description.
Exemple d'utilisation :
<h2 id="section-title">Titre de la section</h2>
<p aria-labelledby="section-title">Ceci est un paragraphe de texte relatif au titre de la section.</p>
Attribut aria-describedby
L'attribut aria-describedby associe un élément à un ou plusieurs éléments contenant une description, en utilisant leurs id. Cet attribut est utile pour fournir des informations supplémentaires ou un contexte à un élément.
Exemple d'utilisation :
<input type="text" aria-describedby="input-description">
<p id="input-description">Entrez votre nom.</p>
10.2 Rôle
Attribut rôle
L'attribut role définit le rôle d'un élément, indiquant aux technologies d'assistance comment interpréter cet élément. Il existe de nombreux rôles, tels que button, navigation, main, article et bien d'autres.
Exemple d'utilisation :
<nav role="navigation">
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Attribut aria-live
L'attribut aria-live est utilisé pour le contenu mis à jour dynamiquement. Il informe le lecteur d'écran que le contenu à l'intérieur de l'élément a changé et doit être annoncé. Les valeurs incluent off, polite et assertive.
Exemple d'utilisation :
<div aria-live="polite">
<p>Des informations importantes seront affichées ici.</p>
</div>
Attribut aria-hidden
L'attribut aria-hidden indique aux technologies d'assistance si l'élément doit être accessible aux utilisateurs. La valeur true cache l'élément des technologies d'assistance, tandis que la valeur false le rend accessible.
Exemple d'utilisation :
<div aria-hidden="true">
<p>Ce texte sera caché des lecteurs d'écran.</p>
</div>
Attribut aria-expanded
L'attribut aria-expanded indique si un élément est étendu ou réduit. Il est souvent utilisé dans les éléments de contrôle, tels que les "accordéons" et les menus déroulants.
Exemple d'utilisation :
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Élément 1</a></li>
<li><a href="#item2">Élément 2</a></li>
<li><a href="#item3">Élément 3</a></li>
</ul>
Attribut aria-controls
L'attribut aria-controls indique quel élément est contrôlé par l'élément actuel. Il est utilisé avec des attributs, tels que aria-expanded, pour créer des éléments de contrôle interactifs.
Exemple d'utilisation :
<button aria-controls="content" aria-expanded="false">Afficher/Masquer</button>
<div id="content" hidden>
<p>Contenu caché.</p>
</div>
GO TO FULL VERSION