Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-N»
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
{{CriterioWCAG | |||
== | |id_wcag_criterio=1.3.1 | ||
|id_wcag_subcriterio=1.3.1-N | |||
|wcag_titulo_criterio=1.3.1-N. Agrupar campos relacionados | |||
|wcag_nivel=A | |||
|wcag_version=2.2 | |||
|wcag_principio=1_Perceptible | |||
|wcag_principio_url=Principio_1 | |||
|wcag_pauta=1.3_Adaptable | |||
|wcag_pauta_url=Principio_1/1.3_Adaptable | |||
|wcag_grupo=Formulario | |||
|wcag_subgrupo=Agrupación de campos | |||
|wcag_discapacidades= | |||
<li class="discapacidad-item"> | |||
[[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="gravedad gravedad-grave">Barrera grave</span> | |||
</li> | |||
<li class="discapacidad-item"> | |||
</ | [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]] | ||
</ | <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> – | ||
<span class="gravedad gravedad-moderada">Barrera moderada</span> | |||
</li> | |||
<li class="discapacidad-item"> | |||
[[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> – | |||
<span class="gravedad gravedad-leve">Barrera leve</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad visual total]] | |||
[[Categoría:Discapacidad motriz]] | |||
[[Categoría:Discapacidad cognitiva]] | |||
|wcag_texto_criterioOAW= | |||
Los grupos de campos de formulario relacionados entre sí que requieren de una descripción de todo el grupo se deben agrupar dentro de un elemento <fieldset> y describirse con <legend>. | |||
|wcag_descripcion_resumida= | |||
Los campos de formulario relacionados (como direcciones, fechas, preferencias o grupos de opciones) deben estar agrupados con <fieldset> y describirse con <legend> para que la relación entre ellos sea entendida por tecnologías de apoyo. | |||
|wcag_objetivo= | |||
Comunicar programáticamente la relación entre campos relacionados para reducir errores y mejorar la comprensión del formulario. | |||
|wcag_importancia= | |||
La agrupación ayuda a usuarios con lectores de pantalla y a personas con dificultades cognitivas o motrices a entender la organización y propósito de los campos. | |||
|wcag_referencias= | |||
<ul> | |||
<li>H71: Usar <fieldset> y <legend> para describir grupos de controles de formulario</li> | |||
<li>ARIA: role="group" y role="radiogroup" como alternativas</li> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li>Usar <fieldset> y <legend> cuando haya varios campos vinculados</li> | |||
<li>Evitar usar <legend> muy largos (ser conciso)</li> | |||
<li>Usar ARIA solo si no es posible usar HTML semántico</li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Comprobación manual | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li>Identificar formularios con varios campos relacionados</li> | |||
<li>Verificar la presencia de <fieldset> y <legend></li> | |||
<li>Comprobar que el texto del <legend> describe el grupo</li> | |||
<li>Opcional: verificar uso de roles ARIA solo cuando no haya estructura HTML</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
Los campos relacionados están agrupados programáticamente mediante <fieldset> y <legend> o roles ARIA equivalentes. | |||
|wcag_ejemplo_evaluacion= | |||
Ejemplo correcto: | |||
<pre class="wcag-codigo-html"> | |||
<fieldset> | |||
<legend>Método de contacto</legend> | |||
<label><input type="radio" name="contact" value="email">Email</label> | |||
<label><input type="radio" name="contact" value="phone">Teléfono</label> | |||
</fieldset> | |||
</pre> | |||
Ejemplo incorrecto: | |||
<pre class="wcag-codigo-html"> | |||
<p>Método de contacto</p> | |||
<label><input type="radio" name="contact" value="email">Email</label> | |||
<label><input type="radio" name="contact" value="phone">Teléfono</label> | |||
</pre> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>Inspección del navegador</li> | |||
<li>Lectores de pantalla</li> | |||
<li>Web Developer Toolbar</li> | |||
</ul> | |||
}} | |||
Revisión del 18:35 4 nov 2025
1.3.1-N. Agrupar campos relacionados
- Nivel: A
- Versión: 2.2
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Formulario
- Subgrupo: Agrupación de campos
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Motriz –
Barrera moderada
-
Cognitiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Los grupos de campos de formulario relacionados entre sí que requieren de una descripción de todo el grupo se deben agrupar dentro de un elemento <fieldset> y describirse con <legend>.
Comprensión del criterio
Descripción resumida
Los campos de formulario relacionados (como direcciones, fechas, preferencias o grupos de opciones) deben estar agrupados con <fieldset> y describirse con <legend> para que la relación entre ellos sea entendida por tecnologías de apoyo.
Objetivo
Comunicar programáticamente la relación entre campos relacionados para reducir errores y mejorar la comprensión del formulario.
Importancia de cumplir el criterio
La agrupación ayuda a usuarios con lectores de pantalla y a personas con dificultades cognitivas o motrices a entender la organización y propósito de los campos.
Referencias WCAG
- H71: Usar <fieldset> y <legend> para describir grupos de controles de formulario
- ARIA: role="group" y role="radiogroup" como alternativas
Recursos de apoyo
- Usar <fieldset> y <legend> cuando haya varios campos vinculados
- Evitar usar <legend> muy largos (ser conciso)
- Usar ARIA solo si no es posible usar HTML semántico
Evaluación del criterio
Tipo de evaluación
Evaluación Comprobación manual
Procedimiento de evaluación
- Identificar formularios con varios campos relacionados
- Verificar la presencia de <fieldset> y <legend>
- Comprobar que el texto del <legend> describe el grupo
- Opcional: verificar uso de roles ARIA solo cuando no haya estructura HTML
Resultado esperado
Los campos relacionados están agrupados programáticamente mediante <fieldset> y <legend> o roles ARIA equivalentes.
Ejemplo
Ejemplo correcto:
<fieldset> <legend>Método de contacto</legend> <label><input type="radio" name="contact" value="email">Email</label> <label><input type="radio" name="contact" value="phone">Teléfono</label> </fieldset>
Ejemplo incorrecto:
<p>Método de contacto</p> <label><input type="radio" name="contact" value="email">Email</label> <label><input type="radio" name="contact" value="phone">Teléfono</label>
Otras herramientas de evaluación
- Inspección del navegador
- Lectores de pantalla
- Web Developer Toolbar
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 1.3.1-N. Agrupar campos relacionados
Loading comments...
