web-scanning

网页扫描

支持的审计方法

方法	工具	适用场景
运行时扫描	axe-core CLI	有可访问的实时 URL（开发服务器或生产环境）
代码审查	专项 Agent	工作区中有源代码
两者结合	axe-core + Agent	最全面的方式，可从两个角度发现问题

运行时扫描命令

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 标签参考

标签	标准
wcag2a	WCAG 2.0 A 级
wcag2aa	WCAG 2.0 AA 级
wcag21a	WCAG 2.1 A 级
wcag21aa	WCAG 2.1 AA 级
wcag22aa	WCAG 2.2 AA 级
best-practice	最佳实践（WCAG 未强制要求）

截取屏幕截图

capture-website-cli（首选，轻量）

# 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（备用）

npx playwright screenshot --browser chromium --full-page --wait-for-timeout 3000 "<URL>" "screenshots/<page>.png"

多页面审计的页面发现

爬取深度模式

模式	行为	最大页面数
仅当前页面	扫描单个 URL	1
关键页面	用户提供的列表	用户自定义
全站爬取	跟踪内部链接	50（默认上限）

基于站点地图的发现

# 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

基于链接的爬取

从起始 URL 开始爬取时：

• 仅跟踪同域链接
• 跳过锚点链接（#）、mailto:、tel:、javascript: 链接
• 跳过文件下载（.pdf、.zip、.doc 等）
• 遵循 robots.txt
• 上限为 50 个页面，除非用户另行指定
• 跟踪已访问的 URL，避免重复

框架检测

根据工作区文件检测框架，以启用针对该框架的扫描：

指示项	框架
package.json 包含 react	React
package.json 包含 next	Next.js
package.json 包含 vue	Vue
package.json 包含 @angular/core	Angular
package.json 包含 svelte	Svelte
存在 .jsx / .tsx 文件	React/Next.js
存在 .vue 文件	Vue
存在 angular.json	Angular
存在 .svelte 文件	Svelte
仅有 .html 文件	原生 HTML

源代码文件模式

进行代码审查时，扫描以下文件模式：

# 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.*

扫描配置

网页扫描配置文件：.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": []
  }
}

扫描配置

配置	阶段	彻底程度
快速	1、3、4、9	仅检查错误和严重问题
标准	全部（1-9）	检查错误和警告
深度	全部 + 额外项	检查所有严重程度，并检查动画、认知和触控