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

navigation menubar

Question

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

El menú se implementa mediante el clásico árbol DOM <ul> / <li> / <a> , diseñado con CSS para que parezca 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 sabe / no le importan los menús de navegación CSS en el contexto de WAI-ARIA.

ejército de reserva

Preámbulo (por así decirlo)

He leído muchas partes de las especificaciones más recientes de WAI-ARIA de w3org para una comprensión general, taxonomía, etc. Luego, he leído sobre varios ejemplos de implementaciones de widgets de 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 el grupo comunitario ARIA gratuito (donde esta pregunta se publicó originalmente).

Diría que ninguno de esos widgets coincide 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

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

Answer 2

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

Answer 3

Escape to close es un camino estándar atrás, es el comportamiento esperado por muchos usuarios.

Answer 4

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

Answer 5

Una posible implementació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 el envoltorio externo <div>
• role = "barra de menús" para <ul> contenedor de la barra de navegación
• role = "menú" para contenedores de <ul> segundo nivel
• role = "presentation" para elementos de menú <li> de primer y segundo nivel (no son necesarios en la estructura de barra de menús expuesta accesible)
• role = "menuitem" para elementos de menú <a> primer y segundo nivel

Propiedades:

• aria-haspopup = "true" para los elementos del menú <a> primer nivel que tienen un submenú
• aria-labelledby = "ID del elemento de menú <a> anterior" para contenedores de <ul> segundo nivel

Estados:

• aria-selected = "true" en el elemento <a> primer o segundo nivel actualmente visitado; aria-selected = "false" en los otros <a> elementos. Eso es para hacer cumplir el concepto de "página actual <==> seleccionada"
• aria-expanded = "verdadero / falso" para contenedores de <ul> segundo nivel
• aria-hidden = "verdadero / falso" para contenedores de <ul> segundo nivel
• aria-activedescendant = "" para el contenedor principal de la barra de navegación <ul> . Esta es una alternativa para trabajar con tabindex
• tabindex = 0 en el elemento <a> visitado actualmente; 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:

• Pestaña: Mueve el foco hacia adentro / hacia afuera del menú desde 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 orden inverso.
• Flecha derecha: elemento de la barra de navegación siguiente
• Flecha izquierda: elemento anterior de la barra de navegación
• Intro: activa el elemento actualmente enfocado (es decir, navega a la URL correspondiente)
• Espacio: active el elemento actualmente enfocado (es decir, navegue a la URL correspondiente)

Ago / 2014: elemento de menú de Vs seleccionado por aria

En respuesta a @Joshua Muheim, comenten: ahora puedo ver a partir de aquí , así como de su referencia , que el atributo aria-selected no está permitido para el rol de menuitem .
Cuando leo de esta reciente respuesta SO, hay algunas soluciones dado el estado actual de las cosas, y también hay un nuevo atributo propuesto.