アクセシビリティに関する取り組み実例の紹介
ヤフー株式会社 中野 信
2010年9月22日

はじめに• 現時点のYahoo! JAPANのJIS X 83413:2010の適合度は「配慮」です• 「準拠」させるためのワークフロー、体制が既にありますので、そちらをご紹介いたします• これから皆さんと一緒にアクセシビリティの向上に努めたいと思います

2

自己紹介
• 中野信– 所属• ヤフー株式会社
R&D統括本部 制作本部
インタラクションデザイン2部 制作2– 担当サービス• Yahoo!検索3

アジェンダ4

アジェンダ1. Yahoo! JAPANの取り組み
2. Yahoo!検索における取り組み実例
3. OneSeRPプロジェクトにおける取り組み事例
4. JIS X 8341-3:2010との関係
5. 今後の展開

5

1. Yahoo! JAPANの取り組み

6Yahoo! JAPAN
サービス数
月間総ページビュー数

487億2,200万

1日平均月間総ページビュー数

16億2,400万

ユニークブラウザ数 ※1

2億2,424万

アクティブユーザーID数 ※2※1 月内に当社サービスにアクセスしたブラウザ数を指す。
※2 月内にログインしたYahoo!IDを指す。
7157

2,401万2010年8月現在

Yahoo! JAPANの特徴• 多種多様のサービスを包含している• 非常に多くのお客様に使われている• 信頼性・公共性を求められる場合もある

8

サービスの品質を担保する施策• PDP– Yahoo! Japan
Product Development Process• UIガイドライン• QA・校正9

PDP• プロダクトおよびサービスを開発するプロジェクトの為の「開発プロセスガイドライン」• 業務効率の向上、品質の向上を主な目的とする• 7つのフェーズ、約70のタスク、17のロールで構成される• アクセシビリティは主に「設計」フェーズで検討し、「評価」フェーズで検証される
10

PDP 7つのフェーズ

11

PDP 設計・評価フェーズのタスク• 設計– コーディング・オーサリング仕様の策定– 情報設計• 評価– QA・校正

12

UIガイドライン• ユーザーインタフェースの品質を保つためのドキュメント• 約120項目の項目で構成される• UI構成要素、表記・表現、用語など多岐に渡る内容• ユーザビリティ・アクセシビリティ両方の内容を包含する

13

UIガイドラインの範囲

14

UIガイドラインの基本要件• 3つの基本要件– アクセス可能であること• 知覚可能、操作可能、認知可能– 使用性に優れていること• 情報の整理、直感的、正確さ– Yahoo! JAPANらしくもてなすこと• 信頼、多様なニーズ、親しみやすさ、楽しさ

15

UIガイドラインとアクセシビリティの関係• 下記規格を一部取り込み– WCAG2.0– JIS X 8341-3:2004– JIS Z 8521
• 人間工学－視覚表示装置を用いるオフィス
作業－使用性についての手引

16

QA校正(QA)• QA(Quality assurance)– UIガイドラインと各種仕様に基づき、検証・確認を行う– リリース規模（リニューアル～小改善）に関わらず、必ず確認を行う– リリースの可否判断を行う

17

校正
• 校正
– 表記・文章の確認を行う– ツールと目視の両方で行う– ページ中の文章からナビゲーション文言まで、全ての文言に対して校正を行う

18

「1.Yahoo! JAPANの取り組み」まとめ• Yahoo! JAPANは多種多様なお客様に使われている• 品質を担保する施策として、PDP、UIガイ
ドライン、QA、校正がある• UIガイドラインにアクセシビリティの規格を一部取り込んでいる

19

2. Yahoo!検索における取り組み実例

20

Yahoo!検索21

Yahoo! JAPANの推奨ブラウザ• Windows– Internet Explorer 6.x、7.x、8.x– Firefox 3.x• Macintosh– Safari 4.x

http://help.yahoo.co.jp/help/jp/common/sys/sys-01.html
22

Yahoo!検索の各種デバイス対応• 推奨ブラウザ• 携帯• スマートフォン• ゲーム機（Wii、PSP）• 下位ブラウザ
サービス独自の対応

23

各種デバイス対応-ゲーム機

24

各種デバイス対応-下位ブラウザ

25

デバイス対応の具体的な内容• UIの最適化– 入力• カーソルキー、タッチスクリーン、コントローラー– 出力• 画面解像度• 画面サイズ• HTML・CSSのバージョン• 表示速度26

アクセシビリティと関係ないのでは…
• 下記の参考情報としてもらえればと思います– デバイス(UA)で完全に出し分ける方法– サポート外ブラウザの取り扱い

27

「2. Yahoo!検索における取り組み実例」まとめ• デバイスに応じてUIを出し分けている• サポート外のブラウザも考慮している28

3. OneSeRPプロジェクトにおける取り組み事例

29

OneSeRPプロジェクトとは• Yahoo! JAPANが提供するさまざまな検索サービスをシームレスに連携• ユーザビリティ向上を図り、より良い検索体験を提供

30•

Yahoo!検索（ウェブ）•Yahoo!カテゴリ（登録サイト検索）•

Yahoo!検索（画像）•Yahoo!ニュース•

Yahoo!検索（動画）•Yahoo!ショッピング

•Yahoo!検索（ブログ）•Yahoo!オークション•

Yahoo!辞書•Yahoo!人物名鑑•

Yahoo!知恵袋•

Yahoo!百科事典•

Yahoo!地図OneSeRPプロジェクト デザインの施策

1. UI統一・共通化
2. コーディングのワークフロー策定
3. コーディング

31

OneSeRPプロジェクト デザインの施策

1. UI統一・共通化
2. コーディングのワークフロー策定
3. コーディング

32

UI統一・共通化の全体方針• テキスト主体のページ構成– アイコン、グラフィックではなく、言葉で機能説明を行う– 予備知識なしで理解できるようにする

33

UI統一・共通化を行った箇所• ヘッダー– ログインステータス、検索窓• フッター– 検索窓、リンク、コピーライト• 各種機能– 関連検索ワード、スペルチェック、ページ送り、広告など
34

UI統一・共通化

35

UI共通化によるメリット• UIの一貫性によるユーザビリティ向上• ユーザーの学習コスト削減• 開発コスト削減– UIの再利用– 更新・改善作業の削減

36

OneSeRPプロジェクト デザインの施策

1. UI統一・共通化
2. コーディング時ワークフロー策定
3. コーディング37

コーディング時の作業フロー
1. 設計フェーズ– ページ要素のモジュール化

2. 開発フェーズ– コーディング・オーサリング仕様を策定– コアメンバーによるレビュー

38ページ要素のモジュール化• ページ要素を機能単位で分割• ルールに従いモジュールIDを付与• 情報設計・ビジュアル作成・コーディング
でモジュールIDを共通して使用

39ページ要素のモジュール化
ヘッダー

検索窓
サジェスト

S1a

S1c
検索オプション
S1b

S1d
検索設定
S1f

帯

フィルタ設定S1e
検索条件メッセージ・ヒントメッセージ

S1g

スペラー

S1h

関連検索ワード

S1i

絞り込み
検索オプション

S1j

表示順序切替(Sort)

表示順序切替(View)

S1k

S1l

検索結果

S1m
サブ検索結果S1n

広告(SS)

S1o

DR

S1z

ページ送り
フッター

40

S1p
S1q

コーディング・オーサリング仕様を策定• 下記を重点に置いて策定– 表示速度– 開発効率– 信頼性

41

コアメンバーによるレビュー• コーディング・オーサリング仕様の遵守を徹底– 明文化されていない仕様を補足– イレギュラーな記述をキャッチアップ

42

OneSeRPプロジェクト デザインの施策

1. UI統一・共通化
2. コーディングのワークフロー策定
3. コーディング43

コーディングの際に行った施策
1. セマンティックなマークアップ
2. スキップリンク
3. 代替要素、画像置換
4. マークアップ構造の簡略化

44

「3. OneSeRPプロジェクトにおける取り組み事例」まとめ• サービス単位ではなく、「検索」という機能単位で各種共通化を行った• UIの共通化・モジュール化を行った• コーディング・オーサリング仕様の策定と遵守を徹底した

45

4. JIS X 8341-3:2010との関係

46

JIS X 8341-3:2010との関係• 現時点での適合度は「配慮」• 社内のワークフロー、体制を調整することで対応可能• みなさんと同じスタートラインに立っています47

JIS X 8341-3:2010との関係• 6 ウェブアクセシビリティの確保・向上に関する要件– 6.1 企画– 6.2 設計– 6.3 制作・開発– 6.4 検証
– 6.5 保守・運用• 6.5.1 アクセシビリティの品質担保• 6.5.2 フィードバックによる意見の収集• 6.5.3 アクセシブルな問い合わせ手段の提供
48

対応可能

5. 今後の展開

49

今後の展開• Yahoo!検索において– JIS X 8341-3:2010の判断基準との整合性を確認– 適合試験導入の検討– 他検索サービス・機能への展開

50

ご静聴ありがとうございました51