prueba.kriminis.com

Copia esto y envíaselo a quien mantiene tu web. Lleva cada criterio WCAG, los selectores afectados y el arreglo, sin la parte comercial.

ACCESIBILIDAD — https://prueba.kriminis.com
Puntuación: 30/100 (nota E) · WCAG 2.2 AA / EN 301 549
12 tipos de barrera · 36 elementos · generado por RampaScanner el 25/8/2026
Riesgo legal: alto · exposición 100/100
  - faltan etiquetas en campos de formulario — impide comprar, registrarse o contactar con lector de pantalla
  - hay texto con contraste insuficiente — ilegible para muchas personas con baja visión
  - el contenido no se adapta al móvil sin scroll horizontal — donde está la mayoría del tráfico

## 1. Form elements must have labels  [Crítico · Rápido · ~15 min]
Criterio: 4.1.2 Nombre, función y valor, nivel A
Elementos (2): input[type="text"]  ;  textarea
Arreglo: 1) Identifica todos los campos de entrada (input, textarea, select) en tu formulario. 2) Añade un elemento <label> con atributo 'for' que coincida con el 'id' del campo, o envuelve el campo dentro del <label>. 3) Asegúrate de que el texto de la etiqueta describe claramente qué debe introducir el usuario.
Código:
Antes:
<input type="email" name="email" placeholder="tu@email.com">

Después:
<label for="email-input">Correo electrónico</label>
<input type="email" id="email-input" name="email" placeholder="tu@email.com">

O alternativa (envolviendo):
<label>
  Correo electrónico
  <input type="email" name="email" placeholder="tu@email.com">
</label>

## 2. Trampa de teclado: el foco se queda atascado y no se puede avanzar  [Crítico · Medio · ~45 min]
Criterio: 2.1.2 Sin trampa de teclado, nivel A
Elementos (1): audio
Arreglo: 1) Identifica dónde el foco se queda atrapado (habitualmente en modales, menús desplegables o widgets personalizados). 2) Asegura que Tab siempre avanza al siguiente elemento enfocable y Shift+Tab retrocede. 3) Implementa una gestión de foco que permita salir: en modales, Tab en el último elemento enfocable debe llevar al primero (o cerrar el modal con Escape); en menús, Escape debe cerrar y devolver el foco al disparador. 4) Prueba la navegación completa sin usar el ratón.
Código:
// Antes: Modal sin salida de teclado
<div class="modal">
  <button>Cerrar</button>
  <input type="text" />
</div>

// Después: Modal con gestión de foco circular y Escape
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Título del modal</h2>
  <input type="text" id="first-input" />
  <button id="close-btn">Cerrar</button>
</div>

<script>
const modal = document.querySelector('.modal');
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

modal.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    modal.close();
    return;
  }
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
});
firstElement.focus();
</script>

## 3. Elements must meet minimum color contrast ratio thresholds  [Grave · Medio · ~1 h]
Criterio: 1.4.3 Contraste (mínimo), nivel AA
Elementos (12): marquee[behavior="alternate"]  ;  li:nth-child(1) > a  ;  li:nth-child(4) > a  ;  li:nth-child(7) > a  ;  li:nth-child(10) > a  ;  li:nth-child(13) > a  ;  …
Arreglo: 1) Identifica todos los elementos con bajo contraste usando un analizador (axe DevTools, WAVE o similar). 2) Aumenta la luminosidad del texto (hazlo más oscuro) o reduce la del fondo (hazlo más claro). 3) Verifica que el ratio de contraste sea mínimo 4.5:1 para textos pequeños (< 18pt) o 3:1 para textos grandes (≥ 18pt). 4) Prueba con herramientas de simulación de daltonismo para garantizar que el color no sea el único diferenciador.
Código:
/* Antes: contraste insuficiente */
.texto-bajo-contraste {
  color: #999999;  /* gris medio */
  background-color: #f5f5f5;  /* gris muy claro */
  /* Ratio: ~2.5:1 — INCUMPLE */
}

/* Después: contraste mínimo AA cumplido */
.texto-alto-contraste {
  color: #333333;  /* gris oscuro */
  background-color: #ffffff;  /* blanco */
  /* Ratio: ~12.6:1 — CUMPLE */
}

/* Botón: ejemplo alternativo */
.boton-antes {
  color: #888888;
  background-color: #eeeeee;
}

.boton-despues {
  color: #ffffff;
  background-color: #0052cc;  /* azul oscuro */
  /* Ratio: ~8.3:1 — CUMPLE */
}

## 4. El contenido no se adapta a pantallas estrechas sin scroll horizontal  [Grave · Medio · ~45 min]
Criterio: 1.4.10 Reflow, nivel AA
Elementos (4): table.tabla-principal  ;  tbody  ;  tr  ;  td
Arreglo: 1) Revisa el diseño responsivo: asegúrate de que todos los elementos se adapten a un ancho mínimo de 320px sin requerir scroll horizontal. 2) Ajusta el contenido que sobresale: elimina márgenes fijos, amplía contenedores flexibles (usa width: 100% en lugar de valores px fijos) y evita overflow-x hidden que oculte contenido. 3) Prueba en navegador a 320px de ancho (puedes usar DevTools del navegador) y verifica que se puede leer todo con desplazamiento solo vertical.
Código:
/* Antes */
.contenedor {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.columna {
  width: 400px;
  float: left;
}

/* Después */
.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.columna {
  width: 100%;
  float: none;
}

@media (min-width: 768px) {
  .columna {
    width: 48%;
    float: left;
    margin-right: 2%;
  }
}

## 5. <marquee> elements are deprecated and must not be used  [Grave · Medio · ~1 h]
Criterio: 2.2.2 Pausa, detención u ocultación, nivel A
Elementos (3): marquee[direction="up"]  ;  marquee[behavior="alternate"]  ;  marquee[scrollamount="50"]
Arreglo: 1) Localiza todas las etiquetas <marquee> en tu código HTML. 2) Sustituye cada <marquee> por una alternativa accesible: un contenedor <div> con CSS (scroll horizontal opcional, pero pausable) o mejor aún, contenido estático o un carrusel controlado por el usuario con botones de pausa. 3) Si necesitas animación, utiliza CSS animations o JavaScript con controles accesibles para pausar/reanudar. 4) Prueba que el contenido sea legible y controlable sin requierir que se mueva automáticamente.
Código:
// ANTES (incorrecto)
<marquee direction="left" scrollamount="5">
  ¡Oferta especial: descuento del 20% este fin de semana!
</marquee>

// DESPUÉS (correcto)
<div role="region" aria-label="Anuncio especial">
  <p>¡Oferta especial: descuento del 20% este fin de semana!</p>
</div>

// O si necesitas scroll horizontal controlado:
<div class="carousel-container" role="region" aria-label="Carrusel de ofertas">
  <button id="pauseBtn" aria-pressed="false">Pausar</button>
  <div id="carouselContent" class="carousel-scroll">
    ¡Oferta especial: descuento del 20% este fin de semana!
  </div>
  <button id="playBtn" aria-pressed="true">Reanudar</button>
</div>

<style>
.carousel-scroll {
  overflow-x: auto;
  /* Animación pausable mediante JavaScript */
}
.carousel-scroll.paused {
  animation-play-state: paused;
}
</style>

## 6. Contenido en movimiento o reproducción automática sin control para pausarlo  [Grave · Rápido · ~30 min]
Criterio: 2.2.2 Pausa, detención, ocultación, nivel A
Elementos (3): marquee  ;  marquee  ;  marquee
Arreglo: 1) Identifica todo contenido que se mueve o reproduce automáticamente (carruseles, vídeos, gifs animados, animaciones CSS). 2) Añade controles visibles y fáciles de usar (botones de pausa/reanudar, claramente etiquetados). 3) Asegúrate de que el contenido pause automáticamente cuando el usuario no interactúa, o proporciona un control para hacerlo. 4) Si es un vídeo, implementa controles nativos del navegador (play/pause). 5) Prueba que todos los controles funcionan con teclado y lector de pantallas.
Código:
Antes:
<div class="carousel" autoplay>
  <img src="slide1.jpg" />
  <img src="slide2.jpg" />
</div>

Después:
<div class="carousel" role="region" aria-label="Carrusel de imágenes">
  <div class="carousel-slides">
    <img src="slide1.jpg" alt="Slide 1" />
    <img src="slide2.jpg" alt="Slide 2" />
  </div>
  <button id="pause-btn" aria-pressed="false">Pausar</button>
  <button id="play-btn" aria-pressed="true">Reanudar</button>
</div>

<script>
let isPlaying = true;
const pauseBtn = document.getElementById('pause-btn');
const playBtn = document.getElementById('play-btn');

pauseBtn.addEventListener('click', () => {
  isPlaying = false;
  pauseBtn.setAttribute('aria-pressed', 'true');
  playBtn.setAttribute('aria-pressed', 'false');
  // Detener animación del carrusel
});

playBtn.addEventListener('click', () => {
  isPlaying = true;
  playBtn.setAttribute('aria-pressed', 'true');
  pauseBtn.setAttribute('aria-pressed', 'false');
  // Reanudar animación del carrusel
});
</script>

## 7. <ul> and <ol> must only directly contain <li>, <script> or <template> elements  [Grave · Medio · ~45 min]
Criterio: 1.3.1 Información y relaciones, nivel A
Elementos (1): ul
Arreglo: 1) Identifica todos los elementos <ul> y <ol> en tu código. 2) Revisa qué elementos hijo contienen directamente (div, p, span, etc.). 3) Envuelve el contenido de texto o elementos no-li dentro de elementos <li>. 4) Si hay scripts o templates, déjalos como están (son permitidos). 5) Prueba con un lector de pantalla para confirmar que la lista se anuncia correctamente.
Código:
Antes:
<ul>
  <div>Elemento 1</div>
  <p>Elemento 2</p>
  <li>Elemento 3</li>
</ul>

Después:
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

O si necesitas estructura compleja:
<ul>
  <li>
    <div>Elemento 1</div>
  </li>
  <li>
    <p>Elemento 2</p>
  </li>
  <li>Elemento 3</li>
</ul>

## 8. Estructura de encabezados con saltos de nivel  [Moderado · Medio · ~45 min]
Criterio: 1.3.1 Información y relaciones, nivel A
Elementos (1): h3
Arreglo: 1) Audita todos los encabezados de la página e identifica dónde hay saltos (H1→H3, H2→H4, etc.). 2) Reorganiza los encabezados para que sigan una secuencia lógica sin saltos: H1 → H2 → H3 en orden. 3) Asegúrate de que hay un único H1 por página y que los niveles inferiores descienden gradualmente. 4) Valida los cambios con una herramienta de accesibilidad.
Código:
<h1>Título principal de la página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>
<h2>Sección 2</h2>

<!-- ❌ Antes (incorrecto): salto de H1 a H3 -->
<!-- <h1>Título principal</h1>
<h3>Contenido sin H2</h3> -->

<!-- ✅ Después (correcto): estructura coherente sin saltos -->

## 9. La página no tiene una región principal (<main>) para saltar al contenido  [Moderado · Rápido · ~15 min]
Criterio: 1.3.1 Información y relaciones, nivel A
Arreglo: 1) Identifica el bloque de contenido principal de tu página (no el encabezado, menú o pie). 2) Envuelve ese contenido dentro de una etiqueta <main>. 3) Asegúrate de que solo haya un <main> por página. 4) Verifica que esté colocado después de los elementos de navegación principal (header, nav).
Código:
Antes:
<body>
  <header>Logo y menú</header>
  <nav>Navegación</nav>
  <section>Contenido principal aquí</section>
  <footer>Pie</footer>
</body>

Después:
<body>
  <header>Logo y menú</header>
  <nav>Navegación</nav>
  <main>
    <section>Contenido principal aquí</section>
  </main>
  <footer>Pie</footer>
</body>

## 10. Texto sobre imagen de fondo: revisa el contraste a mano  [Leve · Medio · ~45 min]
Criterio: 1.4.3 Contraste (mínimo), nivel AA
Elementos (5): span  ;  h2  ;  p  ;  h1  ;  span
Arreglo: 1) Identifica todo texto que se superpone sobre imágenes o degradados. 2) Añade un fondo semisólido (overlay) detrás del texto con opacidad suficiente para garantizar contraste (mínimo ratio 4.5:1 para texto normal, 3:1 para texto grande). 3) Alternativamente, aplica una sombra de texto o borde que mejore la legibilidad. 4) Verifica el contraste real con una herramienta como WebAIM Contrast Checker.
Código:
/* Antes: texto sobre imagen sin garantía de contraste */
.hero-text {
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  background: transparent;
}

/* Después: overlay semisólido para garantizar contraste */
.hero-text {
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.6);
  padding: 12px 16px;
  border-radius: 4px;
}

/* Alternativa: sombra de texto */
.hero-text {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

## 11. Texto alternativo de baja calidad (no describe bien la imagen)  [Moderado · Rápido · ~15 min]
Criterio: 1.1.1 Contenido no textual, nivel A
Elementos (2): img (Fuego animado molesto)  ;  img (Imagen de código)
Arreglo: 1) Identifica todas las imágenes con alt deficiente (genérico como 'imagen', 'foto', números, etc.). 2) Reescribe cada alt de forma clara, concisa y descriptiva: incluye qué es, qué muestra y, si es relevante, su propósito en la página. 3) Evita repetir palabras clave innecesariamente y no escribas 'imagen de...' al inicio. 4) Prueba con un lector de pantalla para verificar que la descripción tiene sentido sin ver la imagen.
Código:
<img src="producto.jpg" alt="Silla de oficina negra con ruedas y reposabrazos regulables" />
<!-- Antes: alt="producto" o alt="" -->
<!-- Después: el alt describe claramente qué es y sus características relevantes -->

## 12. Información transmitida solo por color o forma (sin alternativa textual)  [Grave · Rápido · ~30 min]
Criterio: 1.4.1 Uso del color, nivel A
Elementos (1): (página)
Arreglo: 1) Identifica todos los elementos donde el color o la forma son el único medio de transmitir información (estados de formulario, iconos de estado, gráficos, etc.). 2) Añade texto complementario visible o etiquetas ARIA que describan claramente el significado (por ejemplo: 'error', 'completado', 'favorito'). 3) Si prefieres ocultar el texto, usa clases CSS como 'sr-only' para que solo lo lea el lector de pantalla, pero siempre debe estar presente en el código.
Código:
<!-- Antes: solo color/forma -->
<button style="background-color: red;">Enviar</button>
<i class="star-icon"></i>

<!-- Después: color + texto -->
<button style="background-color: red;" aria-label="Enviar (campo obligatorio)">Enviar</button>
<i class="star-icon" aria-label="Añadido a favoritos"></i>

<!-- Alternativa: texto visible + icono -->
<button style="background-color: red;"><span class="error-icon">⚠</span> Enviar</button>
<span><i class="star-icon"></i> Favorito</span>

/* Clase sr-only para ocultar texto visualmente pero mantenerlo accesible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}