ヤフーはアクセシビリティ対応をなぜ始めたのか、どう進めているのか？

ヤフーはアクセシビリティ対応を なぜ始めたのか、 どう進めているのか︖ ヤフー株式会社 マーケティングソリューションズ統括本部 中野 信

⾃⼰紹介 中野 信 広告事業のプロモーションに関するデザインと UIガイドラインの策定・運⽤に関わっています • ウェブアクセシビリティ基盤委員会(WAIC) 作業部会1(理解と普及) 副査 • HCD-Net認定 ⼈間中⼼設計専⾨家 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2

関わった主なアクセシビリティの取り組み • 聞こえる選挙 • Yahoo!天気・災害の図⾯の視認性検証 • ウェブアクセシビリティ⽅針 • UIガイドライン • アクセシビリティ啓発のセミナー・イベント Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 3

https://kikoeru.yahoo.co.jp/sangiin Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 4

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

https://weather.yahoo.co.jp/weather/ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 5

• https://weather.yahoo.co.jp/weather/

https://about.yahoo.co.jp/info/accessibility/ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 6

• https://about.yahoo.co.jp/info/accessibility/

https://japan-a11y-conf.com/vol2/ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 7

• https://japan-a11y-conf.com/vol2/

撮影:南進ノ介 8

⽬次 • (ウェブ)アクセシビリティとは︖ • アクセシビリティ対応をなぜ始めたか︖ • アクセシビリティ対応をどう進めているのか? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 9

(ウェブ)アクセシビリティとは︖ 写真提供：アフロ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 10

ウェブアクセシビリティとは? • インターネットで公開されているページ・サービスの • あらゆる⼈の • アクセスしやすさ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 11

アクセシビリティ 12

ユーザビリティ 13

あらゆる⼈とは? • 健常者 • 障害者 • 視覚、聴覚、上肢、認知 など • ⾼齢者 • ⼦供 • ⽇本語以外が⺟国語の⼈ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 14

あらゆる⼈とは? • ⼀時的な障害 • 怪我をして⼿が使えない • 屋外でディスプレイが⾒にくい • 電⾞の中で⾳を出せない • 酔って認知能⼒が落ちている Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 15

あらゆる⼈とは? アクセシビリティ対応 ≠ ⾼齢者・障害者対応 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 16

アクセスしやすさとは? コンテンツ 操作 完全に分かる 完全にできる おおむね分かる ⼤体できる ⼀部分かる ⼀部できる 全く分からない できない Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. よい 悪い 17

アクセスしやすさとは? • アクセスしやすさ(アクセシビリティ)は０か１ではない • 部分的・段階的な対応度合いがある • アクセシビリティ対応も0か1ではない • 何もしないよりは少しでも対応した⽅がよい Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 18

ウェブアクセシビリティの構造 サービス デバイス (UA) ユーザー 19

HTMLの解釈⽅法 • ビジュアルブラウザ • テキストブラウザ • クローラー • など Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 20

ビジュアルブラウザ(PC) 写真提供：アフロ 21

ビジュアルブラウザ(スマホ) 写真提供：アフロ 22

テキストブラウザ 23

⽀援技術 支援技術 サーバ デバイス (UA) ユーザー 24

⽀援技術 • ⾳声読み上げ • VoiceOver / TalkBack など • 拡⼤、⽂字拡⼤ • ⾊変更(反転) • 点字ディスプレイ • スイッチ(⼊⼒装置) 25

⾳声読み上げ(Mac VoiceOver) キーワード⼊⼒補助を開く ホームページ設定 ホームページに設定するブルー ピングオレンジグリーンシルバーヘルプコラムを読んでパラスポーツの知識を 深めよう夏の⼤型フェスのライブ映像を続々配信中 ヤフーサービス下へ移動 ⼀覧主なサービスショッピングヤフオクLOHACOトラベル⼀休ドットコム⼀ 休ドットコムレストランニュース天気災害スポーツナビファイナンステレビ ジーワイエーオーゲームYahoo!モバゲー地図路線情報Rettyクラシルオーワイ オーライフ不動産⾃動⾞ブログTRILLパートナー… Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 26

ディスプレイ、スイッチ(⼊⼒装置) 27

なぜウェブアクセシビリティが⼤事か • ウェブはユーザーが⾃由に 情報を解釈できるメディアだから • アクセシビリティに考慮・配慮すると 多様な使い⽅ができる Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 28

アクセシビリティ対応をなぜ始めたか︖ 写真提供：アフロ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 29

サービス・製品利⽤者を増やす • 65歳以上の⼈⼝⽐率 2030年 2017年 2000年 17.4% 28% 31.6% 総務省「⼈⼝推計」より抜粋 https://www8.cao.go.jp/kourei/whitepaper/w-2018/html/gaiyou/s1_1.html Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 30

• https://www8.cao.go.jp/kourei/whitepaper/w-2018/html/gaiyou/s1_1.html

取り組まないと何が起きるか︖ • 問い合わせ、クレーム、訴訟 • ⻑期的なブランド価値の低下 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 31

https://joshi-spa.jp/899299 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 32

• https://joshi-spa.jp/899299

取り組む意義・効果 • 以下のような⽬的で取り組んでいる • 利⽤者をひとりでも増やすため • 品質向上の⼀環として • CSRの⼀環として Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 33

利⽤者をひとりでも増やすため • アクセシビリティを向上させることで • より多くの状態のユーザーが • ウェブサイトやウェブサービスを使えるようになる Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 34

品質向上の⼀環として • ウェブサイト・ウェブサービスの • UIデザイン品質やUX品質を⾼めることと同様に • アクセシビリティを向上させることで • 価値を⾼めることができる Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 35

UXとアクセシビリティ Evaluation method of UX “The User Experience Honeycomb” http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html 36

• http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

CSRの⼀環として 企業価値の向上 = 間接的なサービスの価値向上 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 37

ウェブアクセシビリティ⽅針の抜粋 ヤフー株式会社は、 ⼀⼈でも多くのお客さまが ⼀つでも多くの場⾯で 当社が提供するウェブコンテンツを ご利⽤いただけるように、 アクセシビリティの確保に取り組んでいきます。 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 38

https://about.yahoo.co.jp/csr/report/005.html Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 39

• https://about.yahoo.co.jp/csr/report/005.html

アクセシビリティ対応をどう進めているのか? 写真提供：アフロ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 40

• UIガイドライン・ライブラリ • 検証ツール・フロー • 啓発 • 個別対応 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 41

UIガイドライン・UIライブラリ スタイリング UIライブラリ 独⾃UI UIガイドライン Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 42

検証ツール・フロー • 検証ツール(WAIV)の導⼊ • サービスリリース後の品質検証に、 アクセシビリティ検証を追加 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 43

啓発 • 社内 • セミナー、ワークショップの実施 • 情報共有の場所(Slack)の作成 • 社外 • イベント、セミナーの実施 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 44

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 45

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 46

個別対応 • サイトリニューアルや⼤きな改修の時 • リアクティブな対応 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 47

まとめ 写真提供：アフロ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 48

まとめ • (ウェブ)アクセシビリティとは︖ • アクセシビリティ対応をなぜ始めたか︖ • アクセシビリティ対応をどう進めているのか? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 49

まとめ • アクセシビリティは仕事になる • 事業にも社会にも貢献できる • ただ、できる⼈はまだまだ⾜りない • みなさんぜひ参加してください! Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 50

EOP Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 51