アクセシビリティチェック Accessibility Checker
アクセシビリティチェックは、HTMLを貼り付けるかURLを指定するだけで、alt・ラベル・見出し・ARIAなど30項目以上を自動判定できる無料ツールです。WCAG 2.2の達成基準を添えて指摘し、色のコントラスト比チェッカーも備えています。
チェック結果
色のコントラスト比チェック
文字色と背景色を指定すると、コントラスト比とWCAGの適合レベルがわかります。上のHTMLチェックとは独立して使えます。
- このツールが調べていること
- HTMLのソースから機械的に判定できる項目だけを調べています。WCAG 2.2 の達成基準のうち、自動判定できるのは全体の一部です。ここで問題が出なくても「アクセシブルである」ことにはなりません。キーボードだけで操作できるか、読み上げで意味が通るかは、実際に試してご確認ください。
使い方
- HTMLを貼り付けて「チェックする」を押します。ブラウザで「ページのソースを表示」して、そのまま貼り付けてください。一部分だけでも調べられます。
- URLで調べることもできます。「調べ方」を「URLを指定して取得する」に変えると、サーバー経由でHTMLを取得してから同じ判定を行います。
- 結果は「致命的」「要確認」「参考」「問題なし」の4段階で並びます。それぞれWCAGのどの達成基準に関わるかを添えています。
- 「結果をコピー」で、指摘の一覧を文章の形で取り出せます。
- 色のコントラスト比は、ページ下部のセクションで単体でも使えます。基準を満たさない場合は、背景色を変えずに済む文字色の候補を出します。
URL指定で正しく調べられないもの: ログインが必要なページ、JavaScriptで内容を組み立てるページ（SPAなど）、robots等でアクセスを制限しているページ。この場合は、ブラウザの開発者ツールで「要素を検証」から実際のHTMLをコピーして貼り付けてください。
何を調べているか
HTMLのソースだけで機械的に判定できる項目を調べています。おおまかには次のとおりです。
| 分類 | 調べていること | WCAG |
|---|---|---|
| 画像 | alt属性の有無／altがファイル名のまま／画像だけのリンクの名前 | 1.1.1・2.4.4 |
| フォーム | 入力欄のラベル／placeholderだけに頼っていないか／labelのforが実在するか／fieldsetのlegend | 3.3.2・1.3.1・4.1.2 |
| リンク・ボタン | 名前の有無／「こちら」などの曖昧な文言／hrefのないaをボタン代わりにしていないか／target="_blank"のrel | 2.4.4・2.1.1・4.1.2 |
| 見出し | h1の個数／レベルの飛び／空の見出し／見出しの有無 | 1.3.1・2.4.6 |
| 表 | thの有無／scopeの有無／captionの有無 | 1.3.1 |
| ARIA | 存在しないroleの値／綴りの誤ったaria-*属性／aria-hidden内のフォーカス可能要素 | 4.1.2 |
| ページ全体 | html lang／title／viewportの拡大制限／meta refresh／ランドマーク／スキップリンク／idの重複／正のtabindex | 3.1.1・2.4.2・1.4.4・2.2.1・2.4.1・4.1.1・2.4.3 |
| 色 | style属性に直接書かれた文字色と背景色のコントラスト比 | 1.4.3 |
| その他 | iframeのtitle／video・audioの字幕トラック／ul・olの直下要素／autofocus／accesskeyの重複 | 4.1.2・1.2.2・1.3.1 |
アクセシブルな名前の考え方
リンクやボタン、入力欄に「名前」があるかどうかは、次の優先順位で判定しています。読み上げソフトが実際に読む順序に合わせたものです。
- 入力欄 … aria-labelledby → aria-label → <label for> → 囲んでいる<label> → title →（ボタン型なら）value → placeholder
- リンク・ボタン … aria-labelledby → aria-label → 中のテキスト → 中の画像のalt → SVGのtitle → title
placeholder だけの場合は「要確認」にしています。形のうえでは名前になりますが、入力を始めると消えてしまい、読み上げソフトによっては読まれないためです。
非表示の要素は数えません
aria-hidden="true"、hidden属性、style属性のdisplay:none / visibility:hidden が付いている要素と、その中身は判定から除いています。表示されていないものを指摘しても直しようがないためです。
コントラスト比の基準と計算のしかた
文字と背景の明るさの差を、1:1（同じ色）から21:1（黒と白）までの比で表したものがコントラスト比です。WCAGが求める水準は次のとおりです。
| 文字の大きさ | レベルAA | レベルAAA |
|---|---|---|
| 本文（通常の文字） | 4.5:1 以上 | 7:1 以上 |
| 大きい文字 （18pt＝24px以上、または14pt＝18.66px以上の太字） | 3:1 以上 | 4.5:1 以上 |
計算は、色の各成分（赤・緑・青）を0〜1に直したうえで、人の目の感じ方に合わせた補正（ガンマ補正）をかけ、緑を重く見た加重平均で「相対輝度」を求めます。明るいほうを L1、暗いほうを L2 として、(L1 + 0.05) ÷ (L2 + 0.05) が比になります。
足りないときの直し方
このツールは、背景色を変えずに文字色だけを調整した候補を出します。背景が明るければ文字を黒へ、暗ければ白へ、1%きざみで近づけて、はじめて基準を満たした色を提案します。今の色からの変化がいちばん小さい色になるので、デザインの印象を保ったまま直せます。
CSSファイル側の配色は調べられません
このツールが見られるのは、HTMLの style 属性に直接書かれた色だけです。外部CSSやclassで指定した色は判定できません。ブラウザの開発者ツールで実際の色を調べ、下のコントラスト比チェックに手で入れて確認してください。
自動チェックでわかることの限界
ここで指摘が0件でも、アクセシブルであることにはなりません。WCAGの達成基準のうち、機械だけで判定できるのは一部です。次のようなことは、実際に操作して確かめる必要があります。
- altの内容が適切か … 属性があるかどうかは判定できますが、書かれている説明が画像の内容と合っているかは人が見るしかありません。
- キーボードだけで操作できるか … Tabキーだけでページを最後までたどり、すべてのボタンを押せるか試してください。フォーカスが今どこにあるか見えるかも重要です。
- 読み上げて意味が通るか … WindowsのナレーターやmacOSのVoiceOverで実際に聞いてみるのが確実です。
- 見出しの階層が内容と合っているか … レベルの飛びは判定できますが、その見出しが本当にその位置にふさわしいかは判断できません。
- 色だけで情報を伝えていないか … 「赤い項目が必須」のような表現は、機械では見つけられません。
日本の基準との関係
日本のウェブアクセシビリティの規格 JIS X 8341-3:2016 は、国際規格 ISO/IEC 40500:2012（＝WCAG 2.0）と一致した内容になっています。このツールが示している WCAG 2.2 は 2.0 を含んだうえで達成基準が追加されたものなので、ここでの指摘はJISの観点でもそのまま使えます。
関連ツール
注意事項
アクセシビリティチェックの結果は、HTMLから機械的に判定できる範囲のものです。適合の証明にはなりませんので、あくまでも目安としてご利用ください。HTMLを貼り付けた場合、判定はブラウザの中だけで行われ、内容がサーバーへ送信されることはありません。URLを指定した場合のみ、HTMLの取得のためにサーバーを経由します。無料でご利用いただけます。
※このプログラムはPHP8.2.22にて作成、動作確認を行っております。
※ご利用下さっている皆様のご意見・ご要望（改善要望）をお寄せください。