Enunciado:
Crea una página con 3 imágenes y añade texto alternativo a cada una para describir su contenido.
Enunciado:
En un párrafo con texto gris claro (#cccccc) sobre un fondo blanco, ajusta los colores para mejorar el contraste según las normas de WCAG.
Enunciado:
Añade subtítulos en español a un video con el archivo subtitulos.vtt y asegúrate de que los subtítulos sean visibles.
Enunciado:
Crea un formulario con un campo de texto para el nombre y asegúrate de que tenga una etiqueta asociada.
Enunciado:
Crea 3 botones en tu página y asegúrate de que sean accesibles mediante el teclado (usando la tecla Tab).
Enunciado:
Crea un botón que parpadea rápidamente (0.3s) y ajusta su animación para que sea más accesible, siguiendo las normas de WCAG.
Enunciado:
Crea un enlace sobre un fondo azul oscuro y ajusta su color para que sea legible, siguiendo las pautas de contraste.
Enunciado:
Crea una página con un encabezado principal <h1> y subencabezados <h2> y <h3> para garantizar una estructura lógica.
Enunciado:
Define el idioma del contenido en una página HTML en español usando el atributo lang.
Enunciado:
Crea un botón con el texto "Enviar" y asegúrate de que tenga un atributo aria-label que indique su propósito.
Enunciado:
Crea una barra de navegación y usa atributos ARIA para especificar su rol como navigation.
Enunciado:
Crea un formulario con campos para "Correo electrónico" y "Contraseña", y añade mensajes de error accesibles si los campos están vacíos.
Enunciado:
Crea un mensaje dinámico que informe "Formulario enviado con éxito" y hazlo accesible mediante el atributo aria-live.
Enunciado:
Crea un botón con un texto claro sobre un fondo oscuro y ajusta los colores para cumplir con las pautas de contraste.
Enunciado:
Crea un enlace con el texto "Leer más" y mejora su accesibilidad añadiendo un atributo aria-label para especificar a dónde lleva.
Enunciado:
Usa la pseudo-clase :focus para resaltar un enlace cuando sea seleccionado con el teclado.
Enunciado:
Crea un botón que, al hacer clic, muestre un mensaje dinámico y haz que sea accesible con aria-describedby.
Enunciado:
Crea una página con las siguientes secciones: cabecera, contenido principal y pie de página, usando <header>, <main> y <footer>.
Enunciado:
Crea un slider con tres imágenes y usa atributos ARIA para que los lectores de pantalla puedan describir su contenido.
Enunciado:
Añade controles accesibles a un video que permitan pausar, reproducir y ajustar el volumen.
Enunciado:
Crea un menú de navegación que se pueda controlar completamente con el teclado (usando las teclas Tab y Enter).
Enunciado:
Crea una tabla con encabezados y usa el atributo scope para mejorar su accesibilidad.
Enunciado:
Crea un modal que se abra con un botón y que sea accesible mediante teclado, con un atributo aria-hidden para ocultarlo cuando esté cerrado.
Enunciado:
Crea un sistema de alertas dinámicas (por ejemplo, "Error en el formulario") y hazlo accesible con role="alert".
Enunciado:
Usa una consulta de medios (prefers-contrast) para ajustar el contraste de una página según las preferencias del usuario.
Enunciado:
Añade un icono decorativo junto a un enlace y asegúrate de que sea ignorado por los lectores de pantalla usando aria-hidden="true".
Enunciado:
Crea un mapa en tu página con puntos interactivos y usa descripciones accesibles para cada uno.
Enunciado:
Crea una página con varias secciones y usa atributos ARIA para definir regiones navegables.
Enunciado:
Realiza una auditoría de accesibilidad de un sitio web usando Lighthouse y señala tres posibles mejoras.
30. Coge una página web completa creada por ti (de proyectos anteriores) y transformala para que sea accesible
Enunciado:
Diseña una página web que combine todas las técnicas aprendidas: texto alternativo, ARIA, navegación por teclado, formularios accesibles y diseño semántico.