こんにちは！
LINEギフトのフロントエンド開発をしているKeishima（@pittanko_pta）とYamamotoです。
この記事では、LINEギフトにおけるアクセシビリティ改善の取り組みについてご紹介します。
LINEギフトについて
LINEギフトは、LINEの友だちにギフトを贈ることができるサービスです。
友だちの誕生日プレゼントから会社の同僚へのお礼のギフト、結婚・出産祝い等の本格ギフトまで、さまざまなシーンでご利用いただけます。
2023年の5月時点では累計ユーザー数が3,000万人を突破しました。老若男女を問わず多くのユーザーにご利用いただいており、アクセシビリティの高い サービスを提供することは私たち開発者にとって重要なミッションとなっています。
より詳しいサービスの説明については https://linegift.line.me/ をご覧ください。
実際の取り組み
社内のアクセシビリティ講義とワークショップ
合併前のLINE株式会社時代はUITと呼ばれるフロントエンド横断組織があり、そこでAccessibility Boot Campという取り組みを実施していました。
UITのアクセシビリティチームから、毎月アクセシビリティに関する講義が行われ、各プロダクトの担当者はその講義の内容に基づいて、実際のプロダクトの課題をチェックしていくというものです。
図：社内のアクセシビリティチェックの例
※ https://speakerdeck.com/lycorptech_jp/fukuoka-a11yconf-ly-corpration より引用
この取り組みでは課題を見つけることに重点をおき、実際の解決はスコープ外としています。
そのため、LINEギフトでも既存課題に気づくことができましたが、実際に解決することはできませんでした。
ですが、さらなる新規課題を作らないようにするという意識が大きく高まりました。
仕様の設計段階からアクセシビリティに関する問題がないかをチェックするようになったり、管理画面で画像を入稿する場合に、スクリーンリーダーが読み上げるための代替テキストを入力する機能を実装するなど、具体的なアクションにもつながりました。
結果的に、Accessibility Boot Campを通じてチームのアクセシビリティ意識が大きく高まることとなりました。
Lighthouseスコアの改善
Accessibility Boot Campの次に行ったのはLighthouseスコアの改善です。
Lighthouseでは各種パフォーマンスと同様に、アクセシビリティについてもスコアとアドバイスを出してくれます。
私たちは、このスコアに着目して、主要ページのLighthouseアクセシビリティスコアを80点以上に改善、または平均点82点以上とすることを2023年下期の目標として改善を進めました。
前述のAccessibility Boot Campで見つけた課題を修正して、その後のLighthouseのスコアを確認することを繰り返すことで、効率的に改善を進めることができました。
VoiceOver読み上げ改善
実際に支援技術を使った改善にも取り組んでいます。
開発者自身で支援技術を使ってLINEギフトを操作し、操作できない点、操作はできるが使いにくいと感じる点、読み上げ内容が不親切な点など、課題を見つけて修正しています。
LINEギフトを利用する端末はiPhoneが一番多いため、iOSのVoiceOverを使って検証することが多いです。
これらの改善はリファクタリングに近く、開発者主導でスピード感をもって進行しています。
また、支援技術の利用経験が乏しいメンバーに向けて使い方を学習できるドキュメン トも作成し、1回10分〜15分程度のミニ勉強会を開催することで、チームメンバー全員が支援技術を使った検証ができる体制を整えています。
改善事例の社内展開
他にも、アクセシビリティ改善を開発者以外の関係者にもわかりやすく説明した「LINEギフトアクセシビリティ通信」というもの社内向けに展開しています。
アクセシビリティ改善はどうしても地味な内容が多くなりがちなため、改善したことを能動的に発信していくことが重要になります。
全体定例などの場で実際の改善をアピールすることで、関係者にアクセシビリティ改善の意義を理解してもらうことを狙っています。
また、LINEギフトにおけるアクセシビリティ改善の事例を社内に横展開することで、他のプロダクトにおけるアクセシビリティ改善の一助になることも期待しています。
図：改善事例を社内展開したときの様子
VoiceOverを使っているユーザーがLINEギフトの宛先選択画面で友だちを選ぶとき、1人に対して2回読み上げを行ってしまう問題がありましたが、これを改善しました。
図：改善事例を社内展開したときの様子
残りのステップ表示のうち、1番目にある「決済完了」はすでに終了しているのでグレーになっています。
しかし、彩度を落とすと残りの2つとパッと見で区別がつきにくくなることがわかりました。
1の数字をチェックマークとすることで、完了していることを色だけで表すことがなくなり、わかりやすさを向上させました。
実際に改善をしてみて思ったこと
アクセシビリティ改善というと多岐にわたりますが、できるところから小さな改善に取り組んでいます。
限られたリソースの中でも、小さな実績を積み重ねることがさらなる改善につながったりするので、継続することの大切さを感じています。
また、チームで取り組む重要性も実感しています。個人でもアクセシビリティ改善はできますが、それは持続可能な改善にはなりません。
LINEギフトでは、課題を修正するためのタスクを切り出し、チームメンバー振り分けながら、チーム全体で改善に取り組んでいます。
アクセシビリティ改善は決して難しいことではなく、少しだけ手を差し伸べるだけで、チームメンバーが自立して改善に取り組んでくれています。
残 っている課題と今後の展開
アクセシブルなサービスの提供に向けて着実に前進しているものの、まだまだやりたいことはたくさんあります。
- 単体テストでのアクセシビリティのチェック
- CIでLighthouseのスコアをチェックし、下がったら通知する仕組みづくり
- アクセシブルなUIコンポーネントの整備
- AndroidのTalkBackでの読み上げ改善
- コントラスト比の低い箇所の改善
- 商品画像に代替テキスト（altテキスト）をつける仕組みづくり
今挙げた中にはエンジニアだけでは解決できない課題もあり、企画担当者やデザイナー、出店している店舗様など、多くの関係者の協力が必要です。
そのためには、各関係者にアクセシビリティの重要性を理解してもらい、少しでも当事者意識を持ってもらうことが必要だと考えています。
そこで現在、全盲やロービジョン（色覚多様性・弱視・視野狭窄など見えにくい状態の総称）の方とのユーザーテストを計画しています。
テストを通じて気づいた課題や当事者の声をLINEギフトに関わるメンバーに共有することで、アクセシビリティの意識をより広く深くLINEギフトの組織に浸透させることができると考えています。
どのレイヤーでもアクセシビリティを意識できるようになった先には、よりアクセシブルなサービスを提供できる未来があると信じています。
おわりに
この記事では、LINEギフトのフロントエンドチームで行っているアクセシビリティ改善の取り組みについてご紹介しました。
1人でも多くのユーザーに気軽にギフトを贈りあえる体験をお届けできるよう、LINEギフトでは引き続きアクセシビリティの改善を続けていきます。
最後になりますが、私たちの組織では一緒にプロダクトの開発やアクセシビリティ改善に取り組んでいく仲間を募集中です。