Técnica Técnicas generales WCAG 2.2
G205Acompañar con texto o símbolos la información que se da con color
Nombre oficial en el W3C: Incluir una pista textual siempre que se usen diferencias de color para transmitir información
En pocas palabras
Si un color transmite algo, como «campo obligatorio» o «plazo cerrado», esa información también debe darse con texto o con un carácter visible. Así la entiende quien no distingue colores y quien usa un lector de pantalla. El texto debe formar parte del nombre del control, por ejemplo dentro de su etiqueta.
Por qué es importante
Muchas personas no distinguen bien algunos colores, como el rojo y el verde. Un lector de pantalla tampoco anuncia colores. Una línea braille solo muestra texto.
Si en un formulario de cita previa los campos obligatorios solo están en rojo, esas personas no sabrán cuáles rellenar. Es un requisito de nivel A (criterio 1.4.1).
Cómo se hace
- Localice todo lo que se comunica con color: campos obligatorios, errores, estados («abierto», «cerrado»), enlaces o leyendas de gráficos.
- Añada un texto o un carácter que diga lo mismo: «(obligatorio)», «Error:» o un asterisco explicado al principio del formulario.
- Ponga ese texto dentro de la etiqueta del campo (
<label>) o del nombre del control, para que el lector de pantalla lo lea al llegar. - Puede mantener el color. Ayuda a localizar la información de un vistazo; solo que no debe ser la única pista.
Cómo comprobarlo
- Busque en la página la información que se distingue por el color.
- Mírela en escala de grises. En Chrome: F12, menú de tres puntos, «Más herramientas», «Renderizado» y «Emular deficiencias de visión».
- Compruebe que sigue entendiéndose gracias a un texto o símbolo.
- Con NVDA o VoiceOver, llegue a los campos y confirme que se oye ese texto, por ejemplo «obligatorio».
Ejemplo
Campo obligatorio marcado en rojo y, además, con el texto dentro de la etiqueta.
<p>Los campos obligatorios aparecen en rojo y con la palabra «obligatorio».</p>
<label for="dni" class="obligatorio">
DNI o NIE (obligatorio)
</label>
<input type="text" id="dni" 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 G205 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 combinar el color con pistas textuales o de caracteres para transmitir información. La mayoría de los usuarios pueden recorrer rápidamente el contenido para localizar la información transmitida mediante diferencias de color. Los usuarios que no pueden ver el color pueden buscar o escuchar las pistas textuales; las personas que utilizan líneas braille u otras interfaces táctiles pueden detectar las pistas textuales mediante el tacto.
La pista textual debe incluirse como parte del nombre determinable por software del control.
Ejemplos
Campos obligatorios en un formulario HTML
Las instrucciones de un formulario en línea dicen: «Los campos obligatorios se muestran en rojo y marcados con (required)». La pista "(required)" (obligatorio) se incluye dentro del elemento label.
<style>
.required {
color:#ec0000;
}
</style>
<label for="lastname" class="required">Last name (required):</label>
<input autocomplete="family-name" id="lastname" type="text" value="">Pruebas
Procedimiento
Para cualquier contenido en el que se utilicen diferencias de color para transmitir información:
- Comprobar que la misma información está disponible mediante pistas textuales o de caracteres.
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 G205 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.