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

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)
  • Patrones semánticos y ARIA coherentes en formularios y navegación

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar elementos repetidos (botones, iconos, enlaces, menús, formularios) a lo largo del sitio.
  2. Paso 2. Comparar nombres visibles, iconos y etiquetas entre páginas con la misma funcionalidad.
  3. Paso 3. Verificar consistencia del nombre accesible (p. ej., aria-label, aria-labelledby) y del rol.
  4. Paso 4. Confirmar coherencia en navegación por teclado y con lectores de pantalla.

Resultado esperado

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

Ejemplo

✅ Accesible: misma etiqueta y función en todo el sitio

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

✅ Alternativa accesible: icono con nombre accesible coherente

<!-- Icono de lupa; el nombre accesible mantiene la identificación -->
<button aria-label="Buscar">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Otras herramientas de evaluación

  • Revisión integral entre páginas
  • DevTools → panel de accesibilidad (nombre computado)
  • NVDA, JAWS, VoiceOver
  • Guía de estilo / design system del proyecto










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.2.4-A. Identificación coherente

Loading comments...