Principio 3/3.3 Assistencia en los input/3.3.2-A

De WCAG Wiki

3.3.2-A. Etiquetas visibles

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)

  • {{{wcag_texto_criterioOAW}}}

Comprensión del criterio

Descripción resumida

{{{wcag_descripcion_resumida}}}

Objetivo

{{{wcag_objetivo}}}

Importancia de cumplir el criterio

{{{wcag_importancia}}}

Referencias WCAG

{{{wcag_referencias}}}

Recursos de apoyo

{{{wcag_recursos}}}

Evaluación del criterio

Tipo de evaluación

Evaluación [[:Categoría:{{{wcag_tipo_evaluacion}}}|{{{wcag_tipo_evaluacion}}}]]

Procedimiento de evaluación

{{{wcag_pasos_evaluacion}}}

Resultado esperado

{{{wcag_resultado_evaluacion}}}

Ejemplo ilustrativo

{{{wcag_ejemplo_evaluacion}}}


Otras herramientas de evaluación

{{{wcag_otras_herramientas_evaluacion}}}








La propiedad «Wcag tipo evaluacion» (como tipo de página) con el valor de entrada «{{{wcag_tipo_evaluacion}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.


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 3.3.2-A. Etiquetas visibles

Loading comments...




|wcag_texto_criterioOAW= Se deben proporcionar etiquetas visibles y descriptivas para los campos de formulario y grupos de campos de formulario

|wcag_descripcion_resumida= Todo campo de formulario debe tener una etiqueta textual visible que indique claramente qué se espera introducir.

|wcag_objetivo= Evitar que los usuarios cometan errores al introducir datos, proporcionando instrucciones y etiquetas claras que describan el propósito de cada campo.

|wcag_importancia= Las personas con discapacidad visual parcial, dificultades cognitivas, lectores de pantalla o usuarios sin experiencia pueden confundirse si no hay etiquetas claras. Las etiquetas visibles mejoran la usabilidad y la precisión al completar formularios.

|wcag_referencias=

  • G131: Providing descriptive labels
  • H44: Using label elements to associate text labels with form controls
  • H71: Providing a description for groups of form controls using fieldset and legend elements
  • Understanding Success Criterion 3.3.2: Labels or Instructions
  • WCAG Quick Reference – 3.3.2
  • WebAIM — Accessible Forms
    • |wcag_recursos=

    |wcag_tipo_evaluacion=Manual |wcag_pasos_evaluacion=

    1. Paso 1. Localizar los formularios existentes.
    2. Paso 2. Verificar que existen etiquetas visibles y descriptivas para los campos de formulario.
    3. Paso 3. Si existen campos de formulario relacionados entre sí, verificar que se encuentran agrupados y adecuadamente descritos.


    |wcag_resultado_evaluacion= Todos los campos y grupos de campos disponen de etiquetas visibles y descriptivas que permiten entender qué información debe introducirse.

    |wcag_ejemplo_evaluacion=

    Etiqueta clara y visible. 

    <form>
  <label for="nombre">Nombre completo</label>
  <input id="nombre" name="nombre" type="text">
</form>


    |wcag_otras_herramientas_evaluacion=

    • Inspección visual: comprobar que cada campo y grupo de campos del formulario tiene una etiqueta visible que describe claramente su propósito; evitar depender solo de placeholders.
    • Inspección del código: verificar que las etiquetas están correctamente asociadas a los controles mediante <label for=""> y id, o con aria-labelledby en casos necesarios; para grupos, comprobar uso de <fieldset> y <legend>.
    • Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar por los campos y confirmar que las etiquetas se anuncian claramente y corresponden al texto visible.
    • Prueba funcional: asegurarse de que las etiquetas permanecen visibles en todo momento, incluso después de interactuar con los campos, y no desaparecen al escribir.

    }}

Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.3_Assistencia_en_los_input/3.3.2-A&oldid=3738»