Implémentation WAI-ARIA recommandée pour la barre de navigation / menu

Une mise en œuvre possible serait:

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 emballage extérieur <div>
• role = "barre de menu" pour <ul> barre de navigation conteneur
• role = "menu" pour les conteneurs de second niveau <ul>
• role= "présentation" pour les éléments de menu de premier et deuxième niveaux <li> (ils ne sont pas nécessaires dans la structure de barre de menus accessible exposée)
• role="menuitem" pour la première et éléments de menu de deuxième niveau <a>

Propriétés:

• aria-haspopup = "true" pour les éléments de menu de premier niveau <a> ayant un sous-menu
• aria-labelledby= "ID de l'élément de menu précédent <a>" pour les conteneurs de second niveau <ul>

Membres:

• Aria-selected= "true" sur l'élément <a> de Premier ou deuxième niveau actuellement visité; aria - selected="false" sur les autres éléments <a>. C'est-à appliquer le concept "sélectionné courant la page"
• Aria-expanded = "true/false" pour les conteneurs de second niveau <ul>
• aria-hidden = "true/false" pour les conteneurs de second niveau <ul>
• aria-activedescendant = "" pour le conteneur de barre de navigation principal <ul>. C'est une alternative à travailler avec tabindex
• tabindex=0 sur l'élément <a> actuellement visité; tabindex=-1 sur les autres éléments <a>. C'est dans le but de se concentrer d'abord sur la page en cours lors de la tabulation à la barre de navigation. C'est une alternative à travailler avec aria-activedescendant

Clavier:

• onglet: déplacer le focus dans/hors du menu à partir d'autres points de l'application web.
• Maj + Tabulation: déplacer le focus dans/hors du 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 de la barre de navigation précédente
• Enter: activer l'élément actuellement ciblé (c'est-à-dire naviguer vers L'URL correspondante)
• Espace: Activer article actuellement ciblé (c'est-à-dire naviguer vers L'URL correspondante)

Aug / 2014: Aria-sélectionné Vs menuitem

En réponse à @Joshua Muheim commentaire: maintenant, je peux voir à partir d'ici, ainsi que de sa référence, ce aria-selected attribut n'est pas autorisé pour les menuitem rôle.
Comme je l'ai lu de cette récente so answer il y a quelques solutions compte tenu de l'état actuel des choses, et il y a aussi un nouvel attribut proposé.