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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

自己紹介 4

Slide 5

Slide 5 text

BA 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

前回のおさらい

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

福岡県大野城市 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

NG: ラベルがバラバラ 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

NG:「こちら」リンク 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

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

CAPTCHA 63

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

動画 65

Slide 66

Slide 66 text

紙媒体用のコンテンツ 66

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

無理のない範囲で 69

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

その結果 86

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

まとめ

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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