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.

アクセシビリティからはじめる、WebサイトのUXデザイン

50,351 views

Published on

デザイニングWebアクセシビリティ刊行記念イベント <http: /> で使用したスライドです。

Published in: Internet
  • Be the first to comment

アクセシビリティからはじめる、WebサイトのUXデザイン

  1. 1. アクセシビリティからはじめる、 WebサイトのUXデザイン BAの実践例に見る、ボトムアップとトップダウンのアプローチ
  2. 2. 注意事項  会場は禁煙です。 喫煙は館外の指定の場所でお願いいたします。  本イベントのハッシュタグは#a11ybooksとなります。  イベントの模様は自由に撮影いただき、ブログやSNS等で 拡散いただいて構いません(むしろお願いします)。 主催者も、公式Facebookページ用に写真撮影をいたします (ご了承ください)  スライドの公開は公式Facebookからご案内します。 2
  3. 3. 本日の流れ  ご挨拶・アイスブレイク  セッション1:マークアップからの取り組み ~ボトムアップのアプローチ~  セッション2:デザインからの取り組み ~ビジュアルデザインとコンテンツ設計のアプローチ~  休憩  セッション3:戦略からの取り組み ~トップダウンのアプローチ~ 3
  4. 4. 自己紹介 4
  5. 5. BA 5
  6. 6. ウェブアクセシビリティ基盤委員会(WAIC) 6
  7. 7. デザイニングWebアクセシビリティ 7
  8. 8. マークアップからの取り組み ~ボトムアップのアプローチ~
  9. 9. このセッションでお話しすること HTMLとアクセシビリティ  HTMLとは?  アクセシビリティとは? マークアップで気をつけること  HTMLと代替テキスト  CSSによる画像置換  悩ましい事例とさまざまなアプローチ例 9
  10. 10. HTMLとアクセシビリティ 10
  11. 11. アクセシビリティとは さまざまな利用者が さまざまな環境でアクセス可能であること  情報を認識して理解できる  さまざまな選択肢が提供されている  自分に合った形で利用できる 11
  12. 12. さまざまな環境 12
  13. 13. ビジュアルブラウザ(Firefox) 13
  14. 14. テキストブラウザ(w3m) 14
  15. 15. ダウンローダー(SiteSucker) 15
  16. 16. クローラー(Googlebot) 16
  17. 17. ハイコントラストモード 17
  18. 18. ハイコントラストモード 18
  19. 19. 拡大ツール(Windows拡大鏡) 19
  20. 20. スクリーンリーダー(NVDA) 20
  21. 21. スクリーンリーダー(VoiceOver) 21
  22. 22. 代替マウス 22
  23. 23. 点字ディスプレイ 23
  24. 24. 視線入力装置 24
  25. 25. さまざまな環境に対応するには? 25
  26. 26. 重要なのはマシンリーダビリティ さまざまなプログラムで処理できること  =マシンリーダビリティ(機械可読性)が高い アクセシビリティの確保に重要なのは プログラムで処理できるようにしておくこと  =マシンリーダビリティを確保すること  Webがアクセシブルなのはマシンリーダブルだから 26
  27. 27. プレーンテキストの場合  ■デザイニングWebアクセシビリティ ●訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実 践的な内容 ・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介 ・上流から下流まで、制作プロセスの全てをカバー ・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 ●取り組みの背景 ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけで なく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力した りと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができま す。 27
  28. 28. プレーンテキスト=ヒューマンリーダブル 見出し、箇条書きらしきものがある  頭に記号を付けるなどして、 見出しや箇条書きを表現している 人間が見ればそれらしく見えるが……  機械が処理するときどうか?  決まったルールになっているのか? 28
  29. 29. HTMLとは? HypertextMarkupLanguage  Webコンテンツの核となるマークアップ言語  テキストにさまざまなマークを付けることで、 その意味(セマンティクス)を明確にする  マークを付けること=マークアップ 29
  30. 30. HTMLでマークアップした場合 <!DOCTYPEhtml> <htmllang=“ja”> <head> <title>デザイニングWebアクセシビリティ</title> </head> <body> <h1>デザイニングWebアクセシビリティ</h1> <h2>訴求ポイント(この本が既存の本と異なる点)</h2> <ul> <li>「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容</li> <li>解決アプローチの例として、実際に公開されているサイトの実例を多数紹介</li> <li>上流から下流まで、制作プロセスの全てをカバー</li> <li>デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視</li> </ul> <h2>取り組みの背景</h2> <p>ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスした り、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることがで きます。</p> </body> </html> 30
  31. 31. HTML=マシンリーダブル マークアップすると要素の意味が明確になる  明確なルールにのっとっているため、 機械的に判断することが容易  マシンリーダビリティが確保される HTMLをきちんとマークアップすれば さまざまなツールで利用しやすくなり アクセシビリティが高まる 31
  32. 32. マークアップで気をつけること 32
  33. 33. HTMLと アクセシビリティといえば? 33
  34. 34. 代替テキスト 34
  35. 35. 代替テキストとは? 画像の代替となるテキスト  画像が表示できないとき、代わりに使われる  HTMLではimg要素のalt属性で指定 例:<imgsrc=”foo.png”alt=”代替テキスト”/> 35
  36. 36. 厚生労働省 36
  37. 37. 災害情報(?)部分の冒頭 37
  38. 38. そのソース <divid="earthquakettitle"class="prt-disasterInfo"> <pstyle="margin:0010px-3px"> <ahref="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message_large.png"alt="日本年金機構にお ける不正アクセスによる情報流出事案について"border="0"></a> </p> <!— <pstyle="margin:0010px-3px"> <ahref="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message.png"alt="日本年金機構不正アクセ ス事案について 年金情報をめぐり、なりすましなどの犯罪が起こっています。ご 注意ください。"border="0"></a> </p> --> 38
  39. 39. 大臣・副大臣・政務官の紹介 39
  40. 40. スクリーンリーダーで読むと、 大臣・副大臣の名前は 何回読まれるでしょう? 問題 40
  41. 41. 答え:合計7回 41
  42. 42. うち大臣は3回 42
  43. 43. 大臣のHTML <divclass=“contents”> <pclass=“ruby”>しおざき やすひさ</p> <pclass=“name”>塩崎 恭久</p> <p><ahref=“/kouseiroudoushou/profile/daijin.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <divclass=“image”> <imgsrc=“images/daijin_img_01.jpg”alt=“塩崎 恭久” width=“137”height=“155”/> </div> 43
  44. 44. 副大臣のHTML <divclass=“contents”> <pclass=“ruby”>たけうち ゆずる</p> <pclass=“name”>竹内 譲</p> <p><ahref=“/kouseiroudoushou/profile/hukudaijin01.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <divclass=“image”> <imgsrc=“images/hukudaijin_img_01.jpg”alt=“” width=“137”height=“155”/> </div> 44
  45. 45. 冗長な代替テキスト 45
  46. 46. 46
  47. 47. 代替テキストまとめ 代替テキストを適切に指定することが重要  適切に付けられていないと、 全くアクセスできなくなることがある つけすぎも良くない  写真や装飾に過剰なテキストを指定しない  装飾には空の代替テキストを 47
  48. 48. 代替テキストの悩ましい例と アプローチの例 48
  49. 49. 特許庁の組織図 49
  50. 50. 特許庁の組織図のalt <divid=“tmp_contents”> <h1>組織図</h1> <p><imgalt=“特許庁の組織図” width=“530” height=“706” src=“/shoukai/soshiki/images/soshikizu.jpg” /></p> <p class=“right”><em>[更新日 2015年5月13日] </em></p> </div> 50
  51. 51. 文部科学省のアプローチ 51
  52. 52. 文部科学省の組織図 52
  53. 53. 文部科学省の組織図のalt <imgsrc=“04/001.gif”alt=“平成27年度文部科学省の組織図 (平成27年10月1日現在) 文部科学大臣 副大臣(2名) 大臣政務官(2名) 事務次官 文部科学審議官(2名) 大臣官房 人事課 総務課 会計課 政策課 国際課 文教施設企画部 施設企画課 施設助成課 計画課 参事官 生涯学習政策局 政策課 調査企画課 生涯学習推進課 (後略、全129行) 53
  54. 54. 法務省のアプローチ 54
  55. 55. 法務省の組織図 55
  56. 56. AOI Pro. のアプローチ 56
  57. 57. AOIPro.の組織図 57
  58. 58. AOIPro.の組織図周辺のマークアップ <objectclass=“svg-image”data=“/files/chart-5-2.svg”width=“100%”> <divclass=“bass-list-A01”> <ul> <li>株主総会 <ul> <li>監査役会</li> </ul> </li> <li>取締役会</li> <li>代表取締役社長 <ul> <li>経営会議</li> <li>第一プロダクションディビジョン <ul> <li>制作ユニット</li> (後略) 58
  59. 59. AOIPro.の組織図そのもののマークアップ(抜粋) <gid=“svg-obj01-01”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>株主総会</text> </g> <gid=“svg-obj01-02”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>取締役会</text> <pathd=“M1000v-49”/> </g> <gid=“svg-obj01-03”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>代表取締役社長</text> <pathd=“M1000v-50”/> </g> <gid=“svg-obj02-01”> <usexlink:href=“#svg-box01-02”/> <textx=“100”y=“21”>監査役会</text> <pathd=“M015h-100”/> </g> 59
  60. 60. 考えてみよう! 60
  61. 61. 考えてみよう どのアプローチが望ましいでしょうか?  アクセスのしやすさ  運用のしやすさ もっと他のアプローチはないでしょうか? 61
  62. 62. CSSによる画像置換 62
  63. 63. 厚生労働省 63
  64. 64. ハイコントラストモード 64
  65. 65. DOMツリー 65
  66. 66. CSSまとめ CSSで指定された背景画像はあくまで背景  背景なので、背景を非表示にすると消えてしまう  ハイコントラストモードや印刷時に出てこない 意味のある画像は背景にしない  意味のある画像はCSSではなく、HTMLで 66
  67. 67. OK:意味のある画像は前景に置く 67
  68. 68. OK:代替テキストが必要な画像は前景に置く 68
  69. 69. デザインからの取り組み ~ビジュアルデザインとコンテンツ設計のアプローチ~
  70. 70. このセッションでお話しすること コンテンツをデザインするプロセス ビジュアルデザインで気をつけること  悩ましい代替テキストへのアプローチ  インタラクション  カルーセル問題とさまざまなアプローチ例 要件定義で気をつけること 70
  71. 71. コンテンツをデザインするプロセス 71
  72. 72. コンテンツをデザインするプロセス 要件定義  このサイトにどのようなコンテンツが必要になるか? コンテンツ設計  コンテンツとしてどのような要素を持たせるか? ビジュアルデザイン  コンテンツの各要素をどのように見せるか? 72
  73. 73. それぞれのプロセスで決めることの例 要件定義  このサイトには買い物かごの機能が必要 コンテンツ設計  表示するのは商品名、商品写真、金額、個数……etc. ビジュアルデザイン  写真を左に配置して商品名を大きく、 その後に金額と個数も読めるように配置……etc. 73
  74. 74. ビジュアルデザインで 気をつけること 74
  75. 75. よく言われる「わかりやすい」デザイン 1. コントラストを高めて見分けやすく 2. 行間や一行の文字数を工夫して読みやすく 3. どこが押せるかわかりやすく 4. リンクやボタンを大きくして押しやすく 5. スタイルを一貫させて認識しやすく 75
  76. 76. 実は重要な5つのポイント 1. 視覚に依存せずテキストで示す 2. 文字は画像にせずテキストにする 3. フォーカス表示を消さない 4. 閃光を使わない 5. 拡大できるようにする 76
  77. 77. 特に重要なのは 視覚に依存しないこと 77
  78. 78. NG:色に頼った表現 78
  79. 79. OK:色だけでなくテキストにも変化をつける 79
  80. 80. NG:配置に頼った表現 80
  81. 81. OK:見た目の特徴だけでなく名前でも指示する 81
  82. 82. NG:文字の装飾に頼った表現 82
  83. 83. OK:打ち消し線だけでなくテキストも併記する 83
  84. 84. 悩ましい代替テキストへの デザインプロセスからのアプローチ 84
  85. 85. 代替テキストが悩ましい例は、 デザインに遡ることで 解決できることがある 85
  86. 86. グラフと元データを併記する 86
  87. 87. 充実したキャプションをつける 87
  88. 88. インタラクション 88
  89. 89. インタラクションとは Inter-action  相互作用のこと  ユーザーとシステムの相互作用のこと 狭義には  ユーザーがなんらか操作(入力)すると 動いたり変化したりして反応(出力)するもの 89
  90. 90. Webにおけるインタラクションの例 テキストリンク ボタン テキスト入力欄 スクロールバー 90
  91. 91. 動きを伴うインタラクションの例 91
  92. 92. 動きを伴うインタラクションの例 92
  93. 93. カルーセル問題とアプローチ例 93
  94. 94. カルーセルとは? 94
  95. 95. Rio2016 95
  96. 96. Rio2016 96
  97. 97. Rio2016下部 97
  98. 98. Rio2016下部 98
  99. 99. なぜカルーセルが問題なのか 99
  100. 100. 読み終わる前に消えてしまう/誤操作する 100
  101. 101. 不意に動いた要素に注意を引かれてしまう 101
  102. 102. 動き続ける要素に注意を引かれてしまう 102
  103. 103. OK:コンテンツが自動で動くが、すぐ止まる 103
  104. 104. 首相官邸のアプローチ 104
  105. 105. 首相官邸 105
  106. 106. 首相官邸 106
  107. 107. 富士通のアプローチ 107
  108. 108. 富士通 108
  109. 109. じぶん銀行のアプローチ 109
  110. 110. じぶん銀行 110
  111. 111. 考えてみよう! 111
  112. 112. 考えてみよう どのアプローチが望ましいでしょうか?  アクセスのしやすさ  運用のしやすさ そもそも、 なぜカルーセルが求められるのでしょうか? 112
  113. 113. 要件定義で気をつけること 113
  114. 114. 危険なパターン 114
  115. 115. PDF問題 115
  116. 116. 116
  117. 117. 紙もののコンテンツは要注意 PDFはアクセスしづらい場合がある  作り方によるが、スキャンした物は基本NG  HTMLにするほうが圧倒的にアクセシブル HTMLにする場合も、ほぼ再構成が必要  固定のレイアウトが想定されていることが多く、 複雑な表や図版など、Webに適さない表現が多い 117
  118. 118. 戦略からの取り組み ~トップダウンのアプローチ~
  119. 119. このセッションでお話しすること 戦略とは? 戦略で気をつけること  アクセシビリティ方針を作ろう!  アクセシビリティ方針の注意点  悩ましい事例とさまざまなアプローチ例 おわりに 119
  120. 120. 戦略とは? 120
  121. 121. 戦略とは? プロジェクトの目的を明確にするプロセス  企業や組織の行動には必ず目的がある  何のためにサイトを作るのか分からないと、 サイトに何が必要で何が不要かわからない 121
  122. 122. 戦略フェイズでやること 与件の整理  RFPの確認、前提の確認など ビジネス要件の調査  運営者、ビジネス、ユーザーなどの確認 プロジェクト要件定義  プロジェクトの目的、数値目標、スコープ等の確認 122
  123. 123. 戦略で気をつけること 123
  124. 124. アクセシビリティ方針を作ろう! 124
  125. 125. ウェブアクセシビリティ方針策定ガイドライン 125
  126. 126. 方針に明記すべき事項 対象範囲  サイト名やドメインなど、対象とする範囲を明示  除外する部分がある場合は、特定できるように明記 達成等級及び対応度  A~AAAのうち、どのレベルを目標とするか明記する  5つの対応度のうち、どの対応度とするか選択  適合/ 準拠/ 一部準拠/ 配慮し試験/ 配慮 126
  127. 127. 達成等級とは? WCAG 2.0は、アクセシビリティ確保のために 守るべき達成基準を定めている 達成基準にはA, AA, AAA の 3つのレベルがある 127
  128. 128. WCAG2.0 128
  129. 129. レベルA どんなサイトも満たすべき、最低限の基準  この基準を満たせないと、支援技術を駆使しても 全くアクセスできなくなる場合がある  25項目の基準  非テキストコンテンツにテキストを用意する、 キーボードでも操作できるようにする、など 129
  130. 130. レベルAA 望ましい基準  この基準を満たすと、支援技術を駆使しなくても 多くの環境でアクセスできるようになる  13項目の基準  最低限のカラーコントラスト、文字サイズなど 130
  131. 131. レベルAAA 発展的な基準  この基準を満たすと、 よりアクセスしやすくなることがある  23項目の基準  レベルA~AAの基準を厳しくしたものに加え、 わかりやすい言葉を使う、など 131
  132. 132. アクセシビリティ方針の注意点 132
  133. 133. あいまいな方針 133
  134. 134. 厳しすぎる方針、具体的すぎる方針 134
  135. 135. 手段が目的になってしまう 135
  136. 136. ランキング対策の「アクセシビリティ対応」 136
  137. 137. ランキング対策の「アクセシビリティ対応」 137
  138. 138. ガイドラインに適合させるもっとも簡単な方法 138
  139. 139. アクセシビリティ方針のポイント 139
  140. 140. 無理のない範囲で定める 140
  141. 141. 明確に定める ガイドラインに沿って 目標とするレベルを決める  特にアクセシビリティが重要ならレベルAA 適用範囲、期限などをはっきりさせる  基本的にはサイト全体、公開時に対応でよい  例外ができてしまう場合は明確にする 141
  142. 142. 目的もドキュメント化する なぜアクセシビリティに取り組むかを明文化  何のためのアクセシビリティなのかを押さえる  公開されている他社の方針を参考にするのも良い  ただし、意味も分からずにコピペはNG 142
  143. 143. 厚生労働省のアプローチ 143
  144. 144. アクセシビリティについて 144
  145. 145. アクセシビリティについて(拡大) 145
  146. 146. 文部科学省のアプローチ 146
  147. 147. アクセシビリティへの対応について 147
  148. 148. ウェブアクセシビリティ方針 148
  149. 149. ウェブアクセシビリティ取組み状況 149
  150. 150. 首相官邸のアプローチ 150
  151. 151. 151
  152. 152. ヤフー株式会社のアプローチ 152
  153. 153. ウェブアクセシビリティ方針 153
  154. 154. ウェブアクセシビリティ方針(続き) 154
  155. 155. グリー株式会社のアプローチ 155
  156. 156. 156
  157. 157. ユーザー vs コンテンツ提供者 157
  158. 158. ユーザーの都合とコンテンツの都合 基本的に、コンテンツは ユーザーに向けて提供されているもの  そのため、ユーザーの方向を見ている しかし時には、コンテンツ提供側の都合で ユーザーメリットのない対応をすることも  典型例は広告  必ずしも悪いわけではなく、必要なこともある 158
  159. 159. どうやって判断する? 159
  160. 160. カルーセルの話 160
  161. 161. カルーセルは何を解決するのか? コンテンツ提供側から見た カルーセルのメリットは 複数の要素を「同列」に表示できること 161
  162. 162. なぜ「同列」であることが重要なのか? 序列をつけたくない場合がある  何を先頭に表示するのか、もめる場合  複数のコンテンツを平等に扱いたい場合 ユーザーのためというより、 コンテンツ提供側の政治的な要因 162
  163. 163. 考えてみよう! 163
  164. 164. 考えてみよう どうすればアクセシビリティへの取り組みを 進めていけるのでしょうか? そのために、 あなたには何ができるでしょうか?  自身のこととして、具体的に考えてみてください 164
  165. 165. おわりに 165
  166. 166. 取り組むための重要なポイント1 制作の最初の段階から考える必要がある  ビジュアルデザインや実装だけでは解決できない どのプロセスにも アクセシビリティのポイントがある 166
  167. 167. 取り組むための重要なポイント2 どのプロセスにも アクセシビリティのポイントがある  Webに関わる全ての人に関係がある  Webに関わるどんな人にもできることがある 167
  168. 168. 目の見えない人に 伝えるなんて無理? 168
  169. 169. 目の見えない人に 100%全てを伝えるのは無理 169
  170. 170. 100%でなければ ならないのか? 170
  171. 171. アクセシビリティは0か100かではない!  より多くの人により多くの情報が伝わればよい  少しでも多くの人に伝わるなら、 それは意味があること 171
  172. 172. 誰にもできることがある ほんの少しでも意味がある 172
  173. 173. さあ、はじめよう! 173
  174. 174. デザイニングWebアクセシビリティ 174
  175. 175. ありがとうございました 175

×