アクセシビリティチェック（試験）で補助的に使えるブックマークレット集のご紹介

ブックマークレット（Bookmarklet）というのは、主にユーザーがウェブブラウザ（例えば、Microsoft Edge や Google Chrome のような）のブックマークから起動して、閲覧中のウェブページなどに対して何らかの処理をするようなプログラム（JavaScript）を指します。

弊社では、業務上、お客様のウェブサイトに対してアクセシビリティチェック（試験）を頻繁に実施します。

アクセシビリティチェックは、弊社のアクセシビリティ専門家が、実際のウェブサイトを閲覧、操作したり、ソースコードなどを確認しながら進めていきますが、その際、作業を補助してくれるいくつかのツールを使用します。

代表的なものとしては、axe（axe DevTools / アクセシビリティチェックツール）や、ウェブブラウザの開発者ツール、さらにコントラスト比チェックツール（後述）、W3Cが提供する Nu Html Checker（HTML 構文チェックツール） など、複数のツールを組み合わせて使用していますが、ブックマークレットについても、頻繁にチェックする項目の確認作業を楽にするため、補助として使用しています。

今回は、弊社がアクセシビリティチェック（試験）の実施時に補助的に使用しているブックマークレットをご紹介します。

これらブックマークレットは、どなたでも利用可能なように下記の GitHub リポジトリで公開しています。

• アクセシビリティ試験の際に補助的に使えるブックマークレット集

リポジトリの公開自体は2年ほど前からしておりましたが、今回、既存のブックマークレットには以前よりも少し使いやすいように変更を加え、さらに新規のブックマークレットも追加しましたので改めましてのご紹介となります。

なお、リポジトリでは複数のブックマークレットが公開されていますが、それぞれのブックマークレットの詳しい使用方法などにつきましては、リポジトリ内の説明文（README.md）をご確認ください。

公開しているブックマークレット

現状では、以下のブックマークレットを掲載しています。

• 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（強制フォーカス可視化）
  フォーカスインジケータを強制的に表示するためのブックマークレットです。

ブックマークレットの登録方法

使用方法につきましては、各ブックマークレットの README.md をご覧いただければと思いますが、お使いのウェブブラウザへの登録は以下の手順で行えます（ブラウザによって多少の違いがありますので、実際にお使いのブラウザでご確認ください）。

1. ブラウザの「新規ブックマークの登録ダイアログ」を表示
2. 「名前」欄に任意のブックマークレット名（例えば「見出しレベルを表示」など）を入力
3. 「URL」欄に各ブックマークレットの説明ページからコピーした JavaScript（javascript: から始まるソースコードすべて）を入力
4. 上記を入力後、ブックマークを保存（ブックマークツールバーなどに保存すると使いやすいです）

登録が完了しましたら、ブックマークレットを実行したいページを開いた状態で保存したブックマークをクリックすると、スクリプトが実行されます。

なお、ブックマークレットを実行するウェブページの仕様などによっては表示が正しく行われなかったり、一部表示が崩れたりする場合もありますが、その場合は本ブックマークレット以外の、別の方法をご検討ください。

---