検査用ブックマークレット
検査専門家の検査時のノウハウの詰まった、検査に便利なブックマークレットをご紹介します。
問題を見つけるだけでなく、問題の可能性のある箇所を指摘する機能が含まれています。
これらをドラックアンドドロップするなどして、ブックマークに登録してください。あとは、検査したいページで、その登録したブックマークを選択するだけです。各々のブックマークレットが実行されます。
ブックマークレット
見出し関連
- [見出し]
このブックマークレットは、ページ内のh1〜h6とrole="heading"＋aria-levelによる見出しを検出し、H1、H2 ARIAのようなラベルを表示します。
最初の見出しがH1ではない場合や、見出しレベルが飛んでいる場合は!付きで強調します。
さらに、見出しではないものの、太字・大きめの文字・短いテキスト・句読点で終わらない・strongやbが使われている、などの条件から見出しの可能性がある箇所を[見出し?]として表示します。
ナビゲーションや単純な箇条書きなどは過剰検出しにくいよう調整しています。もう一度実行すると表示を消せます。
リスト関連
- [リスト]
このブックマークレットは、ページ内のul、ol、dl、li、dt、dd、navと、role="list"、role="listitem"によるリスト構造を検出し、枠線とLv1 nav、Lv2 ulなどのラベルで表示します。nav、ul、ol、dl、role="list"については、入れ子の階層が分かるようにLv1、Lv2のようなレベルも表示します。
さらに、リストではないものの、同じ親要素の中に似た要素が3つ以上縦に並んでいる、左端が揃っている、リンクやボタンを含む、記号や番号で始まる、などの条件からリストの可能性がある箇所を[リスト?]として表示します。
ページ全体や大きなレイアウト構造、見出し、既にリスト・表・フォームとして構造化されている箇所は、過剰検出しにくいよう調整しています。もう一度実行すると表示を消せます。
（2026/6/15 より問題を検出するようにしました)
色関連
- [カラーコントラストチェック]
このブックマークレットは、画面キャプチャーなどで保存したローカル画像をブラウザで開き、その画像上で指定した色を基準にして、コントラストが不足している可能性のある箇所を可視化します。
画像ファイルをブラウザで直接開き、URLが file:// になっている状態でブックマークレットを実行すると、Readable Check の画面が開きます。画像上で基準にしたい色の位置をクリックすると、その色を起点として即座にコントラストチェックを実行します。
判定閾値は 3.0:1、4.5:1、7.0:1 から選択できます。基準色とのコントラスト比が選択した閾値を下回るピクセルは、基準色で塗り替えて表示します。これにより、文字色と背景色、アイコンと周囲の色、図版内の色の組み合わせなどで、見分けにくい可能性がある箇所を視覚的に確認できます。
結果は画面上で確認できるほか、PNG画像として保存できます。検査員が利用者やお客様に対して、どの部分が読みにくい可能性があるのか、画像を見せながら説明する用途に使えます。
[クリア] ボタンを押すと判定前の画像表示に戻り、別の基準色で再度確認できます。HTTP/HTTPSのWebページ上では動作せず、ローカル画像を対象とすることを明示します。もう一度実行するか、Escキーを押すと表示を閉じられます。
いずれのブックマークレットも検査の補助的なものとしてご利用ください。常に検出には過大なあるいは過小な評価が含まれます。必ず人の目による判定が必要です。