Ejercicio · Accesibilidad

Objetivo

Corregir una página con problemas de accesibilidad y comprobar, punto por punto, que cada uno quedó resuelto.

El código con problemas

Copia este código en un archivo, ábrelo y arréglalo siguiendo los pasos. No cambies lo que hace la página, solo cómo se escribe.

pagina-con-problemas.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tienda de plantas</title>
  <style>
    a { color: #aaa; text-decoration: none; }
    .btn { background: #8ad; color: white; padding: 8px; cursor: pointer; }
    .mover { animation: girar 2s infinite; }
  </style>
</head>
<body>
  <div class="menu">
    <a href="inicio.html">Inicio</a> <a href="tienda.html">Tienda</a>
  </div>
  <div class="contenido">
    <h3>Bienvenida a Plantas Verdes</h3>
    <img src="monstera.jpg">
    <p>Descubre nuestras plantas. <a href="catalogo.html">Haz clic aquí</a> para ver el catálogo.</p>
    <div class="btn" onclick="comprar()">Comprar ahora</div>
    <h1>Escríbenos</h1>
    <input type="text" placeholder="Tu nombre">
    <input type="email" placeholder="Tu correo">
    <p class="error">Escribe un correo válido</p>
  </div>
</body>
</html>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

💡 Pista 1: ¿cómo queda el enlace para saltar?

Escribe <a class="saltar" href="#contenido">Saltar al contenido</a> justo después de <body>. El <main> debe tener id="contenido".

💡 Pista 2: ¿cómo ordeno los títulos?

La página debe tener un solo <h1>, y los siguientes niveles deben ir en orden: después del <h1> va un <h2>, no un <h3>.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código HTML (el archivo completo)

✅ Ver la página corregida

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

pagina-corregida.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tienda de plantas</title>
  <style>
    a { color: #1d4ed8; }
    .saltar { position: absolute; left: -999px; }
    .saltar:focus { left: 8px; top: 8px; background: #fff; padding: 8px; }
    :focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
    .btn { background: #1d4ed8; color: white; padding: 8px 14px; border: 0; border-radius: 6px; cursor: pointer; }
    .mover { animation: girar 2s infinite; }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
  </style>
</head>
<body>
  <a class="saltar" href="#contenido">Saltar al contenido</a>
  <nav aria-label="Principal">
    <a href="inicio.html">Inicio</a> <a href="tienda.html">Tienda</a>
  </nav>
  <main id="contenido">
    <h1>Bienvenida a Plantas Verdes</h1>
    <img src="monstera.jpg" alt="Planta monstera en una maceta blanca" width="300" height="300">
    <p>Descubre nuestras plantas. <a href="catalogo.html">Ver el catálogo de plantas</a>.</p>
    <button type="button" class="btn">Comprar ahora</button>
    <h2>Escríbenos</h2>
    <p><label for="nombre">Nombre</label><br><input type="text" id="nombre" name="nombre"></p>
    <p><label for="correo">Correo</label><br><input type="email" id="correo" name="correo"></p>
    <p role="alert" aria-live="polite">Escribe un correo válido, como ana@ejemplo.com.</p>
  </main>
</body>
</html>

💡 🏁 Reto extra (opcional)

Pasa tu página corregida por Lighthouse (F12 → Lighthouse → Accesibilidad). ¿Qué puntuación obtienes? Busca qué te señala y corrígelo.