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

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

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

自己紹介
中野信
ヤフー株式会社
生活メディア事業本部デザイン開発部部長
ガイドライン室 UIガイドライン 
アクセシビリティ推進ワーキンググループ
アクセシビリティ黒帯
HCD-Net認定人間中心設計専門家
3
なかのまこと

アジェンダ
• なぜアクセシビリティ対応を始めたか
• どのようにアクセシビリティ対応を進めたか
4

Yahoo! JAPANについて
5
©aflo

月間総ページビュー(2014年12月)※
6※http://marketing.yahoo.co.jp/service/ad_̲feature.html
約606億PV

サービス規模
7
※http://marketing.yahoo.co.jp/service/ad_̲feature.html
120超

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

ビジョン
ライフ・エンジン
9

ミッション
10

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

なぜ始めたか?
できる条件が 
そろっていたから
12

そろっていたもの
技術力
編集力 
品質管理フロー 
デザインガイドライン
13

足りていなかったもの
マインド 
推進させる人
人的リソース
14

きっかけを作れば 
何とかなりそうだった
15

しかし実際に進めると 
いろいろな課題があった…
16

いろいろな課題
120超のサービス数
アクセシビリティに対する理解
作業の優先度
17

いろいろな課題
3つの方法で進めた
18

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

どのように進めたか?
1
できる部分を少しずつ
20

2
様々なタイミングを
逃さずに
21

3
長い目線で
22

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

対象者
アクセシビリティに
興味を持ちやすい人達から
24

サービス開発フロー
25
企画設計開発評価リリース

サービス開発フロー
26
企画設計開発評価リリース
マークアップ 
コーディング
WebDev

UI実装 
ガイドラインに 
追加
27

UIガイドライン
28
UIライブラリ
スタイリング
UI実装 
ガイドライン
独⾃自UI

UI実装ガイドライン
•テーブル要素
•代替テキスト
•見出し要素
•フレーム
•リスト
•フォーム
29

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

様々なタイミングを逃さずに
サービスリニューアルの
タイミング
31

会社概要
32

会社概要
• 2013年リニューアル
• JIS X 8341-3:2010 等級Aに準拠
• ウェブアクセシビリティ方針を公開
33

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

経緯1
推進WGの実績が欲しかった
会社概要がリニューアルするらしい
相談に行こう
36

経緯2
JISに準拠した事を知らせるページは?
アクセシビリティ方針を作ろう
37

様々なタイミングを逃さずに
ガイドライン改定の
タイミング
38

UIライブラリ
39
スタイリング
UI実装 
ガイドライン
独⾃自UI

40
デザイン原則
サービス憲章

• 2015年改定
• ウェブ、アプリのUI設計・開発時の 
ガイドライン
• アクセシビリティ要件を 
JIS X8341-3:2010 等級A準拠に
変更
41

経緯
デザイン全般に対する意識が高まる
デザイン原則が作られる
原則にユニバーサルが含まれる
よしアクセシビリティを要件に入れよう
42

工夫した点
• JIS X 8341-3:2010(WCAG2.0)の 
文章を要約
• 初見の印象で嫌われないよう配慮
43

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

要約⽂文
• 1.1.1 非テキストコンテンツ
• ユーザーに提示されるすべての非テキストコン
テンツには、同等の目的を果たす代替テキス
トを提供します。
• 非テキストコンテンツには、写真、図面、その
他の画像（例：線画、グラフィックデザイン、
絵画、3D表現）、グラフ、チャート、アニメー
ションなどが含まれます。
45

• 6項目 → 2項目
• 775文字 → 143文字
46

長い目線で
48
2011年年 UI実装ガイドラインの改定
2013年年アクセシビリティ指針の公開
2015年年 UIガイドラインの⼤大幅改定

長い目線で
方針策定・実施に 
4年
49

長い目線で
1. JISの等級Aに一部対応
2. JISの対応等級を拡大
3. JISの適用サービスを拡大
4. より実践的なアクセシビリティ対応に拡大
5. アプリのアクセシビリティ対応に挑戦
6. アクセシビリティ分野でIT業界を牽引する
50

おさらい
1
できる部分を少しずつ
53

おさらい
2
様々なタイミングを
逃さずに
54

おさらい
3
長い目線で
55

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Yahoo!デベロッパーネットワーク

More from Yahoo!デベロッパーネットワーク (20)

Recently uploaded

Recently uploaded (10)