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

アクセシビリティ試験を実施する際に個人的に使用しているブックマークレットをひとまとめにして GitHub に公開しました。アクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。

お仕事でアクセシビリティ試験を実施する際に個人的に作って使用しているブックマークレットがいくつかあるんですが、あくまで個人的に使うだけだったので適当に手元のエディタで書いて、動かしてって感じで済ませて長い時間が経っていました。

つい最近ですが、これらブックマークレットを少し手直しをした際に、いい機会なので Git で管理するようにしましたが、折角なので公開しようと思います。

個人で使っているものなので適当な感じですし、私が便利と思って使ってるだけで、もしかすると汎用性は低く、多くの方にとっては大した役には立たない可能性もありますが、私がアクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。

アクセシビリティ試験について、メインのツールとしては axe (axe DevTools) を使用していますし、これにブラウザのデベロッパーツールや、Colour Contrast Analyzer (CCA)Nu Html Checker など、複数のツールを組み合わせて実施していますが、今回公開したブックマークレットはこれらに合わせて、ちょっとした確認事項の補助に使っています。

例えば、

  • 画像に代替テキストちゃんと付いてるかな、逆に代替テキスト不要なところに余計なもの入ってないかな、とか簡単に確認したい
  • 見出し要素がどういう風に使われているか確認したい (見出しレベルの順番がおかしくない? とか含めて)
  • キーボード関連の試験のため、フォーカス可能な要素を一覧表示しておきたい
  • リンク先が PDF とか、通常の Web ページ以外になっているリンクを確認しておきたい

みたいなことがあるんですが、この辺をいちいちソースコード読んで確認していくと面倒なので、ひとまず当たりを付けるためにブックマークレットで補助してもらうみたいな使い方をしています。

それぞれのブックマークレットの説明はリポジトリにある README.md を読んでください。

ところでめちゃくちゃ久しぶりに Blog を更新しました。あまりに書かなすぎてほぼ休眠状態になってる本 Blog ですが中の人は元気です。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?