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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 3

Slide 4

Slide 4 text

BA 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

方針がないと…… 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

無理のない範囲で 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

その結果 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

神戸市 33

Slide 34

Slide 34 text

さまざまなボタン 34

Slide 35

Slide 35 text

ところで…… 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

植木さんのコメント 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

神戸市の場合 44

Slide 45

Slide 45 text

神戸市の場合 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

動画 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

紙媒体用のコンテンツ 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

CAPTCHA 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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