Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-M»
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 16: | Línea 16: | ||
[[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | ||
<span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | ||
<span class="gravedad gravedad- | <span class="gravedad gravedad-leve">Barrera leve</span> | ||
</li> | </li> | ||
<li class="discapacidad-item"> | <li class="discapacidad-item"> | ||
[[Archivo: | [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]] | ||
<span class="discapacidad-texto">[[:Categoría:Discapacidad | <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> – | ||
<span class="gravedad gravedad-leve">Barrera leve</span> | <span class="gravedad gravedad-leve">Barrera leve</span> | ||
</li> | </li> | ||
| Línea 33: | Línea 27: | ||
|wcag_lista_discapacidades= | |wcag_lista_discapacidades= | ||
[[Categoría:Discapacidad visual total]] | [[Categoría:Discapacidad visual total]] | ||
[[Categoría:Discapacidad | [[Categoría:Discapacidad sordoceguera]] | ||
|wcag_texto_criterioOAW= | |wcag_texto_criterioOAW= | ||
Revisión del 05:54 5 nov 2025
1.3.1-M. Etiquetas de formulario
- Nivel: A
- Versión: 2.2
- 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 leve
-
Sordoceguera –
Barrera leve
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`. Si no es posible, el control debe contar con un atributo `title` o método equivalente que proporcione el nombre accesible.
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 o motriz interactuar de forma correcta con el formulario.
Referencias WCAG
- H44: Asociar <label> con controles de formulario
- H65: Usar `title` cuando no sea posible usar <label>
- F68: Fallo por no tener nombre accesible en controles de interfaz
Recursos de apoyo
- 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
- Abrir Web Developer Toolbar → “Forms – Display Form Details”.
- Identificar etiquetas visibles y comprobar si están asociadas mediante `for` / `id`.
- Verificar que los controles sin <label> usan `title` u otro método válido para nombre accesible.
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
Ejemplo correcto:
<label for="firstname">Nombre:</label> <input type="text" id="firstname">
Ejemplo incorrecto (solo placeholder):
<input type="text" placeholder="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...
