Ubie株式会社でデザインエンジニアをしているtakanoripです。
年の瀬なので今年取り組んだアクセシビリティ向上の施策について振り返りつつ来年の展望を考えようかなと思います。12月19日に公開された @3284 の記事もあわせて読んでみてください。
アクセシビリティ向上にむけた実装の改善
去年からアクセシビリティ向上のための実装改善を進めていたのですが、今年の前半で一旦完了となりました。全ての不具合を修正できてはいませんが、プロダクトを利用する上でクリティカルな問題は全て解消できました。
Lintの導入
toCプロダクトにeslint-plugin-jsx-a11yとmarkuplintを導入しました。
Ubieはフロントエンドが得意でないエンジニアがUIを実装することが多いので、Lintでエラーや警告を出すことで最低限のアクセシビリティ品質を担保するためにLintを導入しました。けっこうたくさんエラーが出てしまったのですが、業務委託のエンジニアの方々に助けられながらなんとか導入することができました。
視覚障害者の方を対象にしたユーザビリティテストの実施
プロダクトのアクセシビリティがどの程度担保されているかを確認するため、視覚障害者の方々にご協力いただきユーザビリティテストを実施しました。テストの結果、プロダクトのメイン機能がスクリーンリーダーで問題なく利用可能であることが確認できました。
全盲の方に触っていただくことで自分たちでは気づけなかった問題点に気づけたのも大きな収穫でした。
テストの詳細については下記の記事にまとめています。
アクセシブルなコンポーネントの実装および浸透
継続的なアクセシビリティ改善の一環としてアクセシブルなコンポーネントの開発と実装の置き換えを行いました。まだまだ実装途中ではありますが、少しずつ既存実装を置き換えています。
2022年は下記コンポーネントを作成しました。
- Header
- Button
- Action Modal
- Message Modal
- Select
- Collapse
2023年も継続してアクセシブルなコンポーネントをつくっていきます。
アクセシビリティガイドラインの作成
アクセシビリティチーム外のメンバーがアクセシビリティについて理解できる環境づくりの一環として、社内向けのアクセシビリティガイドラインを策定しました。なぜアクセシビリティに取り組むのかや目指す水準などを記載しています。
とくにコーポレートサイトなどのウェブサイトはデザイナー以外のメンバーが更新することも多く、公開前のチェックでガイドラインを参照してもらうことにより「アクセシビリティ改善したのにまた悪くなってる」みたいなイタチごっこから抜け出すことができました。
アクセシビリティレビューの仕組み化
継続的にアクセシビリティチェックができる開発体制を目指してアクセシビリティレビューを開発フローに導入しようとしています。まずは試験的に特定のチームにレビューを導入していて、どうすれば開発速度を落とさずにアクセシビリティを担保できるかを模索しています。
この取り組みの詳細はこちらの記事をチェックしてください。
来年の展望
来年はアクセシビリティの全社浸透にむけて動いていきたいなと思っています。
今年は最低限のアクセシビリティ改善やガイドライン、レビューなどの仕組みを整えてきたんですが、「アクセシビリティチームが取り組んでいること」を脱せなかったなと感じています。土台をつくるところまではそれで良かったんですが、継続的なアクセシビリティ改善をやっていくにはアクセシビリティチームの力だけでは難しくチーム外の人たちも巻き込んで動かなければなりません。
そのために来年はチーム外のメンバーにむけてもっとアクセシビリティ改善をやる意義やアクセシビリティの基礎知識などを浸透させていかないといけないなと考えています。具体的な方法はこれから考えますが、社外向けの発信にも力を入れていきたいです。
おわりに
今年は土台を整える年だったので、来年は今年つくった土台をもとにUbie全体のアクセシビリティ向上をさらに加速させていきたいです！来年もよろしくお願いします！
継続改善も引き続きやっていきます！
Discussion
こんばんは
非常にためになる記事でした、ありがとうございます。
記事内で、eslint-plugin-jsx-a11yとmarkuplintの両方採用したとありましたが、機能的に競合しそうだなと思いましたが、それぞれどのような使い分けなのかご教授頂けると嬉しいです🙇🙇
最初にeslint-plugin-jsx-a11yを導入したんですが、カバーしきれない部分があったのでmarkuplintを後から導入しました。役割は似ていますがeslint-plugin-jsx-a11yでしか検知できないもの（mouse-events-have-key-eventsなど）もあるので現状両方入れたまま運用しています。
そういうことでしたか
ありがとうございます！