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

ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか ヤフー株式会社 中野 信 2015年11月30日 ©aflo

はじめに • 本セミナーは「障害者差別解消法」 施行を控え、Web担当者がどのよう にすべきかについて考えていきます • 法律の具体的内容には触れませんので あらかじめご了承ください Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 2

自己紹介 中野 信 なかの  まこと ヤフー株式会社 生活メディア事業本部 デザイン開発部 部長 ガイドライン室 UIガイドライン アクセシビリティ推進ワーキンググループ アクセシビリティ 黒帯 HCD-Net認定 人間中心設計専門家 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 3

アジェンダ • なぜアクセシビリティ対応を始めたか • どのようにアクセシビリティ対応を進めたか Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 4

Yahoo! JAPANについて 5 ©aflo

月間総ページビュー(2014年12月)※ 606 約 億PV ※http://marketing.yahoo.co.jp/service/ad_̲feature.html Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 6

サービス規模 120 超 ※http://marketing.yahoo.co.jp/service/ad_̲feature.html Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 7

サービス規模 R25/アスクル/アドレスブック/アルバイト/飲食店予約/ウェブホスティング/ウォレット/ 占い/映画/映像トピックス/X BRAND/FX/おこづかい稼ぎ/オフィス版/お見合い/外国為 替/買取/画像検索/カテゴリ/カレンダー/かんたん決済/きっず/GYAO!/GYAO!ストア/求人、 アルバイト/教育、子育て/クックパッド/クラウド/クラウドソーシング/経済ニュース/掲示 板/ケータイ/携帯ショップ/ゲーム/結婚仲介/決済/健康/検索/検索データ/公金支払い/婚活 /災害情報/ジオシティーズ/辞書/自動車/出張宿泊/終活、葬儀手配/ショッピング/ストア出 店/スポーツ/スマホガイド/政治/セキュリティセンター/ソーシャルギフト/宅配/地域情報 /知恵袋/チケット/地図/地図・地域情報API/着メロ/ツールバー/出会い/デイリーPlus/デー タ保管/デベロッパーネットワーク/テレビ/天気・災害/電子書籍/転職/登録情報/道路交通 情報/toto/ドメイン/トラベル/ニュース/ニュースBUSINESS/ネタりか/ネット募金/パート ナー/派遣/パスマーケット/ビジネスセンター/ビジネストラベル/美容、ダイエット/ファイ ナンス/ブックストア/ブックマーク/不動産/プレミアム/ブログ/プロモーション広告/ペッ ト/ヘルスケア/ヘルプセンター/ポイント/ホームページ/保険/補償/ボックス/ボランティア /翻訳/My SoftBank/My Yahoo!/みんなの政治/ムービー/無線LANスポット/メール/モバ イル/Yahoo!カード/Yahoo! BB/Yahoo!モバゲー/Yahoo! Wi-Fi/ヤフオク!/ラボ/リサーチ /旅行、ホテル予約/恋愛/ロコ/路線情報/LOHACO/WONDER!スクール Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 8

ビジョン ライフ・エンジン 9 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

ミッション 10 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

なぜアクセシビリティ対応を始めたか 11 ©aflo

なぜ始めたか? できる条件が そろっていたから 12 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

そろっていたもの 技術力 編集力 品質管理フロー デザインガイドライン 13 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

足りていなかったもの マインド 推進させる人 人的リソース 14 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

足りていなかったもの きっかけを作れば 何とかなりそうだった 15 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

足りていなかったもの しかし実際に進めると いろいろな課題があった… Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 16

いろいろな課題 120超のサービス数 理解 アクセシビリティに対する 優先度 作業の Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 17

いろいろな課題 3つの方法で進めた Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 18

どのように アクセシビリティ対応を進めたか 19 ©aflo

どのように進めたか? 1 できる部分を少しずつ 20 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

どのように進めたか? 2 様々なタイミングを 逃さずに 21 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

どのように進めたか? 3 長い目線で 22 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

1. できる部分を少しずつ 23 ©aflo

対象者 アクセシビリティに 興味を持ちやすい人達から 24 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

サービス開発フロー 企画 設計 開発 評価 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 リリース 25

サービス開発フロー マークアップ コーディング 企画 設計 開発 評価 リリース WebDev Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 26

どのように進めたか? UI実装 ガイドラインに 追加 27 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UIガイドライン スタイリング 独⾃自UI UI実装 UIライブラリ ガイドライン UIガイドライン Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 28

UI実装ガイドライン • テーブル要素 • 代替テキスト • 見出し要素 • フレーム • リスト • フォーム Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 29

2. 様々なタイミングを逃さずに 30 ©aflo

様々なタイミングを逃さずに サービスリニューアルの タイミング 31 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

会社概要 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 32

会社概要 • 2013年リニューアル • JIS X 8341-3:2010 等級Aに準拠 • ウェブアクセシビリティ方針を公開 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 33

34

•合言葉はユーザーファースト •ウェブだからできることの可能性 •IT業界のリーディングカンパニーとして描く 少し先の未来 •日本工業規格JIS X 8341-3:2010への対応 35

経緯1 推進WGの実績が欲しかった 会社概要がリニューアルするらしい 相談に行こう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 36

経緯2 JISに準拠した事を知らせるページは? アクセシビリティ方針を作ろう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 37

様々なタイミングを逃さずに ガイドライン改定の タイミング 38 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UIガイドライン スタイリング 独⾃自UI UI実装 UIライブラリ ガイドライン UIガイドライン Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 39

UIガイドライン UIガイドライン デザイン原則 サービス憲章 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 40

UIガイドライン • 2015年改定 • ウェブ、アプリのUI設計・開発時の ガイドライン • アクセシビリティ要件を JIS X8341-3:2010 等級A準拠に 変更 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 41

経緯 デザイン全般に対する意識が高まる デザイン原則が作られる 原則にユニバーサルが含まれる よしアクセシビリティを要件に入れよう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 42

工夫した点 • JIS X 8341-3:2010(WCAG2.0)の 文章を要約 • 初見の印象で嫌われないよう配慮 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 43

ガイドラインの要約 1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキ ストを提供する。ただし、次の場合は除く： (レベルA) ⽂文 原 コントロール、入力： 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであると き、その目的を説明する識別名を提供している。（コントロール及びユーザの入力を受け入れるコンテン ツに関するその他の要件は、ガイドライン 4.1を参照のこと。） 時間の経過に伴って変化するメディア： 非テキストコンテンツが、時間の経過に伴って変化するメディアであ るとき、代替テキストは、少なくとも、その非テキストコンテンツを識別できる説明を提供している。（メ ディアに関するその他の要件は、ガイドライン 1.2を参照のこと。） 試験： 非テキストコンテンツが、テキストで提示されると無効になる試験又は演習のとき、代替テキストは、 少なくともその非テキストコンテンツを識別できる説明を提供している。 感覚的： 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、代替テキスト は、少なくともその非テキストコンテンツを識別できる説明を提供している。 CAPTCHA： 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを 確認する目的で用いられているとき、代替テキストは、その非テキストコンテンツの目的を特定し、説明 している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、 様々な障害に対応している。 装飾、整形、非表示： 非テキストコンテンツが、装飾だけを目的にしている、見た目の整形のためだけに用い られている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 44

ガイドラインの要約 • 1.1.1 非テキストコンテンツ ⽂文 約 • ユーザーに提示されるすべての非テキストコン テンツには、同等の目的を果たす代替テキス トを提供します。 要 • 非テキストコンテンツには、写真、図面、その 他の画像（例：線画、グラフィックデザイン、 絵画、3D表現）、グラフ、チャート、アニメー ションなどが含まれます。 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 45

ガイドラインの要約 • 6項目 → 2項目 • 775文字 → 143文字 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 46

3. 長い目線で 47 ©aflo

長い目線で 2011年年 UI実装ガイドラインの改定 2013年年 アクセシビリティ指針の公開 2015年年 UIガイドラインの⼤大幅改定 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 48

長い目線で 方針策定・実施に 4 年 49 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

長い目線で 1. JISの等級Aに一部対応 2. JISの対応等級を拡大 3. JISの適用サービスを拡大 4. より実践的なアクセシビリティ対応に拡大 5. アプリのアクセシビリティ対応に挑戦 6. アクセシビリティ分野でIT業界を牽引する Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 50

51 ©aflo

おさらい 52 ©aflo

おさらい 1 できる部分を少しずつ 53 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

おさらい 2 様々なタイミングを 逃さずに 54 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

おさらい 3 長い目線で 55 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

56 ©aflo

ご静聴ありがとうございます 57