Accesibilidad Web — Por Qué tu Proyecto Necesita Tests aXe
Por qué la accesibilidad importa
La accesibilidad web no es una característica opcional ni un “nice to have”. Es un requisito fundamental de cualquier infraestructura digital soberana. Si tu plataforma no puede ser utilizada por todas las personas independientemente de sus capacidades, no es verdaderamente soberana.
En TroncoCorp, la accesibilidad es parte del ADN del desarrollo. No la tratamos como una fase de QA — la integramos desde el diseño y la verificamos con tests automatizados en cada build.
El stack: axe-core + Playwright
Para mantener la accesibilidad bajo control usamos dos herramientas:
- axe-core: El motor de análisis de accesibilidad más completo. Detecta violaciones de WCAG 2.1 niveles A y AA.
- Playwright: Framework de tests E2E que nos permite navegar por el sitio y ejecutar axe-core en cada página crítica.
La integración es sorprendentemente simple:
import AxeBuilder from '@axe-core/playwright';
test('página sin violaciones críticas', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.analyze();
const critical = results.violations.filter(v => v.impact === 'critical');
expect(critical).toEqual([]);
});Lo que hemos aprendido
1. El atributo lang es crítico
Uno de los errores más comunes es hardcodear el idioma en el HTML. En nuestro Layout.astro teníamos:
<html lang="es">Esto funciona para páginas en español, pero rompe la accesibilidad para lectores de pantalla en las versiones en inglés. La solución:
<html lang={locale}>Donde locale se determina dinámicamente según la URL.
2. Skip links deben ser localizados
El enlace “Saltar al contenido principal” es esencial para navegación por teclado. Pero si tu sitio es multilingüe, debe adaptarse:
<a href="#main-content" class="skip-link">
{locale === 'en' ? 'Skip to main content' : 'Saltar al contenido principal'}
</a>3. Tests de contraste de color
El color-contrast es la violación más común en sitios oscuros. Especialmente con texto gris claro (color: rgba(255,255,255,0.5)) sobre fondo negro. Aunque es un problema conocido y aceptado en diseño oscuro (muchos sitios como Vercel, GitHub, o Discord tienen el mismo patrón), es importante ser consciente de ello.
Métricas de nuestro ecosistema
Actualmente ejecutamos tests axe-core en 15 páginas clave del ecosistema. Resultados:
- 0 violaciones críticas en todas las páginas
- Contraste de color: 54 nodos en academia, 8 en ecosistema, 7 en blog, 6 en galería, etc. (serious, no critical)
- Link names: 126 nodos en blog (por enlaces sociales con iconos SVG)
Cada violación “serious” tiene una razón de diseño justificada y está documentada. El objetivo es reducir gradualmente estos números sin comprometer la identidad visual del ecosistema.
Cómo empezar
Si tienes un proyecto Astro y quieres añadir tests de accesibilidad:
- Instala las dependencias:
npm install -D @axe-core/playwright @playwright/test - Crea un test que analice tus páginas principales
- Configura CI para que falle si hay violaciones críticas
- Repite en cada PR
La accesibilidad no es un destino — es un proceso continuo. Cada mejora, por pequeña que sea, hace que tu infraestructura sea más soberana.
Articulos relacionados
Career paths en tecnología soberana: guía para nuevos talentos
Guía completa de las rutas profesionales en el ecosistema TroncoCorp: skills, proyectos y niveles de entrada para desarrolladores, diseñadores, gestores e investigadores.
Cómo proponer un proyecto en el Parlamento Digital
Guía paso a paso para presentar una propuesta ante el Parlamento Digital de TroncoCorp, desde la redacción hasta la votación y ejecución.
Cómo unirse al ecosistema TroncoCorp: guía para nuevos miembros
Guía paso a paso para formar parte del ecosistema soberano: desde explorar la web hasta convertirte en miembro de la Sociedad.