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

注意事項

会場は禁煙です。喫煙所が地下一階にありますのでご利用ください。

ハッシュタグは#a11ybooks となります。

イベントの模様は自由に撮影いただき、ブログやSNS等で拡散いただいて構いません（むしろお願いします）。主催者も、公式Facebookページ用に写真撮影をいたします（ご了承ください）

スライドの公開は主催者よりSNSなどでご案内します。

2

本日の流れ

自己紹介

前回のおさらい

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

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

3

自己紹介

4

BA

5

ウェブアクセシビリティ基盤委員会（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

CAPTCHA

63

ブラウザや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

81

JIS 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

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

なぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる

公開されている他社の方針を参考にするのも良い

ただし、意味も分からずにコピペはNG

99

まとめ

取り組むための重要なポイント

わかりやすいテキストを設計しよう わかりやすいラベルは誰にとっても有用

ナビゲーションやリンクやフォームの設計時に少し気をつけるだけでグッと良くなる

方針を立ててみよう 何のために、何を、どこまでやるのか?

製作の前（発注前、提案時、受注後）に考えよう

101

取り組むための重要なポイント

実は特別なことではない 何かを新たに付け足すのではなく「やはり」

当たり前のことを真っ当にやることが重要

どのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある

Webに関わるどんな人にもできることがある

102

さあ、はじめよう!

103

さあ、はじめよう!

104

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

105

ありがとうございました