2016-09-27に渋谷ヒカリエで実施したイベント「ヒカ☆ラボ」の講演資料です。 https://career.levtech.jp/hikalab/event/detail/60/

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属性で指定
例: <imgsrc=”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. ありがとうございました