Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué los mensajes de error y los enlaces necesitan más que solo un color?
Los mensajes de error y los enlaces necesitan más que un color porque muchas personas solo distinguen colores de forma limitada — el daltonismo rojo-verde es la forma más común. Un campo obligatorio rodeado de rojo sin texto explicativo permanece invisiblemente marcado para estos visitantes. Por lo tanto, la información debe llevarse doblemente: color más texto, símbolo o subrayado.
Color como complemento, nunca como el único portador
Tres casos cotidianos muestran el problema. Primero, formularios: si un campo completado incorrectamente solo está rodeado de rojo, un visitante con daltonismo rojo-verde no encontrará el error — agregue un mensaje de texto como «Por favor ingrese una dirección de correo electrónico válida». Segundo, enlaces en el texto: si un enlace solo se diferencia del texto circundante por su color, muchas personas no lo reconocerán como enlace — el subrayado lo resuelve. Tercero, diagramas e indicadores de estado: «Verde significa disponible, rojo significa agotado» solo funciona con etiquetado adicional o símbolos diferentes. El color sigue siendo explícitamente permitido y significativo — solo nunca debe ser la única fuente de información.
Así es como nuestro núcleo de medición verifica el uso del color
La verificación automática con axe-core detecta un caso parcial típico: enlaces en el texto que solo se destacan del texto circundante por su color — sin subrayado o suficiente diferencia de brillo. Tales casos fluyen como un hallazgo en el informe. La mayoría del criterio es inaccesible para la máquina: si un diagrama se explica solo por colores o si un mensaje de error además del borde rojo tiene texto requiere comprensión del contenido. Según nuestro principio, un paso aparentemente sin problemas nunca se considera automáticamente como prueba — en el estándar Gold, un verificador revisa los formularios, diagramas e indicadores de estado y hace el juicio.
Beispiele
Fehler nur rot markiert
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Rot allein sehen Menschen mit Farbfehlsichtigkeit und Vorleseprogramme nicht. Der Text nennt den Fehler.
Link im Fließtext nur durch Farbe erkennbar
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Der Unterstrich macht den Link auch ohne Farbwahrnehmung erkennbar.
- Revise sus formularios: cada marcación de error necesita además del color un texto explicativo en el campo afectado.
- Haga que los enlaces en el texto se subrayen — el color solo los hace invisibles para muchos visitantes.
- Agregue etiquetas o símbolos en diagramas e indicadores de estado además de la codificación de color.
- Vea su página una vez en escala de grises — cada pantalla y muchos teléfonos pueden hacer eso — y verifique si toda la información se conserva.
- Marque los campos obligatorios con la palabra «Campo obligatorio» o un asterisco explicado, nunca solo con color.