Testing de Accesibilidad con Axe: Guía Completa para QA Testers 2026

¿Qué es el Testing de Accesibilidad con Axe?

El testing de accesibilidad es una práctica fundamental en el desarrollo de software moderno que garantiza que nuestras aplicaciones sean utilizables por personas con diferentes capacidades y discapacidades. Axe (o axe-core) es una de las herramientas más populares y confiables para automatizar estas pruebas, desarrollada por Deque Systems.

Axe nos permite detectar automáticamente violaciones de las pautas de accesibilidad web (WCAG 2.1 y 2.2) directamente en nuestros flujos de testing, integrándose perfectamente con herramientas como Selenium, Cypress, Playwright y Jest. En 2026, la accesibilidad web no es solo una buena práctica, sino un requisito legal en muchos países.

Como QA Testers, implementar testing de accesibilidad nos ayuda a identificar problemas como:

Elementos sin etiquetas apropiadas para lectores de pantalla
Contraste de colores insuficiente
Navegación por teclado deficiente
Estructura HTML semánticamente incorrecta
Formularios sin labels descriptivos

Prerrequisitos

Antes de comenzar con este tutorial, necesitas tener:

Conocimientos básicos de JavaScript: Comprensión de sintaxis básica y manejo de promesas
Experiencia con testing automatizado: Al menos conocimiento básico de Selenium, Cypress o Playwright
Node.js instalado: Versión 16 o superior (verificar con node --version)
Proyecto de testing existente: O disposición para crear uno desde cero
Comprensión básica de HTML/CSS: Para entender los problemas de accesibilidad detectados

Paso 1: Instalación de Axe Core

Primero, instalemos axe-core en nuestro proyecto. El método de instalación depende de la herramienta de testing que uses:

Para Selenium con JavaScript:

npm install @axe-core/webdriverjs --save-dev

Para Cypress:

npm install cypress-axe --save-dev

Para Playwright:

npm install @axe-core/playwright --save-dev

Para Jest (testing de componentes):

npm install jest-axe --save-dev

Paso 2: Configuración Básica con Selenium

Vamos a crear nuestro primer test de accesibilidad usando Selenium WebDriver. Crea un archivo llamado accessibility.test.js:

const { Builder, By, until } = require('selenium-webdriver');
const AxeBuilder = require('@axe-core/webdriverjs');

describe('Pruebas de Accesibilidad', () => {
  let driver;

  beforeAll(async () => {
    driver = await new Builder().forBrowser('chrome').build();
  });

  afterAll(async () => {
    await driver.quit();
  });

  test('debería cumplir con estándares de accesibilidad en página principal', async () => {
    await driver.get('https://mi-aplicacion.com');
    
    const results = await new AxeBuilder(driver)
      .withTags(['wcag2a', 'wcag2aa'])
      .analyze();
    
    expect(results.violations).toHaveLength(0);
    
    // Si hay violaciones, las mostramos en detalle
    if (results.violations.length > 0) {
      console.log('Violaciones encontradas:');
      results.violations.forEach(violation => {
        console.log(`- ${violation.description}`);
        console.log(`  Impacto: ${violation.impact}`);
        console.log(`  Elementos afectados: ${violation.nodes.length}`);
      });
    }
  });
});

Paso 3: Implementación con Cypress

Para Cypress, la integración es aún más sencilla. Primero, agrega el comando en cypress/support/commands.js:

import 'cypress-axe';

// Comando personalizado para logging detallado
Cypress.Commands.add('checkA11yAndLog', (selector = null) => {
  cy.checkA11y(selector, null, (violations) => {
    violations.forEach(violation => {
      cy.log(`Violación: ${violation.description}`);
      cy.log(`Severidad: ${violation.impact}`);
      
      violation.nodes.forEach((node, index) => {
        cy.log(`Elemento ${index + 1}: ${node.target}`);
      });
    });
  });
});

Luego crea tu test en cypress/e2e/accessibility.cy.js:

describe('Testing de Accesibilidad', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.injectAxe();
  });

  it('página principal debe ser accesible', () => {
    cy.checkA11yAndLog();
  });

  it('formulario de contacto debe ser accesible', () => {
    cy.get('[data-cy="contact-form"]').should('be.visible');
    cy.checkA11yAndLog('[data-cy="contact-form"]');
  });

  it('navegación debe ser accesible por teclado', () => {
    // Verificar que se puede navegar solo con teclado
    cy.get('body').tab();
    cy.focused().should('have.attr', 'href');
    
    // Verificar accesibilidad de la navegación
    cy.checkA11yAndLog('nav');
  });
});

Paso 4: Testing Avanzado con Configuraciones Personalizadas

Axe nos permite personalizar qué reglas verificar y cómo manejar los resultados. Aquí un ejemplo más avanzado:

const axeConfig = {
  rules: {
    'color-contrast': { enabled: true },
    'keyboard-trap': { enabled: true },
    'focus-order-semantics': { enabled: true },
    // Desactivar reglas específicas si es necesario
    'landmark-unique': { enabled: false }
  },
  tags: ['wcag2a', 'wcag2aa', 'best-practice']
};

// Uso con Selenium
const results = await new AxeBuilder(driver)
  .configure(axeConfig)
  .exclude('.third-party-widget') // Excluir elementos específicos
  .analyze();

// Categorizar violaciones por severidad
const criticalViolations = results.violations.filter(v => v.impact === 'critical');
const seriousViolations = results.violations.filter(v => v.impact === 'serious');

expect(criticalViolations).toHaveLength(0);
if (seriousViolations.length > 0) {
  console.warn(`Se encontraron ${seriousViolations.length} violaciones serias`);
}

Paso 5: Integración en CI/CD

Para automatizar completamente nuestros tests de accesibilidad, podemos integrarlos en nuestro pipeline de CI/CD. Aquí un ejemplo para GitHub Actions:

# .github/workflows/accessibility-tests.yml
name: Accessibility Tests

on: [push, pull_request]

jobs:
  accessibility:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Run accessibility tests
        run: npm run test:a11y
        
      - name: Upload accessibility report
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: accessibility-report
          path: accessibility-results.json

Casos de Uso Reales en Proyectos QA

Caso 1: E-commerce
En un proyecto de tienda online, implementé testing de accesibilidad para verificar que el proceso de checkout fuera completamente accesible. Detectamos que los campos de tarjeta de crédito no tenían labels apropiados y que el botón de “Finalizar Compra” no era accesible por teclado.

// Test específico para checkout
it('proceso de checkout debe ser accesible', () => {
  cy.visit('/checkout');
  cy.injectAxe();
  
  // Verificar formulario de datos personales
  cy.checkA11y('[data-testid="personal-info-form"]');
  
  // Verificar formulario de pago
  cy.checkA11y('[data-testid="payment-form"]');
  
  // Verificar resumen de pedido
  cy.checkA11y('[data-testid="order-summary"]');
});

Caso 2: Dashboard Administrativo
En una aplicación de dashboard, utilizamos Axe para verificar que las tablas de datos fueran accesibles para lectores de pantalla, especialmente importante cuando se manejan grandes volúmenes de información financiera.

Caso 3: Aplicación Móvil Web
Para una PWA, configuramos tests de accesibilidad que se ejecutaran en diferentes viewports, asegurando que la aplicación fuera accesible tanto en desktop como en dispositivos móviles.

Mejores Prácticas y Tips

Ejecuta tests de accesibilidad temprano y frecuentemente: Integra estos tests desde el inicio del desarrollo
No dependas solo de herramientas automatizadas: Axe detecta aproximadamente el 30-50% de problemas de accesibilidad. Combina con testing manual
Prioriza por impacto: Enfócate primero en violaciones críticas y serias
Documenta excepciones: Si necesitas desactivar ciertas reglas, documenta el por qué
Capacita al equipo: Asegúrate de que desarrolladores entiendan los problemas detectados

Conclusión y Próximos Pasos

El testing de accesibilidad con Axe es una herramienta poderosa que nos permite automatizar la detección de problemas de accesibilidad de manera eficiente. Como QA Testers en 2026, es nuestra responsabilidad garantizar que las aplicaciones que probamos sean inclusivas y accesibles para todos los usuarios.

Los próximos pasos que te recomiendo son:

Implementar gradualmente: Comienza con tests básicos y expande la cobertura progresivamente
Explorar pa11y y lighthouse: Otras herramientas que complementan perfectamente a Axe
Aprender sobre ARIA: Comprende los atributos ARIA para mejor colaboración con desarrollo
Practicar testing manual: Usa lectores de pantalla como NVDA o JAWS
Mantenerse actualizado: Las pautas WCAG evolucionan constantemente

Recuerda: la accesibilidad no es un feature opcional, es un derecho fundamental. Como QA Testers, somos los guardianes de esta inclusión digital.

¿Te resultó útil este artículo?

Compártelo con otros QA Testers hispanohablantes.
Si tienes preguntas o quieres profundizar en algún tema,
escríbeme — estoy aquí para ayudarte.