安全な入力を選ぶ
10のfixture（検証用サンプル）を選ぶか、HTML/CSSを貼り付けます。scriptや外部resourceは実行しません。
devs Tools / Quality Gate 1.0.0 / WCAG 2.2
Accessibility Studio：WCAG 2.2の検査・修正・手動確認
HTMLとCSSをブラウザ内の隔離環境で解析し、WCAG 2.2 Level A・AAを基準に、証拠付きの指摘、安全な修正候補、人が確認する項目、再監査、12形式のレポートを1つのAudit Projectで管理します。
Accessibility Studioは、HTMLとCSSを外部へ送らずに検査し、機械で検出できる問題、判断を支援できる問題、人だけが確かめられる項目を分ける無料ツールです。固定Rule ID、Evidence（判定根拠）、Confidence（確からしさ）、修正差分、Undo、再監査を同じAudit Projectへ残します。
- 入力コード・監査結果・ZIP生成はこのブラウザ内で完結
- opaque originのiframeで隔離し、通信・フォーム送信・objectを禁止
- 適合宣言・認証・法的保証を行わず、人手確認を明示
初めて使う方へ上部で検証パターンを選び「監査を実行」。Findingの根拠を確認し、Manualで人手判定を記録してからExportします。0件でも適合を意味しません。
専門用語を見る隔離されたローカル監査画面を準備しています…
Evidence workflow
入力から証拠、修正、再監査、引き継ぎまで
利用条件を設定する
画面幅、文字拡大、配色、動きを減らす設定を変えて同じ対象を確認します。
根拠と境界を読む
固定ID、対象、根拠、確からしさ、重要度、自動判断できない境界を確認します。
修正して再監査する
元に戻せる安全度Aだけを候補適用し、差分を確認。必要ならUndoして同じ条件で再監査します。
人手確認を記録する
Pass・Fail・N/A・未実施を、端末・支援技術・操作手順・結果と一緒に記録します。
限界と一緒に出力する
未実施項目や変換できない情報を隠さず、12形式のレポート・handoffへ出力します。
Decision boundary
機械は兆候を見つけ、人が意味と操作を確かめる
自動検査だけでWCAG適合を証明しません。WCAG 2.2 Level A・AAを監査の基準にしますが、この結果だけで適合・認証とはしません。AAAは助言として扱います。代表ページ、実機、キーボード、スクリーンリーダー、拡大・reflow、人による意味判断を別途行ってください。
Ten audit fixtures
問題例・正例・混在例を同じ監査条件で比較
NEGATIVE
壊れたマーケティングページ
文書構造、フォーム、色、キーボード、motionを横断監査
POSITIVEアクセシブルなマーケティングページ
自動検査が0件でも手動確認を残す正例
NEGATIVE壊れたモーダル
role、名前、focus、Escape、背景操作を確認
POSITIVEアクセシブルなモーダル
ARIA APGに沿う構造と手動境界を確認
NEGATIVE壊れた問い合わせフォーム
label、必須、エラー、入力目的を確認
POSITIVEアクセシブルなアコーディオン
button、見出し、aria-expanded、panel対応
MIXEDWordPressブロックページ
Gutenberg markupとテーマCSSのhandoff
MIXEDGSAPスクロールストーリー
Reduced Motionと最終状態を確認
MIXEDデータ表
caption、見出し、scope、reflowを確認
POSITIVEナビゲーションとスキップリンク
ランドマーク、skip link、focus順を確認
Evidence, confidence, and fix safety
コードを変える前に「なぜ指摘されたか」を読む
| 項目 | 日本語の意味 | 確認すること |
|---|---|---|
| Evidence（エビデンス） | 判定に使ったDOM、計算済みstyle、selector、実測値 | 再現できる根拠か、対象が合っているか |
| Confidence（コンフィデンス） | 判定の確からしさ。影響の大きさとは別 | 低い場合は推測として人が再確認 |
| Safety A | 作業コピーへ適用してUndoできる限定的な候補 | 差分と適用範囲を確認して再監査 |
| Safety B / C | 内容または構造の判断を伴う修正 | 候補をそのまま本番適用しない |
| Safety N | 自動修正しない項目 | 担当者、環境、結果、証拠メモを残す |
Twelve output adapters
同じ証拠を、情報の欠落を隠さず12形式へ渡す
| Adapter（出力変換） | 向いている用途 | 保持する情報 |
|---|---|---|
| JSON監査レポート | 機械処理・再監査 | Finding、Evidence、環境、手動判定を保持 |
| Markdown監査レポート | レビュー・Issue | 課題と修正方針を読みやすく共有 |
| HTMLエグゼクティブレポート | ブラウザ閲覧 | 自己完結した要約と証拠 |
| CSV Findings | 表計算・進行管理 | 1 Findingを1行で出力 |
| SARIF 2.1.0 | CI・code scanning | Rule IDとlocationを標準形式へ変換 |
| CSS修正差分 | スタイル修正 | 安全度と適用範囲を付けた候補 |
| WordPress Rescue handoff | WordPress | 対象と修正候補を既存Toolへ接続 |
| Section Composer Quality Contract | ページ構成 | Section IDと品質条件を接続 |
| Design Token Contrast Contract | 色設計 | 色ペア、比率、文字条件を接続 |
| GSAP Motion Alternative Contract | motion設計 | pin・scrub・最終状態を接続 |
| WCAG-EM Evidence Pack | 評価資料 | 適合宣言ではない証拠パック |
| QA Runbook | 公開前確認 | 端末・支援技術・手順・結果の記録 |
WCAG-EM Evidence Packは評価作業を支える資料であり、適合宣言ではありません。SARIFも自動検査で得た範囲だけを表します。
Public knowledge base
監査の根拠を公開リファレンスで確認する
Glossary
画面に出てくる英語・専門用語の意味
- WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）
- Webを多様な人が利用できるようにする国際的なガイドラインです。本ツールは2.2のA・AAを基準にします。
- Success Criterion / SC（達成基準）
- WCAGで適合判断に使う、検証可能な個別条件です。例：1.4.3 Contrast (Minimum)。
- Finding（ファインディング／指摘）
- 特定のRuleが対象コードと証拠に基づいて見つけた、確認・修正すべき候補です。
- Evidence（エビデンス／判定根拠）
- selector、属性、計算済みstyle、比率、画面幅など、指摘を再現するための情報です。
- Confidence（コンフィデンス／確からしさ）
- 検出結果をどの程度信頼できるか。severity（影響度）とは異なります。
- Audit Project（監査プロジェクト）
- 入力、環境、Finding、人手確認、修正履歴、再監査、出力をまとめた正本データです。
- Remediation Patch（修正差分）
- 問題を直す候補と変更前後の差です。安全度A以外は自動適用しません。
- Re-audit（再監査）
- 修正後に同じ条件と追加条件で再度検査し、別の問題を生んでいないか確かめる工程です。
- Reflow（リフロー／再配置）
- 狭い画面や拡大時に、横スクロールや情報欠落を避けて内容が並び直されることです。
- Accessible Name（アクセシブルネーム／支援技術向けの名前）
- buttonやinputをスクリーンリーダーが読み上げる際に使う名前です。
- SARIF（静的解析結果の交換形式）
- ツールの指摘をCIやcode scanningへ渡すJSON標準形式です。
- WCAG-EM（Webサイト評価手法）
- サイト全体を代表するページ群と手順で評価する方法です。証拠packだけで適合を保証しません。
Security and privacy
ローカルに残るもの・意図的に禁止するもの
- 入力HTML/CSS、監査結果、人手メモをURL・analytics・外部APIへ送信しません。
- 外側と内側のiframeは同一origin権限を与えず、CSPで通信・form・object・base・外部resourceを拒否します。
- script、event handler、srcdoc、form action、外部resourceを除去し、messageはsource・token・audit ID・schema versionを照合します。
- HTML 250 KB、CSS 150 KBの上限を設け、明示操作でのみファイルを生成します。
Known limits
人と実環境で確認し続けること
- altの品質、見出しやリンクの意味、読み上げ順、error文の分かりやすさ。
- キーボードだけでの完了、focus trapと復帰、hover/focus追加内容の保持。
- 200%文字拡大、320 CSS px相当のreflow、文字間隔、複数browser・端末。
- NVDA、VoiceOverなどの支援技術、WordPress theme/pluginとの組み合わせ。
Frequently asked questions
結果を使う前によくある質問
Findingが0件ならWCAG 2.2 AAに適合していますか？
いいえ。0件は、この環境で実行した自動・支援付き検査が問題を検出しなかったという意味です。30の手動確認、代表ページ、実機、支援技術を含む評価が必要です。
貼り付けたHTMLやCSSはサーバーへ送られますか？
公開ワークスペースはブラウザ内で処理し、外部通信をCSPで禁止します。WordPress管理画面の参照プラグインAPIを使う場合だけ、ログイン中の同一サイトへ明示的に送信します。
複数のh1は自動的な違反ですか？
いいえ。数だけで違反にせず、ページの主題、見出し階層、支援技術での理解を人が確認します。
ボタンやリンクは24pxと44pxのどちらが基準ですか？
WCAG 2.2 Level AAのTarget Size (Minimum)は原則24×24 CSS pxまたは規定の間隔です。devsでは使いやすさを高める製品推奨として44×44 CSS pxも示しますが、AAの最低基準と混同しません。
安全度Aの修正なら本番へ自動反映できますか？
いいえ。候補は隔離された作業コピーだけへ適用し、差分・Undo・再監査を提供します。本番反映はバックアップとレビュー後に別作業で行います。