(中野さん）よろしくお願いします。
今日は「障がい当事者の声で、プロダクトをUPDATE」という内容で
弊社の社内ツールのアクセシビリティを改善した事例紹介を行います。
はじめに自己紹介です。中野信といいます。
ヤフー株式会社という会社で、広告事業のUIデザインとプロモーションに携わっています。
その傍ら、ウェブサービスとアプリのUIのガイドラインを運営する組織で
アクセシビリティの向上や啓発の活動を行っています。
プライベートでは、子供が二人いて、仕事以外の時間はほぼ育児をしています。
さて、今回のセッションですが、普段社内で何気なく使っているツールに使うにくさを感じるユーザーがいるかもしれない、
というところに耳を傾けて、エンジニア、デザイナー、当事者で問題を改善したという話を紹介します。
まずは話の経緯です。
なぜ今回の話が始まったのか、そして、話を聞いてそれぞれどう感じたか、です。
今回の話は、人事から自分に相談があったのがきっかけでした。
社内でイベントの文字起こしなどをしている全盲の社員がいるのですが、新型コロナの影響で
社内イベントが減って仕事が減ってしまったので、サービス検証の仕事がないかと相談を受けました。
障害当事者がサービス改善の行うノーマライゼーションプロジェクトの角谷には、
その社員の方をプロジェクトに加えてもらい、検証の準備と段取りをしてもらいました。
それと並行して、私から社内ツールのデザイン責任者にアクセシビリティの改善のための作業ができないか相談をしました。
そうしたところ、デザイン責任者と社内ツールのプロダクトオーナーの二人から
快諾をもらえたため、アクセシビリティの検証と改善を行うことができました。
デザイン責任者からは課題の実態把握をしたいというコメントをもらい、
プロダクトオーナーからも意見がある事自体を前向きに捉えてもらい、進めることができました。
続けて、障がい当事者から見て社内ツールの使い勝手や使いやすさはどのようになっているか、現状把握について紹介します。
先程の経緯説明の話と前後しますが、デザイン責任者に相談する前に、
ノーマライゼーションプロジェクトのロービジョンと全盲の方々にヒアリングを行いました。
そうしたところ、それぞれ業務で使っているツールのUIで課題を感じていることが分かりました。
スクリーンリーダーで特定のチェックボックスのオンオフ、トグルが読み上げられないとか、
ボタンの色が淡くて見づらいとか、チェックボックスが薄くてハイコントラストモードでは分かりにくい、
などの意見が出ました。そして、それらの問題を使い方をページを再読込みして状態をリセットしたり、
レイアウトからUIを推測するという工夫で解決していることも分かりました。
いくつかの社内ツールで課題や意見が出ましたが、ヒアリングした方々全員が使っていて、
アクセシビリティが改善されると業務効率が上がるツールということで、
今回は「WorkflowPlatform」というツールを検証対象に選びました。
これはどのようなツールかというと、内製した承認ツールです。
紙であれば承認者のハンコをそれぞれの承認者を回ってもらう業務を、オンラインで完結して行えるツールです。
ヤフーでは、このWorkflowPlaformを単体で使ったり、他のツールと組み合わせて使ったりします。
また、社員であれば承認フローを簡単に作れるため、多くの業務で使われているツールです。
画面はこのような画面です。
健常者から見たときは、申請フローと承認フローどちらも分かりやすく使いやすいツールに見えます。
しかし、ロービジョンの方が見たときやスクリーンリーダーで使ったときにはいくつか課題があったため、
それを検証して改善を行いました。
次に、WorkflowPlatformをテストして、どのように課題が見つかったか、そして、どのように改善したかを紹介します。
テスト、アクセシビリティ検証は、シナリオに沿って操作をしてもらい、
インタビューで都度その様子を聞くという、一般的なユーザビリティテストと同じ方法で行いました。
今回、参加者が首都圏、新潟、長野と複数の地域に住んでいたため、zoomを使ってテストを行いました。
また、場所の制約がなくなったため、今回はエンジニアやデザイナーにもテストの見学に参加してもらいました。
テストを行って見つかった課題はこのようなものがありました。
ロービジョンの方によるテストでは、事前のヒアリングでも指摘があった
テキストエリアの枠線が見えづらい課題に加え、テキストリンクやバツアイコンなどの操作部分の視認性、
一部記号の視認性の課題が見つかりました。
スクリーンリーダーによるテストでは、こちらも事前のヒアリングでも指摘があったチェックボックスの
状態がわからない課題に加えて、入力フォームのキーワードサジェストが長い場合に
そこで操作が止まってしまう課題や、一部エラーメッセージが読み上げられないといった課題が見つかりました。
この中から、テキストエリアの枠線が見えない課題について、解決方法を紹介します。
テキストエリアの枠線は淡い色で指定していたため、印象が柔らかくなる反面、
人や状態によって見えづらくなっていました。そのため、文字を入力する箇所と認識しずらくなっていました。
こちらは、コントラストを調整し、Windowsのハイコントラストモードでも枠線が見えやすくなるよう調整しました。
普段、JISやWCAGに沿ってアクセシビリティの検証を行っていると、
文字のコントラストには注意しますが枠線やUIのコントラストは見落としがちなのでテストで気づけてよかった課題です。
他にもいくつか色の調整を行った画面全体のイメージはこのようになります。左が調整前、右が調整後の画面となります。
全体のトーンは大きく変えずに視認性が上がるような調整になっています。
そして、テストを行うことで、テストを行った側と行われた側それぞれで気づきがありました。
まずはテストを行った側からの声です。
全盲の方、ロービジョンの方ともに、開発している方々へ直接利用状況を伝えられたことと、
それがユーザビリティの改善につながったことについて、ポジティブな意見が出ました。
続けて、ツールの開発を行っていたプロダクトオーナー・エンジニアとデザイナーからです。
プロダクトオーナーとエンジニアからは、視認性のテストの再現性についてと、
スクリーンリーダーがHTMLを文書構造として使っている事が想定外であったというコメントをもらいました。
日常的にHTMLを書いていたとしてもも、その文書構造のよしあしや妥当性について
聞かれることはありませんので、そこを問われたのは新しい気付きでした。
デザイナーからは、フィードバックそのものに関するコメントと、
ユーザビリティとアクセシビリティが衝突するという悩ましいコメントをもらいました。
無限スクロールやカルーセルのようなUIもそうですが、スクロールやタッチ操作に
最適化されたUIをどのように音声による操作に返還するかは今後の課題であるともいえます。
さらに、ツールの直接的な改善に加えて、さらに先を見据えた中長期的な目線でのアイデアについて話をします。
今回テストを行ったWorkflowPlatformはワンオフのUIですが、
現在、社内ツールを開発している部署では社内ツール用のデザインシステム「SAYA」を作成し、
こちらを使ったUI設計と実装をしています。
このSAYAにアクセシビリティに関する要件を盛り込んでアップデートすることで、
効率よく高い品質でUI設計ができるようにすることを考えています。
例えば、文字色で使われることが多いカラーを最初からコントラスト比が高くなるように調整することで、
アクセシビリティを意識しなくてもアクセシビリティの高いUI設計ができるようになります。
では、まとめに入ります。
3点あります。例え社内であっても、当事者が困っていることに気付いていない場合がまだまだ多いです。
また、今回アクセシビリティに配慮したデザインと実装を初めて行ってもらいましたが、
特殊な場合を除いて、開発はそれほど難しくはありません。
よって、お互いを知ることで、前向きにアクセシビリティの改善や向上をすることができました。
以上をもちまして、ヤフーのスポンサーセッションを終わります。
ご清聴ありがとうございました。