La accesibilidad web busca garantizar que todas las personas, incluidas aquellas con discapacidades visuales, puedan navegar y comprender el contenido sin barreras. Uno de los errores más comunes en diseño web es identificar elementos solo por su forma o ubicación, lo que dificulta la experiencia de usuarios con discapacidades visuales o aquellos que dependen de lectores de pantalla.
El fallo F14 ocurre cuando un elemento es referido exclusivamente por su posición (ejemplo: «presiona el botón de la derecha») o por su forma (ejemplo: «haz clic en el botón triangular»). Esto viola el criterio 1.3.3 de WCAG 2.1: Características sensoriales, ya que los usuarios con discapacidades no pueden percibir el contenido de la misma manera que una persona vidente.
Acerca de este fallo
Este fallo incumple el criterio de conformidad 1.3.3 – Características Sensoriales (Nivel A), que establece que las instrucciones para comprender y operar contenido no deben depender exclusivamente de características sensoriales como la forma, el tamaño, la posición, el color o el sonido.
Escenarios comunes en los que ocurre este fallo:
- Se usan instrucciones basadas solo en ubicación («el menú está a la derecha»).
- Se identifican elementos solo por su forma («haz clic en el botón circular»).
- Se requiere diferenciación visual sin etiquetas textuales.
Esto afecta a:
- Personas con ceguera total o parcial que dependen de lectores de pantalla.
- Usuarios con discapacidades cognitivas que pueden necesitar identificadores más claros.
- Usuarios con configuraciones de pantalla personalizadas donde la ubicación del contenido puede cambiar.
Ejemplos
Ejemplo incorrecto 1: Uso de instrucciones basadas en la forma
Instrucción en un formulario:
«Para continuar, haz clic en el botón cuadrado. Para cancelar, presiona el botón circular.»
🔴 Problema:
- Un usuario con lector de pantalla no puede diferenciar los botones según su forma.
- Un usuario con daltonismo o baja visión podría no distinguir las formas correctamente.
Solución correcta: Uso de instrucciones no basadas en la forma
Corrección de la instrucción:
«Para continuar, presiona el botón ‘Siguiente’. Para cancelar, presiona el botón ‘Cancelar’.»
✅ ¿Qué mejora?:
- Se usan etiquetas de texto claras en los botones en lugar de depender de su forma.
- Un lector de pantalla puede anunciar correctamente la acción de cada botón.
Ejemplo incorrecto 2: Uso de instrucciones basadas en la ubicación
Instrucción en un sitio web de noticias:
«Consulta la barra lateral a la derecha de la imagen para ver más artículos relacionados.»
🔴 Problema:
- En dispositivos móviles, la barra lateral puede cambiar de posición.
- Un usuario con lector de pantalla no podrá identificar rápidamente dónde está el contenido referido.
Solución correcta: Uso de instrucciones no basadas en la ubicación
Corrección de la instrucción:
«Consulta la sección ‘Artículos Relacionados’ para ver más contenido.»
✅ ¿Qué mejora?:
- Se usa un identificador textual en lugar de una referencia de ubicación.
- Se pueden agregar encabezados y enlaces internos para mejorar la navegación.
Ejemplo correcto: Uso de instrucciones adecuadas
En un sitio de comercio electrónico, en lugar de decir:
«Para ver las opciones de pago, haz clic en el ícono a la izquierda.»
Se utiliza:
«Para ver las opciones de pago, haz clic en el botón ‘Opciones de Pago’.»
✅ ¿Qué mejora?: Esto hace que la navegación sea accesible para todos los usuarios, sin depender de la ubicación visual del elemento.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar indicaciones basadas solo en forma o posición.
- No proporcionar etiquetas de texto en botones o enlaces.
- No considerar los cambios de diseño responsivo en dispositivos móviles.
Cómo evitar estos errores:
- Usar etiquetas de texto descriptivas en botones y enlaces.
- Utilizar encabezados y referencias textuales en lugar de ubicaciones.
- Probar la accesibilidad con herramientas de validación y lectores de pantalla.
Preguntas frecuentes
¿Qué problemas causa el fallo F14 en la accesibilidad?
Dificulta la navegación para personas con discapacidades visuales o cognitivas.
¿Puedo usar referencias de posición si también hay texto?
Sí, pero el texto debe ser claro sin depender de la posición.
¿Cómo puedo hacer que mis botones sean accesibles?
Asegúrate de que tengan etiquetas textuales descriptivas y no dependan solo de la forma.
¿Este problema afecta a dispositivos móviles?
Sí, ya que el diseño responsivo puede cambiar la posición de los elementos.
¿Qué herramientas puedo usar para verificar este problema?
Wave, axe DevTools y pruebas con lectores de pantalla como NVDA o VoiceOver.
¿Es suficiente con usar íconos en botones?
No, los íconos deben ir acompañados de etiquetas textuales.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F14: Incumplimiento del Criterio de Conformidad 1.3.3 debido a identificar el contenido únicamente por su forma o ubicación
- Comprender el criterio de éxito 1.3.3: Características sensoriales
- G96: Proporcionar identificación textual de elementos que de otro modo dependen únicamente de información sensorial para ser comprendidos.
Pruebas y validación
Procedimiento:
- Revisar instrucciones y referencias en la página.
- Comprobar que no dependan solo de la forma o ubicación.
- Probar con un lector de pantalla para verificar la accesibilidad.
Resultados esperados:
- Si las referencias dependen solo de forma o posición, la página falla.
- Si hay identificadores textuales claros, la página es accesible.
Evitar depender solo de la forma o ubicación para identificar contenido es clave para la accesibilidad. ¡Mejora tu web con identificadores textuales adecuados! Si necesitas ayuda, contáctanos.