Vue 56: Fundamentos de Accesibilidad
easy⏱ 5 mincoursevue
Primero elementos nativos, ARIA después
La primera regla de ARIA es: no uses ARIA si no lo necesitas. Un <button> real es operable con teclado, enfocable, y se anuncia correctamente sin esfuerzo extra. Recurre a role, tabindex y manejadores de teclas solo cuando de verdad necesites un widget interactivo con estilos personalizados que ningún elemento nativo cubra - y ahí te toca reimplementar todo lo que el navegador te daba gratis: foco, soporte de teclado y anuncios.
Regiones live
aria-live='polite' (o su atajo role='status') le indica a la tecnología de asistencia que anuncie los cambios de contenido dentro de ese elemento sin robar el foco - esencial para cosas como contadores, mensajes de validación de formularios, o notificaciones que se actualizan sin recargar la página.
<p role="status" aria-live="polite">
Count is {{ count }}
</p>
<!-- screen readers announce this text every time it changes,
without moving keyboard focus away from whatever the user
was doing -->
Pruébalo: recorrido solo con teclado
Intenta operar los dos controles de abajo usando solo Tab, Enter y Espacio, sin tocar el mouse. Si ambos responden igual que con el clic, tienes paridad de teclado real - el estándar mínimo de cualquier widget interactivo personalizado.