Técnica Técnicas generales WCAG 2.2
G14Decir también con texto lo que se indica con colores
Nombre oficial en el W3C: Garantizar que la información transmitida mediante diferencias de color también esté disponible en texto
En pocas palabras
Cuando el color transmite información, esa misma información debe aparecer también escrita. Por ejemplo, campos obligatorios en rojo, botones verdes para continuar o un horario con cada tipo de actividad en un color. El texto debe verse siempre, no solo al pasar el ratón.
Por qué es importante
Muchas personas no distinguen bien los colores: quienes tienen daltonismo, baja visión o miran una pantalla con reflejos. Los lectores de pantalla (programas que leen en voz alta la pantalla) tampoco anuncian el color.
Si la única pista es el color, estas personas no saben qué campo es obligatorio o a qué grupo pertenece cada elemento.
Cómo se hace
- Revise dónde usa el color para dar significado: formularios, leyendas, estados, calendarios o gráficos.
- Añada a cada caso un texto visible: «(obligatorio)», «Grupo 1», «Agotado», etc.
- Si usa un símbolo, como el asterisco, explique al principio del formulario qué significa. Hágalo de buen tamaño.
- Si usa iconos de colores, deles un texto alternativo con su significado.
- No deje la explicación solo en un texto emergente o en contenido que aparece al pasar el ratón.
Cómo comprobarlo
- Localice los elementos que usan el color para transmitir información.
- Para cada uno, compruebe que la misma información está escrita en la página.
- Vea la página en escala de grises, con un simulador de daltonismo o con la opción de emular deficiencias de visión de las herramientas del navegador (F12).
- Compruebe que se sigue entendiendo todo sin los colores.
Ejemplo
Además del color rojo, la etiqueta dice que el campo es obligatorio y una nota explica el asterisco.
<p>Los campos marcados con asterisco (*) son obligatorios.</p>
<label for="dni" class="obligatorio">
DNI <span aria-hidden="true">*</span>
<span class="solo-lector">(obligatorio)</span>
</label>
<input id="dni" type="text" required>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G14 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías que admiten color y texto.
Descripción
El objetivo de esta técnica es garantizar que, cuando se utilizan diferencias de color para transmitir información, como los campos obligatorios de un formulario, la información transmitida por esas diferencias de color se transmita también de forma explícita en texto.
Ejemplos
Un programa codificado por colores
El programa de sesiones de un congreso tecnológico se organiza en tres itinerarios. Las sesiones del itinerario 1 se muestran sobre fondo azul. Las sesiones del itinerario 2 se muestran sobre fondo amarillo. Las sesiones del itinerario 3 se muestran sobre fondo verde. Tras el nombre de cada sesión aparece un código en texto que identifica el itinerario: T1 para el itinerario 1, T2 para el itinerario 2 y T3 para el itinerario 3.
Un programa codificado por colores con iconos
El programa de sesiones de un congreso tecnológico se organiza en tres itinerarios. Junto al título de cada sesión hay un icono formado por un círculo de color con un número en el centro que indica a qué itinerario pertenece: los círculos azules con el número 1 representan el itinerario 1, los círculos amarillos con el número 2 representan el itinerario 2 y los círculos verdes con el número 3 representan el itinerario 3. Cada icono está asociado a una alternativa textual que dice «Track 1», «Track 2» o «Track 3» (itinerario 1, 2 o 3), según corresponda.
Un formulario con campos obligatorios
Un formulario contiene varios campos obligatorios. Las etiquetas de los campos obligatorios se muestran en rojo. Además, al final de cada etiqueta hay un carácter asterisco, *. Las instrucciones para rellenar el formulario indican que «todos los campos obligatorios se muestran en rojo y marcados con un asterisco *», seguidas de un ejemplo.
Es posible que no todos los lectores de pantalla lean los asteriscos (en todos los modos de lectura) y que resulten difíciles de ver para los usuarios con baja visión, porque se muestran en un tamaño menor que el texto predeterminado. Es importante que los autores incluyan el texto que indica que se utiliza el asterisco y que consideren aumentar el tamaño del asterisco que se presenta.
Un formulario con un botón de envío verde
Una solicitud de préstamo en línea explica que los botones verdes avanzan en el proceso y los botones rojos lo cancelan. Un formulario contiene un botón verde con el texto Go. Las instrucciones dicen: «Pulse el botón etiquetado Go para enviar sus resultados y pasar al siguiente paso».
Pruebas
Procedimiento
Para cada elemento en el que se utilice una diferencia de color para transmitir información:
- Comprobar que la información transmitida también está disponible en texto y que dicho texto no es contenido condicional.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G14 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.