完璧なアクセシビリティチェックリストを作ろうとして頓挫した話

この記事は セゾンテクノロジー Advent Calendar 2024 18日目の記事です。
シリーズ2は HULFT10 のエンジニアによる投稿をお届けします。

こんにちはこんにちは。Qiita初投稿です。まだ空気感がよくわかりません。前置きとかは特にいらない文化のようですね。

今回のHULFT10のリリースにあたり、主にAPI GatewayのUI設計に携わりました。
その際のWeb UIの導入に伴い、Webアクセシビリティへの配慮を検討しました（実際には取り入れるまではできなかったのですが)。
元々弊社ではオンプレ版の製品が中心のためWeb UIを持つ製品が少ないのですが、昨今のクラウドネイティブ対応、ウェブアプリ化、UXデザイン、ユニバーサルデザイン、サステナビリティ等々といった今どきのワードの圧力を受けて、アクセシビリティへの対応を求められています。

逆にこれはウェブ系の知見に乏しい弊社にとっていい機会ですので、ここはひとつ最新の情報を取り込んだいい感じのアクセシビリティチェックリストを作って、誰でも（そこまでアクセシビリティに詳しくなくても）チェックできるようにしたいなと意気込んでみちゃったわけです。

やってみた（けどうまくいかなかった）こと

考えていた要件はこんな感じ

• WCAG2.2のAAに準拠
• チェック作業担当者はそれほどアクセシビリティに詳しくない人を想定
• ウェブアプリにも、ウェブサイトにも使えるように
• どの工程でのチェックにも対応できるように（企画・設計後、デザイン後、実装後…）
• 具体的なチェック方法が書かれている
• いい例・悪い例が図解されていると良い
• なるべく自動化したい。基本はチェックツールを使う。
• どうせならきちんと規格に準拠したと検査結果を公表したい

アクセシビリティの実践に詳しい方ならすでに破綻の匂いがしているかもしれません。今考えるとかなり無茶な内容でした。

チェックリストを作ろうとして、実際に直面した問題は次のようなものです。

• まずWCAGの項目をリスト形式にまとめたいが、デジタル庁が公開しているチェックリストはWCAG2.0までの内容までしかない。2.1、2.2で追加された項目はとその説明は自力で追加しなけれればならない
• AAまでの対応としたいが、内容的にAAAも考慮しなければならない項目もある
• 同じページをチェックしていても複数の達成基準に影響するものがある
• 企画・設計後、デザイン後、実装後、どの段階でもチェックできる場合、どこでチェックするべきか迷う（全てでチェックは冗長）
• 某団体のサイトで、総務省が提供する「miChecker」でまずチェックしてそれを元に手作業で確認、という手順が公開されていたのでやってみたが、このツールの使い勝手が悪く、チェックが進まない（有識者の皆様に確認したところ現場ではほぼ使われていないとのこと）
• ツールに頼れないとなると、すべての項目をやるには時間がかかりすぎる→100ページ程度のサイトで正式な試験を行うと1ヶ月弱（『ウェブアクセシビリティ導入ガイドブック』より）
  • まずはやってみよう、という段階で、ここまでのリソースはかけられない
• 同じくツールに頼れないと基本的なウェブ制作やアクセシビリティの知識がないとチェックが難しい

具体的にどうやってチェックする？

やはり難しいのが、具体的なチェック手順を誰でもわかるようにまとめるというところでした。
どういったツールを、どのように操作して、ここに表示されるこの部分を確認します。こうなってればOKです！みたいになっていればいいのですが、チェックしていくとどうしても判断が難しいところが出てきます。
この文脈だったらaltはこれでもOK？とか
コントラストのチェックにひっかかるけどこの大きさだったらOKだよね、とか。
それはやはりある程度ウェブ制作とアクセシビリティの知識がないと難しいです。

理想としては、特定のアクセシビリティ担当者がチェックするのではなく、各プロダクトの担当者が日常的にチェックできるようにしたい。
すべて他人に任せるとチェック結果だけ受け取ってふ～んになりがちなので、とにかく自分ごととして捉えてもらえるようにしたいという思いがありますが、なかなか難しい

いつのまにかチェックリストを作ることが目的に

などと考えていると、いつのまにかチェックリストを作ることが目的になっていました。
目的はプロダクトを改善することのはず！
ここはぐっとハードルを下げて、手を付けやすい、簡易的なものにする方向に舵を切りました。
（他社様がよく独自のチェックリストを作って公開している理由がわかってきました）

どういった基準で項目を絞り込んでいくべきか、と調べたところ、やはりデジタル庁のウェブアクセシビリティ 導入ガイドブックが事例の図解もあり簡潔にまとまっており、これを利用させていただくことにしました。

アクセシビリティ基準に準拠しました！とか言うことはできないけど、とにかく手を付けていかないことにはどうにもならない。

項目を絞り込むことによって、チェックのために必要な知識のハードルも下がったと思います。
まずは各担当にやってみてもらう、わからない部分はレクチャーする、それでも難しそうな部分は専門の担当が判断する、みたいな流れでまずはいいのかなと。
いずれは各担当だけで対応できるようになったり、チェックリストもさらにブラッシュアップしていければいいなと思います。

ウェブアクセシビリティ導入ガイドブック　チェックリスト版

というわけで、「ウェブアクセシビリティ 導入ガイドブック」をチェックしやすいようExcelにまとめ...たのですが、諸事情によりキャプチャのみの共有です

出典：「ウェブアクセシビリティ導入ガイドブック」（デジタル庁）を加工して作成

基本的にはExcel形式にまとめ直しただけですので、皆さまで使いやすいように作れるかなと思います。
ライセンス的にはPDL1.0で自由に改変・利用できるということでしたので、具体例の図解などもキャプチャしてありがたく使わせていただいております。

今回は導入ガイドブックの3.1（重大）と3.2（必須）の17項目を対象としました。
チェックするタイミングはひとまず完成した成果物に対するチェックを想定しています。

まとめ

• 完璧を目指さない
• とにかくチェック作業に着手して現実を知る

まずはできるところから、って自分も昔から言ってきたはずなんですけどね。なにか作業を進めるうちに近視眼的になっていた気がします。

皆様の参考になれば幸いです。ではまた。