La consistencia en la identificación de elementos interactivos en un sitio web es clave para la accesibilidad. Si un mismo botón, enlace o etiqueta cambia de nombre en diferentes páginas, los usuarios pueden confundirse y experimentar dificultades de navegación.
Este fallo incumple el Criterio de Conformidad 3.2.4 de las WCAG 2.1, que exige que los componentes con la misma función dentro de un conjunto de páginas web se etiqueten de manera coherente.
Acerca de este fallo
Este error se produce cuando:
- Se utilizan etiquetas diferentes para un mismo elemento funcional en distintas páginas.
- Un mismo botón o enlace cambia de nombre sin motivo aparente.
- Los usuarios dependen del reconocimiento de patrones para navegar, y la inconsistencia dificulta la experiencia.
Impacto en la accesibilidad:
- Usuarios con discapacidad cognitiva pueden confundirse al encontrar diferentes nombres para la misma acción.
- Usuarios con lectores de pantalla pueden no identificar la acción correctamente si el texto varía sin motivo.
- Usuarios con problemas de memoria o concentración pueden perder el contexto de navegación.
Ejemplos
Ejemplo incorrecto 1: Botones de búsqueda con etiquetas diferentes
Código incorrecto:
Página 1:
Página 2:
🔴 Problema: Ambas etiquetas cumplen la misma función, pero tienen nombres diferentes, lo que confunde al usuario.
Solución correcta
✅ ¿Qué mejora?: se usa la misma etiqueta en todas las páginas.
Ejemplo incorrecto 1: Inconsistencia en los botones de guardado
Código incorrecto:
Página de edición:
Página de confirmación:
🔴 Problema: Aunque los botones realizan la misma acción, tienen nombres distintos sin justificación.
Solución correcta
✅ ¿Qué mejora?: se mantiene la misma etiqueta en todas las páginas.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar diferentes palabras para la misma función (ejemplo: «Enviar» vs. «Mandar»).
- Cambiar la etiqueta de los botones dependiendo de la página sin necesidad.
- No establecer un estándar en la terminología de la interfaz.
Cómo evitar estos errores:
- Mantener nombres consistentes en los elementos interactivos.
- Usar términos claros y comprensibles para todas las personas.
- Definir una guía de estilo de accesibilidad para nombrar elementos en la web.
Preguntas frecuentes sobre el fallo común F31
¿Puedo cambiar una etiqueta si la función es similar, pero no idéntica?
Sí, siempre que el cambio refleje una diferencia real en la acción del botón.
¿Por qué es importante la consistencia en las etiquetas?
Para mejorar la usabilidad y accesibilidad, facilitando la navegación de los usuarios.
¿Cómo puedo comprobar si mi web tiene este fallo?
Recorre las páginas y verifica si los botones con la misma función tienen etiquetas diferentes.
¿Puedo usar iconos en lugar de texto en los botones?
Sí, pero deben incluir un atributo alt o texto accesible con un nombre coherente en todas las páginas.
¿Este fallo afecta solo a botones?
No, también afecta a enlaces, menús, formularios y otros elementos interactivos.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F31: Incumplimiento del Criterio de Conformidad 3.2.4 debido al uso de dos etiquetas diferentes para la misma función en diferentes páginas web dentro de un conjunto de páginas web
- Comprender el criterio de éxito 3.2.4: Identificación consistente
Pruebas y validación
Procedimiento:
- Recorre un conjunto de páginas y localiza botones, enlaces y elementos interactivos con la misma función.
- Verifica si las etiquetas de estos elementos son consistentes en todas las páginas.
- Usa herramientas como WAVE o Axe Accessibility Checker para detectar inconsistencias en los nombres de los botones.
Resultados esperados:
- ✅ Si los elementos con la misma función tienen etiquetas idénticas o coherentes, la web cumple con el Criterio 3.2.4.
- ❌ Si hay nombres distintos para la misma acción, se falla la conformidad y debe corregirse.
La consistencia en la identificación de elementos en una web es esencial para la accesibilidad. Si tu sitio usa diferentes nombres para una misma acción, ¡es hora de corregirlo!
📢 ¿Necesitas mejorar la accesibilidad de tu web? Contáctanos y te ayudamos a cumplir con WCAG 2.1.