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アクセシビリティ
本⽇の流れ

 アクセシビリティとは?
 実はできている!?
 アクセシビリティだと思っていたが……?

2
3
BA
4
WAIC
5
デザイニングWebアクセシビリティ
6
アクセシビリティとは?
アクセシビリティとは
accessibility=accsess+ability

さまざまな利⽤者が
 情報を
 さまざま
 形で利⽤できる
8
さまざまな 環境
9
ビジュアルブラウザ(Firefox)
10
テキストブラウザ(w3m)
11
ダウンローダー(SiteSucker)
12
クローラー(Googlebot)
13
ハイコントラストモード
14
ハイコントラストモード
15
拡⼤ツール(Windows )
16
スクリーンリーダー(NVDA)
17
スクリーンリーダー(VoiceOver)
18
さまざまな⼊⼒環境
19
さまざまな⼊⼒
マウス、トラックパッド、トラックボール、マウス
キー、代替マウス、タッチデバイス、キーボード、
… …
20
21
22
 を使ってアクセスしている



http://www.soumu.go.jp/menu_news/s-
news/2005/051215_1_wmv.html
23
アクセシビリティだと
思っていたが……?
何を思い浮かべますか?
したサイトとは?
25
26
「本⽂へ」リンク
27
カルーセル停⽌/再⽣ボタン
28
JIS
1.4.4
なしで200 %までサイズ変更できる
AA
29
?
30
サイズ:⼩
31
サイズ:中
32
サイズ:⼤
33
Upcoming SlideShare
Loading in …5
×

デザイニングWebアクセシビリティ 誕生秘話

2,744 views

Published on

2015-08-26 アクセシビリティやるぞ!夏祭り 〜ライトニングトーク花火6連発〜 のライトニングトークのスライドです。

Published in: Internet
  • Be the first to comment

デザイニングWebアクセシビリティ 誕生秘話

  1. 1. 実はできている!? Webアクセシビリティ
  2. 2. 本⽇の流れ   アクセシビリティとは?  実はできている!?  アクセシビリティだと思っていたが……?  2
  3. 3. 3
  4. 4. BA 4
  5. 5. WAIC 5
  6. 6. デザイニングWebアクセシビリティ 6
  7. 7. アクセシビリティとは?
  8. 8. アクセシビリティとは accessibility=accsess+ability  さまざまな利⽤者が  情報を  さまざま  形で利⽤できる 8
  9. 9. さまざまな 環境 9
  10. 10. ビジュアルブラウザ(Firefox) 10
  11. 11. テキストブラウザ(w3m) 11
  12. 12. ダウンローダー(SiteSucker) 12
  13. 13. クローラー(Googlebot) 13
  14. 14. ハイコントラストモード 14
  15. 15. ハイコントラストモード 15
  16. 16. 拡⼤ツール(Windows ) 16
  17. 17. スクリーンリーダー(NVDA) 17
  18. 18. スクリーンリーダー(VoiceOver) 18
  19. 19. さまざまな⼊⼒環境 19
  20. 20. さまざまな⼊⼒ マウス、トラックパッド、トラックボール、マウス キー、代替マウス、タッチデバイス、キーボード、 … … 20
  21. 21. 21
  22. 22. 22
  23. 23.  を使ってアクセスしている    http://www.soumu.go.jp/menu_news/s- news/2005/051215_1_wmv.html 23
  24. 24. アクセシビリティだと 思っていたが……?
  25. 25. 何を思い浮かべますか? したサイトとは? 25
  26. 26. 26
  27. 27. 「本⽂へ」リンク 27
  28. 28. カルーセル停⽌/再⽣ボタン 28
  29. 29. JIS 1.4.4 なしで200 %までサイズ変更できる AA 29
  30. 30. ? 30
  31. 31. サイズ:⼩ 31
  32. 32. サイズ:中 32
  33. 33. サイズ:⼤ 33
  34. 34.  を満たさないサイトが多い  200%の拡⼤が求められているが、 例⽰したサイトでは約133%まで   画像が多⽤されていると ほとんど変わらないことも 34
  35. 35. 総務省 35
  36. 36. 2.1.4. 36
  37. 37. 2.1.4. ホームページ する事例がありますが、これだけでは、ウ ェブアクセシビリティに対応しているとは 37
  38. 38. Webアクセシビリティの確保は特別なことではない。 38
  39. 39. 植⽊さんのコメント  、ほとんど⽂字の⼤きさが変わ らない⽂字サイズ変更ボタンが少なくない  Webブラウザであれば 意味のない⽂字サイズ変更ボタンは 39
  40. 40. 基準を満たす⽅法の例 40
  41. 41.   ⽂字サイズを変えられるようにする ⽂字サイズ変更ボタンをつける ⽂字サイズを変えても はみ出したりしないようにする 41
  42. 42. ここまでのまとめ 42
  43. 43. ここまでのまとめ  あまり役に⽴っていないこともある ⽂字サイズが変更できることは⼤切だが ⽂字サイズ変更ボタンでなくてもよい 43
  44. 44. ⽂字サイズ変更ボタンは なくてもいい! もっと⼤切なことがある! ? 44
  45. 45. 気づかないうちに アクセシビリティを確保していた! デザイン編〜
  46. 46. ガイドライン(続き) ホームページ等にアクセスしています。 46
  47. 47. アクセスできることが つまり 47
  48. 48.   テキストが明確  ちゃんとマークアップされている   テキストが存在しない、あいまい  ちゃんとマークアップされてない 48
  49. 49. 実は⼤切なこと 1. ページタイトルをきちんとつける 2. 3. 4. 画像に 5. キーボードだけで操作できる 49
  50. 50. ページタイトルをきちんとつける 50
  51. 51. ブラウザのタブ名 ブックマークのタイトル  サーチエンジンやサイト内検索結果  からのリンク 51
  52. 52. OK:内容 52
  53. 53. NG:ページタイトルがない 53
  54. 54. NG:他のページと区別できないタイトル 54
  55. 55. 55
  56. 56. 56
  57. 57. OK:レベルに沿った具体的 57
  58. 58. OK: 58
  59. 59. NG: がない 59
  60. 60. NG: から内容を推測できない 60
  61. 61. NG: 61
  62. 62. 62
  63. 63.   形・⼤きさ  63
  64. 64. OK: だけでなくラベルに変化をつける 64
  65. 65. NG: 65
  66. 66. NG: 66
  67. 67. 画像に 67
  68. 68. 画像は利⽤できないことがある 画像が利⽤できない状況    スクリーンリーダーを使っている 68
  69. 69. OK:本⽂ 69
  70. 70. NG:画像だけで情報が提供されている 70
  71. 71. 代替テキストとは? 画像の代替となるテキスト   HTMLでは img alt属性で指定 例: <img src=”foo.png” alt=”代替テキスト” /> 71
  72. 72.   画像だけに着⽬すると失敗しやすい  前後の⽂や、ページのテーマを含めて考える 「alt ない  alt属性」  本⽂がきちんとしていれば「カラ alt=“” 」 72
  73. 73. OK: 73
  74. 74. OK: 74
  75. 75. NG: 75
  76. 76. NG:代替テキストとキャプションがかぶっている 76
  77. 77. NG:画像 77
  78. 78. HTMLのimg  代替テキストが できる  スクリーンリーダーやクローラーにも伝わる CSS  ハイコントラストモードや印刷プレビューで消える  スクリーンリーダーやクローラーには伝わらない 78
  79. 79. OK:意味のある画像は前景に置く 79
  80. 80. NG: 80
  81. 81. NG: 81
  82. 82. キーボードだけで操作できる 82
  83. 83. OK:キーボード 83
  84. 84. OK:切り替えボタンを明⽰する 84
  85. 85. OK:フォーカス 85
  86. 86. NG:マウスクリックでしか操作できない 86
  87. 87. NG:マウスオーバーでしか操作できない 87
  88. 88. NG:スワイプでしか操作できない 88
  89. 89. NG:フォーカス 89
  90. 90. まとめ
  91. 91. ⽂字サイズ変更ボタンは なくてもいい! さらに もっと⼤切なことがある! もう⼀度 91
  92. 92.   テキストが明確  ちゃんとマークアップされている   テキストが存在しない、あいまい  ちゃんとマークアップされてない 92
  93. 93. 実は特別なことではない  何   テキストが存在しなければマークアップできない  マークアップしてもわかりにくいまま 93
  94. 94. つまり… どのプロセスにも アクセシビリティのポイントがある  Web  Web 94
  95. 95. さあ、はじめよう! 95
  96. 96. デザイニングWebアクセシビリティ 96
  97. 97. ありがとうございました

×