Principio 1/1.3 Adaptable/1.3.1-M

1.3.1-M. Etiquetas de formulario

1_Perceptible 1.3_Adaptable

• 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

1. Abrir Web Developer Toolbar → “Forms – Display Form Details”.
2. Identificar etiquetas visibles y comprobar si están asociadas mediante `for` / `id`.
3. 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

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)

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-M. Etiquetas de formulario

Loading comments...