web-scanning

Web スキャン

対応している監査方法

方法	ツール	使用する場面
ランタイムスキャン	axe-core CLI	利用可能なライブ URL がある場合（開発サーバーまたは本番環境）
コードレビュー	エージェントの専門家	ワークスペース内にソースコードがある場合
両方	axe-core + エージェント	最も包括的です。両方の観点から問題を検出できます

ランタイムスキャンのコマンド

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 ファイルのみ	Vanilla 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.*

スキャン設定

Web スキャン設定ファイル：.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）	エラーと警告
ディープ	すべて + 追加項目	すべての重大度 + アニメーション、認知、タッチ