Bonjour la liste,
Je m'interroge sur l'accessibilité du système de navigation d'un site que
j'évalue.
Dans le header, on trouve un bouton qui ouvre un panneau dépliant contenant un
système de navigation sur 3 niveaux.
Aucun rôle ARIA n'est défini pour ce panneau. Celui-ci apparait par la droite,
le reste du site est visuellement grisé, on s'attend donc à un comportement
modal. Or, la prise de focus n'est pas circonscrite à ce panneau.
Le panneau ne se ferme pas via la touche [ESC].
Dans ce panneau, on trouve un titre, un bouton de fermeture et une liste d'item
de niveau 1.
Un chevron (implémenté via un svg) indique qu'il y a un niveau inférieur.
Lorsque l'utilisateur sélectionne un item de niveau 1 qui a un niveau 2, le
contenu du panneau est changé :
· le titre est celui de l'item de niveau 1
· le bouton permet de revenir au niveau supérieur
· la liste est actualisée et contient les enfants de l'item de niveau 1
Lorsque l'utilisateur sélectionne un item de niveau 1 qui n'a pas de niveau 2,
le lien est suivi, la page est rechargée.
Le code HTML du système de navigation est le suivant :
<nav>
<ul>
<li>
<a href="/url1">
Item 1 niveau 1 avec niveau 2
<svg class="icon icon-arrow-right">
<use xlink:href="#arrow-right"></use>
</svg>
</a>
</li>
<li>
<a href="/url2">Item 2 niveau 1</a>
</li>
</ul>
</nav>
Selon moi, deux dispositifs posent un problème d'accessibilité :
1. le panneau dépliant
2. le mécanisme de navigation sur plusieurs niveaux
1) Panneau dépliant :
Sur quels tests invalider ce composant d'interface qui ne fait pas appel à un
rôle ARIA correspondant à un motif de conception ?
Sur la thématique des scripts ?
La prise de focus n'est pas circonscrite aux éléments focusables de ce panneau.
Non conforme sur le 12.3.2 ?
2) Mécanisme de navigation sur plusieurs niveaux
L'utilisateur non-voyant n'est pas informé du mécanisme de navigation sur
plusieurs niveaux de profondeur (avec rechargement de la liste).
Il ne peut pas distinguer les items qui ouvre un niveau inférieur (indiqué
visuellement par un chevron).
è Non conforme sur le 7.1.1 ? Le nom n'est pas explicite et les changements
d'états ne sont pas accessibles aux technos d'assistance.
è Sur un autre critère ?
Merci de votre aide et bonne journée,
_______________________________________________________________________
[Description : Description : Email_CBE.gif]Frédéric Bernier-Malcoiffe
Chef de projets / Expert en accessibilité - Digital Factory | Application
Services France
Secteur Services
Capgemini | Nantes
Tel.: +33 2 40 99 25 37
www.fr.capgemini.com<http://www.capgemini.com/>
[Description : Description : Description :
facebook_mini]<http://www.facebook.com/pages/Labinnovation/129058430478934>
[Description : Description : Description : youtube_mini]
<http://www.youtube.com/LabInnovation> [Description : Description :
Description : twitter] <http://twitter.com/#!/CapgeminiLabs>
People matter, results count.
_______________________________________________________________________
Capgemini is a trading name used by the Capgemini Group of companies which
includes CAPGEMINI FRANCE (SAS),
a company registered in France (RCS : 328-781-786 NANTERRE)
whose registered office is at Tour Europlaza, 20 avenue André Prothin, 92927
Paris la Défense cedex.
This message contains information that may be privileged or confidential and is
the property of the Capgemini Group. It is intended only for the person to whom
it is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain, copy, disseminate, distribute, or use this message or
any part thereof. If you receive this message in error, please notify the
sender immediately and delete all copies of this message.
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
