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

1. 実はできている!?
Webアクセシビリティ2
～企画・要件・設計編～

2. 注意事項
 会場は禁煙です。
喫煙所が地下一階にありますのでご利用ください。
 ハッシュタグは#a11ybooksとなります。
 イベントの模様は自由に撮影いただき、ブログやSNS等で
拡散いただいて構いません（むしろお願いします）。
主催者も、公式Facebookページ用に写真撮影をいたします
（ご了承ください）
 スライドの公開は主催者よりSNSなどでご案内します。
2

3. 本日の流れ
自己紹介
前回のおさらい
アクセシビリティだと思っていたが……?
気づかないうちにアクセシビリティを確保
していた！
3

4. 自己紹介
4

5. BA
5

6. ウェブアクセシビリティ基盤委員会（WAIC）
6

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

8. 前回のおさらい

9. アクセシビリティに配慮
と言われたとき、
何を思い浮かべますか?
アクセシビリティに配慮したサイトとは?
9

10. 福岡県大野城市
10

11. 文字サイズ変更ボタン・色反転ボタン
11

12. 2.1.4.ウェブアクセシビリティ対応に関する誤解
12

13. 2.1.4.ウェブアクセシビリティ対応に関する誤解
注意点！
ホームページ等において、音声読み上げ、
文字拡大、文字色変更等の支援機能を
提供する事例がありますが、これだけでは、
ウェブアクセシビリティに対応している
とは言えません。
13

14. 文字サイズ変更ボタンは
なくてもいい!
もっと大切なことがある!
ひとことで言うと?
14

15. みんなの公共サイト運用ガイドライン(続き)
利用者は、多くの場合、音声読み上げソフト
や文字拡大ソフトなど、自分がホームページ
等を利用するために必要な支援機能を、自身
のパソコン等にインストールし必要な設定を
行った上で、その支援機能を活用して様々な
ホームページ等にアクセスしています。
15

16. さまざまな
ブラウザや支援技術で
アクセスできることが
重要
つまり
16

17. 重要なのは「マシンリーダビリティ」
アクセスできる！
 テキストが明確
 ちゃんとマークアップされている
アクセスできない！
 テキストが存在しない、あいまい
 ちゃんとマークアップされてない
17

18. 実はできていた、アクセシビリティで大切なこと
1. ページタイトルをきちんとつける
2. 階層構造に沿った見出しをつける
3. 見た目に頼り切らない
4. 画像に頼り切らない
5. キーボードだけで操作できる
18

19. 取り組むための重要なポイント
実は特別なことではない
 何かを新たに付け足すのではなく、
当たり前のことを真っ当にやることが重要
実は「設計」が重要
 テキストが存在しなければマークアップできない
 テキストが適切でなければ
マークアップしてもわかりにくいまま
19

20. つまり…
実は「戦略」「要件」が重要
 何のために、何を、どこまでやるのか?
 最初から考えないと、あとで大変になる
どのプロセスにも
アクセシビリティのポイントがある
 Webに関わる全ての人に関係がある
 Webに関わるどんな人にもできることがある
20

21. 気づかないうちに
アクセシビリティを確保していた!

22. 「適切なテキスト」のための設計
1. 内容を推測できるカテゴリ名にする
2. わかりやすい現在地表示をつける
3. リンク先がわかるようにする
4. フォームのラベルを明確にする
5. フォームのエラーを明確にする
22

23. 内容を推測できるカテゴリ名にする
23

24. OK:内容を推測できるカテゴリ名にする
24

25. OK:ルールと仕組みで一貫性を保つ
25

26. NG:カテゴリ名がわかりにくい
26

27. NG:ラベルがバラバラ
27

28. わかりやすい現在地表示をつける
28

29. OK:一般的なわかりやすい現在地表示をつける
29

30. OK:一般的なわかりやすい現在地表示をつける
30

31. NG:現在地を把握する手段がない
31

32. NG:現在地の表示と間違えそうな表現がある
32

33. 注:コンテンツを邪魔しては意味がない
33

34. リンク先がわかるようにする
34

35. ユーザーはリンクに注目している
35

36. OK:リンクにリンク先のタイトルを加える
36

37. OK:文中リンクを外に出して独立させる
37

38. OK:周辺のテキストをリンクに含める
38

39. NG:ラベルがないリンク
39

40. NG:「こちら」リンク
40

41. NG:「もっと読む」「詳細」リンク
41

42. フォームのラベルを明確にする
42

43. OK:具体的で明確なラベルをつける
43

44. OK:必須項目を明確にする
44

45. OK:必要に応じて説明をつける
45

46. OK:プレースホルダをラベル代わりにしない
46

47. NG:ラベルや説明があいまいで混乱する
47

48. NG:必須か任意かがわからない
48

49. NG:必要な説明がなく、入力の条件がわからない
49

50. NG:ラベルがなく、入力欄が何なのかわからない
50

51. フォームのエラーを明確にする
51

52. OK:エラー箇所を明確に示す
52

53. OK:エラー表示と修正フォームをセットにする
53

54. OK:エラー理由と修正方法を明示する
54

55. NG:エラー箇所がわからず修正できない
55

56. NG:エラー表示画面と入力画面がわかれている
56

57. NG:エラーメッセージが理解できず修正できない
57

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

59. プロジェクトの最初から
「アクセシビリティを
どうするか?」
を決めておくべし
ちゃんとやるには「アクセシビリティ方針」
59

60. 方針がないと……
60

61. 方針がないとどうなる?
配慮が全く行われない
 公開に実は必要だったとなっても後の祭り
適切な判断ができない
 判断がぶれる、人によって判断が異なる
合意形成ができない、覆る
 プロジェクト内、あるいはクライアントとの衝突
61

62. 方針がないと
まったくアクセスできなくなる
危険性も出てくる!
矛盾する要件
62

63. CAPTCHA
63

64. ブラウザやOSの機能への干渉
64

65. 動画
65

66. 紙媒体用のコンテンツ
66

67. 基準を満たさないコンテンツを削除
67

68. まずは最低限の方針を立てよう
68

69. 無理のない範囲で
69

70. 明確に定める
ガイドラインに沿って
目標とするレベルを決める
 特にアクセシビリティが重要ならレベルAA
適用範囲、期限などをはっきりさせる
 基本的にはサイト全体、公開時に対応でよい
 例外ができてしまう場合は明確にする
70

71. 各種ガイドラインを参考に
制作プロセスに関するガイドライン
 ウェブアクセシビリティ方針策定ガイドライン
 JISX8341-3:2016対応発注ガイドライン
 JISX8341-3:2016試験実施ガイドライン
※「ウェブコンテンツのJIS X8341-3:2016対応度表記ガ
イドライン」は「準拠」の表記に関するもので、これら
全てに関連する
71

72. 方針をいつ立てるのか?
発注のパターンによって異なる
 方針を先に考えてあるパターン
 自分たちで決めておく or 外部発注で決める
 制作発注と同時に方針も考えるパターン
 方針がないまま進んでしまうパターン
72

73. プロジェクトの流れ（受託まで）
73
「ウェブの仕事力が上がる標準ガイドブック 3 Webディレクション」より

74. 方針を先に考えてあるパターン
74
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
ア
ク
セ
シ
ビ
リ
テ
ィ
方
針
策
定
Ｒ
Ｆ
Ｐ
作
成

75. 制作発注と同時に方針も考えるパターン
75
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
要
件
定
義

76. 方針があればそれでいいのか?
方針があっても、
適切でないものだと効果を発揮しない
 あいまいな方針を立ててしまう
 誤解に基づいて方針を立ててしまう
 手段が目的になってしまう
76

77. 実際にあったこんな発注
77
あまり良くない例

78. あいまいな方針を立ててしまうケース
78

79. 79
セキュリティ、Web標準、
アクセシビリティに配慮し
制作すること。
実例

80. 勢いはあるが……
具体的に何をどうすれば良いのかからない
 「配慮する」といっても人によって基準がまちまち
80

81. 81
JIS X8341-3:2010に基づく
アクセシビリティを
確保すること。
実例

82. 82
アクセシビリティについては
「JIS X 8341-3:2010」に
準拠すること。
実例

83. JISに沿うことはわかるが……
目標とするレベルが不明
 たとえばAAの達成基準を
満たすべきなのかどうかわからない
83

84. 誤解に基づいて方針を立ててしまうケース
84

85. 85
文字拡大機能
ブラウザの機能ではなく、
ページ上のボタンをクリックすることで
CSS を切り替え処理等により容易に
文字サイズを変更できるようにすること。
サイズについては３サイズ程度
選択できるようにすること。
実例

86. その結果
86

87. 手段が目的になってしまうケース
87

88. 88
以下ランキング同業種内1位評価獲得
• 全上場企業ホームページ充実度ランキング調査
• IRサイト総合ランキング
• 主要企業Webユーザビリティランキング
• インターネットIR表彰
実例

89. ランキング対策の「アクセシビリティ対応」
89

90. 実際にあったこんな発注
90
なかなか良いと思える例

91. アクセシビリティについては
「JIS X 8341-3:2010」に準拠すること。
達成等級は以下の通り:
達成等級ＡＡ 準拠
91
実例

92. 表記
ウェブアクセシビ
リティ方針の提示
又は公開
目標とする適合レ
ベルの達成基準の
試験結果
追加表記事項
準拠 必須
試験を実施し、達成
基準を全て満たして
いることを確認
なし
一部準拠 必須
試験を実施し、達成
基準の一部を満たし
ていることを確認
今後の対応方針
部分適合に関する記
述（適用する場合）
配慮 必須
試験の実施の有無、
結果は問わない
目標とした適合レベ
ル又は参照した達成
基準一覧
ただし……「準拠」の意味、分かっていますか?
92

93. アクセシビリティ、
ユーザビリティについて、
弊社のレベルを考慮いただき
準拠基準をご提案ください。
93
実例

94. 「 JIS X 8341-3:2010」 の「等級A」への
準拠を検討しているが、本方針は
要件定義工程でのWEBサイト検討状況を
踏まえ決定する想定です。
アクセシビリティ方針の検討方法についても
ご提案ください。
94
実例

95. 制作と合わせて方針の提案も求めるパターン
95
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
提
案
書
作
成
Ｒ
Ｆ
Ｐ
作
成

96. 制作と合わせて方針の提案も求めるパターン
方針や策定プロセスも提案してもらえばよい
 あいまいに書くよりも、ずっと良いアプローチ
 受注側の力量が問われる
96

97. 目的もドキュメント化しよう
97

98. ヤフー株式会社ウェブアクセシビリティ方針
98

99. 目的もドキュメント化しよう
なぜアクセシビリティに取り組むかを明文化
 何のためのアクセシビリティなのかを押さえる
 公開されている他社の方針を参考にするのも良い
 ただし、意味も分からずにコピペはNG
99

100. まとめ

101. 取り組むための重要なポイント
わかりやすいテキストを設計しよう
 わかりやすいラベルは誰にとっても有用
 ナビゲーションやリンクやフォームの設計時に
少し気をつけるだけでグッと良くなる
方針を立ててみよう
 何のために、何を、どこまでやるのか?
 製作の前（発注前、提案時、受注後）に考えよう
101

102. 取り組むための重要なポイント
実は特別なことではない
 何かを新たに付け足すのではなく「やはり」
当たり前のことを真っ当にやることが重要
どのプロセスにも
アクセシビリティのポイントがある
 Webに関わる全ての人に関係がある
 Webに関わるどんな人にもできることがある
102

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

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

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

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