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アクセシビリティ 007

2,108 views

Published on

4/28 hireLink vol.16 実はできている!? Webアクセシビリティ講演資料です。

登壇者

太田良典

BA アクセシビリティスペシャリスト
HTML4.01のW3C仕様書を翻訳した「HTML4仕様書邦訳計画補完委員会」の委員を務めた後、2001年にBAに参加。
Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞(情報セキュリティ部門)」を受賞。
アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の委員として活動。
著書(共著)に「Dreamweaverプロフェッショナル・スタイル」「デザイニングWebアクセシビリティ」など。
http://www.b-architects.com
http://bakera.jp/
http://twitter.com/bakera
伊原力也

BA シニア・インフォメーションアーキテクト
HCD-Net認定 人間中心設計専門家。
ウェブアクセシビリティ基盤委員会(WAIC)理解と普及作業部会委員。
1999年よりWeb標準に則ったWebサイトの構築業務に従事。
2004年にBAに参加。マークアップデザインエンジニアとして業務を行う傍ら、HCD(人間中心設計)プロセス導入を推進。
現在はプロジェクト設計、調査分析、コンセプト立案から、アクセシビリティおよびユーザビリティを確保したインタラクションデザイン、さらにフロントエンド実装のディレクションまでを一貫して手がける。
クリエイティブユニットmokuva所属。
http://www.b-architects.com/
http://mokuva.com/
http://twitter.com/magi1125

Published in: Design
  • Be the first to comment

実はできているWebアクセシビリティ 007

  1. 1. 実はできている!? Webアクセシビリティ
  2. 2. 注意事項  会場は禁煙です。 喫煙所が地下一階にありますのでご利用ください。  ハッシュタグは#a11ybooksとなります。  イベントの模様は自由に撮影いただき、ブログやSNS等で 拡散いただいて構いません(むしろお願いします)。 主催者も、公式Facebookページ用に写真撮影をいたします (ご了承ください)  スライドの公開は主催者よりSNSなどでご案内します。 2
  3. 3. 本日の流れ  自己紹介  アクセシビリティとは?  アクセシビリティだと思っていたが……?  気づかないうちにアクセシビリティを確保していた! 3
  4. 4. 自己紹介 4
  5. 5. BA 5
  6. 6. ウェブアクセシビリティ基盤委員会(WAIC) 6
  7. 7. デザイニングWebアクセシビリティ 7
  8. 8. アクセシビリティとは?
  9. 9. アクセシビリティとは さまざまな利用者が さまざまな環境でアクセス可能であること  情報を認識して理解できる  さまざまな選択肢が提供されている  自分に合った形で利用できる 9
  10. 10. さまざまな環境 10
  11. 11. ビジュアルブラウザ(Firefox) 11
  12. 12. テキストブラウザ(w3m) 12
  13. 13. ダウンローダー(SiteSucker) 13
  14. 14. クローラー(Googlebot) 14
  15. 15. ハイコントラストモード 15
  16. 16. ハイコントラストモード 16
  17. 17. 拡大ツール(Windows拡大鏡) 17
  18. 18. スクリーンリーダー(NVDA) 18
  19. 19. スクリーンリーダー(VoiceOver) 19
  20. 20. 代替マウス 20
  21. 21. 点字ディスプレイ 21
  22. 22. 視線入力装置 22
  23. 23. アクセシビリティだと 思っていたが……?
  24. 24. アクセシビリティに配慮 と言われたとき、 何を思い浮かべますか? アクセシビリティに配慮したサイトとは? 24
  25. 25. 福島県大野城市 25
  26. 26. 福島県大野城市 26
  27. 27. 文字サイズ変更ボタン・色反転ボタン 27
  28. 28. 東京都西東京市 28
  29. 29. 東京都西東京市 29
  30. 30. 「本文へ」リンク 30
  31. 31. 東京オリンピック・パラリンピック競技大会組織委員会 31
  32. 32. 東京オリンピック・パラリンピック競技大会組織委員会 32
  33. 33. カルーセル停止/再生ボタン 33
  34. 34. どう思われますか? 34
  35. 35. 大変そう? コストがかかりそう? デザインに大きな影響が出そう? でもやらなきゃ駄目? 35
  36. 36. JISの文字サイズ変更の要件 1.4.4 テキストのサイズ変更の達成基準 キャプション及び文字画像を除き,テキスト は,コンテンツ又は機能を損なうことなく, 支援技術なしで200 %までサイズ変更できる (レベル AA)。 36
  37. 37. 実際にはどうか? 37
  38. 38. サイズ:小 38
  39. 39. サイズ:中 39
  40. 40. サイズ:大 40
  41. 41. 文字サイズ変更機能の現実 中を100%としたとき、大は約133% 「大」を複数回押しても大きくならない 拡大される要素はテキストのみ  ナビゲーションや見出しの文字は大きくならない 41
  42. 42. 熊本県の例 42
  43. 43. 熊本県の例 43
  44. 44. ところで…… 44
  45. 45. 総務省 みんなの公共サイト運用ガイドライン 45
  46. 46. 2.1.4.ウェブアクセシビリティ対応に関する誤解 46
  47. 47. 2.1.4.ウェブアクセシビリティ対応に関する誤解 注意点! ホームページ等において、音声読み上げ、 文字拡大、文字色変更等の支援機能を提供 する事例がありますが、これだけでは、ウ ェブアクセシビリティに対応しているとは 言えません。 47
  48. 48. Webアクセシビリティの確保は特別なことではない。 障害者差別解消法の施行で考えるべき企業サイトの品質 48
  49. 49. 植木さんのコメント 49
  50. 50. 文字サイズ変更ボタンや 音声読み上げ機能は 必要なのか? よくある質問 50
  51. 51. JISに準拠していれば、 どちらもいらない 植木さんの回答 51
  52. 52. 植木さんのコメント続き 実際に試すと、ほとんど文字の大きさが変わ らない文字サイズ変更ボタンが少なくない 最近のWebブラウザであれば ズーム機能を標準で搭載している 意味のない文字サイズ変更ボタンは やっている感を出すための免罪符に近い 52
  53. 53. 基準を満たす方法の例 53
  54. 54. ブラウザのズーム機能を利用する ブラウザの機能で 文字サイズを変えられるようにする 文字サイズ変更ボタンをつける 文字サイズを変えても 重なったりはみ出したりしないようにする 54
  55. 55. JISの文字サイズ変更の要件 1.4.4 テキストのサイズ変更の達成基準 キャプション及び文字画像を除き,テキスト は,コンテンツ又は機能を損なうことなく, 支援技術なしで200 %までサイズ変更できる (レベル AA)。 55 これは何?
  56. 56. JISX8341-3:2016 解説 『JISX8341-3:2016』は、高齢者や障害のある人を 含む全ての利用者が、使用している端末、ウェブブ ラウザ、支援技術などに関係なく、ウェブコンテン ツを利用することができるようにすることを目的と している。そのためにウェブコンテンツが満たすべ きアクセシビリティの品質基準として、レベルA、 レベルAA、レベルAAAという3つのレベルの達成基 準が定められている。 http://waic.jp/docs/jis2016/understanding/201604/ 56
  57. 57. 3つのレベル レベルA:  支援技術を駆使すればアクセスできる レベルAA:  支援技術がなくても多くの環境でアクセスできる レベルAAA:  支援技術がなくても多くの環境でアクセスしやすい 発展的なもの、達成が難しいものを含む 57
  58. 58. 文字サイズの変更はレベル「AA」 支援技術を使えば、以下のようなことが可能  サイト側の文字サイズの指定を無視して ユーザーが好みのサイズに変更  テキストを音声で読み上げる 58
  59. 59. ここまでのまとめ 59
  60. 60. ここまでのまとめ 文字サイズ変更などの機能は目立つが、 あまり役に立っていないこともある 文字サイズが変更できることは大切だが 文字サイズ変更ボタンでなくてもよい 文字サイズ変更はレベルAAの達成基準 60
  61. 61. 文字サイズ変更ボタンは なくてもいい! もっと大切なことがある! ひとことで言うと? 61
  62. 62. 気づかないうちに アクセシビリティを確保していた!
  63. 63. アクセシビリティとは(おさらい) さまざまな利用者がアクセス可能であること  情報を認識して理解できる  さまざまな選択肢が提供されている  自分に合った形で利用できる 63
  64. 64. 2.1.4.ウェブアクセシビリティ対応に関する誤解 注意点! ホームページ等において、音声読み上げ、 文字拡大、文字色変更等の支援機能を提供 する事例がありますが、これだけでは、ウ ェブアクセシビリティに対応しているとは 言えません。 64
  65. 65. みんなの公共サイト運用ガイドライン(続き) 利用者は、多くの場合、音声読み上げソフト や文字拡大ソフトなど、自分がホームページ 等を利用するために必要な支援機能を、自身 のパソコン等にインストールし必要な設定を 行った上で、その支援機能を活用して様々な ホームページ等にアクセスしています。 65
  66. 66. ブラウザや支援技術で アクセスできることが 重要 つまり 66
  67. 67. 重要なのは「マシンリーダビリティ」 アクセスできる!  テキストが明確  ちゃんとマークアップされている アクセスできない!  テキストが存在しない、あいまい  ちゃんとマークアップされてない 67
  68. 68. 実は大切なこと 1. ページタイトルをきちんとつける 2. 階層構造に沿った見出しをつける 3. 見た目に頼り切らない 4. 画像に頼り切らない 5. キーボードだけで操作できる 68
  69. 69. ページタイトルをきちんとつける 69
  70. 70. ページタイトルは重要な手がかり ブラウザのタブ名 ブックマークのタイトル 表示履歴のタイトル サーチエンジンやサイト内検索結果 外部からのリンク 70
  71. 71. OK:内容が連想できるタイトルをつける 71
  72. 72. OK:ツールを使ってタイトルを確認する 72
  73. 73. OK:ツールを使ってタイトルを確認する 73
  74. 74. NG:ページタイトルがない 74
  75. 75. NG:他のページと区別できないタイトル 75
  76. 76. NG:長すぎて肝心な部分が切られてしまう 76
  77. 77. 階層構造に沿った見出しをつける 77
  78. 78. ユーザーは見出しに注目している 78
  79. 79. OK:レベルに沿った具体的な見出しをつける 79
  80. 80. OK:同レベルの見出しを異なる見た目にする 80
  81. 81. OK:見出しを見出しとしてマークアップ 81
  82. 82. NG:見出しがない 82
  83. 83. NG:見出しから内容を推測できない 83
  84. 84. NG:見出しの階層が不適切 84
  85. 85. NG:見出しがマークアップされていない 85
  86. 86. 見た目に頼り切らない 86
  87. 87. 視覚デザインは、見えないと伝わらない 色 配置 形・大きさ 文字の装飾 87
  88. 88. OK:色だけでなくラベルに変化をつける 88
  89. 89. OK:色分けした要素にラベルを併記 89
  90. 90. OK:見た目の特徴だけでなくラベルで指示 90
  91. 91. NG:色に頼った表現 91
  92. 92. NG:色に頼った表現 92
  93. 93. NG:配置に頼った表現 93
  94. 94. 画像に頼り切らない 94
  95. 95. 画像は利用できないことがある 画像が利用できない状況  画像が読み込めない  画像を表示できないブラウザを使っている  スクリーンリーダーを使っている 95
  96. 96. OK:本文やキャプションで説明する 96
  97. 97. NG:画像だけで情報が提供されている 97
  98. 98. 代替テキストとは? 画像の代替となるテキスト  画像が表示できないとき、代わりに使われる  HTMLではimg 要素のalt属性で指定 例: <imgsrc=”foo.png” alt=”代替テキスト” /> 98
  99. 99. 文脈に沿った代替テキストとは 画像の「補足や説明」ではなく「代わり」  画像だけに着目すると失敗しやすい  前後の文や、ページのテーマを含めて考える 「alt属性値」が必ず必要なわけではない  必須なのは「alt属性」  本文がきちんとしていれば「カラ(alt=“”) 」 「写真」「図」などが最適なケースも多い 99
  100. 100. OK:装飾画像の代替テキストは空にする 100
  101. 101. OK:キャプションつきの写真に適切な代替を 101
  102. 102. NG:装飾画像に説明文が指定されている 102
  103. 103. NG:代替テキストとキャプションがかぶっている 103
  104. 104. NG:画像の代替テキストが不適切 104
  105. 105. 背景画像は伝わらないことがある HTMLのimg要素は「内容」  代替テキストが設定できる  スクリーンリーダーやクローラーにも伝わる CSSの背景画像は「装飾」  ハイコントラストモードや印刷プレビューで消える  スクリーンリーダーやクローラーには伝わらない 105
  106. 106. OK:意味のある画像は前景に置く 106
  107. 107. OK:代替テキストが必要な画像は前景に置く 107
  108. 108. NG:意味を持つ画像を背景画像として実装 108
  109. 109. NG:ロゴやナビゲーションを画像置換で実装 109
  110. 110. WebDeveloperによるチェック 110
  111. 111. キーボードだけで操作できる 111
  112. 112. さまざまな入力 マウス、トラックパッド、トラックボール、マウス キー、代替マウス、タッチデバイス、キーボード、 ソフトウェアキーボード、走査スイッチ、 視線入力、音声操作、点字キーボード…… 112
  113. 113. OK:キーボードでも操作可能にする 113
  114. 114. OK:キーボードでも操作可能にする 114
  115. 115. OK:切り替えボタンを明示する 115
  116. 116. OK:フォーカス表示をブラウザ標準にまかせる 116
  117. 117. NG:マウスクリックでしか操作できない 117
  118. 118. NG:マウスオーバーでしか操作できない 118
  119. 119. NG:スワイプでしか操作できない 119
  120. 120. NG:フォーカス表示が見えない 120
  121. 121. まとめ
  122. 122. 文字サイズ変更ボタンは なくてもいい! さらに もっと大切なことがある! もう一度 122
  123. 123. 重要なのは「マシンリーダビリティ」 アクセスできる!  テキストが明確  ちゃんとマークアップされている アクセスできない!  テキストが存在しない、あいまい  ちゃんとマークアップされてない 123
  124. 124. 取り組むための重要なポイント 実は特別なことではない  何かを新たに付け足すのではなく、 当たり前のことを真っ当にやることが重要 実は「設計」が重要  テキストが存在しなければマークアップできない  テキストが適切でなければ マークアップしてもわかりにくいまま 124
  125. 125. つまり… 実は「戦略」「要件」が重要  何のために、何を、どこまでやるのか?  最初から考えないと、あとで大変になる どのプロセスにも アクセシビリティのポイントがある  Webに関わる全ての人に関係がある  Webに関わるどんな人にもできることがある 125
  126. 126. さあ、はじめよう! 126
  127. 127. デザイニングWebアクセシビリティ 127
  128. 128. ありがとうございました 次回をご期待ください!! 128

×