Principio 1/1.3 Adaptable/1.3.1-P

De WCAG Wiki

1.3.1-P. Color e información

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)

  • Cuando el color se emplea para transmitir información también se debe transmitir dicha información mediante el marcado semántico o estructural, o al menos en forma de texto.

Comprensión del criterio

Descripción resumida

Si el color transmite información (por ejemplo, rojo para error o verde para éxito), esa información debe estar disponible también en texto u otro método que pueda interpretar el software.

Objetivo

Asegurar que la información basada en color sea accesible para todas las personas, especialmente para quienes no pueden percibir o distinguir colores.

Importancia de cumplir el criterio

El color no puede ser el único medio para indicar un estado, diferencia o mensaje. Sin alternativas en texto o elementos visuales adicionales, las personas con baja visión, daltonismo o ceguera no reciben la información.

Referencias WCAG

Recursos de apoyo

Consejos
  • No usar color como único indicador
  • Complementar el color con texto, iconos o atributos ARIA
  • No marcar un error de un campo en un formulario (por ejemplo) solo con un borde de color rojo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Usando la herramienta de inspección de código del navegador, verificar que siempre que el color se emplee para transmitir información, se utilizan elementos de marcado semántico.

Resultado esperado

El color no se usa como único método para transmitir información; existe alternativa textual o semántica.

Ejemplo

Se muestra un error con icono, texto y ARIA (no depende solo del color). 

<p role="alert">
  <span aria-hidden="true">⚠️</span>
  <strong>Error:</strong> Introduce un email válido.
</p>

Otras herramientas de evaluación

  • Inspección del navegador: revisar el código para comprobar que el color no es el único mecanismo para transmitir información. Verificar que existe texto o marcado semántico adicional (por ejemplo: iconos con texto, etiquetas, mensajes "Correcto"/"Error", etc.).
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) comprobar que los usuarios que no perciben el color reciben la misma información, es decir, que el contenido relevante se anuncia en texto o mediante roles/atributos accesibles.
  • Herramientas de contraste: (Contrast Checker, DevTools Accessibility, Colour Contrast Analyser) validar que los colores utilizados tienen suficiente contraste cuando se presentan junto a texto u otros indicadores visuales.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-P. Color e información

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-P&oldid=3418»