Perceptible Adaptable Nivel A WCAG 2.0, 2.1, 2.2

1.3.3 Características sensoriales

Meta Las instrucciones de uso no deben depender únicamente de características sensoriales como forma, color, tamaño, posición o sonido.
Qué hacer Complementa siempre las referencias sensoriales con nombres o descripciones textuales que funcionen de forma independiente.
Por qué importa Las personas con daltonismo, baja visión o sordera no perciben ciertas características sensoriales, por lo que las instrucciones que solo las usan resultan inaccesibles.

Criterio de éxito oficial

Nivel A Presente en WCAG 2.0 · 2.1 · 2.2

Las instrucciones proporcionadas para comprender y operar el contenido no se basan únicamente en las características sensoriales de los componentes, como la forma, el color, el tamaño, la ubicación visual, la orientación o el sonido.

No prohíbe señales visuales

Usar forma, color o ubicación como señales es eficaz para muchos usuarios. Este criterio no prohíbe usarlas; solo exige que no sean el único medio. Combínalas siempre con el nombre o la etiqueta del elemento.

¿Qué es?

Este criterio garantiza que todos puedan acceder a las instrucciones para usar el contenido, incluso cuando no perciban forma, tamaño, color ni ubicación espacial. Las seis características sensoriales que no deben ser el único medio de instrucción:

Forma

«Botón redondo»

Color

«Botón rojo»

Tamaño

«Botón grande»

Ubicación

«A la derecha»

Orientación

«Flecha arriba»

Sonido

«Cuando suene»

¿Por qué es importante?

Las personas ciegas o con baja visión no pueden ver la forma, el color ni la ubicación de un elemento. Si una instrucción dice solo «haz clic en el botón redondo de la derecha», un usuario de lector de pantalla no tiene manera de identificar ese botón. Sin embargo, «haz clic en el botón Enviar» es claro para todos.

Del mismo modo, las personas sordas no percibirán instrucciones basadas únicamente en sonidos. Siempre debe proporcionarse una alternativa textual o visual junto con la señal sonora.

¿Quién se ve afectado?

Personas ciegas o con baja visión — No pueden percibir la forma, el color ni la ubicación visual de los elementos. Las instrucciones que dependen exclusivamente de estas características les resultan incomprensibles.

Personas con daltonismo — No distinguen ciertos colores. Las instrucciones que solo usan color para diferenciar elementos les resultan ambiguas.

Personas con discapacidades cognitivas — Pueden beneficiarse de instrucciones que combinen señales visuales con etiquetas textuales claras.

Cómo implementar 1.3.3

Regla práctica

Siempre que escribas una instrucción que referencia un elemento por su apariencia o ubicación, añade también su nombre o etiqueta. Puedes usar las dos señales juntas — solo no uses la sensorial como la única.

Siempre incluye el nombre del control

✗ Solo sensorial

«Haz clic en el botón redondo de la derecha

«Los eventos marcados con un diamante azul se juegan en el campo A.»

«Cuando suene la campana, pase a la siguiente sección.»

✓ Sensorial + nombre

«Haz clic en el botón «Enviar» (el botón redondo de la derecha).»

«Los eventos marcados con un diamante azul y la etiqueta «Campo A» se juegan en el campo A.»

«Cuando suene la campana o aparezca el aviso «Siguiente sección», pase a la siguiente.»

Tipos de instrucciones problemáticas

  • Forma: «Haz clic en el icono triangular» — añade el nombre del botón
  • Color: «Los campos en rojo son obligatorios» — añade un asterisco o texto «obligatorio»
  • Tamaño: «Usa el botón grande para continuar» — referencia por su etiqueta
  • Ubicación: «Mira el panel de la derecha» — identifica el panel por su título
  • Orientación: «La flecha que apunta arriba» — usa «el botón Subir»
  • Sonido: «Cuando suene el timbre» — proporciona también una indicación visual

Ejemplos prácticos

Fallo Calendario de eventos con formas y colores

Las instrucciones dicen: «Los eventos marcados con un diamante azul se juegan en el campo A y los marcados con un círculo verde se juegan en el campo B.» Las instrucciones se basan exclusivamente en el color y la forma. La solución es añadir también el nombre del campo como texto junto al icono.

Cumple Encuesta con flecha etiquetada «Siguiente»

Las instrucciones dicen: «Para pasar a la siguiente sección, seleccione la flecha verde «Siguiente» en la esquina inferior derecha.» La instrucción usa posición y color, pero también se refiere a la etiqueta del botón, por lo que cumple el criterio.

Fallo Formulario con campos obligatorios solo en rojo

Un formulario muestra los campos obligatorios con etiquetas en rojo. Las instrucciones dicen: «Los campos en rojo son obligatorios.» La solución es añadir un asterisco (*) y la indicación «obligatorio» tanto en las instrucciones como en el marcado con aria-required="true".

Fallo Instrucción basada solo en sonido

Una aplicación de aprendizaje dice: «Cuando suene el timbre, pasa a la siguiente pregunta.» Para cumplir, debe añadir una indicación visual equivalente, como un mensaje en pantalla «Siguiente pregunta disponible».

Técnicas recomendadas

Técnica suficiente para características sensoriales
CódigoTécnicaTipo
G96Proporcionar identificación textual de elementos que dependen únicamente de información sensorial para ser comprendidosSuficiente

Errores comunes

F14: Identificar el contenido únicamente por su forma o ubicación. Por ejemplo: «Haz clic en el botón cuadrado de la izquierda» sin mencionar el nombre del botón.
F26: Usar un símbolo gráfico únicamente para transmitir información sin texto alternativo ni etiqueta que indique su significado.
  • Instrucciones que dicen «haz clic en el botón verde» sin mencionar el nombre del botón.
  • Leyendas de gráficos que solo usan colores y formas sin texto descriptivo.
  • Indicaciones sonoras sin equivalente visual o textual.
  • Referencias a «la barra lateral derecha» sin identificar el contenido por su título.

Criterios de éxito relacionados