Diseño Web Accesible: Guía Completa WCAG 2025
**15% de la población mundial** tiene alguna discapacidad. Si tu sitio web no es accesible, estás excluyendo a 1 de cada 7 potenciales usuarios. Además, en muchos países (incluyendo Argentina bajo Ley 26.653) la accesibilidad web es obligatoria para sitios gubernamentales y recomendada para todos.
Esta guía te enseña cómo crear sitios accesibles siguiendo **WCAG 2.1** (Web Content Accessibility Guidelines) con ejemplos prácticos, herramientas de testing y código real.
15%
de personas con discapacidad
+20%
mejora SEO con accesibilidad
67%
de sites NO cumplen WCAG
Los 4 Principios WCAG (POUR)
1. Perceptible
La información debe ser presentable de formas que todos puedan percibir.
- ✓ Alt text en todas las imágenes
- ✓ Subtítulos en videos
- ✓ Contraste de color mínimo 4.5:1
- ✓ Texto redimensionable sin pérdida de contenido
2. Operable
Los componentes deben ser operables por todos los usuarios.
- ✓ Navegable 100% con teclado (sin mouse)
- ✓ Sin límites de tiempo arbitrarios
- ✓ No causar convulsiones (sin flashes > 3 por segundo)
- ✓ Navegación consistente y predecible
3. Comprensible
La información debe ser fácil de entender.
- ✓ Lenguaje claro y simple
- ✓ Comportamiento predecible de elementos
- ✓ Prevención y corrección de errores en formularios
- ✓ Etiquetas e instrucciones claras
4. Robusto
Compatible con tecnologías actuales y futuras.
- ✓ HTML semántico válido
- ✓ Compatible con lectores de pantalla
- ✓ ARIA roles cuando HTML no alcanza
- ✓ Funciona en todos los navegadores
Mejores Prácticas Esenciales
1. HTML Semántico
❌ Incorrecto
<div class="header">
<div class="nav">
<div onclick="...">Home</div>
</div>
</div>✅ Correcto
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>2. Alt Text Descriptivo
<!-- ❌ MAL --> <img src="producto.jpg" alt="imagen"> <!-- ✅ BIEN --> <img src="producto.jpg" alt="Zapatillas Nike Air Max 2024 negras con suela blanca"> <!-- ✅ Decorativa (no informativa) --> <img src="decoracion.jpg" alt="" role="presentation">
Regla: Si eliminas la imagen, ¿el alt describe lo que se perdió?
3. Contraste de Color
Ratios mínimos WCAG:
- • Texto normal (< 18px): 4.5:1
- • Texto grande (≥ 18px o bold ≥ 14px): 3:1
- • Componentes UI (botones, iconos): 3:1
- • Nivel AAA (recomendado): 7:1
❌ Contraste 2.3:1
Texto difícil de leer
✅ Contraste 7:1
Texto fácil de leer
4. Navegación con Teclado
Todos los elementos interactivos deben ser accesibles con teclado:
/* Mostrar foco visible */
button:focus,
a:focus,
input:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
/* NUNCA hagas esto */
*:focus {
outline: none; /* ❌ FATAL para accesibilidad */
}Test rápido: Desconectá el mouse. ¿Podés usar todo el sitio solo con Tab, Enter y flechas?
5. ARIA Roles y Labels
ARIA (Accessible Rich Internet Applications) complementa HTML semántico:
<!-- Botón de hamburguesa --> <button aria-label="Abrir menú de navegación" aria-expanded="false" aria-controls="menu-principal" > <span aria-hidden="true">☰</span> </button> <!-- Loading spinner --> <div role="status" aria-live="polite"> <span>Cargando contenido...</span> </div> <!-- Formulario con validación --> <input type="email" aria-required="true" aria-invalid="false" aria-describedby="email-error" /> <span id="email-error" role="alert"></span>
Herramientas de Testing
🔧 Axe DevTools
Extensión de Chrome/Firefox que detecta automáticamente 57% de issues WCAG.
Gratis, escaneo en segundos
🎨 Color Contrast Checker
WebAIM Contrast Checker verifica ratios de contraste al instante.
https://webaim.org/resources/contrastchecker/
📱 Lectores de Pantalla
NVDA (Windows), JAWS, VoiceOver (Mac/iOS), TalkBack (Android)
Testea con usuarios reales siempre que sea posible
⚡ Lighthouse
Auditoría automática de accesibilidad en Chrome DevTools.
Score objetivo: > 90
Checklist Accesibilidad Esencial
- HTML semántico (header, nav, main, footer, article)
- Alt text descriptivo en todas las imágenes
- Contraste mínimo 4.5:1 para texto
- 100% navegable con teclado (Tab, Enter, flechas)
- Focus visible en todos los elementos interactivos
- Labels en todos los inputs de formulario
- Mensajes de error claros y accesibles
- Headings jerárquicos (h1, h2, h3 en orden)
- Links descriptivos (no "click aquí")
- Testeado con lector de pantalla
¿Necesitás un sitio web accesible y compatible con WCAG?
En Nodo Digital creamos sitios que cumplen estándares de accesibilidad, mejoran SEO y llegan a más usuarios.