Qu'est-ce qu'une implémentation conforme à WAI-ARIA pour la barre de navigation/le menu ?

Question

Nous sommes en train d'implémenter (c'est-à-dire d'ajouter) le support WAI-ARIA au menu de navigation principal d'un portail web. Le menu est celui présenté ici :

Le menu est mis en œuvre au moyen de l'outil classique <ul> / <li> / <a> Arbre DOM, stylisé avec CSS pour ressembler à des onglets horizontaux.

Quelle est l'implémentation conforme à WAI-ARIA d'un tel widget ?

J'ai lu de nombreuses parties des spécifications WAI-ARIA les plus récentes sur w3org pour une compréhension générale, la taxonomie, etc. J'ai ensuite lu plusieurs exemples d'implémentations de widgets d'interface utilisateur. Je n'ai pas trouvé d'exemple spécifiquement destiné à un tel menu de navigation CSS. Les widgets les plus proches que j'ai toujours trouvés sont le Menu, la MenuBar et le TabPanel. Bien sûr, j'ai aussi regardé dans Groupe communautaire ARIA gratuit (où cette question a été posée à l'origine).

Je dirais que aucun de ces widgets correspondent exactement à un menu de navigation (CSS). Par exemple, TabPanel peut contrôler du contenu dans la page (--> aria-controls), peut-être MenuBar aussi ; mais je ne suis pas du tout sûr qu'un menu de navigation contrôle du contenu dans la page (il contrôle la page suivante à afficher). Sans aller plus loin, il existe également d'autres différences. Les références se trouvent à la fin de l'article. Si quelqu'un a de meilleurs exemples de menu de navigation (ou des exemples plus adaptés), nous serions heureux de les connaître.

Références

• https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
• http://wiki.jqueryui.com/w/page/38666403/Menubar
• http://www.oaa-accessibility.org/examplep/menubar2/
• http://test.cita.illinois.edu/aria/menubar/
• http://dev.aol.com/dhtml_style_guide#menu
• http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
• http://www.w3.org/TR/wai-aria-practices/#menu
• http://www.w3.org/TR/wai-aria/roles
• http://www-03.ibm.com/able/resources/wai_aria_intro.html

Answer 1

Une mise en œuvre possible serait la suivante :

Structure HTML :

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

Rôles :

• role="navigation" pour l'enveloppe extérieure <div>
• role="menubar" pour <ul> conteneur de la barre de navigation
• role="menu" pour le deuxième niveau <ul> conteneurs
• role="presentation" pour le premier et le second niveau <li> les éléments de menu (ils ne sont pas nécessaires dans la structure exposée de la barre de menus accessible)
• role="menuitem" pour le premier et le second niveau <a> éléments du menu

Propriétés :

• aria-haspopup="true" pour le premier niveau <a> les éléments de menu ayant un sous-menu
• aria-labelledby="ID de l'article précédent <a> point de menu" pour le deuxième niveau <ul> conteneurs

États :

• aria-selected="true" sur les pages visitées au premier ou au deuxième niveau <a> item ; aria-selected="false" sur l'autre <a> articles. Il s'agit d'appliquer le concept "sélectionné <==> page actuelle"
• aria-expanded="true/false" pour le deuxième niveau <ul> conteneurs
• aria-hidden="true/false" pour le deuxième niveau <ul> conteneurs
• aria-activedescendant="" pour principal <ul> le conteneur de la barre de navigation. Il s'agit d'une alternative à l'utilisation de tabindex
• tabindex=0 sur le site actuellement visité <a> et tabindex=-1 pour l'autre <a> articles. Cela permet de se concentrer d'abord sur la page en cours lorsque l'on passe à la barre de navigation. C'est une alternative à l'utilisation de aria-activedescendant

Clavier :

• Tab : Déplacer le focus dans le menu à partir d'autres points de l'application web.
• Maj+Tab : Déplacer le focus dans le menu à partir d'autres points de l'application web, dans l'ordre inverse.
• Flèche droite : Élément suivant de la barre de navigation
• Flèche gauche : Élément précédent de la barre de navigation
• Entrer : Activer l'élément sélectionné (c'est-à-dire naviguer vers l'URL correspondant)
• L'espace : Activer l'élément sélectionné (c'est-à-dire naviguer vers l'URL correspondant)

Aug/2014 : aria-selected Vs menuitem

En réponse au commentaire de @Joshua Muheim : maintenant je peux voir à partir d'ici ainsi que de sa référence , que aria-selected n'est pas autorisé pour l'attribut menuitem rôle.
Comme je l'ai lu dans ce récent Réponse SO il existe des solutions dans l'état actuel des choses, et un nouvel attribut est également proposé.

Answer 2

Vous pouvez faire en sorte qu'un menu annonce les informations "X de Y" en ajoutant l'option aria-posinset y aria-setsize aux éléments dotés d'attributs role=menuitem .

Answer 3

Les modèles de conception ARIA fournissent le comportement attendu de l'interface utilisateur pour une série de contrôles personnalisés. http://www.w3.org/TR/wai-aria-practices/#aria_ex l'utilisation de esc pour fermer et revenir à l'élément déclencheur à la fermeture est une interface utilisateur standard sur les ordinateurs de bureau et sur le web. Essayez-le sur n'importe quelle application Google docs (par exemple).

Answer 4

La touche +Escape permet de fermer un menu ouvert et de redonner la priorité à l'élément qui l'a ouvert.

Answer 5

L'échappement pour fermer est un standard qui remonte à loin, c'est un comportement attendu par de nombreux utilisateurs.