Por qué la accesibilidad web importa (y no es solo por buena voluntad)
En junio de 2025, la European Accessibility Act (EAA) entró en vigor. Esto significa que los sitios web de empresas que ofrecen servicios en la UE deben cumplir con estándares de accesibilidad. No es una recomendación — es una obligación legal.
Pero más allá de la ley, hay un argumento de negocio: el 15% de la población mundial tiene algún tipo de discapacidad. Si tu sitio no es accesible, estás excluyendo a millones de potenciales clientes. Y además, muchas prácticas de accesibilidad mejoran la experiencia para todos los usuarios, no solo para personas con discapacidad.
Integro accesibilidad en cada proyecto desde el inicio. Es 10x más fácil construir accesible que parchear después. Y la mayoría de mejoras son sorprendentemente simples.
Los 10 errores más comunes (y cómo arreglarlos)
1. Usar <div> y <span> para todo
El problema: un <div onclick="..."> parece un botón pero no es accesible con teclado, no aparece en lectores de pantalla como botón, y no tiene focus nativo.
La solución: usa HTML semántico.
<!-- MAL -->
<div class="btn" onclick="doSomething()">Enviar</div>
<!-- BIEN -->
<button class="btn" onclick="doSomething()">Enviar</button>Lo mismo para navegación (<nav>), secciones (<main>, <section>, <article>), encabezados (<h1>-<h6>) y listas (<ul>, <ol>).
2. Imágenes sin texto alternativo
El problema: un lector de pantalla encuentra una imagen sin alt y dice “imagen” sin más contexto.
La solución:
<!-- MAL -->
<img src="equipo.jpg" />
<!-- BIEN — imagen informativa -->
<img src="equipo.jpg" alt="Equipo de Cris Artigas trabajando en un proyecto web" />
<!-- BIEN — imagen decorativa -->
<img src="decoracion.svg" alt="" role="presentation" />Si la imagen es decorativa (no aporta información), usa alt="". Si es informativa, describe qué muestra.
3. Contraste de color insuficiente
El problema: texto gris claro sobre fondo blanco. Bonito en Dribbble, imposible de leer para personas con baja visión.
La solución: WCAG requiere ratio mínimo de:
- 4.5:1 para texto normal (< 18px)
- 3:1 para texto grande (≥ 18px bold o ≥ 24px normal)
Herramientas para verificar:
- WebAIM Contrast Checker (web)
- axe DevTools (extensión Chrome)
- Figma: plugin “Stark” o “A11y - Color Contrast Checker”
En crisartigas.com uso text-dark/60 (opacidad 60% sobre #1A1A1A) como el tono más claro para texto. Eso da un ratio de ~5.2:1 sobre fondo blanco — suficiente para WCAG AA.
4. Formularios sin labels
El problema: inputs con solo placeholder pierden el label cuando el usuario empieza a escribir. Y los lectores de pantalla no asocian placeholder con el campo.
La solución:
<!-- MAL -->
<input type="email" placeholder="Tu email" />
<!-- BIEN -->
<label for="email">Tu email</label>
<input type="email" id="email" placeholder="tu@email.com" />
<!-- BIEN (label visual oculto pero accesible) -->
<label for="email" class="sr-only">Tu email</label>
<input type="email" id="email" placeholder="tu@email.com" />La clase sr-only de Tailwind oculta visualmente el label pero lo mantiene accesible para lectores de pantalla:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}5. No se puede navegar con teclado
El problema: menús desplegables, modales y tabs que solo funcionan con mouse.
La solución: todo elemento interactivo debe ser alcanzable con Tab y activable con Enter/Space. Añade tabindex="0" a elementos custom interactivos y gestiona eventos de teclado:
element.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
});6. Focus no visible
El problema: al presionar Tab, no ves qué elemento está seleccionado porque alguien puso outline: none en el CSS global.
La solución: usa focus-visible para mostrar el outline solo en navegación por teclado:
*:focus-visible {
outline: 2px solid var(--color-electric);
outline-offset: 2px;
}Esto muestra el outline cuando navegas con teclado pero no cuando haces click con mouse. Lo mejor de los dos mundos.
7. Jerarquía de encabezados rota
El problema: saltar de <h1> a <h3> sin <h2>. Los lectores de pantalla usan los encabezados para navegar — los saltos confunden.
La solución: los encabezados deben seguir un orden lógico. No uses <h3> porque es más pequeño — usa CSS para el tamaño y HTML para la semántica.
8. Links que dicen “Click aquí”
El problema: un lector de pantalla lista todos los links de la página. Si 5 dicen “click aquí”, no hay contexto.
La solución:
<!-- MAL -->
<a href="/servicios">Click aquí</a> para ver mis servicios.
<!-- BIEN -->
<a href="/servicios">Ver mis servicios</a>9. Videos sin subtítulos
El problema: contenido de vídeo inaccesible para personas sordas o en entornos ruidosos.
La solución: añade subtítulos (captions) a todos los videos. YouTube los genera automáticamente y permiten edición manual.
10. Animaciones que no se pueden pausar
El problema: animaciones en loop que pueden causar náuseas o crisis en personas con sensibilidad vestibular o epilepsia.
La solución: respeta prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Herramientas de testing
Automatizadas (detectan ~60% de errores)
- axe DevTools: extensión Chrome gratuita. Escanea la página y muestra errores con código para arreglarlos
- Lighthouse: incluye auditoría de accesibilidad en Chrome DevTools
- Pa11y: herramienta CLI para CI/CD. Integra checks de accesibilidad en tu pipeline
Manuales (el otro 40%)
- Navegación con teclado: intenta usar tu sitio solo con Tab, Enter, Escape y flechas
- Lectores de pantalla: VoiceOver (Mac), NVDA (Windows, gratuito), TalkBack (Android)
- Zoom 200%: comprueba que el diseño funciona al hacer zoom al 200% en el navegador
El impacto legal: European Accessibility Act
Desde junio 2025, la EAA exige que los servicios digitales en la UE sean accesibles. Afecta a e-commerce, banca online, servicios de transporte, telecomunicaciones, y más. Las multas varían por país, pero en España pueden llegar a los 100.000€.
Incluso si tu negocio no está directamente afectado por la EAA, es cuestión de tiempo que la regulación se amplíe. Construir accesible desde el inicio es más barato que remediar después.
Mi checklist mínima de accesibilidad
- HTML semántico para toda la estructura
- Todas las imágenes tienen
alt(informativo o vacío para decorativas) - Contraste de color ≥ 4.5:1
- Todos los inputs tienen
<label> - Navegable al 100% con teclado
- Focus visible con
focus-visible - Jerarquía de encabezados correcta (sin saltos)
- Skip link al inicio (“Ir al contenido principal”)
prefers-reduced-motionrespetado- axe DevTools sin errores