Pestañas y acordeones accesibles

Las pestañas muestran un panel de contenido a la vez, mientras que los encabezados de un acordeón permiten mostrar u ocultar secciones. Ambos necesitan botones claros, controles de teclado e información que indique al software de asistencia qué contenido está seleccionado o expandido. Prueba a recorrer un ejemplo con el teclado y comprobar qué contenido aparece.

Las pestañas y los acordeones organizan el contenido de forma diferente. Las pestañas muestran un panel asociado a la vez; los encabezados de un acordeón controlan secciones desplegables, y una implementación puede permitir que varias secciones permanezcan abiertas. Como ejemplo hipotético, una página de cuenta podría usar pestañas para Resumen y Transacciones, mientras que un formulario podría usar un acordeón para secciones desplegables de direcciones. Decide qué comportamiento encaja con el contenido antes de crear los controles. [1][2]

ARIA, siglas en inglés de Aplicaciones de Internet Enriquecidas Accesibles, proporciona roles, estados y relaciones que describen los elementos de una interfaz a las tecnologías de asistencia, incluidos los lectores de pantalla. En las pestañas, el contenedor necesita el rol tablist, cada control el rol tab y cada sección de contenido el rol tabpanel. Asigna una etiqueta a la lista de pestañas. Cada pestaña usa aria-controls para identificar su panel, y cada panel usa aria-labelledby para identificar su pestaña. Los botones HTML por sí solos no implementan este patrón completo de pestañas. [1]

El foco del teclado indica qué elemento recibe en ese momento las acciones del teclado; la selección identifica la pestaña cuyo panel se muestra. La tecla Tab entra en la lista de pestañas por la pestaña activa y después sale hacia el siguiente elemento en el orden de navegación con teclado de la página. Las flechas izquierda y derecha mueven el foco entre las pestañas horizontales; al llegar a un extremo, continúan por el extremo opuesto. Las pestañas verticales usan las flechas arriba y abajo; las horizontales dejan esas teclas disponibles para desplazar la página en el navegador. Si un panel no tiene contenido que pueda recibir el foco, o su primer contenido significativo no puede recibirlo, asigna al panel tabindex="0" para que puedas llegar a él con Tab. [1]

Con la activación manual, mover el foco entre pestañas no cambia el panel mostrado hasta que pulses Espacio o Intro. Con la activación automática, recibir el foco también selecciona la pestaña y muestra su panel. La pestaña activa tiene aria-selected="true"; las demás tienen aria-selected="false". APG recomienda la activación automática solo cuando los paneles se muestran sin una demora perceptible, lo que normalmente requiere contenido precargado. De lo contrario, cargar cada panel puede ralentizar el recorrido por la lista de pestañas. [1]

En un acordeón, coloca cada botón de cabecera dentro de un encabezado del nivel adecuado, y haz que el botón sea el único elemento de ese encabezado. Configura aria-controls para identificar su panel y aria-expanded para reflejar si el panel está visible. Intro o Espacio expande un panel contraído y contrae uno expandido cuando se permite contraerlo. Si un panel expandido no puede contraerse, su botón tiene aria-disabled="true". Tab y Mayús+Tab recorren los elementos del acordeón que pueden recibir el foco siguiendo el orden de la página; no sustituyen la navegación con flechas dentro de una lista de pestañas. [2]

Un panel de acordeón puede tener, de forma opcional, el rol region y una etiqueta que haga referencia a su botón de cabecera. Una región es un punto de referencia: una sección con nombre a la que pueden desplazarse quienes usan lectores de pantalla. Evita crear demasiados puntos de referencia de este tipo, sobre todo cuando se pueden expandir más de unos seis paneles a la vez. En un acordeón hipotético de precios con ocho regiones expandidas y etiquetadas, una configuración de lector de pantalla que reconozca esos puntos de referencia puede ofrecer cada panel como un destino de navegación independiente. Esto ilustra una decisión de estructura con ventajas e inconvenientes, no un resultado de usabilidad medido. [2]

• Orientación oficial, no un estudio empírico: el patrón de pestañas distingue entre mover el foco del teclado y activar una pestaña. Las flechas permiten moverse entre pestañas; Espacio o Intro activa una pestaña cuando la activación no ocurre automáticamente al recibir el foco. Tab entra o sale de la lista de pestañas en lugar de recorrer cada una. [1]
• Orientación oficial: se recomienda la activación automática de pestañas cuando los paneles aparecen sin una demora perceptible, normalmente con contenido precargado. El documento explica que, de lo contrario, la activación automática ralentiza el movimiento del foco y dificulta la navegación eficiente por la lista de pestañas. No aporta resultados numéricos de ningún estudio. [1]
• Orientación oficial: los botones de cabecera del acordeón comunican la visibilidad mediante aria-expanded e identifican sus paneles mediante aria-controls. Intro o Espacio acciona la cabecera que tiene el foco, mientras que Tab y Mayús+Tab siguen el orden de los elementos de la página que pueden recibir el foco. El patrón de acordeón proporcionado no especifica la navegación con flechas entre cabeceras. [2]
• Orientación oficial: los roles region con etiqueta en los paneles de acordeón son opcionales. APG aconseja evitar un exceso de puntos de referencia y pone como ejemplo el caso en que se pueden expandir más de unos seis paneles a la vez. También señala los paneles con encabezados o acordeones anidados como casos en los que las regiones pueden ayudar a comunicar la estructura. [2]

Estas dos fuentes ofrecen orientación para la implementación, no comparaciones empíricas, resultados numéricos de usabilidad ni una garantía de cumplimiento de los requisitos de accesibilidad. Mantén las afirmaciones dentro de ese alcance.

Las pestañas manuales y las automáticas requieren comprobaciones diferentes: en las manuales, el foco puede moverse mientras la selección permanece igual; en las automáticas, el foco también cambia la selección. Comprueba la demora real antes de elegir la activación automática. Que el contenido sea complejo no basta para determinar que un panel será lento. [1]

El comportamiento de un acordeón depende de si varios paneles pueden permanecer abiertos y de si un panel expandido puede cerrarse. Mantén los controles y los estados que comunican en consonancia con esas decisiones. La advertencia sobre los puntos de referencia se refiere a los paneles que pueden expandirse a la vez; unos seis es una orientación, no un límite universal que determine si se cumple o no. [2]