HTML y CSS
Test de formularios y accesibilidad web
Resuelve 50 casos sobre formularios accesibles, etiquetado, teclado, validación, foco, nombres accesibles y mensajes dinámicos.
Cada intento mezcla preguntas y respuestas para evitar patrones memorizables.
Cargando preguntas…
Qué vas a practicar
Este banco evalúa formularios desde situaciones de uso reales: asociación de etiquetas, agrupación de controles, validación comprensible, navegación por teclado, gestión del foco, imágenes, multimedia y contenido dinámico. Las decisiones deben funcionar para distintos usuarios y tecnologías de asistencia.
- Relacionar etiquetas, controles, instrucciones y errores.
- Elegir tipos de input, botones, grupos y restricciones nativas.
- Mantener orden de foco, nombres accesibles y navegación por teclado.
- Aplicar alternativas textuales, regiones live y estados ARIA solo cuando aportan información real.
Preguntas de ejemplo
Los ejemplos siguientes pertenecen al banco interactivo y conservan exactamente la misma respuesta y explicación.
1En HTML semántico, ¿qué elemento asocia una etiqueta textual con un control de formulario?
Respuesta: <label>
Explicación: <label> proporciona un nombre visible al control y puede asociarse mediante for e id o envolviendo el control.
2Para que la relación quede expresada en HTML, ¿qué atributo impide enviar un formulario mientras un campo obligatorio está vacío?
Respuesta: required
Explicación: required activa una restricción nativa de obligatoriedad; aria-required comunica el estado, pero no aplica validación.
3¿Qué valor de tabindex permite enfocar mediante script un elemento sin añadirlo al orden de tabulación normal?
Respuesta: tabindex="-1"
Explicación: tabindex="-1" permite focus() programático, pero excluye el elemento de la secuencia normal con Tab. El indicador debe seguir siendo visible y no depender del puntero para que el usuario conozca su posición.
4¿Qué valor de aria-live suele ser adecuado para mensajes no urgentes como “Guardado”?
Respuesta: polite
Explicación: polite espera una pausa razonable para anunciar el cambio sin interrumpir de forma brusca. status y alert tienen niveles de interrupción distintos y deben elegirse según la urgencia real.
5En el marcado del formulario, ¿qué atributo de input sugiere un teclado numérico sin cambiar por sí mismo la semántica del valor?
Respuesta: inputmode="numeric"
Explicación: inputmode orienta al teclado virtual, mientras el tipo del control sigue determinando su semántica y validación.
6¿Qué característica de un objetivo táctil reduce activaciones accidentales?
Respuesta: Tamaño y separación suficientes
Explicación: Los controles con área activa y separación adecuadas son más fáciles de accionar con precisión. El tamaño y la separación reducen activaciones accidentales; ampliar solo el icono visual no siempre amplía el área interactiva.
Cómo aprovechar la práctica
Lee primero la necesidad de la persona usuaria y después el detalle técnico. Comprueba si el control tiene nombre accesible, instrucciones suficientes, estado perceptible y comportamiento de teclado; no elijas ARIA cuando un elemento HTML nativo resuelve el caso de forma más robusta.
Fuentes y alcance
Las preguntas se han revisado con el HTML Living Standard, las WCAG 2.2 y los tutoriales oficiales de WAI sobre formularios e imágenes. Revisión editorial: 19 de agosto de 2026.