mcpField
W
web-scanning

web-scanning

github.com/community-accessTesting & quality429233 installsUpdated today
Repository

About web-scanning

A skill for planning web accessibility scans using runtime tools, source-code review, or both. It covers page discovery, framework detection, screenshots, configuration, and scan thoroughness profiles.

Key features

  1. 01Runtime scans with axe-core CLI
  2. 02Source-code accessibility reviews
  3. 03Same-domain page crawling
  4. 04Sitemap-based page discovery
  5. 05Framework detection
  6. 06Configurable scan profiles

Use cases

  1. 01Scanning a live web page
  2. 02Reviewing web source code
  3. 03Auditing a multi-page site
  4. 04Choosing scan depth and settings

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/community-access/accessibility-agents --skill web-scanning

After installing, type/web-scanningin Claude Code to confirm it loaded.

Details

From the project README

Web Scanning

Supported Audit Methods

MethodToolWhen to Use
Runtime scanaxe-core CLILive URL available (dev server or production)
Code reviewAgent specialistsSource code available in workspace
Bothaxe-core + agentsMost comprehensive - catches issues from both angles

Runtime Scanning Commands

axe-core CLI
# Single page scan (WCAG 2.2 AA)
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa

# Save results to JSON
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --save ACCESSIBILITY-SCAN.json

# Multiple pages
npx @axe-core/cli <URL1> <URL2> <URL3> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --save ACCESSIBILITY-SCAN.json

# With Chrome flags (headless)
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --chrome-flags="--headless --no-sandbox"
axe-core Tag Reference
TagStandard
wcag2aWCAG 2.0 Level A
wcag2aaWCAG 2.0 Level AA
wcag21aWCAG 2.1 Level A
wcag21aaWCAG 2.1 Level AA
wcag22aaWCAG 2.2 Level AA
best-practiceBest practices (not WCAG required)

Screenshot Capture

capture-website-cli (preferred - lightweight)
# Full-page screenshot
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --type=png

# With viewport
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --width=1280 --height=720

# Mobile viewport
npx capture-website-cli "<URL>" --output="screenshots/<page>-mobile.png" --full-page --width=375 --height=812

# With delay for JS-rendered content
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --delay=3
Playwright (fallback)
npx playwright screenshot --browser chromium --full-page --wait-for-timeout 3000 "<URL>" "screenshots/<page>.png"

Page Discovery for Multi-Page Audits

Crawl Depth Modes
ModeBehaviorMax Pages
Current page onlyScan single URL1
Key pagesUser-provided listUser-defined
Full site crawlFollow internal links50 (default cap)
Sitemap-based Discovery
# Check for sitemap
curl -s <BASE_URL>/sitemap.xml | head -20

# Extract URLs from sitemap
curl -s <BASE_URL>/sitemap.xml | grep -oP '<loc>\K[^<]+' | head -50
Link-based Crawling

When crawling from a start URL:

  • Follow only same-domain links
  • Skip anchor links (#), mailto:, tel:, javascript: links
  • Skip file downloads (.pdf, .zip, .doc, etc.)
  • Respect robots.txt
  • Cap at 50 pages unless user overrides
  • Track visited URLs to avoid duplicates

Framework Detection

Detect the framework from workspace files to enable framework-specific scanning:

IndicatorFramework
package.json contains reactReact
package.json contains nextNext.js
package.json contains vueVue
package.json contains @angular/coreAngular
package.json contains svelteSvelte
.jsx / .tsx files presentReact/Next.js
.vue files presentVue
angular.json presentAngular
.svelte files presentSvelte
Only .html filesVanilla HTML

Source Code File Patterns

When doing code review, scan these file patterns:

# HTML files
**/*.html

# Component files (framework-specific)
**/*.jsx
**/*.tsx
**/*.vue
**/*.svelte
**/*.component.ts
**/*.component.html

# Style files (for contrast/visual checks)
**/*.css
**/*.scss
**/*.less
**/*.module.css

# Config files (for framework detection)
package.json
next.config.*
nuxt.config.*
angular.json
svelte.config.*
tailwind.config.*

Scan Configuration

Web Scan Config File: .a11y-web-config.json
{
  "profile": "standard",
  "wcagLevel": "AA",
  "wcagVersion": "2.2",
  "axeTags": ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
  "maxPages": 50,
  "screenshots": false,
  "framework": "auto",
  "ignore": {
    "paths": ["node_modules/**", "dist/**", "build/**", ".next/**"],
    "rules": []
  }
}
Scan Profiles
ProfilePhasesThoroughness
Quick1, 3, 4, 9Errors and critical only
StandardAll (1-9)Errors and warnings
DeepAll + extrasAll severities + animation, cognitive, touch

Comments

Markdown supported