Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-M»

De WCAG Wiki
VisualWikitexto
Página creada con «aqui van ejemplos:»
 
Sin resumen de edición
 
(No se muestran 6 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
aqui van ejemplos:
{{CriterioWCAG
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-M
|wcag_titulo_criterio=1.3.1-M. Etiquetas de formulario
|wcag_nivel=A
|wcag_version=2.0
|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=Etiquetas de campo
 
|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-moderada">Barrera moderada</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|wcag_texto_criterioOAW=
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.
 
|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
<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=
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.
 
|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 interactuar de forma correcta con el formulario.
 
|wcag_referencias=
<ul>
<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><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><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>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<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 placeholder NO sustituye a una etiqueta visible</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Seleccionar <strong>“Forms – Display Form Details”</strong>.
</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>
 
|wcag_resultado_evaluacion=
Todos los campos de formulario cuentan con una etiqueta asociada correctamente, o un método alternativo válido que proporcione su nombre accesible.
 
|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">
<label for="nombre">Incluye tu nombre:</label>
<input type="text" id="nombre">
</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=
<ul>
<li>Web Developer Toolbar</li>
<li>Inspección del navegador</li>
<li>Lector de pantalla (NVDA, VoiceOver, JAWS)</li>
</ul>
 
}}

Revisión actual - 08:08 2 dic 2025

1.3.1-M. Etiquetas de formulario

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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

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.
  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 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> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

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




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-M&oldid=3797»