Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,284 views

Published on

2015年11月30日、ヤフー株式会社セミナールームで開催したイベント「Web担当者向けセミナー:障害者差別解消法 施行目前!アクセシビリティ対応、なぜ始める?どう進める?」での発表資料です。

Published in: Technology
  • Be the first to comment

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

  1. 1. ヤフー株式会社はアクセシビリティ対応を
 なぜ始めたのか、どう進めているのか ヤフー株式会社 中野 信
 2015年11月30日 ©aflo
  2. 2. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 はじめに •本セミナーは「障害者差別解消法」
 施行を控え、Web担当者がどのよう にすべきかについて考えていきます •法律の具体的内容には触れませんので
 あらかじめご了承ください 2
  3. 3. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 自己紹介 中野 信 ヤフー株式会社 生活メディア事業本部 デザイン開発部 部長 ガイドライン室 UIガイドライン
 アクセシビリティ推進ワーキンググループ アクセシビリティ 黒帯 HCD-Net認定 人間中心設計専門家 3 なかの  まこと
  4. 4. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アジェンダ • なぜアクセシビリティ対応を始めたか • どのようにアクセシビリティ対応を進めたか 4
  5. 5. Yahoo! JAPANについて 5 ©aflo
  6. 6. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 月間総ページビュー(2014年12月)※ 6※http://marketing.yahoo.co.jp/service/ad_̲feature.html 約606億PV
  7. 7. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 サービス規模 7 ※http://marketing.yahoo.co.jp/service/ad_̲feature.html 120超
  8. 8. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 サービス規模 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. 9. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ビジョン ライフ・エンジン 9
  10. 10. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ミッション 10
  11. 11. なぜアクセシビリティ対応を始めたか 11 ©aflo
  12. 12. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 なぜ始めたか? できる条件が
 そろっていたから 12
  13. 13. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 そろっていたもの 技術力 編集力
 品質管理フロー
 デザインガイドライン 13
  14. 14. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 足りていなかったもの マインド
 推進させる人 人的リソース 14
  15. 15. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 足りていなかったもの きっかけを作れば
 何とかなりそうだった 15
  16. 16. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 足りていなかったもの しかし実際に進めると
 いろいろな課題があった… 16
  17. 17. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 いろいろな課題 120超のサービス数 アクセシビリティに対する理解 作業の優先度 17
  18. 18. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 いろいろな課題 3つの方法で進めた 18
  19. 19. どのように
 アクセシビリティ対応を進めたか 19 ©aflo
  20. 20. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 どのように進めたか? 1 できる部分を少しずつ 20
  21. 21. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 どのように進めたか? 2 様々なタイミングを 逃さずに 21
  22. 22. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 どのように進めたか? 3 長い目線で 22
  23. 23. 1. できる部分を少しずつ 23 ©aflo
  24. 24. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 対象者 アクセシビリティに 興味を持ちやすい人達から 24
  25. 25. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 サービス開発フロー 25 企画 設計 開発 評価 リリース
  26. 26. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 サービス開発フロー 26 企画 設計 開発 評価 リリース マークアップ
 コーディング WebDev
  27. 27. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 どのように進めたか? UI実装
 ガイドラインに
 追加 27
  28. 28. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UIガイドライン 28 UIライブラリ UIガイドライン スタイリング UI実装
 ガイドライン 独⾃自UI
  29. 29. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UI実装ガイドライン •テーブル要素 •代替テキスト •見出し要素 •フレーム •リスト •フォーム 29
  30. 30. 2. 様々なタイミングを逃さずに 30 ©aflo
  31. 31. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 様々なタイミングを逃さずに サービスリニューアルの タイミング 31
  32. 32. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 会社概要 32
  33. 33. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 会社概要 • 2013年リニューアル • JIS X 8341-3:2010 等級Aに準拠 • ウェブアクセシビリティ方針を公開 33
  34. 34. 34
  35. 35. 35 •合言葉はユーザーファースト •ウェブだからできることの可能性 •IT業界のリーディングカンパニーとして描く
 少し先の未来 •日本工業規格JIS X 8341-3:2010への対応
  36. 36. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 経緯1 推進WGの実績が欲しかった 会社概要がリニューアルするらしい 相談に行こう 36
  37. 37. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 経緯2 JISに準拠した事を知らせるページは? アクセシビリティ方針を作ろう 37
  38. 38. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 様々なタイミングを逃さずに ガイドライン改定の タイミング 38
  39. 39. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UIライブラリ UIガイドライン 39 UIガイドライン スタイリング UI実装
 ガイドライン 独⾃自UI
  40. 40. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UIガイドライン 40 UIガイドライン デザイン原則 サービス憲章
  41. 41. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UIガイドライン • 2015年改定 • ウェブ、アプリのUI設計・開発時の
 ガイドライン • アクセシビリティ要件を
 JIS X8341-3:2010 等級A準拠に 変更 41
  42. 42. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 経緯 デザイン全般に対する意識が高まる デザイン原則が作られる 原則にユニバーサルが含まれる よしアクセシビリティを要件に入れよう 42
  43. 43. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 工夫した点 • JIS X 8341-3:2010(WCAG2.0)の
 文章を要約 • 初見の印象で嫌われないよう配慮 43
  44. 44. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 原⽂文 1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキ ストを提供する。ただし、次の場合は除く: (レベルA) コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであると き、その目的を説明する識別名を提供している。(コントロール及びユーザの入力を受け入れるコンテン ツに関するその他の要件は、ガイドライン 4.1を参照のこと。) 時間の経過に伴って変化するメディア: 非テキストコンテンツが、時間の経過に伴って変化するメディアであ るとき、代替テキストは、少なくとも、その非テキストコンテンツを識別できる説明を提供している。(メ ディアに関するその他の要件は、ガイドライン 1.2を参照のこと。) 試験: 非テキストコンテンツが、テキストで提示されると無効になる試験又は演習のとき、代替テキストは、 少なくともその非テキストコンテンツを識別できる説明を提供している。 感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、代替テキスト は、少なくともその非テキストコンテンツを識別できる説明を提供している。 CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを 確認する目的で用いられているとき、代替テキストは、その非テキストコンテンツの目的を特定し、説明 している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、 様々な障害に対応している。 装飾、整形、非表示: 非テキストコンテンツが、装飾だけを目的にしている、見た目の整形のためだけに用い られている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。 ガイドラインの要約 44
  45. 45. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 要約⽂文 ガイドラインの要約 • 1.1.1 非テキストコンテンツ • ユーザーに提示されるすべての非テキストコン テンツには、同等の目的を果たす代替テキス トを提供します。 • 非テキストコンテンツには、写真、図面、その 他の画像(例:線画、グラフィックデザイン、 絵画、3D表現)、グラフ、チャート、アニメー ションなどが含まれます。 45
  46. 46. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ガイドラインの要約 • 6項目 → 2項目 • 775文字 → 143文字 46
  47. 47. 3. 長い目線で 47 ©aflo
  48. 48. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 長い目線で 48 2011年年 UI実装ガイドラインの改定 2013年年 アクセシビリティ指針の公開 2015年年 UIガイドラインの⼤大幅改定
  49. 49. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 長い目線で 方針策定・実施に
 4年 49
  50. 50. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 長い目線で 1. JISの等級Aに一部対応 2. JISの対応等級を拡大 3. JISの適用サービスを拡大 4. より実践的なアクセシビリティ対応に拡大 5. アプリのアクセシビリティ対応に挑戦 6. アクセシビリティ分野でIT業界を牽引する 50
  51. 51. 51©aflo
  52. 52. おさらい 52 ©aflo
  53. 53. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 おさらい 1 できる部分を少しずつ 53
  54. 54. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 おさらい 2 様々なタイミングを 逃さずに 54
  55. 55. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 おさらい 3 長い目線で 55
  56. 56. 56©aflo
  57. 57. ご静聴ありがとうございます 57

×