もう 2 年くらい前ですが、お仕事でアクセシビリティ試験を実施する際に個人的に作って使用しているブックマークレットをまとめたものを、GitHub リポジトリで公開しました （下記参考記事）。
基本は自分で使うものだし、特に不便はなかったので大きな変更もなく放置していたのですが、ふと思い立って、ちょっとだけ使いやすくするために各ブックマークレットの v2 を作ったり、新しいブックマークレットを追加したりしましたので、あらためて紹介しておきます。
公開されているブックマークレットは下記の通りです。
- image-alt-attribute-checker （画像の代替テキスト可視化）
画像の代替テキスト （alt 属性値） の確認を支援するためのブックマークレット （アップデート） - focusable-element-checker （フォーカス可能な要素を可視化）
フォーカス可能な要素の確認を支援するためのブックマークレット （アップデート） - show-heading-level （見だしレベルを可視化）
見だし要素 （h1～h6） のレベルを表示するブックマークレット （アップデート） - non-html-link-highlighter （PDF などへのリンクを検出）
PDF ファイルなど、リンク先が HTML ではないファイルへのリンクを検出し、そのリンク先の拡張子を表示するブックマークレット （アップデート） - header-cell-scope-indicator （見出しセルの見だし方向を可視化）
見だしセル（th 要素）の scope 属性値を表示するブックマークレット （新規追加） - force-focus-outline （強制フォーカス可視化）
フォーカスインジケータを強制的に表示するためのブックマークレット （新規追加）
「アップデート」 となっているものは、機能はそのまま、少し仕様を変えました。
具体的には、以前のブックマークレットは、一度実行したら、その表示をリセットするためにページを再読み込みするっていう形にしていたのですが、ブックマークレットを再度実行すればページを再読み込みしなくてもリセットされるようにしました。
また、以前は実行した Web ページの HTML に style 属性を書き込んでいたんですけども、ブックマークレットを実行した状態で開発者ツールから HTML をコピーすると、当然ながらブックマークレットが書き込んだ style 属性もコピーされて邪魔だったので、スタイルシートは外部から読み込むようにして、HTML には変更を加えないようにしています。
「新規追加」 となっているものは、今回にあわせてリポジトリに追加したものです。
ちなみに、「force-focus-outline （強制フォーカス可視化）」 については、直接的にアクセシビリティチェックのためということではありません。
チェック対象の Web サイト側で :focus に対して outline: none; が指定されていてフォーカスが可視化されていない場合に、今までは開発者ツールを開いて、当該スタイルを探し出して無効にするっていう作業を都度してたんですが、地味に面倒くせぇってことで、それを強制的に解除するブックマークレットを追加したものです。
それぞれのブックマークレットの説明はリポジトリにある README.md を読んでください。
ブックマークレットの登録方法
一応、ブックマークレットの登録方法について説明しておきます。ブラウザによって多少の差異はあると思いますが、ブラウザへの登録は基本的には以下の手順で行えます。
- ブラウザの 「新規ブックマークの登録ダイアログ」 を表示
- 「名前」 欄に任意のブックマークレット名 （例えば 「見出しレベルを表示」 など） を入力
- 「URL」 欄に各ブックマークレットの説明ページからコピーした JavaScript （
javascript:から始まるソースコードすべて） を入力 - 上記を入力後、ブックマークを保存 （ブックマークツールバーなどに保存すると使いやすいです）
登録が完了したら、ブックマークレットを実行したい Web ページを開いた状態で、保存したブックマークをクリックするとスクリプトが実行されます。
なお、ブックマークレットを実行する Web ページの仕様などによっては表示が正しく行われなかったり、一部表示が崩れたりする場合もありますが、その場合はもう相性問題だと思っていただき、諦めて本ブックマークレット以外の別の方法を利用してください。
