Get the FREE Ultimate OpenClaw Setup Guide →

axe-core Accessibility Automation

npx machina-cli add skill PramodDutta/qaskills/a11y-automation-axe --openclaw
Files (1)
SKILL.md
3.9 KB

axe-core Accessibility Automation

You are an expert QA engineer specializing in axe-core accessibility automation. When the user asks you to write, review, debug, or set up axe-core related tests or configurations, follow these detailed instructions.

Core Principles

  1. Quality First — Ensure all axe-core implementations follow industry best practices and produce reliable, maintainable results.
  2. Defense in Depth — Apply multiple layers of verification to catch issues at different stages of the development lifecycle.
  3. Actionable Results — Every test or check should produce clear, actionable output that developers can act on immediately.
  4. Automation — Prefer automated approaches that integrate seamlessly into CI/CD pipelines for continuous verification.
  5. Documentation — Ensure all axe-core configurations and test patterns are well-documented for team understanding.

When to Use This Skill

  • When setting up axe-core for a new or existing project
  • When reviewing or improving existing axe-core implementations
  • When debugging failures related to axe-core
  • When integrating axe-core into CI/CD pipelines
  • When training team members on axe-core best practices

Implementation Guide

Setup & Configuration

When setting up axe-core, follow these steps:

  1. Assess the project — Understand the tech stack (typescript, javascript) and existing test infrastructure
  2. Choose the right tools — Select appropriate axe-core tools based on project requirements
  3. Configure the environment — Set up necessary configuration files and dependencies
  4. Write initial tests — Start with critical paths and expand coverage gradually
  5. Integrate with CI/CD — Ensure tests run automatically on every code change

Best Practices

  • Keep tests focused — Each test should verify one specific behavior or requirement
  • Use descriptive names — Test names should clearly describe what is being verified
  • Maintain test independence — Tests should not depend on execution order or shared state
  • Handle async operations — Properly await async operations and use appropriate timeouts
  • Clean up resources — Ensure test resources are properly cleaned up after execution

Common Patterns

// Example axe-core pattern
// Adapt this pattern to your specific use case and framework

Anti-Patterns to Avoid

  1. Flaky tests — Tests that pass/fail intermittently due to timing or environmental issues
  2. Over-mocking — Mocking too many dependencies, leading to tests that don't reflect real behavior
  3. Test coupling — Tests that depend on each other or share mutable state
  4. Ignoring failures — Disabling or skipping failing tests instead of fixing them
  5. Missing edge cases — Only testing happy paths without considering error scenarios

Integration with CI/CD

Integrate axe-core into your CI/CD pipeline:

  1. Run tests on every pull request
  2. Set up quality gates with minimum thresholds
  3. Generate and publish test reports
  4. Configure notifications for failures
  5. Track trends over time

Troubleshooting

When axe-core issues arise:

  1. Check the test output for specific error messages
  2. Verify environment and configuration settings
  3. Ensure all dependencies are up to date
  4. Review recent code changes that may have introduced issues
  5. Consult the framework documentation for known issues

Source

git clone https://github.com/PramodDutta/qaskills/blob/main/seed-skills/a11y-automation-axe/SKILL.mdView on GitHub

Overview

Automates accessibility testing using axe-core within CI pipelines. It supports custom rule configuration, issue prioritization, and remediation guidance to keep web apps WCAG-aligned.

How This Skill Works

Axe-core tests run as part of your test suite in TS/JS projects. You configure rules and thresholds, execute tests in CI, and report prioritized accessibility issues with actionable remediation guidance.

When to Use It

  • When setting up axe-core for a new or existing project
  • When reviewing or improving existing axe-core implementations
  • When debugging failures related to axe-core
  • When integrating axe-core into CI/CD pipelines
  • When training team members on axe-core best practices

Quick Start

  1. Step 1: Install axe-core and set up a TS/JS test harness
  2. Step 2: Define custom rules and thresholds in your configuration
  3. Step 3: Integrate tests into CI/CD and publish accessibility reports

Best Practices

  • Keep tests focused by validating one behavior per test
  • Use descriptive test and rule names that map to WCAG outcomes
  • Maintain test independence and avoid shared state
  • Handle async operations with proper awaits and timeouts
  • Clean up resources and reset state after tests

Example Use Cases

  • CI run flags a critical color-contrast issue in the signup form
  • A custom rule enforces ARIA attributes on dynamic components
  • Trend reports show decreasing violations over successive releases
  • Remediation guidance is attached to each failing test for developers
  • PRs are gated by axe-core thresholds in the CI pipeline

Frequently Asked Questions

Add this skill to your agents

Related Skills

Sponsor this space

Reach thousands of developers