Semántica nativa como primera opción
Cada componente parte del control de la plataforma que ya tiene el rol y el comportamiento de teclado adecuados: <button>, <dialog>, <details>, casillas de verificación, botones de opción y Popover API. ARIA es la alternativa.
Navegación con teclado
- Activación — Enter y Space activan botones y botones de alternancia; Space cambia el estado de casillas de verificación e interruptores.
- Controles compuestos — las flechas mueven el foco dentro de menús, pestañas, grupos de botones de opción y barras de herramientas; Home y End llevan al primer y al último elemento.
- Capas superpuestas — Escape cierra diálogos, ventanas emergentes y menús, y devuelve el foco al activador.
- Orden al usar Tab — solo los elementos interactivos reciben el foco al tabular; los controles desactivados se omiten.
Cada página de componente enumera sus interacciones con teclado.
Gestión del foco
Los diálogos modales contienen el foco mientras están abiertos y lo restauran al cerrarse. Las ventanas emergentes y los menús usan un tabindex móvil en sus elementos. Los estilos de foco visible corresponden al CSS de tu aplicación, mediante data-state y :focus-visible.
Cómo se verifica
Cada afirmación de esta página es un control de publicación: cero infracciones de axe en Chromium, Firefox y WebKit, y las pruebas sin JavaScript que los componentes Tier 0 superan por completo. Consulta Verificación