Generador de pestañas (tabs) accesibles
Escribe el título y el contenido de cada pestaña, elige el estilo y copia. La vista previa se puede probar con el mouse y con las flechas del teclado.
Cómo usarPestañas que funcionan con el teclado
Disponible en: 
Generador de pestañas (tabs) accesibles: para qué sirve
Las pestañas organizan contenidos como descripción, medidas y envío de un producto en un espacio pequeño. Hechas sin cuidado, resultan imposibles de usar con el teclado o con el lector de pantalla.
El generador sigue el patrón Tabs de las WAI-ARIA Authoring Practices: tablist, tab con aria-selected y tabpanel vinculados por aria-controls y aria-labelledby, solo la pestaña activa en el Tab y navegación con las flechas, Home y End. Los paneles solo se ocultan cuando el script carga. Tú eliges el estilo subrayado o en píldora y el color.
Cómo usar
- Escribe el título y el contenido de cada pestaña.
- Elige el estilo y el color.
- Prueba en la vista previa y copia el código.
Cuándo usar
- Detalles de producto en una tienda en línea.
- Planes o servicios lado a lado.
- Información de un evento.
Preguntas frecuentes
¿Qué hace accesibles a las pestañas?
Seguir el patrón Tabs de WAI-ARIA: la lista tiene role=tablist, cada pestaña es un botón con role=tab y aria-selected, y cada contenido tiene role=tabpanel vinculado a la pestaña por aria-controls y aria-labelledby. Solo la pestaña activa entra en el Tab; entre las pestañas la persona se mueve con las flechas.
¿Y si el JavaScript no carga?
El código solo oculta los paneles después de que el script se ejecuta. Sin JavaScript, todos los contenidos aparecen uno debajo del otro, y nada queda inaccesible.
¿Pestañas o acordeón?
Las pestañas funcionan bien con pocos títulos cortos en computadora. Con muchos elementos o textos largos, especialmente en celular, el acordeón (preguntas que se abren y cierran) suele ser mejor.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.