G138Acompañar el color con marcado que indique el mismo significado

Por qué es importante

Muchas personas no distinguen bien los colores: personas daltónicas, con baja visión o que usan lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). Para ellas, un texto rojo es igual que uno negro.

Si el significado está también en el código, el navegador y los lectores de pantalla pueden reconocerlo. Por ejemplo, el navegador muestra la negrita aunque el usuario cambie los colores.

Cómo se hace

1. Localice los sitios donde el color transmite información: campos obligatorios, avisos, precios rebajados, palabras clave.
2. Añada el elemento HTML que corresponda a ese significado, como <strong> para lo importante o <em> para el énfasis.
3. Explíquelo en las instrucciones, por ejemplo: «Los campos obligatorios aparecen en rojo y en negrita».
4. Tenga en cuenta que no todos los lectores de pantalla anuncian el énfasis. En datos clave, añada también una pista en el propio texto, como un asterisco o la palabra «obligatorio».

Cómo comprobarlo

1. Busque en la página la información que se transmite con color.
2. Revise el código con las herramientas del navegador (botón derecho, «Inspeccionar»).
3. Compruebe que esa misma información está marcada con un elemento con significado, como strong o em.
4. Vea la página en escala de grises o sin estilos: la diferencia debe seguir notándose.

Ejemplo

Etiqueta de un campo obligatorio en rojo y, además, marcada como importante en el código.

<p>Los campos obligatorios aparecen en rojo y en negrita.</p>
<label for="dni" class="obligatorio">
  <strong>DNI</strong>
</label>
<input type="text" id="dni" name="dni" required>