CastingONEにおけるWebアクセシビリティ向上ことはじめ

はじめに

株式会社CastingONE でフロントエンドエンジニアをしている山下です。
最近は しんぱち食堂 にハマっています。

弊社では昨年から Web アクセシビリティ向上、浸透に関する取り組みを行ってきており、今回はその取り組みに関して紹介していきたいと思います。
組織や個人でアクセシビリティを向上したいけど何から始めたらいいかわからないといった方の参考になれば幸いです。

きっかけ

近年のアクセシビリティの盛り上がり、アクセシビリティに関するイベントや技術本の出版などが増えてきたことからメンバー各々が興味を持ってキャッチアップは行っていました。
そんな中、以下の理由をきっかけにアクセシビリティ向上の取り組みがスタートしました。

• Nuxt.js から Next.js へのリプレイスが始まり、これを機に今までの課題を改善したかったこと
• 社内初のデザイナーの Join
• 筆者の Join（前職でアクセシビリティ向上に関するリード経験あり）

課題と方針

元々弊社アプリケーション内では UI コンポーネントライブラリ（ MUI ）を使用しており、あまりアクセシビリティを意識しなくても自然と担保される部分がいくつかありましたが、知識がないことから用意されているアクセシビリティに関する機能が活かせていなかったり、セマンティックなマークアップ、WAI-ARIA の効果的な使用ができていなかったりと、課題はたくさんある状態でした。

また、メンバーも断片的な知識は持っているものの体系的な知識を得ているわけでなかったため、学習ステップとして週に1時間の勉強会を設けることにしました。
（ちなみに弊社では現状週に2.3本の勉強会や読書会が常に開催されています。すごい）

個人的に経験から WCAG のガイドラインでの各項目を背景や実例とともに理解することが重要だと考えてますが、いきなり WCAG ガイドラインを読むというのは文章が固く、量も多いためハードルが高いです。
そこで、freee 社が公開してくださっているアクセシビリティチェックシート を用いて実際に検査をしながら理解を深める方向を考えました。

https://a11y-guidelines.freee.co.jp/checks/index.html

また、その場合でも前提知識が足りず理解が進まなくなる懸念を感じたため、

アクセシビリティの概要を理解するステップ → 実際にアクセシビリティ検査をしながらガイドラインの理解

という流れで進めることにしました。

一旦の目標としていきなりガイドラインを設けるなどの難易度の高い目標は設定せず、「少しでもできることを増やす」「仕様策定時やレビューの際にアクセシビリティ観点でもフィードバックできるようにする」を目指してスタートしました。

読書会

まずアクセシビリティの概要を理解するステップとして Webアプリケーションアクセシビリティ――今日から始める現場からの改善 の読書会を開催しました。

https://gihyo.jp/book/2023/978-4-297-13366-5

第1章の「アクセシビリティとは」には各支援技術、WCAG、取り巻く環境、法的面ととても概要把握が進む内容であったため、範囲は第1章とし、読み終えた時点でアクセシビリティチェックに移ることとにしました。

流れとして適時感想を言い合ったり、各々持っている知識のシェアを挟みながら進めました。

特に個人的には普段目にしない入力インターフェースや OS 上での支援技術が紹介されておりとても勉強になりました。
こういった支援技術を知ることでなぜマシンリーダブルにすることや UI 上での表現方法が大事なのか理解できるので大切に感じます。

アクセシビリティチェック

前述の通り、freee 社のアクセシビリティチェックリストを使用させて頂きました。

検査方法として

• 「プロダクト」のシートを使用
• 1人1ページをアサイン
• 検査結果がNGの項目は Issue 化

といった方法で進め、ただ検査を進めていくだけでなく Why の理解も進めたかった為、

項目の確認 → 背景、理由の確認 → それでもわからなければ WCAG の確認 → 検査 → 不明点や知識のシェア

といった流れで進めていきました。

freee 社のチェックリストは参考情報も記載してくださっている為、この辺りの確認がとてもしやすかったです。

結果として、参加者計7人、計7ページで上がった Issue が合計100程度、検査に要した合計時間は6時間ほどとなりました。

ちなみ以下イベントの freee 社のアクセシビリティチェックリストを用いた検査のハンズオンがとても参考になるため、検査の流れを掴みたい方にはおすすめです。（イベント関係者の方にお礼申し上げます。）

https://wpzoom.connpass.com/event/216009/
https://www.youtube.com/watch?v=sv5zvQnR9_s&t=5794s

取り組みによる成果

こういった取り組みから

• セマンティックに HTML を書く重要性
• 各 HTML エレメントの標準仕様の理解
• マシンリーダブルにする重要性

などの理解が進みアクセシビリティを意識した実装、会話が明らかに増えました。

スクリーンリーダーで確認する癖も各メンバーから見られ、直近の新機能リリースではアクセシビリティを意識して実装されていたりと自分自身とてもやって良かったなと感じています。

これから

現状は学習ステップを踏んだ段階の為、洗い出した Issue の消化でより実践を行い、運用として Linter などでの機械的チェックを入れたりとやれることはまだまだあるため、1つ1つ進めていきたいなと思っています。

おわりに

今回は弊社で行った取り組みについて紹介させて頂きました。

freee 社のアクセシビリティガイドライン、チェックリストは個人的に前職からずっとお世話になっており、作成、更新に関わってくださっている皆様には本当に感謝しかありません。
この場を借りてお礼申し上げたいと思います。

今回の紹介で何から始めればいいか悩んでいるといった方の参考になれば幸いです。

弊社ではメンバーを大募集しています。
カジュアル面談もやってますので、お気軽にご連絡ください！

https://www.wantedly.com/projects/836878
https://www.wantedly.com/projects/1283256