Tarea 20: Mejorar accesibilidad (aria-labels, contraste de colores)

[tutortt]

Tarea 20: Mejorar accesibilidad (aria-labels, contraste de colores)

Descripción:
Agregar atributos ARIA necesarios y mejorar el contraste de colores para hacer el sitio accesible a usuarios con discapacidades.

Criterios de aceptación:

• El sitio debe pasar comprobaciones básicas de accesibilidad.
• Los elementos interactivos deben tener etiquetas descriptivas.

Label: Accessibility, Review

[tutortt]

Ejemplo

<nav aria-label="Menú principal">
    <ul class="menu">
        <li><a href="#about" aria-label="Sección Sobre mí">About</a></li>
        <li><a href="#skills" aria-label="Sección Habilidades">Skills</a></li>
        <li><a href="#projects" aria-label="Sección Proyectos">Proyectos</a></li>
        <li><a href="#contact" aria-label="Sección Contacto">Contacto</a></li>
    </ul>
</nav>

[tutortt]

Verificar y mejorar el contraste de colores en proyectos web

Para asegurar la accesibilidad de tu sitio web, puedes usar la herramienta WebAIM Contrast Checker siguiendo estos pasos:

1. Selecciona los colores que usas para fondo y texto en tu sitio web.
   Ejemplo:

   • Fondo: #ffffff
   • Texto: #333333

2. Ingresa esos valores hexadecimales en la herramienta.

3. La herramienta mostrará el ratio de contraste entre los colores y si cumplen con los estándares WCAG 2.1 para distintos niveles:

   • AA (mínimo aceptable) para texto normal: ratio mínimo 4.5:1
   • AA para texto grande: mínimo 3:1
   • AAA (mejor nivel) para texto normal: mínimo 7:1

4. Ajusta colores si no cumplen, ya sea aclarando el texto u oscureciendo el fondo (o viceversa), hasta lograr un contraste aceptable.

5. Considera además el contraste de elementos UI como:

   • Botones
   • Enlaces
   • Iconos
   • Estados como hover o focus