実はできている!?Webアクセシビリティ2～企画・要件・設計編～
View Slide
注意事項 会場は禁煙です。喫煙所が地下一階にありますのでご利用ください。 ハッシュタグは#a11ybooks となります。 イベントの模様は自由に撮影いただき、ブログやSNS等で拡散いただいて構いません（むしろお願いします）。主催者も、公式Facebookページ用に写真撮影をいたします（ご了承ください） スライドの公開は主催者よりSNSなどでご案内します。2
本日の流れ自己紹介前回のおさらいアクセシビリティだと思っていたが……?気づかないうちにアクセシビリティを確保していた！3
自己紹介4
BA5
ウェブアクセシビリティ基盤委員会（WAIC）6
デザイニングWebアクセシビリティ7
前回のおさらい
アクセシビリティに配慮と言われたとき、何を思い浮かべますか?アクセシビリティに配慮したサイトとは?9
福岡県大野城市10
文字サイズ変更ボタン・色反転ボタン11
2.1.4. ウェブアクセシビリティ対応に関する誤解12
2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。13
文字サイズ変更ボタンはなくてもいい!もっと大切なことがある!ひとことで言うと?14
みんなの公共サイト運用ガイドライン(続き)利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。15
さまざまなブラウザや支援技術でアクセスできることが重要つまり16
重要なのは「マシンリーダビリティ」アクセスできる！ テキストが明確 ちゃんとマークアップされているアクセスできない！ テキストが存在しない、あいまい ちゃんとマークアップされてない17
実はできていた、アクセシビリティで大切なこと1. ページタイトルをきちんとつける2. 階層構造に沿った見出しをつける3. 見た目に頼り切らない4. 画像に頼り切らない5. キーボードだけで操作できる18
取り組むための重要なポイント実は特別なことではない 何かを新たに付け足すのではなく、当たり前のことを真っ当にやることが重要実は「設計」が重要 テキストが存在しなければマークアップできない テキストが適切でなければマークアップしてもわかりにくいまま19
つまり…実は「戦略」「要件」が重要 何のために、何を、どこまでやるのか? 最初から考えないと、あとで大変になるどのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある Webに関わるどんな人にもできることがある20
気づかないうちにアクセシビリティを確保していた!
「適切なテキスト」のための設計1. 内容を推測できるカテゴリ名にする2. わかりやすい現在地表示をつける3. リンク先がわかるようにする4. フォームのラベルを明確にする5. フォームのエラーを明確にする22
内容を推測できるカテゴリ名にする23
OK: 内容を推測できるカテゴリ名にする24
OK: ルールと仕組みで一貫性を保つ25
NG: カテゴリ名がわかりにくい26
NG: ラベルがバラバラ27
わかりやすい現在地表示をつける28
OK: 一般的なわかりやすい現在地表示をつける29
OK: 一般的なわかりやすい現在地表示をつける30
NG: 現在地を把握する手段がない31
NG: 現在地の表示と間違えそうな表現がある32
注:コンテンツを邪魔しては意味がない33
リンク先がわかるようにする34
ユーザーはリンクに注目している35
OK:リンクにリンク先のタイトルを加える36
OK: 文中リンクを外に出して独立させる37
OK: 周辺のテキストをリンクに含める38
NG: ラベルがないリンク39
NG:「こちら」リンク40
NG:「もっと読む」「詳細」リンク41
フォームのラベルを明確にする42
OK: 具体的で明確なラベルをつける43
OK: 必須項目を明確にする44
OK: 必要に応じて説明をつける45
OK: プレースホルダをラベル代わりにしない46
NG: ラベルや説明があいまいで混乱する47
NG: 必須か任意かがわからない48
NG: 必要な説明がなく、入力の条件がわからない49
NG: ラベルがなく、入力欄が何なのかわからない50
フォームのエラーを明確にする51
OK: エラー箇所を明確に示す52
OK: エラー表示と修正フォームをセットにする53
OK: エラー理由と修正方法を明示する54
NG:エラー箇所がわからず修正できない55
NG: エラー表示画面と入力画面がわかれている56
NG: エラーメッセージが理解できず修正できない57
アクセシビリティだと思っていたが……?
プロジェクトの最初から「アクセシビリティをどうするか?」を決めておくべしちゃんとやるには「アクセシビリティ方針」59
方針がないと……60
方針がないとどうなる?配慮が全く行われない 公開に実は必要だったとなっても後の祭り適切な判断ができない 判断がぶれる、人によって判断が異なる合意形成ができない、覆る プロジェクト内、あるいはクライアントとの衝突61
方針がないとまったくアクセスできなくなる危険性も出てくる!矛盾する要件62
CAPTCHA63
ブラウザやOSの機能への干渉64
動画65
紙媒体用のコンテンツ66
基準を満たさないコンテンツを削除67
まずは最低限の方針を立てよう68
無理のない範囲で69
明確に定めるガイドラインに沿って目標とするレベルを決める 特にアクセシビリティが重要ならレベルAA適用範囲、期限などをはっきりさせる 基本的にはサイト全体、公開時に対応でよい 例外ができてしまう場合は明確にする70
各種ガイドラインを参考に制作プロセスに関するガイドライン ウェブアクセシビリティ方針策定ガイドライン JIS X 8341-3:2016 対応発注ガイドライン JIS X 8341-3:2016 試験実施ガイドライン※「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン」は「準拠」の表記に関するもので、これら全てに関連する71
方針をいつ立てるのか?発注のパターンによって異なる 方針を先に考えてあるパターン 自分たちで決めておく or 外部発注で決める 制作発注と同時に方針も考えるパターン 方針がないまま進んでしまうパターン72
プロジェクトの流れ（受託まで）73「ウェブの仕事力が上がる標準ガイドブック 3 Webディレクション」より
方針を先に考えてあるパターン74ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドラインアクセシビリティ方針策定ＲＦＰ作成
制作発注と同時に方針も考えるパターン75ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドライン要件定義
方針があればそれでいいのか?方針があっても、適切でないものだと効果を発揮しない あいまいな方針を立ててしまう 誤解に基づいて方針を立ててしまう 手段が目的になってしまう76
実際にあったこんな発注77あまり良くない例
あいまいな方針を立ててしまうケース78
79セキュリティ、Web標準、アクセシビリティに配慮し制作すること。実例
勢いはあるが……具体的に何をどうすれば良いのかからない 「配慮する」といっても人によって基準がまちまち80
81JIS X8341-3:2010に基づくアクセシビリティを確保すること。実例
82アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。実例
JISに沿うことはわかるが……目標とするレベルが不明 たとえばAAの達成基準を満たすべきなのかどうかわからない83
誤解に基づいて方針を立ててしまうケース84
85文字拡大機能ブラウザの機能ではなく、ページ上のボタンをクリックすることでCSS を切り替え処理等により容易に文字サイズを変更できるようにすること。サイズについては３サイズ程度選択できるようにすること。実例
その結果86
手段が目的になってしまうケース87
88以下ランキング同業種内1位評価獲得• 全上場企業ホームページ充実度ランキング調査• IRサイト総合ランキング• 主要企業Webユーザビリティランキング• インターネットIR表彰実例
ランキング対策の「アクセシビリティ対応」89
実際にあったこんな発注90なかなか良いと思える例
アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。達成等級は以下の通り:達成等級ＡＡ 準拠91実例
表記ウェブアクセシビリティ方針の提示又は公開目標とする適合レベルの達成基準の試験結果追加表記事項準拠 必須試験を実施し、達成基準を全て満たしていることを確認なし一部準拠 必須試験を実施し、達成基準の一部を満たしていることを確認今後の対応方針部分適合に関する記述（適用する場合）配慮 必須試験の実施の有無、結果は問わない目標とした適合レベル又は参照した達成基準一覧ただし…… 「準拠」の意味、分かっていますか?92
アクセシビリティ、ユーザビリティについて、弊社のレベルを考慮いただき準拠基準をご提案ください。93実例
「 JIS X 8341-3:2010」 の「等級A」への準拠を検討しているが、本方針は要件定義工程でのWEBサイト検討状況を踏まえ決定する想定です。アクセシビリティ方針の検討方法についてもご提案ください。94実例
制作と合わせて方針の提案も求めるパターン95ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドライン提案書作成ＲＦＰ作成
制作と合わせて方針の提案も求めるパターン方針や策定プロセスも提案してもらえばよい あいまいに書くよりも、ずっと良いアプローチ 受注側の力量が問われる96
目的もドキュメント化しよう97
ヤフー株式会社ウェブアクセシビリティ方針98
目的もドキュメント化しようなぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる 公開されている他社の方針を参考にするのも良い ただし、意味も分からずにコピペはNG99
まとめ
取り組むための重要なポイントわかりやすいテキストを設計しよう わかりやすいラベルは誰にとっても有用 ナビゲーションやリンクやフォームの設計時に少し気をつけるだけでグッと良くなる方針を立ててみよう 何のために、何を、どこまでやるのか? 製作の前（発注前、提案時、受注後）に考えよう101
取り組むための重要なポイント実は特別なことではない 何かを新たに付け足すのではなく「やはり」当たり前のことを真っ当にやることが重要どのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある Webに関わるどんな人にもできることがある102
さあ、はじめよう!103
さあ、はじめよう!104
デザイニングWebアクセシビリティ105
ありがとうございました
magi1125
jacobian
marcelosomers
maggiecrowley
chrisshort
soudai
afnizarnur
rocio
thekraken
lauravandoore
tanoku
sstephenson
schacon