Reto: audita y arregla una página rota

El razonamiento — auditar es sistemático, no adivinar:

1. Lo semántico primero, porque arregla en cascada. Cambiar los div interactivos por <button> resuelve DE UNA los tres pilares: enfocable por teclado, operable con Enter/Espacio, y anunciado correctamente por el lector de pantalla. Un solo cambio, tres barreras caídas. Por eso el HTML correcto es siempre el primer arreglo.
2. Cada categoría es una pasada. Semántica → foco → contraste → imágenes → formulario → enlaces. Recorrer categorías (en vez de saltar al azar) garantiza no dejar nada, y es como trabaja una auditoría real (y herramientas como axe o Lighthouse, que agrupan por tipo).
3. Verificar con teclado y con Lighthouse. El arreglo no está hecho hasta que navegas todo con Tab/Enter sin perderte, y hasta que el puntaje de accesibilidad de Lighthouse sube. Medir el antes/después es lo que convierte "lo arreglé" en "lo demostré".

La versión corregida:

<article class="tarjeta">
<img src="https://via.placeholder.com/280x160/6d28d9/ffffff?text=Producto"
     alt="Auriculares Forge Pro, color violeta" width="280" height="160">
<h3 class="titulo">Auriculares Forge Pro</h3>
<p class="desc">Sonido envolvente y batería de 40 horas.</p>
<p class="precio">$199</p>
<button class="btn" type="button">Comprar ahora</button>
<a href="#detalles" class="enlace">Ver detalles del producto</a>
<form onsubmit="return false">
  <label for="correo">Tu correo para ofertas</label>
  <input id="correo" type="email" placeholder="nombre@dominio.com">
  <button class="btn2" type="submit">Suscribir</button>
</form>
</article>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
.tarjeta { background: white; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; max-width: 300px; display: grid; gap: 8px; }
.tarjeta img { width: 100%; height: auto; border-radius: 8px; }
.titulo { margin: 0; font-size: 18px; color: #1e293b; }
.desc { margin: 0; color: #475569; font-size: 14px; }
.precio { margin: 0; font-size: 24px; font-weight: 800; color: #1e293b; }
.btn, .btn2 { border: 0; color: white; text-align: center; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; }
.btn { background: #6d28d9; }
.btn2 { background: #4c1d95; padding: 8px; margin-top: 4px; }
label { font-size: 13px; font-weight: 600; color: #334155; }
.enlace { color: #6d28d9; font-weight: 600; }
input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.btn:focus-visible, .btn2:focus-visible, .enlace:focus-visible, input:focus-visible {
outline: 3px solid #a78bfa; outline-offset: 2px;
}

Los seis arreglos, uno por categoría:

1. Semántica/teclado: los <div onclick> → <button> (dos veces). Ahora son enfocables y operables por teclado, gratis.
2. Foco: fuera el outline: none; entra :focus-visible con anillo claro en todo lo interactivo.
3. Contraste: .desc de #bcbcbc (falla AA) → #475569 (pasa).
4. Imagen: alt descriptivo + width/height (evita el CLS al cargar).
5. Formulario: <label for="correo"> asociado al <input id="correo">.
6. Enlace: "clic aquí" → "Ver detalles del producto" (claro fuera de contexto). Bonus: el div.titulo → <h3>, y el contenedor → <article>.

Autoevaluación: navega la versión corregida SOLO con teclado — ¿llegas a todo con Tab, con el foco siempre visible, y activas con Enter? Si corres Lighthouse sobre ambas, el puntaje de accesibilidad debe subir claramente. Ese delta medible es tu entregable como profesional.