1. サイトをアクセシブルにするための
受発注のセオリー

2. 本日の流れ
自己紹介
Web制作プロジェクトの流れ
アクセシビリティ方針と実際の発注例
問題を起こしやすい要件
まとめ
2

3. 自己紹介
3

4. BA
4

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

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

7. Web制作プロジェクトの流れ
7

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

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

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

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

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

13. アクセシビリティ方針と
実際の発注例
13

14. 方針がないと……
14

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

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

17. 無理のない範囲で
17

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

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

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

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

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

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

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

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

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

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

28. その結果
28

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

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

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

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

33. 神戸市
33

34. さまざまなボタン
34

35. ところで……
35

36. 総務省 みんなの公共サイト運用ガイドライン
36

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

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

39. Webアクセシビリティの確保は特別なことではない。
障害者差別解消法の施行で考えるべき企業サイトの品質
39

40. 植木さんのコメント
40

41. 文字サイズ変更ボタンや
音声読み上げ機能は
必要なのか？
よくある質問
41

42. 「JISに準拠していれば、
どちらもいらない」
植木さんの回答
42

43. 植木さんのコメント続き
 実際に試すと、ほとんど文字の大きさが
変わらない文字サイズ変更ボタンが少なくない
 最近のWebブラウザであれば
ズーム機能を標準で搭載している
 意味のない文字サイズ変更ボタンは
やっている感を出すための免罪符に近い
43

44. 神戸市の場合
44

45. 神戸市の場合
45

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

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

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

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

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

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

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

53. アクセシビリティ、ユーザビリティへの
対応が不充分のため、リニューアルを機に
対応させたい。
今後の更新に備えてアクセシビリティ、
ユーザビリティを踏まえた更新ガイドラインを
作成し、ルールを徹底したい。
53
実例

54. 目的をドキュメント化する例
54

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

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

57. 問題を起こしやすい要件
57

58. 方針があればOK、ではない
アクセシビリティ方針が明確にできても、
その方針を守ることができるかは別の話
58

59. アクセシビリティ確保のために
コストがかかる要件
59

60. 動画
60

61. 動画の問題点
映像が見えない状況がある
 スクリーンリーダー、テキストブラウザなど
音声が聞こえない状況がある
 スピーカーなし、静かな場所、移動中など
すばやく知りたいときに向いていない
 流し読みできない
61

62. 例:動画に字幕や文字起こしをつける
62

63. 動画を採用する場合の注意点
動画にはテキスト情報が必要
 分かりやすく伝えられる動画は有用!
 あらかじめテキストを用意できない場合は
テキストの追加や字幕などに追加のコストが必要
63

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

65. 紙媒体用のコンテンツの問題点
Webに適したフォーマットになっていない
ことが多い
 スキャンしたPDFでテキスト情報がない
 PDFの作り方によっては、読み上げ順序が不適切に
 グラフや図版が多用され、テキストの説明がない
 きわめて複雑な表が使われている
65

66. 紙媒体用のコンテンツはどうするべきか
紙媒体用のコンテンツは再構成が必要
 そのまま使うことはできないと考えるべき
 紙媒体の原稿を使うときには追加のコストを見込む
66

67. 全くアクセスできなくなるような
問題を起こす要件
67

68. CAPTCHA
68

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

70. アニメーションするコンテンツ
70
http://www.city.nishitokyo.lg.jp/

71. 西東京市曰く
上部に、市の俯瞰図とたくさんの動くイラス
トを配置し、楽しくいきいきとした西東京市
を表現（自治体ホームページのトップページ
としては初の試みです） 。
71

72. まとめ
アクセシブルな受発注のセオリーとは
72

73. 最初からアクセシビリティを考えて発注
後から改善することは困難
適切なアクセシビリティ方針を定めること
 無理のない範囲で明確に定める
 難しければ提案を依頼しても良い
73

74. きわどい要件は慎重に
追加コストが必要な場合も
 動画、紙媒体の転用（PDF）などは要注意。
採用する場合はそれなりのコストを見込むこと
無理そうな要件は避ける
 CAPTCHA、右クリック禁止、
止まらないアニメーションなどはNG
74

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

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

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