Saltar al contenido principal
Library homepage
 
LibreTexts Español

7.2: Barras de menú

  • Page ID
    152658
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    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]”
    Lectura sugerida: Para obtener más información sobre los menús accesibles, consulte WAI-ARIA Best Practice 1.1: Menús o barra de menús.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Primero, proporciona algunas instrucciones sobre cómo usar el menú con un teclado y agréguelas a las opciones predeterminadas.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

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

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Oculta los enlaces en los elementos del menú de los lectores de pantalla por defecto usando tabindex=” -1" y configurando aria-hidden="true”.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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]”.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

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

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

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

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Vuelva a agregar acceso de teclado a los elementos del menú usando tabindex="0".

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

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

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

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

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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:

    1. Una barra de menú horizontal que contiene varios elementos menuitem.
    2. Todos los elementos de la barra de menú tienen submenús secundarios que contienen varios elementos dispuestos verticalmente.
    3. Algunos de los elementos menuitem en 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:

    1. Los elementos enfocable, que pueden tener rol menuitem, menuitemradio o menuitemcheckbox, se denominan elementos.
    2. Si un comportamiento se aplica solo a ciertos tipos de elementos, por ejemplo, elementos menuitem, se usa el nombre de rol específico.
    3. Los submenús, también conocidos como menús emergentes, son elementos con menú de roles.
    4. 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 una barra 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ú.
    • 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 menuitemradio que no está marcado, sin cerrar el menú, comprueba el menuitemradio enfocado y desmarca cualquier otro elemento menuitemradio marcado 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 el elemento de menú y cierra el menú.
    • Flecha abajo:
      • Cuando el foco está en un elemento de menú en una barra de menú, 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.
    • 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 una barra de menú, abre su submenú y coloca el foco en el último elemento del submenú.
    • 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 un elemento 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:
        1. Cierra el submenú y cualquier menú padre.
        2. Mueve el foco al siguiente elemento de menú en la barra de menú.
        3. O bien: (Recomendado) abre el submenú de ese menuitem sin mover el foco al submenú, o abre el submenú de ese menuitem y 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ú.

    • 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 al elemento del menú principal.
      • Cuando el enfoque está en un submenú de un elemento en una barra de menú, realiza las siguientes 3 acciones:
        1. Cierra el submenú.
        2. Mueve el foco al elemento de menú anterior en la barra de menú.
        3. O bien: (Recomendado) abre el submenú de ese menuitem sin mover el foco al submenú, o abre el submenú de ese menuitem y coloca el foco en el primer elemento del submenú.
    • 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 su menú y todos los contenedores del 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 su menú y todos los contenedores de menú padre abiertos.
    Nota:
    1. Los elementos de menú deshabilitados se pueden enfocar pero no se pueden activar.
    2. Un separador en un menú no es enfocable ni interactivo.
    3. 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.
    4. Si bien se recomienda que los autores eviten hacerlo, algunas implementaciones de barras de menú de navegación pueden tener elementos menuitem que 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 mismo elemento de menú.
    5. Cuando los elementos de una barra de menú están dispuestos verticalmente y los elementos de los contenedores de menú están dispuestos horizontalmente:
      1. Flecha abajo funciona como Flecha derecha se describe arriba, y viceversa.
      2. 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ú.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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

    Miniaturas para el elemento incrustado “Barra de menús 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


    This page titled 7.2: Barras de menú is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.