Técnica Técnicas generales WCAG 2.2
G182Añadir una marca visual además del color al texto que destaca
Nombre oficial en el W3C: Asegurar que hay indicaciones visuales adicionales cuando se usan diferencias de color del texto para transmitir información
En pocas palabras
Cuando un texto se distingue del resto por su color, por ejemplo un enlace dentro de un párrafo, se añade otra marca visual. Puede ser un subrayado, negrita, cursiva, otro tamaño u otra tipografía. Así se reconoce aunque no se perciba bien el color.
Por qué es importante
Las personas con daltonismo (dificultad para distinguir algunos colores) o con baja visión pueden no notar que una palabra tiene otro color. Tampoco lo notan quienes miran una pantalla con reflejos o una impresión en blanco y negro.
Si el color es la única pista, no encuentran los enlaces de un texto ni distinguen los elementos importantes de una lista.
Cómo se hace
- Localice los textos que se distinguen solo por el color: enlaces en párrafos, palabras clave, plazos destacados.
- Añada otra marca visible. La más reconocida para los enlaces es el subrayado.
- También sirven la negrita, la cursiva, un tamaño mayor o una tipografía distinta, siempre que la diferencia se vea con claridad.
- Si la información es importante para entender el contenido, márquela también en el código, por ejemplo con
<strong>o<em>, para que los lectores de pantalla la reconozcan.
Cómo comprobarlo
- Localice todos los textos en los que el color transmite información.
- Compruebe que cada uno tiene además otra diferencia visual con el texto de alrededor.
- Use la emulación de visión sin color del navegador (F12, pestaña «Renderizado», «Acromatopsia») y compruebe que siguen distinguiéndose.
Ejemplo
Los enlaces dentro del texto se distinguen por el color y, además, por el subrayado.
<style>
.contenido a {
color: #0b57a4;
text-decoration: underline;
}
</style>
<p class="contenido">
Puede presentar la solicitud en la
<a href="/sede">sede electrónica</a> hasta el 30 de junio.
</p>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 G182 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
Texto coloreado en el que el color se usa para transmitir información, como por ejemplo:
- Palabras que son enlaces dentro de un párrafo
- Elementos de una lista en la que algunos son distintos de los demás y se presentan con texto de otro color
Descripción
La intención de esta técnica es proporcionar una indicación visual redundante para los usuarios que quizá no puedan distinguir una diferencia en el color del texto. El color se utiliza habitualmente para indicar el estado distinto de ciertas palabras que forman parte de un párrafo u otro bloque de texto, o cuando no pueden usarse caracteres especiales o gráficos para indicar qué palabras tienen un estado especial. Por ejemplo, palabras dispersas en un texto pueden ser enlaces de hipertexto que se señalan como tales mostrándolas en un color diferente. Esta técnica describe una forma de proporcionar indicaciones adicionales al color, de modo que los usuarios que puedan tener dificultades para percibir diferencias de color o que tengan baja visión puedan identificarlas.
Para usar esta técnica, el autor incorpora una indicación visual adicional al color en cada lugar en el que se usa el color por sí solo para transmitir información. Las indicaciones visuales pueden adoptar muchas formas, como cambios en el estilo de la fuente, la adición de subrayado, negrita o cursiva, o cambios en el tamaño de la fuente.
Ejemplos
- El formato predeterminado de los enlaces de una página consiste en presentarlos en un color distinto al del resto del texto de la página y, además, subrayarlos, para que los enlaces sean identificables incluso sin visión del color.
- Un artículo que compara el uso de elementos similares en distintos lenguajes de marcado utiliza texto coloreado para identificar los elementos de cada lenguaje. Los elementos del primer lenguaje de marcado se identifican con texto AZUL en negrita. Los del segundo se presentan con texto ROJO en cursiva.
- Un sitio de noticias muestra una lista de enlaces a los artículos que aparecen en él. En algunos casos aparece información adicional, como la sección en la que se publica el artículo, la hora a la que se publicó, una ubicación relacionada o una indicación de que va acompañado de vídeo en directo. Los enlaces a los artículos están en un color distinto al de la información adicional, pero los enlaces no están subrayados, y cada enlace se presenta con una fuente de mayor tamaño que el resto de la información, de modo que los usuarios con problemas para distinguir colores puedan identificar los enlaces con más facilidad.
- Las noticias breves a veces contienen frases que son también enlaces a más información. Esas frases se muestran en color y con una fuente de palo seco (sans-serif), mientras que el resto del párrafo está en Times-Roman negro.
Pruebas
Procedimiento
- Localizar todos los casos en los que el color del texto se usa para transmitir información.
- Comprobar que todo texto en el que el color se usa para transmitir información tiene además un estilo o una fuente que lo hace visualmente distinto del resto del texto que lo rodea.
Resultados esperados
- La comprobación n.º 2 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 G182 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.