Componente de pestañas con el hack :checked frente a JS

Un componente de pestañas necesita: un indicador visual de la pestaña activa, un panel asociado que se muestre u oculte al seleccionarla, navegación con el teclado entre pestañas y atributos ARIA accesibles. Todo esto puede lograrse únicamente con CSS mediante el truco de :checked o con JavaScript para obtener una mejor accesibilidad.

Los inputs radio ocultos actúan como estado: cada pestaña es un <label> vinculado a un input radio. Cuando un radio está marcado, los combinadores de hermanos de CSS muestran el panel correspondiente y aplican estilos a la etiqueta de la pestaña activa. No se necesita JavaScript.

Coloque primero los inputs radio, después todas las etiquetas (pestañas) y, a continuación, todos los paneles dentro del mismo contenedor. Use el combinador de hermanos generales (~) para conectar un radio marcado con su panel correspondiente. Los paneles tienen display: none por defecto; el panel coincidente obtiene display: block.

El truco de :checked no puede actualizar los atributos ARIA (aria-selected, aria-controls), no puede habilitar la navegación con las teclas de flecha entre pestañas y las restricciones del orden del DOM (los inputs deben ir antes que los paneles) pueden entrar en conflicto con los requisitos del diseño visual. Estas carencias limitan la accesibilidad real.

Un componente de pestañas en JS escucha los eventos de clic en los botones de las pestañas, establece aria-selected en la pestaña activa, actualiza aria-hidden en los paneles y gestiona el foco. Este enfoque permite cumplir completamente con ARIA y aplicar los patrones de interacción con el teclado definidos en ARIA Authoring Practices.

Use role="tablist" en el contenedor, role="tab" en cada botón de pestaña junto con aria-selected y aria-controls, y role="tabpanel" en cada panel junto con aria-labelledby. Los lectores de pantalla anuncian el número de pestañas, la posición y el estado de selección.

ARIA Authoring Practices para pestañas: la tecla Tab entra en la lista de pestañas y enfoca la pestaña activa. Las flechas izquierda y derecha permiten desplazarse entre pestañas. Home y End saltan a la primera y última pestaña. Cada movimiento con las teclas de flecha activa la pestaña enfocada (patrón de activación automática).

Aplique estilos a la pestaña activa con un borde inferior o un cambio de fondo mediante el selector [aria-selected="true"]; funciona tanto con el enfoque basado en JS como con el enfoque basado en :checked. Así, CSS permanece sincronizado con el atributo de estado ARIA y se evita gestionar dos estados distintos.

Un indicador de pestaña animado se desliza entre las pestañas: coloque un elemento indicador con posicionamiento absoluto, use JavaScript para establecer sus valores de left y width de acuerdo con las dimensiones de la pestaña activa y anímelo con transition: left 200ms ease, width 200ms ease.

Cuando las pestañas desbordan su contenedor en pantallas pequeñas, use desplazamiento horizontal (overflow-x: auto; scrollbar-width: none) o conviértalas en un menú desplegable select en dispositivos móviles. El enfoque con select requiere JavaScript para sincronizar el select nativo con la visibilidad del panel de pestañas.

Use el truco de :checked para interfaces sencillas y no críticas en las que la accesibilidad no sea un requisito prioritario. Use pestañas con JavaScript en cualquier interfaz de producción destinada a usuarios de teclado, usuarios de lectores de pantalla o aplicaciones que requieran cumplimiento de ARIA en auditorías o por requisitos legales.

¿Cuál es la principal limitación de accesibilidad del truco CSS :checked para las pestañas?

El truco de :checked permite cambiar de pestaña usando únicamente CSS, mediante botones de opción y combinadores de hermanos, pero carece de accesibilidad para ARIA y el teclado. Las pestañas con JavaScript y roles ARIA (tablist, tab, tabpanel), gestión de aria-selected y control de las teclas de flecha proporcionan la experiencia completa y accesible necesaria para componentes de producción.