Principio 3/3.2 Predecible/3.2.4-A

De WCAG Wiki

3.2.4-A. Identificación coherente

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 elementos con una misma funcionalidad y que se repiten a través de las páginas de un sitio web se deben identificar de forma consistente.

Comprensión del criterio

Descripción resumida

Componentes que tienen la misma función deben usar nombres, iconos y etiquetas consistentes en todas las páginas del sitio web.

Objetivo

Identificar de forma consistente funcionalidades que se repiten en un conjunto de páginas web, facilitando comprensión, reconocimiento y predictibilidad.

Importancia de cumplir el criterio

Si los elementos que realizan la misma acción se etiquetan o representan de manera diferente en distintas páginas, las personas con dificultades cognitivas, quienes usan lectores de pantalla o dependen de reconocimiento visual pueden confundirse y perder eficiencia.

Referencias WCAG

Recursos de apoyo

  • Design systems accesibles (nomenclatura, iconografía y patrones)

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los elementos que se repiten en una misma página o en diferentes páginas de un sitio web.
  2. Paso 2. Verificar que siempre se identifican de manera consistente.

Resultado esperado

Los elementos que cumplen la misma función mantienen identificación coherente (texto, icono y nombre accesible) en todo el sitio.

Ejemplo ilustrativo

Se presenta la misma etiqueta y función en todo el sitio 

<!-- Todas las páginas -->
<button aria-label="Buscar">Buscar</button>


Otras herramientas de evaluación

  • Revisión visual: comprobar que los elementos que realizan la misma función (botones, enlaces, iconos, controles) usan nombres, textos, estilos e iconografía consistentes en todo el sitio.
  • Inspección del texto y ARIA: verificar que el texto visible y las etiquetas accesibles (aria-label, aria-labelledby) son coherentes para elementos con la misma función.
  • Comparación entre páginas: navegar por diferentes secciones del sitio y confirmar que los componentes equivalentes mantienen su nombre y presentación (p. ej., “Buscar”, siempre “Buscar”; no “Buscar”/“Explorar”/“Encontrar”).
  • Prueba con lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar que los controles equivalentes se anuncian de forma consistente en todas las páginas.










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.2.4-A. Identificación coherente

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.2_Predecible/3.2.4-A&oldid=3555»