障がい当事者の声で、プロダクトをUPDATE 社内ツールの改善事例 #accfes

障がい当事者の声で ~社内ツールの改善事例~ ヤフー株式会社 中野 信 ©Yahoo Japan

⾃⼰紹介 中野 信(なかの まこと) 広告事業のデザインと UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • アクセシビリティ推進WG • 第10代⿊帯(アクセシビリティ) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) • HCD-Net認定 ⼈間中⼼設計専⾨家 ©Yahoo Japan 2

このセッションについて 何気なく使っているツールも、 実は使いにくさを感じるユーザーが、⾝近にいるかもしれません。 そんなユーザーの声に⽿を傾け、社内ツールを よりいっそう使いやすいものに改善した事例を、 関わったエンジニア / デザイナー / 障がい当事者 それぞれの視点から紹介するセッションです。 ©Yahoo Japan 3

1. 話の経緯 今回、アクセシビリティテストの相談を受けて どう感じたか? ©Yahoo Japan 7

話の流れ ⼈事 ノーマライゼーションPJ 角谷 社内ツール プロダクトオーナー 中野 社内ツール デザイン責任者 ©Yahoo Japan 8

話の流れ ノーマライゼーションPJ 角谷 全盲の社員がいるが、 サービス検証の仕事はないか? ⼈事 社内ツール プロダクトオーナー 中野 社内ツール デザイン責任者 ©Yahoo Japan 9

話の流れ ノーマライゼーションPJ 角谷 承認システムは 業務で使う機会が多く 改善してほしい箇所もある ⼈事 社内ツール プロダクトオーナー 中野 社内ツール デザイン責任者 ©Yahoo Japan 10

話の流れ ノーマライゼーションPJ 角谷 当事者から声を上げてくれて よかった ぜひやってみたい! ⼈事 中野 課題があるのは知っていたが 利⽤実態が分からないので ぜひやってみたい! 社内ツール プロダクトオーナー 社内ツール デザイン責任者 ©Yahoo Japan 11

2. 社内ツールの現状把握 障がい当事者から⾒て、今の社内ツールの使い勝⼿は どのような状況だったか? ©Yahoo Japan 12

2. 社内ツールの現状把握 • テストをするツールを選ぶため、ヒアリングを実施 • チェックのトグルを⾳声で読み上げてくれない • ボタンが分かりづらい(⾒づらい) • チェックボックスがハイコントラストモードでわかりにくい ©Yahoo Japan 13

2. 社内ツールの現状把握 ©Yahoo Japan 14

2. 社内ツールの現状把握 WorkflowPlatformとは? • 内製の承認ツール • 単体でも使われることも、他のツールと組み合わせて使われることもある • 社員であれば、承認フローを簡単に作ることもできる ©Yahoo Japan 15

2. 社内ツールの現状把握 ©Yahoo Japan 16

3. テスト実施 実際にテストをして、どのような気付きがあったか? また、どのようにUIを改善したか? ©Yahoo Japan 17

3. テスト実施 ©Yahoo Japan 18

3. テスト実施 • どのような課題が⾒つかったか? ロービジョン課題 • テキストリンクの⽂字⾊が⾒にくい • テキストエリアの枠線が⾒えないので、テキストエリアがどこか分からない • 追加した承認者の横にある「×」ボタンが分かりにくい • 必須項⽬の※印がかろうじて⾒える スクリーンリーダー課題 • チェックボックスの状態(オン/オフ)が分からない • サジェストから抜ける操作が分からない • 「⼊⼒されていません」などのエラーメッセージが読み上げられない ©Yahoo Japan 19

3. テスト実施 • どのような課題が⾒つかったか? ロービジョン課題 • テキストリンクの⽂字⾊が⾒にくい • テキストエリアの枠線が⾒えないので、テキストエリアがどこか分からない • 追加した承認者の横にある「×」ボタンが分かりにくい • 必須項⽬の※印がかろうじて⾒える スクリーンリーダー課題 • チェックボックスのステータス(オン/オフ)が分からない • サジェストから抜ける操作が分からない • 「⼊⼒されていません」などのエラーメッセージが読み上げられない ©Yahoo Japan 20

3. テスト実施 テキストエリアの枠線が⾒えないので、テキストエリアがどこか分からない ©Yahoo Japan 21

3. テスト実施 ©Yahoo Japan 24

4.テストからの気づき テストから改善までの作業の中で、気づいたこと ©Yahoo Japan 25

4.テストからの気づき テスター（全盲） • 社内ツールのどこが使いづらくて苦労しているかを直接伝えられた • 伝えたことが改善につながってよかった テスター（ロービジョン） • ⾒えにくいユーザーがいる点にも⽬を向けてくれて嬉しかった • 対応してもらってとても⾒やすくなった • 今後、別のツールの改善できたらよい ©Yahoo Japan 26

4.テストからの気づき エンジニア • 視認性は個⼈差が⼤きいので、基準を作るのが難しいと感じた • HTMLの構造に気をつけなければいけなかったのは想定外だった デザイナー • フィードバックをもらえたこと⾃体がよかった • ユーザビリティを上げようと設計した箇所(キーワードサジェスト)が スクリーンリーダーでは問題になることがあって予想外だった ©Yahoo Japan 27

5. 今後の展望 中⻑期的な⽬線でのアイデア ©Yahoo Japan 28

5. 今後の展望 継続的なデザインシステムのアップデート アクセシビリティを配慮したデザインシステムを元に開発をすることで、 誰でも安定したプロダクトを提供することを可能にする。 ©Yahoo Japan 29

5. 今後の展望 1.UIカラー（グレー）の変更 可読性が必要な箇所は4.5:1を満たす⾊へ変更 ©Yahoo Japan 30

6. まとめ ©Yahoo Japan 32

まとめ • 当事者が困っていることに気付いていない場合がまだまだ多い • アクセシビリティに配慮したデザイン・実装はそれほど難しくない • お互いを知ることで、前向きにアクセシビリティの改善や向上ができる ©Yahoo Japan 33

EOP ©Yahoo Japan 34