Desarrollador Frontend: pregunta de entrevista
¿Cómo haces accesible una interfaz web?
La UI accesible empieza con HTML semántico y comportamiento de teclado. Usa controles nativos cuando sea posible, foco visible, etiquetas significativas, encabezados correctos y prueba con teclado y tecnología asistiva.
Respuesta directa
Qué debe cubrir una buena respuesta
Cómo funciona
La accesibilidad se apoya en semántica que el navegador ya entiende. Los elementos nativos traen gratis manejo de teclado, gestión de foco y roles; ARIA solo rellena huecos y no puede reparar un div que finge ser un botón. Además de la estructura, la interfaz necesita contraste suficiente, foco visible, etiquetas asociadas a los campos, errores anunciados al lector de pantalla y ninguna dependencia exclusiva del color o del hover. Probar con teclado y lector de pantalla detecta la mayoría de fallos que las herramientas automáticas no ven.
Ejemplo
Usa un button para una acción en vez de un div clicable, añade un nombre accesible y verifica Tab, Enter y Espacio. Cuando se abre un modal, mueve el foco dentro, atrapa Tab en él, devuelve el foco al disparador al cerrar y anuncia el título con aria-labelledby para que un usuario de lector de pantalla sepa dónde está.
Errores frecuentes
- Añadir roles ARIA a elementos genéricos en lugar de usar el elemento nativo.
- Quitar el contorno de foco por estética sin ofrecer un reemplazo visible.
- Probar solo con un verificador automático y nunca con teclado o lector de pantalla.
Una estructura útil para responder
Responde desde tu propia experiencia.
No memorices un guion: usa solo ejemplos que puedas explicar con honestidad en preguntas posteriores.
Abre el espacio de trabajo de escritorio y ensaya una respuesta clara con tus propias palabras.