Implementación de WAI-ARIA recomendada para la barra de navegación/menú

Question

Estamos en proceso de implementar (es decir, agregar) soporte de WAI-ARIA en el menú principal de navegación de un portal web. Menú es el que se muestra aquí:

menú se implementa por medio de clásico árbol DOM <ul>/<li>/<a>, de estilo con CSS para parecerse a las pestañas horizontales.

¿Cuál es la implementación de WAI-ARIA recomendada para dicho widget?

Voy a publicar aquí una posible implementación, como respuesta, para que todo funcione.

Omita los párrafos restantes si conoce/no le interesan los menús de navegación CSS en contexto WAI-ARIA.

TA

Preámbulo (por así decirlo)

He leído muchas partes de la mayoría de los recientes especificaciones de WAI-ARIA de w3org para una comprensión general, taxonomía, y así sucesivamente. Luego, he leído sobre varios ejemplos de implementaciones de widgets UI. No pude encontrar ningún ejemplo específicamente dirigido a dicho menú de navegación CSS. Los widgets más cercanos que siempre he encontrado son el menú, la barra de menú y el panel de tabulación. Por supuesto, también busqué en Free ARIA Community group (donde esta pregunta se publicó originalmente).

Yo diría que ninguno de esos widgets coinciden exactamente con un menú de navegación (CSS). Como ejemplo, TabPanel puede controlar algunos contenidos en la página (-> aria-controls), tal vez MenuBar también; pero no estoy del todo seguro de que un menú de navegación controle el contenido de la página (controla la página siguiente para mostrar). Sin ir más lejos, también existen otras diferencias. Las referencias se encuentran al final de la publicación. Si alguien es mejor (o más en forma) ejemplos de menú de navegación, nos alegraría saber sobre ellos.

Referencias

• 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

Una posible aplicación sería: Estructura

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> 

Roles:

• role =”navegación” para envoltura exterior <div>
• papel = "barra de menú" para contenedor bar <ul> navegación
• role = "menú" para segundo nivel <ul> contenedores
• role = "presentación" para artículos de menú de primer y segundo nivel <li> (no son necesarios en la estructura de barra de menús accesible)
• role = "menuitem" para el primer y segundo nivel <a> elementos de menú

Propiedades:

• aria-haspopup = "true" para el primer nivel <a> elementos de menú que tiene un submenú
• aria-labelledby = "ID del artículo anterior <a> menú" para la segunda <ul> nivel contenedores

Unidos:

• aria-selected = "true" en el primer o segundo nivel actualmente visitado <a> artículo; aria-selected = "false" en los otros <a> elementos. Esto es para hacer cumplir el concepto “seleccionado < ==> página actual”
• aria-expandida = "verdadero/falso" de segundo nivel <ul> contenedores
• aria-ocultos = "verdadero/falso" de segundo nivel <ul> contenedores
• aria-activedescendant = "" para el contenedor de barra de navegación principal <ul>.Esta es una alternativa para trabajar con tabindex
• tabindex = 0 en el elemento actualmente visitado <a>; tabindex = -1 en los otros <a> elementos. Eso es para enfocarse primero en la página actual cuando se tabula en la barra de navegación. Es una alternativa para trabajar con aria-activedescendant

Teclado:

• Tab: Mover el enfoque de entrada/salida del menú de otros puntos en la aplicación web.
• Shift + Tabulador: mueva el foco hacia adentro/hacia afuera del menú desde otros puntos en la aplicación web, en el orden inverso.
• Flecha derecha: elemento de la barra siguiente de navegación
• de flecha izquierda: elemento de la barra de navegación Anterior
• INTRO: Active el elemento destacado (es decir, acceda a la URL correspondiente)
• Espacio: Activar elemento destacado (es decir, navegue hasta correspondientes URL)

Ago/2014: aria-seleccionada Vs menuitem

En respuesta al comentario @Joshua Muheim: ahora puede ver from here, así como desde his reference, ese atributo aria-selected no está permitido para el rol menuitem.
Cuando leo de este reciente SO answer hay algunas soluciones dado el estado actual de las cosas, y también hay un nuevo atributo propuesto.

Answer 2

+ La tecla Escape debe cerrar un menú abierto y devolver el enfoque al elemento que lo abre.

Answer 3

Como un FYI, puede obtener un menú para anunciar la información 'X of Y' al agregar los atributos aria-posinset y aria-setsize a los elementos con role = menuitem. Atentamente, Bryan Garaventa

Answer 4

Escape to close es un camino de regreso estándar, es el comportamiento esperado de muchos usuarios.

Answer 5

El ARIA patrones de diseño proporcionan un comportamiento esperado interfaz de usuario para una serie de controles personalizados http://www.w3.org/TR/wai-aria-practices/#aria_ex uso de tecla ESC para cerrar y volver al elemento desencadenante de una estrecha es la interfaz de usuario estándar a través de escritorio y web. Pruébalo en cualquier aplicación de Google Docs (por ejemplo).