この記事は 「アクセシビリティ Advent Calendar 2023」 1日目の記事です。
毎年、年末恒例のアクセシビリティ Advent Calendar。自分の感覚では毎年参加させていただいて、何かしら書いている気がしていたんですが、昨年は書いていなかったらしく...... 多分なんか忙しかったんでしょうね。
で、毎度なるべく初日に近い方に書いて、ハードルが上がらないうちに逃げ切る作戦（謎）をとらせていただいているのですが、今年は僭越ながら初回の記事を書かせていただきます。
ということで、本題。
アクセシビリティ試験を実施している際に、Web ページ上で使用されている色のコントラスト比を調べるって作業は頻繁に発生します。
その際、事前にデザインガイドラインとか、試験対象の Web サイト内で使用されている色、もしくはその使用ルールを定めたドキュメントが提供されている場合であれば、それら Web ページで使われているであろう色のすべての組み合わせでコントラスト比を最初に確認しておけば楽なんでは？ と考えました。
で、早速そういうことができるツールを作ってみました。ツール自体はしばらく自分で使っていて、まぁある程度便利かなと思ったので、少し見た目とか、使い方の説明みたいな人様に見せても大丈夫なように改修した上で公開したので、ここで紹介します。
今回公開した Color Contrast Auto Checker は、コントラスト比をチェックしたい色をあらかじめ選択し、それら選択した各色の組み合わせのすべてをワンクリックで簡単にコントラスト比チェックできるオンラインツールです。
例えばデザイナーさんとかがデザインを考えてて、「このカラースキームで行こうかな」 と思った時に、それら色とテキスト色なんかで使いそうな色 （例えば基本のテキストカラーである黒系とか、白抜き文字で使いそうな白とか） をまとめて登録してチェックすれば、この色とこの色の組み合わせは大丈夫だけど、これとこれは （アクセシビリティ的には） 問題がありそうなのね。みたいなことが簡単に調べられるんじゃないかなと思います。
もちろん、デザインツールの中には同様の機能を持ったものもあるかもしれないので役に立つかはわかりませんが、もし便利そうと思ってもらえたら試してみてください。
過去に公開しているアクセシビリティ関連ツール
もうかなり前ですが、カラーコードをコピーしてコントラスト比のチェックもできるツールを作って公開しています。このツールのメインは、よく使うカラーコードをコピーするのを楽にしたいっていう用途だったんですが、補助機能としてコントラスト比チェックの仕組みも付けています。
- Color Palette and Contrast Checker - カラーコードコピー&コントラスト比チェックツール
- 参考 カラーコードをコピーしてコントラスト比のチェックもできるツールを公開しました
続いて、こちらはつい最近書いた記事ですが、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプト 「axe-auto-reporter」 を GitHub で公開しています。
最後に、こちらはツールって感じではないんですが、アクセシビリティ試験の際、個人的に使用しているブックマークレットをひとまとめにして GitHub に公開しています。アクセシビリティ試験時によく確認する項目について、それを補助するようなブックマークレット集になっています。
- burnworks/a11y-test-assist-bookmarklets: Collection of bookmarklets to assist with accessibility testing
- 参考 アクセシビリティ試験で補助的に使えるブックマークレット集
ということで、アクセシビリティ Advent Calendar 2023 1日目の記事を終わります。明日以降を楽しみにしております。
