Saltar al contenido principal
LibreTexts Español

6.4: Acordeones

  • Page ID
    152575
  • \( \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}}\)

    Los widgets de acordeón pueden venir en formatos de selección única o múltiple, en los que se pueden abrir uno o varios paneles a la vez, respectivamente. Normalmente se utilizan para reducir el espacio que ocupa el contenido y para reducir el desplazamiento. Los acordeones se componen de Cabezales de Acordeón y Paneles de Acordeón. Los encabezados de acordeón controlan la visualización de su panel de acordeón asociado.

    Los roles, estados y propiedades de WAI-ARIA utilizados en un acordeón

    • aria-multiseleccionable =” (true | false)”
    • role=” encabezado”
    • role=” botón”
    • aria-controls=” [id del panel]”
    • tabindex=” 0″
    • role=” región”
    • aria-hidden= “(true | false)”
    • aria-expandida= “(true | false)”
    Lectura sugerida: Para obtener detalles sobre la construcción de acordeones accesibles, consulte: WAI-ARIA Prácticas de autoría: Acordeón

    El siguiente JSFiddle presenta un widget típico de acordeón. Revise el marcado JavaScript y HTML. Pruebe el acordeón presentado bajo la pestaña Resultado con ChromeVox para entender cómo funciona sin que se agreguen características de accesibilidad. Puedes trabajar en el propio JSFiddle haciendo clic en “Editar en JSFiddle”, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para corregir la accesibilidad del acordeón antes de completar la Actividad 9 en la página que sigue.

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

    Primero, agregue el acordeón a las regiones marcadas asignando role="region” al <DL>elemento de apertura cuando se inicializa el acordeón, agregando el rol region a la función init ().

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

    A continuación, agregue el atributo aria-multiseleccionable al<DL>, que se establecerá dinámicamente en true o false según los ajustes de configuración del complemento. Esto permite al usuario saber que se puede abrir más de un panel de acordeón cuando se establece en TRUE o solo un panel cuando se establece en FALSE. Consulte el bloque $ (document) .ready en el HTML, donde se realiza la asignación.

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

    <DL>También se eliminará la semántica de los hijos del elemento, al que se le asignó role="presentation”, su semántica de lista de definición. Agrega la semántica del acordeón role="heading” para asignar un rol de encabezado a los <DT>elementos. El atributo aria-level podría usarse para implementar paneles de acordeón anidados, pero para nuestro propósito aquí es suficiente una versión simplificada.

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

    Agrega un <div>dentro del encabezado (es decir, DT) y define su rol como un botón. Al botón se le da un atributo aria-controls para definir cuál de los paneles de acordeón controla. Por defecto el estado de alternancia se establece en false con aria-expanded="false” para ser actualizado dinámicamente cuando se hace clic en el botón o se presiona la tecla. Finalmente agrega tabindex="0" al botón (<div>) para que sea enfocable por teclado.

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

    El tabindex hará que el botón sea enfocable, pero no lo hará clicable. La función.on () jQuery agrega un evento click al botón, pero también se debe agregar un evento de pulsación de teclas. Agregar .on ('keydown') activa la función OnKeyDown, definida a continuación, por lo que los encabezados de acordeón operan tanto con un clic del ratón como con una pulsación de tecla.

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

    En la función TogklePanel (), antes de AutoCollapse (), agregue en el toggle para agregar y actualizar el atributo aria-expanded para los encabezados del panel, en función de si el panel asociado es visible o no.

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

    Dentro de la función AutoCollapse (), toggle aria-expanded="false” y aria-hidden="true” para todas las pestañas de acordeón que no sean las actuales. Esto asegura que solo un panel esté abierto a la vez.

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

    Por último, se agrega la semántica del panel acordeón, definiendo los <DD>elementos a los que se eliminó su semántica cuando se agregó role="presentation” al padre<DL>. A los paneles se les da un role="region” genérico para que el panel sea navegable en la lista de hitos, configurado para que se oculte por defecto con aria-hidden="true” para que todos los paneles se cierren cuando se carga la página. Además, también se agrega tabindex="0" para que el teclado de los paneles sea enfocable de manera que se lea el contenido del panel a medida que el usuario navega hacia ellos.

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

    Adición de operabilidad del teclado

    Las mejores prácticas de WAI-ARIA definen todas las funcionalidades de teclado de acordeón recomendadas, enumeradas a continuación En nuestro ejemplo, solo se incluyen los eventos de teclado requeridos.

    Interacción de teclado para acordeones

    • Entrar o Espacio:
      • Cuando el foco está en el encabezado del acordeón para un panel colapsado, expande el panel asociado. Si la implementación permite que solo se expanda un panel, y si otro panel se expande, colapsa ese panel.
      • Cuando el foco está en el encabezado de acordeón para un panel expandido, colapsa el panel si la implementación admite colapsar. Algunas implementaciones requieren que un panel se expanda en todo momento y permiten que solo se expanda un panel; por lo que no admiten una función de colapso.
    • Flecha abajo (opcional): Si el enfoque está en un encabezado de acordeón, mueve el enfoque al siguiente encabezado de acordeón. Si el foco está en el último encabezado del acordeón, o no hace nada o mueve el foco al primer encabezado del acordeón.
    • Flecha hacia arriba (opcional): Si el enfoque está en un encabezado de acordeón, mueve el enfoque al encabezado de acordeón anterior. Si el foco está en el primer encabezado del acordeón, o no hace nada o mueve el foco al último encabezado del acordeón.
    • Inicio (Opcional): Cuando el enfoque está en un encabezado de acordeón, mueve el enfoque al primer encabezado de acordeón.
    • Fin (Opcional): Cuando el enfoque está en un encabezado de acordeón, mueve el enfoque al último encabezado de acordeón.
    • Ctrl+Page Down (Opcional): Si el enfoque está dentro de un panel de acordeón o en un encabezado de acordeón, mueve el enfoque al siguiente encabezado de acordeón. Si el enfoque está en el último encabezado o panel de acordeón, o no hace nada o mueve el foco al primer encabezado de acordeón.
    • Ctrl+Page Up (Opcional): Si el foco está dentro de un panel de acordeón, mueve el foco al encabezado de ese panel. Si el enfoque está en un encabezado de acordeón, mueve el enfoque al encabezado de acordeón anterior. Si el foco está en el primer encabezado del acordeón, o no hace nada o mueve el foco al último encabezado del acordeón.

    Fuente: Patrones de diseño de acordeón WAI-ARIA

    Se ha creado la siguiente función OnKeyDown para agregar operabilidad del teclado a los elementos de encabezado del acordeón, permitiendo que tanto la barra espaciadora como las teclas Enter operen los alternadores (es decir, encabezados) que abren y cierran los paneles, y las teclas de flecha para moverse entre los encabezados del acordeón. Por defecto, los usuarios pueden navegar entre encabezados, y entre encabezados y paneles usando la tecla Tab.

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

    Acordeón accesible en acción

    Mira el siguiente video para ver cómo ChromeVox interactúa con un acordeón. La tecla Tab se utiliza para navegar en los acordeones, moverse entre encabezados de acordeón y moverse entre encabezados y paneles de acordeón. Las teclas de flecha también se pueden usar para moverse entre encabezados de acordeón, pero no de encabezados a un panel asociado. Apunta a que el acordeón que actualices en la actividad en la siguiente página opere y anuncie como el del video.

    Video: Acordeones Accesibles

    Miniaturas para el elemento incrustado “Acordeones accesibles”

    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=353


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