ウェブはすべての人が使えるべきもの 障がい者の力でアクセシビリティ改善 #accfes

ウェブはすべての⼈が使えるべきもの ~障がい者の⼒でアクセシビリティ改善~ ⿊帯(アクセシビリティ) 中野 信 ©Yahoo Japan

⾃⼰紹介 • 中野 信(なかの まこと) • UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • ⿊帯(アクセシビリティ) • デジタル庁(⺠間登⽤ ⾮常勤) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) ©Yahoo JAPAN 2

ヤフーのウェブアクセシビリティの主な取り組み • Yahoo!天気・災害の天気図・災害アラート • 聞こえる選挙 • ヤフー・LINEの経営統合各種ページの視認性検証 ©Yahoo JAPAN

通常 D型 P型 ©Yahoo ©Yahoo JAPAN Japan T型 4

©Yahoo ©Yahoo JAPAN Japan https://kikoeru.yahoo.co.jp/sangiin 5

• https://kikoeru.yahoo.co.jp/sangiin

©Yahoo ©Yahoo JAPAN Japan

アジェンダ 1. ガイドラインでアクセシビリティを改善 2. 当事者と⼀緒にアクセシビリティを改善 3. ガイドラインとユーザーテストで改善 ©Yahoo JAPAN 7

1. ガイドラインでアクセシビリティ改善 ©Yahoo Japan 8

アクセシビリティのガイドライン • サービスの質・セキュリティを⼀定⽔準に保つためのガイドライン • そのうちの1つ「UIガイドライン」にアクセシビリティのガイドラインがある • ウェブアクセシビリティ • アプリアクセシビリティ • ⽂字 ©Yahoo JAPAN 9

1. ガイドラインでアクセシビリティ改善 ガイドライン「ウェブアクセシビリティ」 • JIS X 8341-3:2016 レベルAの達成基準とほぼ同等 • 達成基準の⽂章は抽象度の⾼い直訳に近い⽂章のため、サービス開発に携わる⼈ が理解しやすい⽂章にリライト ©Yahoo JAPAN 10

1. ガイドラインでアクセシビリティ改善 ガイドライン「ウェブアクセシビリティ」 例: 1.3.2 意味のある順序 コンテンツが提⽰されている順序が意味に影響を及ぼす場合には、 正しく読む順序はプログラムによる解釈が可能である。 コンテンツの順序に意味がある場合、 機械がその順序を解釈できるようにします。 ©Yahoo JAPAN 11

1. ガイドラインでアクセシビリティ改善 ガイドライン「アプリアクセシビリティ」 JIS X 8341-3:2016 レベルAの達成基準をベースに項⽬を編集 • • • ウェブの技術に特化した項⽬を削除 • WCAG2.1のガイドライン「2.5 ⼊⼒モダリティ」の項⽬を追加 加えて、iOS、Androidの実装⽅法を記載 ©Yahoo JAPAN 12

1. ガイドラインでアクセシビリティ改善 ガイドライン「⽂字」 • ⽂字サイズとコントラスト⽐を定義 13px 4.5:1 21px 3:1 ©Yahoo JAPAN 13

2. 当事者と⼀緒にアクセシビリティを改善 ©Yahoo Japan 14

当事者と⼀緒にアクセシビリティを改善 関係者 サービス関係者 ノーマライゼーション 中野 プロジェクト • ニーズの確認 • テスト計画 • テストの実施 • テストの実施 • テスト後の改善 • 結果のまとめ・報告 • サービスのテスト ©Yahoo JAPAN 15

当事者と⼀緒にアクセシビリティを改善 関係者のニーズ サービス関係者 ノーマライゼーション 中野 プロジェクト • 検証をしたい • サービス改善をしたい ©Yahoo JAPAN • 詳しい状況を知りたい 16

当事者と⼀緒にアクセシビリティを改善 テストの流れ テスター募集 要件定義 全員 ノーマライ ゼーション テスト実施 テスト設計 全員 改善点の 整理 サービス 改善 サービス 中野 ©Yahoo JAPAN 17

当事者と⼀緒にアクセシビリティを改善 どのような場合にテストをしたか? 1. ガイドラインではカバーできない検証をしたい • • → Yahoo!天気・災害の各種天気図の視認性 2. 特定の障がいに特化したサービス • • → 聞こえる選挙 3. サービスに課題があるがサービス関係者が気づいていない • • → 社内ツール ©Yahoo JAPAN 18

当事者と⼀緒にアクセシビリティを改善 テスト実施 ©Yahoo JAPAN 19

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

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

3. ガイドラインとユーザーテストで改善 ©Yahoo Japan 22

ガイドラインとユーザーテストで改善 ガイドラインとユーザビリティテストの関係 ガイドライン • • → 網羅的にアクセシビリティの課題を発⾒して改善できる • → 全体的な課題を⾒つけることができる ユーザビリティテスト • • → 特定の課題を集中的に検証して改善できる • → 利⽤している状況を具体的にイメージできる ©Yahoo JAPAN 23

ガイドラインとユーザーテストで改善 ガイドラインとユーザビリティテストの関係 ガイドライン ユーザビリティテスト ©Yahoo JAPAN 24

今後の⽬標 ©Yahoo Japan 25

今後の⽬標 今後やりたいこと • ２段構えのアクセシビリティ改善の仕組みがあるが、対応範囲は限定的 • より対応範囲を広げたい • アクセシビリティの向上・改善に意欲を持った⼈を増やしたい ©Yahoo JAPAN 26

EOP ©Yahoo Japan