mcpField
A
a11y-audit

a11y-audit

github.com/borgheiテスト・品質1.0k72 回インストール1 週間前に更新
リポジトリ

a11y-audit について

Accessibility Auditは、HTMLやCSSがWCAG 2.1のアクセシビリティ基準を満たすか確認する開発者向けスキルです。マークアップのスキャンと色のコントラスト確認に対応し、CI向けのJSON出力と厳格モードも備えています。

主な機能

  1. 01HTMLのWCAG 2.1問題をスキャン
  2. 02画像の代替テキストと見出しを確認
  3. 03フォーム、ARIA、ランドマークを検証
  4. 04AA・AAAの色コントラストを測定
  5. 05基準を満たす色の候補を提案
  6. 06JSON出力と厳格モードに対応

活用シーン

  1. 01開発中のHTMLテンプレート監査
  2. 02リリース前のCSSコントラスト確認
  3. 03CIでレベルA違反をゲート
  4. 04アクセシビリティ修正後の再スキャン

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/borghei/claude-skills --skill a11y-audit

インストール後、Claude Code で/a11y-auditを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
sample-page.html
references/
wcag-guidelines.md
scripts/
a11y_scanner.py
contrast_checker.py

詳細

アクセシビリティ監査

カテゴリ： エンジニアリング 分野： Web アクセシビリティ

概要

アクセシビリティ監査スキルでは、HTML ファイルを自動スキャンして WCAG 2.1 適合性違反を検出し、AA／AAA 基準に照らして色のコントラストをチェックします。代替テキストの欠落、見出し階層の破綻、ラベルのないフォーム入力、不十分な色のコントラストを開発の早い段階で検出できます。

まず確認すること

監査を実行する前に、以下の入力内容を確認してください。不明または曖昧なものがあれば、推測せずに質問してください。

  • 対象と範囲 — スキャンする HTML ファイル、ディレクトリ、または CSS（チェック対象と --file／--dir／--css 引数が決まります）
  • 適合レベル — 目標とする A、AA、または AAA（コントラストのしきい値と、どの違反を CRITICAL／WARNING／INFO とするかが決まります）
  • 利用状況 — その場限りの修正か、CI のゲートか（--strict によるゲート設定と JSON 出力が決まります）

中止ルール：出力に最も影響する 2～3 項目だけ質問してください。ユーザーが「とりあえず下書きして」と言った場合は作業を進め、成果物の冒頭に前提条件を記載してください。

クイックスタート

# Scan HTML for WCAG violations
python scripts/a11y_scanner.py --file index.html

# Scan a directory of HTML files
python scripts/a11y_scanner.py --dir ./src/templates

# Check color contrast
python scripts/contrast_checker.py --foreground "#333333" --background "#ffffff"

# Parse CSS file for contrast issues
python scripts/contrast_checker.py --css styles.css

# JSON output for CI
python scripts/a11y_scanner.py --file index.html --format json

ツールの概要

a11y_scanner.py

HTML ファイルをスキャンし、構造、セマンティクス、インタラクティブ要素に関する WCAG 2.1 違反を検出します。

機能説明
画像の代替テキスト装飾目的ではない画像の代替テキストが欠落または空であることを検出します
見出し階層h1～h6 のレベルが順番になっているか検証します
フォームラベル入力欄に対応する label 要素があることを確認します
ARIA 属性ARIA の使用が正しいかチェックします
リンクテキスト「こちらをクリック」や「続きを読む」などの一般的なテキストに警告します
言語属性html 要素に lang が設定されているかチェックします
タブ順序正の tabindex 値を検出します
ランドマークセマンティックなランドマークの使用状況を検証します
contrast_checker.py

WCAG AA および AAA のしきい値に照らして、色のコントラスト比をチェックします。

機能説明
比率の計算相対輝度のコントラスト比を計算します
AA 適合性通常のテキストは 4.5:1、大きなテキストは 3:1
AAA 適合性通常のテキストは 7:1、大きなテキストは 4.5:1
CSS の解析CSS から色と背景色の組み合わせを抽出します
色の提案適合する最も近い色を推奨します

ワークフロー

アクセシビリティの総合監査
  1. HTML をスキャン - すべてのテンプレートで a11y_scanner.py を実行します
  2. コントラストをチェック - スタイルシートで contrast_checker.py を実行します
  3. 優先順位を付ける - まずレベル A の違反を優先します
  4. 修正する - 重大な問題（代替テキスト、フォームラベル、見出し）を修正します
  5. 再スキャンする - すべてのチェックに合格することを確認します
CI との統合
# Gate on Level A violations
python scripts/a11y_scanner.py --dir ./templates --format json --level A --strict

# Check CSS contrast
python scripts/contrast_checker.py --css ./static/css/main.css --format json
開発ワークフロー
  1. コミット前 - 変更した HTML ファイルを簡易スキャンします
  2. PR レビュー - レビューチェックリストの一環として総合スキャンを実施します
  3. ステージング監査 - リリース前に包括的なスキャンを実施します
  4. モニタリング - 定期的に監査を実施します

リファレンスドキュメント

よく使うパターンのクイックリファレンス

WCAG レベル
レベル説明一般的な要件
A最低限の基準法令遵守
AA業界標準多くの規制、ADA
AAA強化された基準ベストプラクティスの目標
コントラスト比
用途AAAAA
通常のテキスト（<18pt）4.5:17:1
大きなテキスト（>=18pt の太字、または >=14pt）3:14.5:1
UI コンポーネント3:13:1
すぐにできる修正
問題修正方法
代替テキストの欠落<img alt="Description of image">
見出しのスキップh1 から h6 まで順番に使用します
フォームラベルがない<label for="inputId">Label</label>
一般的なリンクテキスト「こちらをクリック」を説明的なテキストに置き換えます
lang の欠落<html lang="en">
正の tabindextabindex="0" または tabindex="-1" のみを使用します
重大度の対応
  • CRITICAL - WCAG レベル A の違反
  • WARNING - WCAG レベル AA の違反
  • INFO - WCAG レベル AAA の推奨事項

コメント

Markdown 対応