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

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 affiché ici:

Menu de Navigation capture d'écran

Menu est mis en œuvre au moyen de classic <ul> / <li> / <a> arbre DOM, stylisé avec CSS pour ressembler à des onglets horizontaux.

Quelle est l'implémentation WAI-ARIA recommandée pour un tel widget?

Je vais poster une implémentation possible ici comme réponse, donc pour faire avancer les choses.

Ignorer le paragraphes restants si vous connaissez/ne vous souciez pas des menus de navigation CSS dans le contexte WAI-ARIA.

TA

Préambule (pour ainsi dire)

J'ai lu de nombreuses parties des spécifications WAI-ARIA les plus récentes de w3org pour une compréhension générale, une taxonomie,etc. Ensuite, j'ai lu plusieurs exemples d'implémentations de widgets D'interface utilisateur. Je n'ai trouvé aucun exemple spécifiquement targetd à un tel menu de navigation CSS. Les widgets les plus proches que j'ai toujours trouvés sont le Menu, la barre de menus et le TabPanel. Bien sûr, j'ai aussi regardé dans Free Aria Community group (où cette question a été publiée à l'origine).

Je dirais que aucun de ces widgets correspond exactement à un menu de navigation (CSS). Par exemple, TabPanel peut contrôler du contenu dans la page (--> Aria-controls), peut-être aussi la barre de menu; mais je ne suis pas du tout sûr qu'un menu de navigation contrôle le contenu de la page (il contrôle la page suivante à afficher). Sans aller plus loin, il y a d'autres différences comme Bien. Les références sont à la fin du post. Si quelqu'un comme mieux (ou plus en forme) des exemples de menu de navigation, nous serions heureux de savoir

37
demandé sur superjos 2012-09-05 14:11:15

5 réponses

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é.

71
répondu superjos 2017-05-23 12:10:38

Pour votre information, vous pouvez obtenir un menu pour annoncer des informations' X of Y ' en ajoutant des attributs Aria-posinset et aria-setsize aux éléments avec role = menuitem. Sincèrement, Bryan Garaventa

2
répondu Bryan Garaventa 2013-12-07 06:40:40

Escape To close est un standard qui remonte, il est prévu un comportement par de nombreux utilisateurs.

1
répondu Joseph Karr O'Connor 2014-08-20 20:03:34

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

1
répondu Steve Faulkner 2015-12-03 03:46:38

+ la touche Échap doit fermer un menu ouvert et renvoyer le focus à l'élément qui l'ouvre.

0
répondu user810937 2013-08-30 19:20:25