Pestañas accesibles con ARIA y teclado
Tres botones y tres paneles no son un widget de pestañas hasta que lo dicen los roles ARIA y las flechas funcionan.
Convierte el marcado de la vista previa en pestañas accesibles (la interfaz de ejemplo está en inglés: Models, Logs, Settings):
- #tabs lleva role="tablist"; cada botón, role="tab" y aria-controls con el id de su panel (tab-models controla panel-models, y así con los demás).
- Cada panel lleva role="tabpanel" y aria-labelledby con el id de su pestaña.
- La pestaña activa tiene aria-selected="true" y tabindex="0"; las demás, aria-selected="false" y tabindex="-1". Solo el panel activo es visible: oculta los otros con hidden.
- Al empezar, la activa es Models. Un clic activa una pestaña. Con el foco en una pestaña, ArrowRight y ArrowLeft activan y enfocan la siguiente o la anterior, y dan la vuelta al llegar al final.
Retos 0/5
- Roles y relaciones ARIA en su sitio
- Empieza en Models: seleccionada, enfocable y con su panel visible
- Un clic en Logs la activa y muestra solo su panel
- ArrowRight pasa a la siguiente y da la vuelta al final
- ArrowLeft desde la primera va a la última
const tabs = [...document.querySelectorAll('#tabs button')];
function select(tab) {
// pon aria-selected y tabindex en cada pestaña
// muestra solo el panel que indica el aria-controls de la pestaña
}
// roles, aria-controls y aria-labelledby
// manejadores de clic y de ArrowRight / ArrowLeft
select(tabs[0]);Para profundizar: la referencia de W3C WAI (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →