7.2: Barras de menú
- Page ID
- 152658
Las barras de menú generalmente se presentan horizontalmente en la parte superior de un sitio web o aplicación web. Contienen enlaces a áreas clave del sitio web o aplicación. Funcionan como conmutadores que abren submenús o funcionan como enlaces y conmutadores. Las barras de menú permanecen a la vista en todo el sitio web o aplicación.
Roles, estados y propiedades utilizados en una barra de menús
- aria-oculto = [verdadero|falso]
- role = “barra de menú”
- rol = “menú”
- role = “menuitem”
- aria-labelledby = “[instrucción div id]”
- aria-label = [texto de enlace]
- tabindex = [0 | -1]
- aria-haspopup = “verdadero”
- aria-expanded = “[verdadero|falso]”
- aria-selected = “[verdadero|falso]”
El siguiente JSFiddle presenta un típico widget de barra de menú con una variedad de submenús. Revise el marcado JavaScript y HTML. Pruebe la barra de menús que se presenta bajo la pestaña Resultado con ChromeVox para entender cómo funciona sin agregar ninguna característica de accesibilidad. Puedes trabajar en JSFiddle haciendo clic en el enlace “Editar en JSFiddle” en la parte superior, a la derecha, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para fijar la accesibilidad de la barra de menús antes de completar la Actividad 12 en la página que sigue.
Primero, proporciona algunas instrucciones sobre cómo usar el menú con un teclado y agréguelas a las opciones predeterminadas.
Ocultar las instrucciones de los lectores de pantalla hasta que sea necesario, agregando aria-hidden="true” a las instrucciones <div>definidas cuando se inicializa el menú.
Agrega role="menubar” al nivel superior <ul>del menú. Haz que ese <ul>teclado sea enfocable con tabindex="0", así lee las instrucciones mientras está enfocado y referenciado con aria-labelledby.
Para todos los elementos de menú en la barra de menú que tengan submenús, agregue role="menu” a su <ul>y ocultarlos por defecto usando aria-hidden="true”. Esto se puede ubicar después del bloque $elem.find ('ul:eq (0) ') presentado inmediatamente arriba.
Oculta los enlaces en los elementos del menú de los lectores de pantalla por defecto usando tabindex=” -1" y configurando aria-hidden="true”.
Configura los elementos del menú en todo el menú usando role="menuitem”. Además, elimina el acceso al teclado por defecto con tabindex=” -1". A continuación, etiquete cada elemento del menú con el texto del enlace asociado usando aria-label= "[$link.text]”.
Para cada uno de los elementos del menú que tenga un submenú, agregue aria-haspopup="true” para anunciar la presencia del submenú, y establezca su estado predeterminado en “colapsado” agregando aria-expanded="false”.
Cuando se marca un elemento de menú seleccionado, también agrega aria-selected="true” y agrega acceso de teclado al elemento de menú con tabindex="0".
Vuelva a agregar acceso de teclado a los elementos del menú usando tabindex="0".
Haga referencia a la clase de acceso del teclado, donde los eventos del mouse se definen en la función OnKeyDown, que se describe a continuación.
En la función ShowSubMenu, agregue los submenús aria-expanded="true” cuando estén expandidos, elimine el acceso al teclado del contenedor del submenú con tabindex=” -1". Después, haz visible el submenú con aria-hidden="false”.
En la función HideSubMenu, establece aria-expanded="false”, oculta submenús con aria-hidden="true” y elimina el acceso al teclado con tabindex=” -1" cuando se cierra un submenú.
Cuando se llama a la función ColapseAll, para contraer cualquier menú abierto, revertir todos los atributos definiendo el elemento como abierto, volviendo a aria-hidden="true”, aria-expanded="false” y volviendo a agregar el acceso al teclado con tabindex="0" para que pueda abrirse nuevamente.
Adición de operabilidad del teclado
La funcionalidad del teclado de la barra de menús puede ser compleja, particularmente con menús grandes con múltiples niveles de submenús, y pueden incluir teclas redundantes que realizan la misma función. El W3C define la interacción sugerida del teclado para una barra de menú de la siguiente manera:
Interacción del teclado de la barra
Esta descripción de los comportamientos del teclado asume lo siguiente:
- Una barra de
menú horizontalque contiene varios elementosmenuitem. - Todos los elementos de la
barra de menútienen submenús secundarios que contienen varios elementos dispuestos verticalmente. - Algunos de los elementos
menuitemen los submenús tienen submenús hijos con elementos que también están dispuestos verticalmente.
Al leer las siguientes descripciones, también tenga en cuenta estos elementos:
- Los elementos enfocable, que pueden tener rol
menuitem, menuitemradioomenuitemcheckbox, se denominan elementos. - Si un comportamiento se aplica solo a ciertos tipos de elementos, por ejemplo, elementos
menuitem, se usa el nombre de rol específico. - Los submenús, también conocidos como menús emergentes, son elementos con
menúde roles. - Excepto donde se indique, los menús abiertos desde un botón de menú se comportan igual que los menús abiertos desde una barra de menús.
- Cuando se abre un
menú, o cuando unabarra de menúrecibe enfoque, el enfoque del teclado se coloca en el primer elemento. Todos los elementos se pueden enfocar como se describe en 5.6 Navegación por teclado dentro de componentes. - Ingresa:
- Cuando el foco está en un
elemento de menúque tiene un submenú, abre el submenú y coloca el foco en su primer elemento. - De lo contrario, activa el ítem y cierra el menú.
- Cuando el foco está en un
- Espacio:
- (Opcional): Cuando el foco está en una casilla de verificación
menuitemcheckbox, cambia el estado sin cerrar el menú. - (Opcional): Cuando el foco está en un
menuitemradioque no está marcado, sin cerrar el menú, comprueba elmenuitemradioenfocado y desmarca cualquier otro elementomenuitemradiomarcado en el mismo grupo. - (Opcional): Cuando el foco está en un
elemento de menúque tiene un submenú, abre el submenú y coloca el foco en su primer elemento. - (Opcional): Cuando el foco está en un
elemento de menúque no tiene un submenú, activa elelemento de menúy cierra el menú.
- (Opcional): Cuando el foco está en una casilla de verificación
- Flecha abajo:
- Cuando el foco está en un
elemento de menúen unabarra demenú, abre su submenú y coloca el foco en el primer elemento del submenú. - Cuando el enfoque está en un
menú, mueve el enfoque al siguiente elemento, opcionalmente envolviendo del último al primero.
- Cuando el foco está en un
- Flecha arriba:
- Cuando el enfoque está en un
menú, mueve el foco al elemento anterior, opcionalmente envolviendo del primero al último. - (Opcional): Cuando el foco está en un
elemento de menúen unabarra demenú, abre su submenú y coloca el foco en el último elemento del submenú.
- Cuando el enfoque está en un
- Flecha derecha:
- Cuando el enfoque está en una
barra de menú, mueve el enfoque al siguiente elemento, opcionalmente envolviendo del último al primero. - Cuando el enfoque está en un
menúy en unelemento de menúque tiene un submenú, abre el submenú y coloca el foco en su primer elemento. - Cuando el foco está en un
menúy en un elemento que no tiene submenú, realiza las siguientes 3 acciones:- Cierra el submenú y cualquier menú padre.
- Mueve el foco al siguiente
elemento de menúen labarra de menú. - O bien: (Recomendado) abre el submenú de ese
menuitemsin mover el foco al submenú, o abre el submenú de esemenuitemy coloca el foco en el primer elemento del submenú.
Tenga en cuenta que si la
barra de menúno estuviera presente, por ejemplo, los menús se abrieron desde un menubutton, Flecha Derecha no haría nada cuando el foco está en un elemento que no tiene un submenú.
- Cuando el enfoque está en una
- Flecha izquierda:
- Cuando el enfoque está en una
barra de menú, mueve el foco al elemento anterior, opcionalmente envolviendo del último al primero. - Cuando el enfoque está en un submenú de un elemento de un
menú, cierra el submenú y devuelve el foco alelemento del menúprincipal. - Cuando el enfoque está en un submenú de un elemento en una
barra de menú, realiza las siguientes 3 acciones:- Cierra el submenú.
- Mueve el foco al
elemento de menúanterior en labarra de menú. - O bien: (Recomendado) abre el submenú de ese
menuitemsin mover el foco al submenú, o abre el submenú de esemenuitemy coloca el foco en el primer elemento del submenú.
- Cuando el enfoque está en una
- Inicio: Si no se admite el ajuste de teclas de flecha, mueve el foco al primer elemento del
menú o barra de menúactual. - Fin: Si no se admite el ajuste de teclas de flecha, mueve el foco al último elemento del
menú o barra de menúactual. - Cualquier tecla que corresponda a un carácter imprimible (Opcional): Mueve el foco al siguiente elemento del menú actual cuya etiqueta comienza con ese carácter imprimible.
- Escape: Cierra el menú que contiene foco y devuelve el foco al elemento o contexto, por ejemplo, botón de menú o
elemento de menúpadre, desde el que se abrió el menú. - Pestaña: Mueve el foco al siguiente elemento en la secuencia de tabulaciones, y si el elemento que tenía el foco no está en una
barra de menú, cierra sumenúy todos los contenedoresdel menúpadre abiertos. - Shift + Tab: Mueve el foco al elemento anterior en la secuencia de tabulaciones, y si el elemento que tenía el foco no está en una
barra de menú, cierra sumenúy todos los contenedores demenúpadre abiertos.
- Los elementos de menú deshabilitados se pueden enfocar pero no se pueden activar.
- Un separador en un menú no es enfocable ni interactivo.
- Si se abre un menú o una barra de menú recibe el enfoque como resultado de una acción contextual, Esc o Intro pueden devolver el enfoque al contexto de invocación. Por ejemplo, un editor de texto enriquecido puede tener una barra de menú que recibe enfoque cuando se presiona una tecla de método abreviado, por ejemplo, Alt+F10, mientras se edita. En este caso, presionar Esc o activar un comando desde el menú puede devolver el foco al editor.
- Si bien se recomienda que los autores eviten hacerlo, algunas implementaciones de barras de menú de navegación pueden tener elementos
menuitemque realizan una función y abren un submenú. En tales implementaciones, Enter y la barra espaciadora realizan una función de navegación, por ejemplo, cargar nuevo contenido, mientras Flecha abajo, en una barra de menú horizontal, abre el submenú asociado con ese mismoelemento de menú. - Cuando los elementos de una
barra de menúestán dispuestos verticalmente y los elementos de los contenedores demenúestán dispuestos horizontalmente:- Flecha abajo funciona como Flecha derecha se describe arriba, y viceversa.
- Flecha arriba funciona como Flecha izquierda se describe arriba, y viceversa.
Fuente: W3C WAI-ARIA 1.1 Prácticas de autoría
Aquí hemos implementado un subconjunto de la interacción del teclado que W3C recomienda en una función onKeyDown () que se llama cuando se configuran los manejadores de eventos para los elementos del menú. Estas teclas incluyen las flechas izquierda y derecha, las flechas arriba y abajo, la barra espaciadora y las teclas Enter, y las teclas Tab y Esc. Copie la siguiente función en el archivo ik_menu.js, cerca del final, para agregar operabilidad del teclado al menú.
Barra de menús accesible en acción
Vea el siguiente video que muestra ChromeVox interactuando con una barra de menú. La tecla Tab se utiliza para navegar a la barra de menú, al primer elemento del menú y para salir de la barra de menú. Las teclas de flecha izquierda y derecha se utilizan para moverse por los elementos del menú de nivel superior. Las flechas Arriba y Abajo se utilizan para entrar y salir de un submenú y para moverse entre los elementos del menú en un submenú. La barra espaciadora o la tecla Intro se utilizan para activar un elemento del menú. La tecla Esc cierra el submenú actual. Apunta a que la barra de menú que actualices en la actividad en la página siguiente opere y se anuncie como la del video.
Video: Barra de Menú Accesible
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=368