Aprender c贸mo el CSS influye en la accesibilidad web. Garantizar que los estilos no dificulten la lectura ni la navegaci贸n.
Objetivos
- Aprender c贸mo el CSS influye en la accesibilidad web.
- Garantizar que los estilos no dificulten la lectura ni la navegaci贸n.
- Usar buenas pr谩cticas para contraste, foco y legibilidad.
- Integrar accesibilidad en cada etapa del dise帽o.
馃敼 1. Contraste de colores
El contraste adecuado entre texto y fondo es esencial para usuarios con baja visi贸n.
css
/* Texto claro sobre fondo oscuro */
body {
background-color: #003366;
color: #ffcc33; /* contraste alto */
}
馃憠 Usa herramientas como WCAG Contrast Checker para validar.
馃敼 2. Estados de foco visibles
Siempre muestra un indicador claro cuando un elemento recibe foco (teclado).
css
button:focus,
a:focus {
outline: 3px solid #ff6600;
outline-offset: 2px;
}
馃憠 Esto ayuda a usuarios que navegan con teclado.
馃敼 3. Tipograf铆a legible
- Usa unidades relativas (
em,rem,vw) para escalabilidad. - Evita fuentes demasiado peque帽as o con poco espaciado.
css
p {
font-size: 1rem;
line-height: 1.6;
}
馃敼 4. Animaciones accesibles
Evita animaciones excesivas que puedan causar mareo o distracci贸n. Respeta la preferencia del usuario con prefers-reduced-motion.
css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
馃敼 5. Uso correcto de pseudo-elementos
No uses pseudo-elementos para contenido esencial, ya que lectores de pantalla pueden ignorarlos. 馃憠 脷salos solo para decoraci贸n.
馃敼 6. Buenas pr谩cticas generales
- Mant茅n un orden l贸gico en el DOM.
- Usa roles y atributos ARIA solo cuando sea necesario.
- Asegura que los enlaces y botones tengan texto descriptivo.
馃摑 Actividad pr谩ctica
- Ajusta los colores de tu web para cumplir con WCAG AA.
- A帽ade estilos de foco visibles en todos los enlaces y botones.
- Implementa la media query
prefers-reduced-motionpara respetar la accesibilidad de animaciones.
M脫DULO 10 CSS Rendimiento Avanzado
Visitas:15