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

1. 実はできている!?
Webアクセシビリティ

2. 本⽇の流れ

 アクセシビリティとは?
 実はできている!?
 アクセシビリティだと思っていたが……?

2

3. 3

4. BA
4

5. WAIC
5

6. デザイニングWebアクセシビリティ
6

7. アクセシビリティとは?

8. アクセシビリティとは
accessibility=accsess+ability

さまざまな利⽤者が
 情報を
 さまざま
 形で利⽤できる
8

9. さまざまな 環境
9

10. ビジュアルブラウザ(Firefox)
10

11. テキストブラウザ(w3m)
11

12. ダウンローダー(SiteSucker)
12

13. クローラー(Googlebot)
13

14. ハイコントラストモード
14

15. ハイコントラストモード
15

16. 拡⼤ツール(Windows )
16

17. スクリーンリーダー(NVDA)
17

18. スクリーンリーダー(VoiceOver)
18

19. さまざまな⼊⼒環境
19

20. さまざまな⼊⼒
マウス、トラックパッド、トラックボール、マウス
キー、代替マウス、タッチデバイス、キーボード、
… …
20

21. 21

22. 22

23.  を使ってアクセスしている



http://www.soumu.go.jp/menu_news/s-
news/2005/051215_1_wmv.html
23

24. アクセシビリティだと
思っていたが……?

25. 何を思い浮かべますか?
したサイトとは?
25

26. 26

27. 「本⽂へ」リンク
27

28. カルーセル停⽌/再⽣ボタン
28

29. JIS
1.4.4
なしで200 %までサイズ変更できる
AA
29

30. ?
30

31. サイズ:⼩
31

32. サイズ:中
32

33. サイズ:⼤
33

34.  を満たさないサイトが多い
 200%の拡⼤が求められているが、
例⽰したサイトでは約133%まで

 画像が多⽤されていると
ほとんど変わらないことも
34

35. 総務省
35

36. 2.1.4.
36

37. 2.1.4.
ホームページ
する事例がありますが、これだけでは、ウ
ェブアクセシビリティに対応しているとは
37

38. Webアクセシビリティの確保は特別なことではない。
38

39. 植⽊さんのコメント
 、ほとんど⽂字の⼤きさが変わ
らない⽂字サイズ変更ボタンが少なくない
 Webブラウザであれば
意味のない⽂字サイズ変更ボタンは
39

40. 基準を満たす⽅法の例
40

41. 

⽂字サイズを変えられるようにする
⽂字サイズ変更ボタンをつける
⽂字サイズを変えても
はみ出したりしないようにする
41

42. ここまでのまとめ
42

43. ここまでのまとめ

あまり役に⽴っていないこともある
⽂字サイズが変更できることは⼤切だが
⽂字サイズ変更ボタンでなくてもよい
43

44. ⽂字サイズ変更ボタンは
なくてもいい!
もっと⼤切なことがある!
?
44

45. 気づかないうちに
アクセシビリティを確保していた!
デザイン編〜

46. ガイドライン(続き)
ホームページ等にアクセスしています。
46

47. アクセスできることが
つまり
47

48. 
 テキストが明確
 ちゃんとマークアップされている

 テキストが存在しない、あいまい
 ちゃんとマークアップされてない
48

49. 実は⼤切なこと
1. ページタイトルをきちんとつける
2.
3.
4. 画像に
5. キーボードだけで操作できる
49

50. ページタイトルをきちんとつける
50

51. ブラウザのタブ名
ブックマークのタイトル

サーチエンジンやサイト内検索結果
 からのリンク
51

52. OK:内容
52

53. NG:ページタイトルがない
53

54. NG:他のページと区別できないタイトル
54

55. 55

56. 56

57. OK:レベルに沿った具体的
57

58. OK:
58

59. NG: がない
59

60. NG: から内容を推測できない
60

61. NG:
61

62. 62

63. 

形・⼤きさ

63

64. OK: だけでなくラベルに変化をつける
64

65. NG:
65

66. NG:
66

67. 画像に
67

68. 画像は利⽤できないことがある
画像が利⽤できない状況


 スクリーンリーダーを使っている
68

69. OK:本⽂
69

70. NG:画像だけで情報が提供されている
70

71. 代替テキストとは?
画像の代替となるテキスト

 HTMLでは img alt属性で指定
例: <img src=”foo.png” alt=”代替テキスト” />
71

72. 
 画像だけに着⽬すると失敗しやすい
 前後の⽂や、ページのテーマを含めて考える
「alt ない
 alt属性」
 本⽂がきちんとしていれば「カラ alt=“” 」
72

73. OK:
73

74. OK:
74

75. NG:
75

76. NG:代替テキストとキャプションがかぶっている
76

77. NG:画像
77

78. HTMLのimg
 代替テキストが できる
 スクリーンリーダーやクローラーにも伝わる
CSS
 ハイコントラストモードや印刷プレビューで消える
 スクリーンリーダーやクローラーには伝わらない
78

79. OK:意味のある画像は前景に置く
79

80. NG:
80

81. NG:
81

82. キーボードだけで操作できる
82

83. OK:キーボード
83

84. OK:切り替えボタンを明⽰する
84

85. OK:フォーカス
85

86. NG:マウスクリックでしか操作できない
86

87. NG:マウスオーバーでしか操作できない
87

88. NG:スワイプでしか操作できない
88

89. NG:フォーカス
89

90. まとめ

91. ⽂字サイズ変更ボタンは
なくてもいい!
さらに
もっと⼤切なことがある!
もう⼀度
91

92. 
 テキストが明確
 ちゃんとマークアップされている

 テキストが存在しない、あいまい
 ちゃんとマークアップされてない
92

93. 実は特別なことではない
 何

 テキストが存在しなければマークアップできない

マークアップしてもわかりにくいまま
93

94. つまり…
どのプロセスにも
アクセシビリティのポイントがある
 Web
 Web
94

95. さあ、はじめよう!
95

96. デザイニングWebアクセシビリティ
96

97. ありがとうございました