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.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.

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 interactuar de forma correcta con el formulario.

Referencias WCAG

• H44: Using label elements to associate text labels with form controls
• H65: Using the title attribute to identify form controls when the label element cannot be used
• F68: Failure due to providing no accessible name for a control or other user interface component

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 Heading Maps.

1. Paso 1. Seleccionar “Forms – Display Form Details”.
2. Paso 2. Buscar los elementos que actúan como etiqueta.
3. 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

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)

Comentarios

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

Loading comments...