Accesibilidad en CSS

Contraste de color

El contraste entre el color del texto y el color de fondo determina si ese texto se puede leer cómodo — para cualquiera, y especialmente para personas con baja visión o algún tipo de daltonismo. Un gris clarito sobre blanco puede verse "prolijo" y elegante, pero puede ser directamente ilegible para una parte real de quienes visitan el sitio.

/* Contraste bajo — texto difícil de leer */
p {
    color: #cccccc;
    background-color: #ffffff;
}

/* Contraste alto — texto claramente legible */
p {
    color: #222222;
    background-color: #ffffff;
}

Existe un estándar (WCAG) con una fórmula matemática precisa para medir contraste, pero para este curso alcanza con la idea: cuanto más se parecen el color de texto y el de fondo, peor. Antes de elegir una combinación de colores para texto, conviene probarla — hay herramientas gratuitas online que directamente te dicen si una combinación pasa o no.

display: none oculta para todos, no solo visualmente

Ya viste (Lección 8) que display: none saca un elemento por completo — no se ve, y tampoco ocupa espacio. Lo importante para accesibilidad: tampoco lo "ve" un lector de pantalla (el software que usan personas con discapacidad visual para navegar la web escuchando el contenido en vez de mirándolo). Si el contenido tiene información real, display: none se la esconde a esa persona tanto como a cualquiera que mire la pantalla.

Esto está perfecto cuando el objetivo es realmente esconder algo para todo el mundo (un menú desplegable cerrado, una pestaña que no está activa). El problema aparece si se usa display: none para, por ejemplo, ocultar visualmente un texto explicativo "porque no queda lindo" pero se espera que igual aporte contexto — en ese caso, esa información directamente no le llega a nadie que use un lector de pantalla.

Para este curso no hace falta la técnica para ocultar algo "solo visualmente" (existe, pero es un tema más avanzado) — alcanza con tener clara la regla: si display: none, es invisible para todos, sin excepción.

Unidades relativas respetan las preferencias del usuario

Ya viste esto en la Lección 5, pero vale la pena conectarlo directamente con accesibilidad: alguien con baja visión suele configurar su navegador para mostrar el texto más grande de lo normal. Si tu CSS define los tamaños de fuente en rem, esa preferencia se respeta automáticamente en todo el sitio. Si los tamaños están en px, quedan fijos pase lo que pase — la persona configuró su navegador para agrandar el texto, y en tu sitio en particular, no pasa nada.

/* Respeta la preferencia del usuario */
p { font-size: 1rem; }

/* La ignora por completo */
p { font-size: 16px; }