1178 sujets

Accessibilité du Web

ARIA et role="button" pour un diaporama

Bonjour

L'apprentissage d'html5 m'a fait découvrir l'ARIA (mieux vaut tard que jamais Smiley confused ) mais plus je me documente, plus je me pose des questions...

J'ai réalisé un "diaporama" à partir de cet exemple car il me semble répondre aux critères d'accessibilité (je me trompe peut être) mais en réfléchissant, je trouve que la navigation pourrait être améliorée (les 1, 2, 3...)

J'ai donc rajouté un title sur le lien et un role="button" sur le li 

<ul id="navig">
<li role="button"><a href="#diaporama" class="selected" title="Accéder à l'exemple Boutique Ambre">1</a></li>
<li role="button"><a href="#labservices" title="Accéder à l'exemple Labservices">2</a></li>
<li role="button"><a href="#asa" title="Accéder à l'exemple ASA Drôme">3</a></li>
<li role="button"><a href="#restaurant" title="Accéder à l'exemple Restaurant Le Petit Paille en Queue">4</a></li>
</ul>


Je pourrai aussi "englober" cette navigation d'un <nav role="navigation"> mais j'ai l'impression que plus j'avance dans la construction du site, plus je rajoute des balises.... est-ce un bien, est-ce un mal ?

Je ne suis pas sûre de moi... à trop vouloir faire bien, parfois on obtient le contraire, alors si vous voulez me donner votre avis, merci d'avance
Dans la mesure où tes li contiennent déjà des liens, ajouter cette précision me paraît inutile. Les liens sont déjà focusables et cliquables par défaut, ils ont donc déjà le comportement que peut avoir un bouton.

Ajouter role="button" est surtout utile pour les éléments qui n'ont par défaut justement pas ce comportement. Typiquement, des éléments comme span, div, img qui ne sont à la base pas prévus pour ça, auxquels on a ajouté tabindex="-1" pour les rendre focusables et qui ont des gestionnaires onclick. Dans ce cas-là, ça permettra aux aides techniques comme les lecteurs d'écran de signaler la présence d'un bouton qui aurait autrement été ratée et donc inaccessible.

Quant à role="navigation", ça s'utilise principalement pour les menus ou les barres de navigation. Donc suivant ton cas, ça peut par contre effectivement être intéressant.
Les lecteurs d'écran récents proposent maintenant une navigation par landmarks, qui est une liste de points clés sur la page. Les éléments role="navigation" rentrent dans cette liste comme ses cousins main, article, contentinfo, supplementary, banner, search, etc. , donc si tu juges cette liste de liens suffisament importante pour qu'elle y rentre, tu peux utiliser role="navigation". IL ne doit pas y avoir plus de 5, 6 ou 7 points clés tous types confondus sur la page, sinon ça ne sert plus à rien, le but c'est de rejoindre rapidement ces points.
Si tu décides d'utiliser role="navigation", je te conseille aussi d'utiliser les autres landmarks, notamment main et search. Sinon ce n'est pas très utile non plus.
Bonjour et merci QuentinC

Je comprends mieux maintenant l'utilisation du "role=button" et effectivement, il n'a pas a place ici.
J'utilise déjà des landmarks comme banner, main, complementary et j'ai déjà mis 2 role="navigation" (menus en haut et bas de page), du coup, vu tes explications, je ne suis pas sûre qu'il soit judicieux d'en mettre encore un là...
Sujet clos
Aller à