ロゴ
ToolkitsLabEfficiency Hub
PR広告を含む

WCAG 2.2 新基準チェックツール(HTML貼り付けで監査)代替テキスト・フォームラベル・タップ領域などを基準番号付きで診断

HTMLを貼り付けるだけで、既存基準に加えWCAG 2.2で追加されたタップ領域の最小サイズなどを機械的にチェックします。 基準番号付きの監査レポートをその場で作成し、手動確認が必要な項目も合わせて案内します。

入力内容は外部に送信されません。

詳しく
監査するHTMLを入力

WCAG 2.2新基準チェックツールとは?機械判定と手動確認の違い

本ツールは、監査したいページのHTMLを貼り付けるだけで、画像の代替テキスト、フォームのラベル、リンク文言、言語指定といった基本項目に加え、2023年に勧告されたWCAG 2.2で新しく追加された達成基準(タップ領域の最小サイズ、ドラッグ操作の代替手段など)を、基準番号(1.1.1、2.5.8など)付きで機械的にチェックする無料ツールです。

Webアクセシビリティの達成基準には、HTMLの構造だけで判定できるものと、実際の画面表示や操作を伴わないと判定できないものがあります。本ツールは、判定できる項目は自動チェックで結果を出し、判定できない項目(フォーカスの見え方や一貫したヘルプの配置など)は「手動確認が必要な項目」として基準番号とともに案内することで、機械判定の限界を隠さずに実務で使える監査結果を提供します。

2024年4月の改正障害者差別解消法の施行で合理的配慮の提供が事業者にも義務化され、Webサイトのアクセシビリティへの関心が高まっています。本ツールは、既存のJIS X 8341-3(WCAG 2.1ベース)の確認に加えて、より新しいWCAG 2.2の基準まで見据えた点検を行いたいWeb制作者、自治体・企業のWeb担当者、アクセシビリティ試験の担当者を想定して設計しています。

こんなシーンで便利です

納品前・公開前のセルフチェックに

制作したページのHTMLを貼り付けて、代替テキストの抜け漏れやフォームラベルの対応関係、タップ領域の目安サイズなどを公開前に機械的に確認できます。

自治体・企業サイトのアクセシビリティ試験の一次スクリーニングに

ページ数が多いサイトの点検で、まず機械的に検出できる問題を洗い出し、手動確認が必要な項目を絞り込むことで、試験全体の工数を見積もる材料になります。

委託先への修正依頼・改修チケットの起票に

基準番号付きのレポートをそのままコピーして、修正依頼や社内の改修チケットに貼り付けることで、どの基準に基づく指摘かを明確にしたコミュニケーションができます。

WCAG 2.2で新設された基準の理解・学習に

タップ領域やドラッグ操作の代替手段など、WCAG 2.2で新しく追加された基準がどのような項目なのかを、実際のHTMLを使って具体的に理解する教材としても活用できます。

使い方は簡単 4ステップ

  1. 監査したいページのHTMLソース(表示→ページのソースを表示、または開発者ツールでコピー)を取得します。
  2. テキストエリアに貼り付けるか、HTMLファイルを選択してアップロードします。サンプルHTMLを読み込んで操作を試すこともできます。
  3. 「監査を実行」を押すと、基準番号付きの検出結果が重大度別に一覧表示されます。
  4. 結果を確認し、「レポートをコピー」または「Markdownでダウンロード」で基準番号付きの監査レポートを出力します。

※「手動確認が必要な項目」として表示される基準は、実際の画面操作や表示を伴う確認が必要なため、本ツールの自動判定の対象外です。あわせてご確認ください。

ご利用時の注意点

  • 機械判定の限界について:本ツールはHTMLの構造解析に基づく機械的なチェックです。配色のコントラスト比や実際のフォーカスの見え方など、CSSの最終的な適用結果や視覚的な確認が必要な基準は判定対象外です。
  • タップ領域の判定について:インラインstyle属性で明示的にサイズが指定されている要素のみを判定しています。外部CSSで指定されたサイズは解析できないため、該当しない要素は開発者ツールでの実測をあわせて行ってください。
  • 正式な適合判定について:本ツールの結果は『WCAG 2.2に準拠している/していない』ことを公式に証明するものではありません。正式な適合性評価が必要な場合は、専門の試験機関による評価をご検討ください。
  • 完全無料・安全:貼り付けたHTMLは外部サーバーに送信されない、通信が発生しないブラウザ完結型の設計です。

本ツールがチェックする主な達成基準一覧(基準番号・適合レベル)

WCAG 2.1から引き続き重要な基本項目と、WCAG 2.2で新設された基準をあわせて一覧にしました。◯は自動チェック対象、△は一部自動・一部手動、ー は手動確認が必要な項目です。

基準番号基準名適合レベル判定方法
1.1.1非テキストコンテンツ(代替テキスト)A◯ 自動
1.3.1情報及び関係性(見出し構造・表の見出し等)A◯ 自動
2.4.4リンクの目的(文脈の中で)A◯ 自動
3.1.1ページの言語A◯ 自動
4.1.2名前・役割・値(フォームラベル等)A◯ 自動
2.5.7ドラッグ操作(WCAG 2.2で新設)AA△ 一部自動
2.5.8ターゲットサイズ:最小(WCAG 2.2で新設)AA△ 一部自動
3.3.8アクセシブルな認証:最小(WCAG 2.2で新設)AA△ 一部自動
2.4.11フォーカスの非遮蔽:最小(WCAG 2.2で新設)AAー 手動確認
3.2.6一貫したヘルプ(WCAG 2.2で新設)Aー 手動確認
3.3.7冗長な入力(WCAG 2.2で新設)Aー 手動確認

【「一部自動」の判定について】
ドラッグ操作・ターゲットサイズ・アクセシブルな認証は、HTML内の属性(draggable属性、インラインサイズ指定、認証フォームの構成等)から推測できる範囲のみを自動チェックしています。

  • ◯ 自動: HTMLの構造だけで機械的に判定可能です。
  • △ 一部自動: 一部のケースのみ検出可能で、検出されない場合も問題がないとは限りません。
  • ー 手動確認: 実際の画面表示・操作を伴う確認が必要なため、本ツールではチェックリストとして案内します。

WCAG 2.2新基準の実務知識と、機械チェックで押さえるべきポイント

WCAG 2.2で何が変わったのか、そして機械的なチェックだけでは見落としやすいポイントを解説します。

結論:WCAG 2.2はWCAG 2.1に9つの基準を追加したもの(一部廃止あり)

WCAG 2.2は、2023年10月に勧告されたWCAGの最新バージョンで、WCAG 2.1の達成基準をすべて引き継ぎつつ、新たに9つの達成基準が追加されました(ターゲットサイズ・ドラッグ操作・フォーカスの非遮蔽・一貫したヘルプ・冗長な入力・アクセシブルな認証など、一部はAAAレベル)。
また、ブラウザの実装が進んだことを理由に4.1.1(構文解析)が廃止されています。既存のJIS X 8341-3(WCAG 2.1ベース)の点検に加えて、2.2の新基準まで押さえておくことで、より新しい到達目標を見据えた対応状況を把握できます。

タップ領域(2.5.8)はなぜ重要なのか

2.5.8ターゲットサイズ(最小)は、操作対象の要素が少なくとも24×24 CSSピクセルを確保することを求める基準です。スマートフォンでの操作が主流になるなか、小さなアイコンボタンやテキストリンクは、指先での正確なタップが難しく、誤操作やストレスの原因になります。
ただし、十分な余白(スペーシング)が周囲にある場合など例外規定もあるため、機械的な判定だけで『違反』と断定せず、実際の画面でのタップのしやすさもあわせて確認することが推奨されます。

ドラッグ操作(2.5.7)と単一ポインタでの代替手段

2.5.7ドラッグ操作は、ドラッグ&ドロップでしか操作できない機能に、クリックやタップなど単一ポインタでの代替操作を用意することを求める基準です。
ドラッグ操作は手指の震えがある方や、精密なマウス操作が難しい方にとって大きな障壁になります。並び替えUIやスライダーを実装する際は、ボタンでの移動やキーボード操作など、ドラッグ以外の手段も必ず用意しましょう。

アクセシブルな認証(3.3.8)とCAPTCHAの扱い方

3.3.8アクセシブルな認証(最小)は、パスワードの記憶やパズルの解読といった認知機能のテストに依存したログイン・認証を避けることを求める基準です。
画像を使ったCAPTCHA(文字の読み取り等)を使う場合は、音声での代替手段や、パスワードマネージャーでの自動入力を妨げない設計など、認知的な負荷に頼らない認証手段も用意することが推奨されます。

よくある失敗と対策

画像のalt属性を空にすればよいと誤解し、重要な情報を持つ画像まで装飾扱いにしてしまう

グラフや図解、ボタン代わりに使われている画像など、本来は情報を持つ画像にまで alt="" を設定してしまい、スクリーンリーダー利用者がその内容を全く得られなくなる失敗です。

💡 対策・解決策を見る▼
alt="" は、見た目の装飾のみで情報を持たない画像(アイコンの添え物など)にのみ使用してください。情報を伝える画像には、その画像が伝えたい内容を簡潔に記述した代替テキストを設定しましょう。本ツールは alt 属性自体の有無を機械的に検出しますが、内容が適切かどうかは目視での確認もあわせて行ってください。

placeholder属性だけでラベルの代わりにしてしまい、入力中に項目名が見えなくなる

フォームの入力欄にlabelタグを設置せず、placeholder属性の案内文だけで項目名を示してしまうと、ユーザーが文字を入力し始めた瞬間にその案内が消え、何を入力している欄か分からなくなる失敗です。スクリーンリーダーでも正しく認識されないことがあります。

💡 対策・解決策を見る▼
placeholderはあくまで入力例や補足の表示に留め、各入力欄には必ずlabel要素(for属性とid属性で関連付け)またはaria-labelを設定してください。本ツールの『フォームラベル』チェックで、アクセシブルな名前を持たない入力欄を一覧で確認できます。

『こちら』『詳細はこちら』といったリンク文言を多用し、リンク単体での目的が分からなくなる

1ページに複数の『こちら』リンクが並んでいると、スクリーンリーダーの利用者がリンクの一覧だけを読み上げて移動する際、どのリンクが何の詳細なのか区別できなくなる失敗です。

💡 対策・解決策を見る▼
リンクの文言だけでも遷移先の内容が分かるように、『料金プランの詳細を見る』のように具体的な文言に書き換えましょう。本ツールの『リンク文言』チェックで、空のリンクや『こちら』等の曖昧な文言を検出できます。

ボタンやアイコンリンクを小さく詰め込みすぎ、スマートフォンで誤操作が頻発する

一覧画面のアイコンボタンを省スペース化のために極端に小さくレイアウトしてしまい、スマートフォンでの操作時に隣のボタンを誤って押してしまう失敗です。WCAG 2.2で新設されたターゲットサイズの基準に抵触する可能性があります。

💡 対策・解決策を見る▼
操作対象の要素は、最低でも24×24 CSSピクセル(可能であれば44×44ピクセル程度)を確保し、隣接するボタンとの間に十分な余白を設けましょう。本ツールではインライン指定されたサイズのみ機械的に検出できるため、実際のレイアウトはブラウザの開発者ツールでの実測もあわせて行ってください。

よくある質問(FAQ)

Q.このツールはWCAG 2.2のすべての基準をチェックできますか

Q.

A. いいえ、すべてを機械的に判定することはできません。HTMLの貼り付けだけで自動判定できるのは、代替テキストの有無やフォームラベルの対応関係、言語指定、見出し構造といった「HTMLの構造として表現される基準」に限られます。フォーカスの可視性や配色コントラストの実際の見え方、操作性に関わる基準の一部は、実際の画面表示や操作を伴う目視確認が必要なため、本ツールでは『手動確認が必要な項目』として基準番号とともに一覧表示します。

Q.WCAG 2.2で新しく追加された基準にはどのようなものがありますか

Q.

A. 2023年10月に勧告されたWCAG 2.2では、2.5.8(ターゲットサイズ:最小)、2.5.7(ドラッグ操作)、2.4.11(フォーカスの非遮蔽:最小)、3.2.6(一貫したヘルプ)、3.3.7(冗長な入力)、3.3.8(アクセシブルな認証:最小)など9つの達成基準が新設されました(一部は2024年版で4.1.1が廃止)。本ツールでは、このうちHTMLの静的な解析で判定しやすい項目を自動チェックし、画面操作が前提の項目は手動確認チェックリストとして案内します。

Q.タップ領域(ターゲットサイズ)の判定はどのように行っていますか

Q.

A. 本ツールでは、リンクやボタンなどの操作対象要素について、HTML内のインラインstyle属性に幅・高さが明示されている場合に限り、WCAG 2.2が定める最小サイズ(24×24 CSSピクセル)を下回っていないかを機械的に判定します。実際の表示サイズは外部CSSやフレームワークのスタイルによって最終的に決まるため、インライン指定がない要素については『要確認』として扱い、ブラウザの開発者ツールでの実測もあわせて推奨しています。

Q.2024年4月の合理的配慮の義務化とWCAG 2.2はどう関係しますか

Q.

A. 2024年4月の改正障害者差別解消法の施行により、事業者による合理的配慮の提供が義務化されました。Webアクセシビリティ自体を直接義務付ける法律ではありませんが、問い合わせ対応や代替手段の提供が必要になる場面が増えるなかで、その土台としてJIS X 8341-3(WCAG 2.1ベース)への準拠・配慮を進める事業者・自治体が増えています。WCAG 2.2はWCAG 2.1の達成基準をすべて含み新基準を追加したものであるため、2.2基準まで確認しておくことで、より新しい到達目標を見据えた対応状況の確認ができます。

Q.入力したHTMLが外部に送信されることはありませんか

Q.

A. ありません。本ツールはHTMLの解析・判定をすべてブラウザ内(JavaScriptのDOM解析機能)で行う完全ローカル処理型です。貼り付けた内容が外部のサーバーへ送信されたり保存されたりすることはなく、未公開のページや社内システムのHTMLでも安心して監査できます。

Q.監査結果のレポートはどのような形式で出力できますか

Q.

A. 画面上での一覧表示に加えて、基準番号・重大度・該当箇所をまとめたレポートをテキスト形式でコピー、またはMarkdownファイルとしてダウンロードできます。社内共有や改修チケットの起票、委託先への修正依頼の際にそのまま貼り付けてご利用いただけます。

Q.HTMLの一部(断片)だけを貼り付けても診断できますか

Q.

A. はい、できます。<html>や<head>を含まないパーツ単位のHTML(カードコンポーネントやフォーム部分など)を貼り付けた場合でも、ブラウザのHTML解析機能が自動的に補完して解析します。ただし言語指定(lang属性)のチェックはページ全体の<html>タグを対象とした基準のため、断片のみを貼り付けた場合は参考情報としてご確認ください。

User Feedback & Request

あなたの声で、
このツールをより鋭く。

「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。

フィードバックを送る