Principio 1/1.3 Adaptable/1.3.1-M
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.1-M. Etiquetas de formulario
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Formulario
- Subgrupo: Etiquetas de campo
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera moderada
-
Sordoceguera –
Barrera moderada
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Los campos de formulario deben tener una etiqueta asociada explícitamente o, en su defecto, al menos tienen un título que describa su función.
Comprensión del criterio
Descripción resumida
Cada control de formulario debe tener un nombre accesible.
En la mayoría de los casos, esto se logra mediante una etiqueta
<label> correctamente asociada con el campo mediante los atributos for e id.
Objetivo
Permitir que los usuarios comprendan el propósito de cada campo mediante tecnologías de apoyo, facilitando su interacción y evitando errores de cumplimentación.
Importancia de cumplir el criterio
Sin una etiqueta asociada de forma programática, las tecnologías de apoyo no pueden identificar el campo, lo que impide a los usuarios con discapacidad visual interactuar de forma correcta con el formulario.
Referencias WCAG
Recursos de apoyo
Consejos
- Usar
<label for="id">para asociar etiquetas visuales y accesibles - El texto del label debe ser claro y conciso
- El placeholder NO sustituye a una etiqueta visible
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
Usa la herramienta de Web Developer Toolbar.
- Paso 1. Seleccionar “Forms – Display Form Details”.
- Paso 2. Buscar los elementos que actúan como etiqueta.
- Paso 3. Verificar que las etiquetas estén correctamente asociadas.
Resultado esperado
Todos los campos de formulario cuentan con una etiqueta asociada correctamente, o un método alternativo válido que proporcione su nombre accesible.
Ejemplo ilustrativo
Se muestra una etiqueta label con el atributo "nombre" (for="nombre") y el campo de texto (input) tiene el atributo id con la misma identificación (id="nombre").
<label for="nombre">Incluye tu nombre:</label> <input type="text" id="nombre">
Otras herramientas de evaluación
- Web Developer Toolbar
- Inspección del navegador
- Lector de pantalla (NVDA, VoiceOver, JAWS)
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 1.3.1-M. Etiquetas de formulario
Loading comments...
