HTMLアクセシビリティ監査
生のHTMLを貼り付けると、本格的なWCAGアクセシビリティ監査を実行します:手作りでDOMを走査し、画像、フォームラベル、見出しの順序、リンクテキストをチェック。さらに、正確な相対輝度のコントラスト比計算機が、実際のAA/AAAの基準値に照らしてスコアを算出します。外部ライブラリは一切使用せず、データが送信されることもありません。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
手軽なアクセシビリティチェックの多くは、表面的なキーワードスキャンか、ブラックボックスとして信頼せざるを得ない重量級のライブラリです。このツールは第三の道をとります:貼り付けられたHTMLを、ブラウザに組み込まれたDOMParserを使って解析し(axe-coreや外部のアクセシビリティライブラリは一切使用せず、ダウンロードも発生しません)、得られたDOMツリーを、一般的な実際のWCAG 2.1失敗パターンを反映した手書きのチェック群で検査します。つまり、ロジックはすべて検証可能であり、監査は完全にブラウザ内で実行されます。貼り付けたマークアップやテストした色の組み合わせがアップロードされたり、どこかに送信されたりすることは決してありません。
チェック項目は、実際のページで最も頻繁に見られる失敗をカバーしています:alt属性がまったくない<img>要素(これは装飾画像に使われる意図的な空のalt=""とは区別される真のWCAG失敗で、後者は正しく警告対象外となります)、支援技術がその目的を認識できないフォームコントロール(対応する<label for>、<label>でラップ、aria-label/aria-labelledby属性という実際のラベルへのあらゆる経路に対してチェック)、警告なく飛ぶ見出しレベル(<h1>からすぐ<h3>へ、または<h1>がまったくない、あるいは複数ある文書)、hrefがない、または「こちら」や「続きを読む」のような文脈を無視した曖昧なテキストを持つリンク、そして完全なHTML文書(断片ではない)が貼り付けられた際のlang属性の欠落です。
特筆すべきは、本格的なコントラスト計算です。「見た目で読めそう」という表面的なヒューリスティックではありません。インラインのcolorとbackground-colorを持つ要素があると、このツールは両方の値を読み取り、ブラウザ自身のCSSエンジンを通じて実際のRGB数値に解決し(hex、rgb()、hsl()、'tomato'のような名前付きカラーもすべて同じように機能します)、それぞれについて正確なWCAG相対輝度を計算します。L = 0.2126×R + 0.7152×G + 0.0722×B(各チャンネルは実際のsRGB伝達曲線を使って事前にガンマ補正されます)。そしてそれを公式のコントラスト比計算式((明るい方のL + 0.05) / (暗い方のL + 0.05))に当てはめます。要素自身のfont-sizeとfont-weightが、より厳しい「通常テキスト」の閾値か、より緩やかな「大きいテキスト」(18pt以上、または14pt以上の太字)の閾値かを決定し、結果は4つの実際のWCAG数値すべて(AAは4.5:1と3:1、AAAは7:1と4.5:1)に対して即座にチェックされます。単一の偽の良否判定に丸められることは決してありません。
これは、包括的なアクセシビリティ監査の、意図的に正直で実用的なサブセットであり、認証ツールではありません。JavaScriptによるインタラクティビティ、基本的なラベリングを超えたARIAウィジェットパターン、キーボードのフォーカス順序、あるいはページの実際のレンダリングと実行を必要とするものは評価しません。公開前のページにおいて、最も一般的で結果が重大なWCAG失敗(altテキスト欠落、ラベルなしフィールド、壊れた見出し階層、低コントラストテキスト、曖昧なリンク)を素早く見つける最初のパスとして扱ってください。本番環境に公開するものについては、完全な手動レビューまたは専用の監査ツールと「併用」し、「代用」しないでください。