サイトをアクセシブルにするための受発注のセオリー
View Slide
本日の流れ自己紹介Web制作プロジェクトの流れアクセシビリティ方針と実際の発注例問題を起こしやすい要件まとめ2
自己紹介3
BA4
ウェブアクセシビリティ基盤委員会（WAIC）5
デザイニングWebアクセシビリティ6
Web制作プロジェクトの流れ7
各種ガイドライン制作プロセスに関するガイドライン ウェブアクセシビリティ方針策定ガイドライン JIS X 8341-3:2016 対応発注ガイドライン JIS X 8341-3:2016 試験実施ガイドライン※「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン」は「準拠」の表記に関するもので、これら全てに関連する8
方針をいつ立てるのか?発注のパターンによって異なる 方針を先に考えてあるパターン 自分たちで決めておく or 外部発注で決める 制作発注と同時に方針も考えるパターン 方針がないまま進んでしまうパターン9
プロジェクトの流れ（受託まで）10「ウェブの仕事力が上がる標準ガイドブック 3 Webディレクション」より
方針を先に考えてあるパターン11ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドラインアクセシビリティ方針策定ＲＦＰ作成
制作発注と同時に方針も考えるパターン12ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドライン要件定義
アクセシビリティ方針と実際の発注例13
方針がないと……14
方針がないとどうなる?配慮が全く行われない 公開に実は必要だったとなっても後の祭り適切な判断ができない 判断がぶれる、人によって判断が異なる合意形成ができない、覆る プロジェクト内、あるいはクライアントとの衝突15
方針があればそれでいいのか?方針があっても、適切でないものだと効果を発揮しない あいまいな方針を立ててしまう 誤解に基づいて方針を立ててしまう 手段が目的になってしまう16
無理のない範囲で17
明確に定めるガイドラインに沿って目標とするレベルを決める 特にアクセシビリティが重要ならレベルAA適用範囲、期限などをはっきりさせる 基本的にはサイト全体、公開時に対応でよい 例外ができてしまう場合は明確にする18
実際にあったこんな発注19あまり良くない例
あいまいな方針を立ててしまうケース20
21セキュリティ、Web標準、アクセシビリティに配慮し制作すること。実例
勢いはあるが……具体的に何をどうすれば良いのかからない 「配慮する」といっても人によって基準がまちまち22
23JIS X8341-3:2010に基づくアクセシビリティを確保すること。実例
24アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。実例
JISに沿うことはわかるが……目標とするレベルが不明 たとえばAAの達成基準を満たすべきなのかどうかわからない25
誤解に基づいて方針を立ててしまうケース26
27文字拡大機能ブラウザの機能ではなく、ページ上のボタンをクリックすることでCSS を切り替え処理等により容易に文字サイズを変更できるようにすること。サイズについては３サイズ程度選択できるようにすること。実例
その結果28
手段が目的になってしまうケース29
30以下ランキング同業種内1位評価獲得• 全上場企業ホームページ充実度ランキング調査• IRサイト総合ランキング• 主要企業Webユーザビリティランキング• インターネットIR表彰実例
ランキング対策の「アクセシビリティ対応」31
アクセシビリティに配慮と言われたとき、何を思い浮かべますか?アクセシビリティに配慮したサイトとは?32
神戸市33
さまざまなボタン34
ところで……35
総務省 みんなの公共サイト運用ガイドライン36
2.1.4. ウェブアクセシビリティ対応に関する誤解37
2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。38
Webアクセシビリティの確保は特別なことではない。障害者差別解消法の施行で考えるべき企業サイトの品質39
植木さんのコメント40
文字サイズ変更ボタンや音声読み上げ機能は必要なのか？よくある質問41
「JISに準拠していれば、どちらもいらない」植木さんの回答42
植木さんのコメント続き 実際に試すと、ほとんど文字の大きさが変わらない文字サイズ変更ボタンが少なくない 最近のWebブラウザであればズーム機能を標準で搭載している 意味のない文字サイズ変更ボタンはやっている感を出すための免罪符に近い43
神戸市の場合44
神戸市の場合45
実際にあったこんな発注46なかなか良いと思える例
アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。達成等級は以下の通り:達成等級ＡＡ 準拠47実例
表記ウェブアクセシビリティ方針の提示又は公開目標とする適合レベルの達成基準の試験結果追加表記事項準拠 必須試験を実施し、達成基準を全て満たしていることを確認なし一部準拠 必須試験を実施し、達成基準の一部を満たしていることを確認今後の対応方針部分適合に関する記述（適用する場合）配慮 必須試験の実施の有無、結果は問わない目標とした適合レベル又は参照した達成基準一覧ただし…… 「準拠」の意味、分かっていますか?48
アクセシビリティ、ユーザビリティについて、弊社のレベルを考慮いただき準拠基準をご提案ください。49実例
制作と合わせて方針の提案も求めるパターン50ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドライン提案書作成ＲＦＰ作成
制作と合わせて方針の提案も求めるパターン方針や策定プロセスも提案してもらえばよい あいまいに書くよりも、ずっと良いアプローチ 受注側の力量が問われる51
「 JIS X 8341-3:2010」 の「等級A」への準拠を検討しているが、本方針は要件定義工程でのWEBサイト検討状況を踏まえ決定する想定です。アクセシビリティ方針の検討方法についてもご提案ください。52実例
アクセシビリティ、ユーザビリティへの対応が不充分のため、リニューアルを機に対応させたい。今後の更新に備えてアクセシビリティ、ユーザビリティを踏まえた更新ガイドラインを作成し、ルールを徹底したい。53実例
目的をドキュメント化する例54
ヤフー株式会社ウェブアクセシビリティ方針55
目的をドキュメント化するなぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる 公開されている他社の方針を参考にするのも良い ただし、意味も分からずにコピペはNG56
問題を起こしやすい要件57
方針があればOK、ではないアクセシビリティ方針が明確にできても、その方針を守ることができるかは別の話58
アクセシビリティ確保のためにコストがかかる要件59
動画60
動画の問題点映像が見えない状況がある スクリーンリーダー、テキストブラウザなど音声が聞こえない状況がある スピーカーなし、静かな場所、移動中などすばやく知りたいときに向いていない 流し読みできない61
例: 動画に字幕や文字起こしをつける62
動画を採用する場合の注意点動画にはテキスト情報が必要 分かりやすく伝えられる動画は有用! あらかじめテキストを用意できない場合はテキストの追加や字幕などに追加のコストが必要63
紙媒体用のコンテンツ64
紙媒体用のコンテンツの問題点Webに適したフォーマットになっていないことが多い スキャンしたPDFでテキスト情報がない PDFの作り方によっては、読み上げ順序が不適切に グラフや図版が多用され、テキストの説明がない きわめて複雑な表が使われている65
紙媒体用のコンテンツはどうするべきか紙媒体用のコンテンツは再構成が必要 そのまま使うことはできないと考えるべき 紙媒体の原稿を使うときには追加のコストを見込む66
全くアクセスできなくなるような問題を起こす要件67
CAPTCHA68
ブラウザやOSの機能への干渉69
アニメーションするコンテンツ70http://www.city.nishitokyo.lg.jp/
西東京市曰く上部に、市の俯瞰図とたくさんの動くイラストを配置し、楽しくいきいきとした西東京市を表現（自治体ホームページのトップページとしては初の試みです） 。71
まとめアクセシブルな受発注のセオリーとは72
最初からアクセシビリティを考えて発注後から改善することは困難適切なアクセシビリティ方針を定めること 無理のない範囲で明確に定める 難しければ提案を依頼しても良い73
きわどい要件は慎重に追加コストが必要な場合も 動画、紙媒体の転用（PDF）などは要注意。採用する場合はそれなりのコストを見込むこと無理そうな要件は避ける CAPTCHA、右クリック禁止、止まらないアニメーションなどはNG74
さあ、はじめよう!75
デザイニングWebアクセシビリティ76
ありがとうございました79
magi1125
mongodb
bluesmoon
lara
geeforr
holman
kastner
speakerdeck
swwweet
hatefulcrawdad
zakiyama
maggiecrowley
malarkey