# Uiux Axe Core
> WCAG 2.1 AA/AAA accessibility validation with axe-core and Playwright integration
- Skill: `kobogithub/uiux-axe-core` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kobogithub/uiux-axe-core`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kobogithub/uiux-axe-core/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kobogithub (https://skillmd.com/u/kobogithub)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kobogithub/uiux-axe-core
---
# uiux-axe-core
Validacion de accesibilidad web segun WCAG 2.1 AA/AAA usando axe-core integrado con Playwright para auditorias automatizadas de accesibilidad.
## Overview
axe-core es el motor de reglas de accesibilidad mas usado en la industria:
- Detecta automaticamente ~50% de las violaciones WCAG
- Zero false positives (confianza en los resultados)
- Categoriza severidad: critical, serious, moderate, minor
- Soporta WCAG 2.0/2.1 niveles A, AA y AAA
- Integrable con Playwright, Puppeteer, Selenium, Cypress
- Usado por Google, Microsoft, Deque
## Instalacion
```bash
# Para uso con Playwright (recomendado)
npm install @axe-core/playwright
# axe-core standalone (para inyectar via script)
npm install axe-core
# Para reportes HTML
npm install axe-html-reporter
```
## Integracion con Playwright
### Script basico: `scripts/a11y-audit.js`
```javascript
const { chromium } = require('playwright');
const { AxeBuilder } = require('@axe-core/playwright');
/**
* Ejecuta una auditoria de accesibilidad en una pagina.
* @param {string} url - URL de la pagina a auditar
* @param {object} options - Opciones de configuracion
* @returns {object} Resultados de axe-core
*/
async function auditPage(url, options = {}) {
const {
tags = ['wcag2a', 'wcag2aa'], // Nivel WCAG
browser: browserType = 'chromium',
viewport = { width: 1440, height: 900 },
includeRules = [],
excludeRules = [],
exclude = [], // Selectores CSS a excluir
} = options;
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ viewport });
const page = await context.newPage();
try {
await page.goto(url, { waitUntil: 'networkidle' });
let builder = new AxeBuilder({ page })
.withTags(tags);
if (includeRules.length > 0) {
builder = builder.withRules(includeRules);
}
if (excludeRules.length > 0) {
builder = builder.disableRules(excludeRules);
}
for (const selector of exclude) {
builder = builder.exclude(selector);
}
const results = await builder.analyze();
return {
url,
timestamp: new Date().toISOString(),
violations: results.violations,
passes: results.passes.length,
incomplete: results.incomplete,
inapplicable: results.inapplicable.length,
};
} finally {
await browser.close();
}
}
// CLI usage
if (require.main === module) {
const url = process.argv[2] || 'http://localhost:4321';
const level = process.argv[3] || 'aa';
const tags = level === 'aaa'
? ['wcag2a', 'wcag2aa', 'wcag2aaa']
: ['wcag2a', 'wcag2aa'];
auditPage(url, { tags }).then(results => {
console.log(JSON.stringify(results, null, 2));
process.exit(results.violations.length > 0 ? 1 : 0);
});
}
module.exports = { auditPage };
```
### Auditoria multi-pagina: `scripts/a11y-audit-batch.js`
```javascript
const { auditPage } = require('./a11y-audit');
/**
* Audita multiples paginas y genera un reporte consolidado.
*/
async function batchAudit(pages, options = {}) {
const results = [];
for (const { url, name } of pages) {
console.log(`Auditing: ${name} (${url})...`);
try {
const result = await auditPage(url, options);
results.push({ name, ...result });
} catch (error) {
results.push({
name,
url,
error: error.message,
violations: [],
passes: 0,
});
}
}
return results;
}
// CLI usage
if (require.main === module) {
const baseUrl = process.argv[2] || 'http://localhost:4321';
const pages = [
{ name: 'Home', url: `${baseUrl}/` },
{ name: 'Login', url: `${baseUrl}/login` },
{ name: 'Dashboard', url: `${baseUrl}/dashboard` },
{ name: 'Settings', url: `${baseUrl}/settings` },
];
batchAudit(pages).then(results => {
console.log('\n=== Accessibility Audit Report ===\n');
let totalViolations = 0;
for (const r of results) {
const icon = r.violations.length === 0 ? '✅' : '❌';
console.log(`${icon} ${r.name}: ${r.violations.length} violations, ${r.passes} passes`);
totalViolations += r.violations.length;
for (const v of r.violations) {
console.log(` ${v.impact.toUpperCase()}: ${v.id} - ${v.description}`);
console.log(` Affected: ${v.nodes.length} element(s)`);
}
}
console.log(`\nTotal violations: ${totalViolations}`);
process.exit(totalViolations > 0 ? 1 : 0);
});
}
module.exports = { batchAudit };
```
## Uso con Playwright MCP
Cuando usas el Playwright MCP directamente (sin scripts), puedes inyectar axe-core:
```
# PASO 1: Navegar a la pagina
-> browser_navigate(url="http://localhost:4321/dashboard")
# PASO 2: Usar browser_snapshot() para obtener el accessibility tree
-> browser_snapshot()
# El accessibility tree muestra:
# - Roles de elementos (button, link, heading, etc.)
# - Accessible names
# - Estados (expanded, selected, checked)
# - Jerarquia de landmarks (main, nav, aside)
# PASO 3: Verificar manualmente en el tree:
# - Todos los botones tienen nombres
# - Los headings tienen jerarquia logica (h1 -> h2 -> h3)
# - Los formularios tienen labels
# - Las imagenes tienen alt text
# - Los landmarks estan presentes
```
## Reglas WCAG Clave
### Nivel A (Minimo obligatorio)
| Regla | WCAG | Descripcion | Ejemplo |
|-------|------|-------------|---------|
| `image-alt` | 1.1.1 | Imagenes deben tener alt text | `![Logo]()
` |
| `label` | 1.3.1 | Inputs deben tener label asociado | `