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 |
||
| (No se muestran 2 ediciones intermedias del mismo usuario) | |||
| Línea 4: | Línea 4: | ||
|wcag_titulo_criterio=1.3.1-M. Etiquetas de formulario | |wcag_titulo_criterio=1.3.1-M. Etiquetas de formulario | ||
|wcag_nivel=A | |wcag_nivel=A | ||
|wcag_version=2. | |wcag_version=2.0 | ||
|wcag_principio=1_Perceptible | |wcag_principio=1_Perceptible | ||
|wcag_principio_url=Principio_1 | |wcag_principio_url=Principio_1 | ||
| 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-moderada">Barrera moderada</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-moderada">Barrera moderada</span> | <span class="gravedad gravedad-moderada">Barrera moderada</span> | ||
</li> | </li> | ||
|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= | ||
| Línea 40: | Línea 33: | ||
|wcag_descripcion_resumida= | |wcag_descripcion_resumida= | ||
Cada control de formulario debe tener un nombre accesible. En la mayoría de los casos, esto se logra mediante una etiqueta | Cada control de formulario debe tener un nombre accesible. | ||
En la mayoría de los casos, esto se logra mediante una etiqueta | |||
<code><nowiki> <label> </nowiki></code> 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. | |||
|wcag_objetivo= | |wcag_objetivo= | ||
| Línea 46: | Línea 44: | ||
|wcag_importancia= | |wcag_importancia= | ||
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 | 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. | ||
|wcag_referencias= | |wcag_referencias= | ||
<ul> | <ul> | ||
<li>H44: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H44 H44: Using label elements to associate text labels with form controls]</span></li> | ||
<li>H65: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H65 H65: Using the title attribute to identify form controls when the label element cannot be used]</span></li> | ||
<li>F68: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F68 F68: Failure due to providing no accessible name for a control or other user interface component]</span></li> | ||
</ul> | </ul> | ||
|wcag_recursos= | |wcag_recursos= | ||
<strong> Consejos </strong> | |||
<ul> | <ul> | ||
<li>Usar | <li>Usar <code><nowiki> <label for="id"> </nowiki></code> para asociar etiquetas visuales y accesibles</li> | ||
<li>El texto del label debe ser claro y conciso</li> | <li>El texto del label debe ser claro y conciso</li> | ||
<li>El placeholder NO sustituye a una etiqueta visible</li> | <li>El placeholder NO sustituye a una etiqueta visible</li> | ||
| Línea 65: | Línea 64: | ||
|wcag_pasos_evaluacion= | |wcag_pasos_evaluacion= | ||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' | |||
<ol class="paso-list"> | <ol class="paso-list"> | ||
<li> | <li><span class="paso-badge">Paso 1.</span> | ||
<li> | Seleccionar <strong>“Forms – Display Form Details”</strong>. | ||
<li>Verificar que | </li> | ||
<li><span class="paso-badge">Paso 2.</span> | |||
Buscar los elementos que actúan como etiqueta. | |||
</li> | |||
<li><span class="paso-badge">Paso 3.</span> | |||
Verificar que las etiquetas estén correctamente asociadas. | |||
</li> | |||
</ol> | </ol> | ||
| Línea 75: | Línea 82: | ||
|wcag_ejemplo_evaluacion= | |wcag_ejemplo_evaluacion= | ||
<div class="accessibility-card"> | |||
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"). | |||
<pre class="wcag-codigo-html"> | <pre class="wcag-codigo-html"> | ||
<label for=" | <label for="nombre">Incluye tu nombre:</label> | ||
<input type="text" id=" | <input type="text" id="nombre"> | ||
</pre> | </pre> | ||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>'''Inspección del navegador''': comprobar el código fuente de los formularios corresponda a la identifiación ''label for /id '' correspondiente a cada campo </li> | |||
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si el los campos de texto se identifican correctamente cuando se accede a ellos.</li> | |||
</ul> | |||
|wcag_otras_herramientas_evaluacion= | |wcag_otras_herramientas_evaluacion= | ||
Revisión actual - 08:08 2 dic 2025
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...
