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 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> | ||
| Línea 22: | Línea 22: | ||
[[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]] | [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]] | ||
<span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> – | <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> – | ||
<span class="gravedad gravedad- | <span class="gravedad gravedad-moderada">Barrera moderada</span> | ||
</li> | </li> | ||
| Línea 33: | 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 39: | 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 58: | Línea 64: | ||
|wcag_pasos_evaluacion= | |wcag_pasos_evaluacion= | ||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].''' | |||
<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 68: | 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:24 5 nov 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 Heading Maps.
- 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
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
Comentarios
A continuación se muestran comentarios sobre el criterio 1.3.1-M. Etiquetas de formulario
Loading comments...
