10.4 Ne pas donner l’information uniquement par la forme, taille ou position
Veiller à ce que l’information véhiculée par la forme, taille ou position reste disponible et compréhensible pour les utilisateurs de lecteur d’écran.
Exemples
Position courante dans un menu de navigation (exemple 1)
Dans cet exemple, une mise en gras de l’intitulé du lien « Les dernières actualités » indique qu’il s’agit de la page courante et l’ajout d’un trait sous l’intitulé « Actualités » indique qu’il s’agit de la rubrique parente courant.
Ici, une solution efficace pour véhiculer ces informations dans le code consiste à ajouter un attribut aria-current="page" sur la balise <a> (ou <li>) de la page courante puis un attribut aria-current="true" sur la balise <button> (ou <li>) de la rubrique courante.
<nav role="navigation" aria-label="Menu principal">
<ul>
<li><a href="…">Démarches en ligne</a></li>
<li><button href="…" aria-current="true">Actualités</button>
<ul>
<li><a href="…">Toute l'actualité</a></li>
<li><a href="…" aria-current="page">Les dernières actualités</a></li>
</ul>
</li>
<li><a href="…">Services et formulaires</a></li>
</ul>
</nav>
Position courante dans une pagination (exemple 2)
Dans cet exemple, un encadré ajouté sur le lien « 2 » indique qu’il s’agit de la page courante.
Ici, une solution efficace pour véhiculer cette information dans le code consiste à ajouter un attribut aria-current="page" sur la balise <a> (ou <li>) de la page courante.
<nav role="navigation" aria-label="Pagination">
<ul>
[…]
<li><a href="…" aria-label="Page 1">1</a></li>
<li><a href="…" aria-label="Page 2" aria-current="page">2</a></li>
<li><a href="…" aria-label="Page 3">3</a></li>
[…]
</ul>
</nav>
Position courante dans un fil d’ariane (exemple 3)
Dans cet exemple, une solution efficace pour véhiculer que l’intitulé « Mamma Mia! » correspond à la page courante dans le code consiste à ajouter un attribut aria-current="page" sur la balise <a> (ou <li>).
<nav role="navigation" aria-labelledby="breadcrumb-label">
<p id="breadcrumb-label">Vous vous trouvez ici :</p>
<ol>
<li><a href="…">Page d'accueil</a></li>
<li><a href="…">Que Faire à Londres</a></li>
<li><a href="…">L'actualité du moment</a></li>
<li><a href="…">Théâtre</a></li>
<li><a href="…">Comédie Musicale</a></li>
<li aria-current="page">Mamma Mia!</li>
</ol>
</nav>
Position courante des formulaires à étapes multiples (exemple 4)
Dans cet exemple, pour l’étape « Options », une mise en gras de l’intitulé indique qu’il s’agit de l’étape courante.
Ici, une solution efficace pour véhiculer cette information dans le code consiste à ajouter un attribut aria-current="step" sur la balise <a> (ou <li>).
<nav role="navigation" aria-label="Étapes de votre commande">
<ol>
<li><a href="…">Sélection</a></li>
<li><a href="…" aria-current="step">Options</a></li>
<li>Coordonnées</li>
<li>Récapitulatif</li>
<li>Paiement</li>
</ol>
</nav>À noter qu’il est également recommandé de permettre de revenir en arrière sur les formulaires à étapes multiples, à l’aide d’un lien par exemple.
Position courante dans des onglets (exemple 5)
Dans cet exemple, l’ajout d’un trait sous l’élément « Visites guidées » indique qu’il s’agit de l’onglet actif.
Ici, une solution efficace pour véhiculer cette information dans le code consiste à ajouter un attribut aria-selected="true" sur la balise <button> de l’onglet.
Pour voir un extrait de code, consulter la fiche AcceDe Web « Onglets » issue de la notice d’accessibilité des principaux composants d’interface riche.