---
title: 障がい当事者の声で、プロダクトをUPDATE 社内ツールの改善事例 #accfes
tags:  #accfes  
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4L73Y2N9E5.jpg?width=480
description: 2021年のイベント「アクセシビリティの祭典 2021」のセッション「スポンサースペシャルトークセッション」のスライドです。
published: May 19, 21
canonical: https://www.docswell.com/s/ydnjp/ZNQLEZ-2021-05-19-154852
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4L73Y2N9E5.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V87D5ZW87G.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4VJPGD9WJ8.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L2EV61M97Q.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Z57GN2G4JL.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V4EQQPXREP.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/DKJ4NY6Q71.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PLE156VL7G.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8GEW5WLQJ2.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/W47ZN5M373.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/KYJ689NZ7V.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5GJ59N59E4.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V9E225N5ER.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5D7YYKP67M.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/2VENPRM1J8.jpg)

3. テスト実施
©Yahoo Japan
18


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GY793MNY73.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5G78MLKK7D.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/ML7L3LZPER.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/54EMDMV2EW.jpg)

3. テスト実施
©Yahoo Japan
24


# Page. 20

![Page Image](https://bcdn.docswell.com/page/ZPER4V25E9.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/NP7X2ZDXJX.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/637KM8X9ED.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4LJ3Y25975.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V8JD5ZD8JG.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4VEPGDXWE8.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L27V61L9JQ.jpg)

6. まとめ
©Yahoo Japan
32


# Page. 27

![Page Image](https://bcdn.docswell.com/page/Z5JGN2X4EL.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V47QQP8R7P.jpg)

EOP
©Yahoo Japan
34