Normativas · WCAG 2.2

SC 3.2.4 Nivel AA WCAG 2.0

Identificación coherente

Los componentes que realizan la misma función en un sitio deben identificarse de manera coherente: la misma etiqueta, el mismo icono, el mismo nombre accesible. Dos botones que hacen lo mismo no pueden llamarse «Buscar» en una página y «Encontrar» en otra.

Qué exige este criterio

Cuando dos componentes de la interfaz de usuario realizan la misma función en un sitio, deben identificarse de manera coherente. Eso implica utilizar el mismo nombre accesible (etiqueta, aria-label, texto alternativo), el mismo icono y un tratamiento visual equivalente, de modo que el usuario pueda reconocer que «esta es la misma acción que realicé hace dos páginas».

La norma afecta al etiquetado, no al estilo visual. Un botón de envío puede tener un énfasis visual diferente según el contexto, pero el nombre accesible «Enviar» no debe convertirse en «Mandar» en otro lugar del sitio cuando cumple la misma función.

Cómo cumplirlo

  • Mantener un vocabulario reducido de verbos de acción («Guardar», «Cancelar», «Eliminar», «Buscar») y aplicarlo de forma consistente en todo el sitio.
  • Utilizar el mismo icono para la misma acción en todas partes: un solo glifo de búsqueda, no tres variantes distintas.
  • Cuando un icono representa una acción, asignarle el mismo nombre accesible en todas las páginas.
  • Emplear un componente del sistema de diseño (<Button label="Guardar">) en lugar de codificar etiquetas manualmente en cada página.
  • Auditar el sitio en busca de sinónimos: «Enviar» frente a «Mandar», «Buscar» frente a «Encontrar», «Iniciar sesión» frente a «Acceder», «Registrarse» frente a «Crear cuenta».

Fallos habituales

  • Dos iconos que representan la misma acción con dos nombres accesibles distintos («Editar» en una pantalla, «Modificar» en otra).
  • Un campo de búsqueda etiquetado como «Buscar» en la cabecera y «Buscar contenido» en la barra lateral.
  • Un botón «Eliminar» en la vista de lista y un botón «Quitar» en la vista de detalle, con el mismo efecto pero distinta denominación.
  • Texto de llamada a la acción inconsistente: «Comprar ahora» en la página de producto y «Añadir al carrito» en la página de listado, para lo que es funcionalmente la misma acción.

Por qué es importante

Los usuarios de lectores de pantalla navegan repasando una lista de enlaces o botones. Si la misma acción está etiquetada de forma diferente a lo largo del sitio, no pueden reconocer patrones: deben leer cada etiqueta desde cero y razonar si este «Enviar» es lo mismo que aquel «Mandar». Para los usuarios con discapacidades cognitivas, la identificación coherente es una de las ayudas de comprensión más significativas que puede ofrecer un sitio.

Este criterio de conformidad se cumple tratando los textos de la interfaz y los iconos como fichas de diseño de primera clase, no como contenido que cada redactor decide de forma individual.