Slide 1

Slide 1 text

アクセシビリティからはじめる、 WebサイトのUXデザイン BAの実践例に見る、ボトムアップとトップダウンのアプローチ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

本日の流れ  ご挨拶・アイスブレイク  セッション1: マークアップからの取り組み～ボトムアップのアプローチ～  セッション2: デザインからの取り組み～ビジュアルデザインとコンテンツ設計のアプローチ～  休憩  セッション3: 戦略からの取り組み～トップダウンのアプローチ～ 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

このセッションでお話しすること HTMLとアクセシビリティ  HTMLとは?  アクセシビリティとは? マークアップで気をつけること  HTMLと代替テキスト  CSSによる画像置換  悩ましい事例とさまざまなアプローチ例 9

Slide 10

Slide 10 text

HTMLとアクセシビリティ 10

Slide 11

Slide 11 text

アクセシビリティとは さまざまな利用者がさまざまな環境でアクセス可能であること  情報を認識して理解できる  さまざまな選択肢が提供されている  自分に合った形で利用できる 11

Slide 12

Slide 12 text

さまざまな環境 12

Slide 13

Slide 13 text

ビジュアルブラウザ(Firefox) 13

Slide 14

Slide 14 text

テキストブラウザ(w3m) 14

Slide 15

Slide 15 text

ダウンローダー(SiteSucker) 15

Slide 16

Slide 16 text

クローラー(Googlebot) 16

Slide 17

Slide 17 text

ハイコントラストモード 17

Slide 18

Slide 18 text

ハイコントラストモード 18

Slide 19

Slide 19 text

拡大ツール(Windows拡大鏡) 19

Slide 20

Slide 20 text

スクリーンリーダー(NVDA) 20

Slide 21

Slide 21 text

スクリーンリーダー(VoiceOver) 21

Slide 22

Slide 22 text

代替マウス 22

Slide 23

Slide 23 text

点字ディスプレイ 23

Slide 24

Slide 24 text

視線入力装置 24

Slide 25

Slide 25 text

さまざまな環境に対応するには? 25

Slide 26

Slide 26 text

重要なのはマシンリーダビリティ さまざまなプログラムで処理できること  = マシンリーダビリティ(機械可読性) が高い アクセシビリティの確保に重要なのはプログラムで処理できるようにしておくこと  = マシンリーダビリティを確保すること  Webがアクセシブルなのはマシンリーダブルだから 26

Slide 27

Slide 27 text

プレーンテキストの場合  ■デザイニングWebアクセシビリティ ●訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介・上流から下流まで、制作プロセスの全てをカバー・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 ●取り組みの背景ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。 27

Slide 28

Slide 28 text

プレーンテキスト= ヒューマンリーダブル 見出し、箇条書きらしきものがある  頭に記号を付けるなどして、見出しや箇条書きを表現している 人間が見ればそれらしく見えるが……  機械が処理するときどうか?  決まったルールになっているのか? 28

Slide 29

Slide 29 text

HTMLとは? Hypertext Markup Language  Webコンテンツの核となるマークアップ言語  テキストにさまざまなマークを付けることで、その意味(セマンティクス) を明確にする  マークを付けること= マークアップ 29

Slide 30

Slide 30 text

HTMLでマークアップした場合デザイニングWebアクセシビリティ

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

訴求ポイント(この本が既存の本と異なる点)

「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容
解決アプローチの例として、実際に公開されているサイトの実例を多数紹介
上流から下流まで、制作プロセスの全てをカバー
デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視

取り組みの背景

ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。

Slide 31

Slide 31 text

HTML = マシンリーダブル マークアップすると要素の意味が明確になる  明確なルールにのっとっているため、機械的に判断することが容易  マシンリーダビリティが確保される HTMLをきちんとマークアップすればさまざまなツールで利用しやすくなりアクセシビリティが高まる 31

Slide 32

Slide 32 text

マークアップで気をつけること 32

Slide 33

Slide 33 text

HTMLとアクセシビリティといえば? 33

Slide 34

Slide 34 text

代替テキスト 34

Slide 35

Slide 35 text

代替テキストとは? 画像の代替となるテキスト  画像が表示できないとき、代わりに使われる  HTMLではimg要素のalt 属性で指定例: 35

Slide 36

Slide 36 text

厚生労働省 36

Slide 37

Slide 37 text

災害情報(?) 部分の冒頭 37

Slide 38

Slide 38 text

そのソース

日本年金機構不正アクセ
ス事案について年金情報をめぐり、なりすましなどの犯罪が起こっています。ご
注意ください。

--> 38

Slide 39

Slide 39 text

大臣・副大臣・政務官の紹介 39

Slide 40

Slide 40 text

スクリーンリーダーで読むと、大臣・副大臣の名前は何回読まれるでしょう? 問題 40

Slide 41

Slide 41 text

答え: 合計7回 41

Slide 42

Slide 42 text

うち大臣は3回 42

Slide 43

Slide 43 text

大臣のHTML

しおざきやすひさ

塩崎恭久

プロフィールはこちら

Slide 44

Slide 44 text

副大臣のHTML

たけうちゆずる

竹内譲

プロフィールはこちら

Slide 45

Slide 45 text

冗長な代替テキスト 45

Slide 46

Slide 46 text

Slide 47

Slide 47 text

代替テキストまとめ 代替テキストを適切に指定することが重要  適切に付けられていないと、全くアクセスできなくなることがある つけすぎも良くない  写真や装飾に過剰なテキストを指定しない  装飾には空の代替テキストを 47

Slide 48

Slide 48 text

代替テキストの悩ましい例とアプローチの例 48

Slide 49

Slide 49 text

特許庁の組織図 49

Slide 50

Slide 50 text

特許庁の組織図のalt

組織図

［更新日 2015年5月13日］

Slide 51

Slide 51 text

文部科学省のアプローチ 51

Slide 52

Slide 52 text

文部科学省の組織図 52

Slide 53

Slide 53 text

文部科学省の組織図のalt

Slide 54

Slide 54 text

法務省のアプローチ 54

Slide 55

Slide 55 text

法務省の組織図 55

Slide 56

Slide 56 text

AOI Pro. のアプローチ 56

Slide 57

Slide 57 text

AOI Pro. の組織図 57

Slide 58

Slide 58 text

AOI Pro. の組織図周辺のマークアップ

株主総会
- 監査役会
取締役会
代表取締役社長
- 経営会議
- 第一プロダクションディビジョン
  - 制作ユニット

Slide 59

Slide 59 text

AOI Pro. の組織図そのもののマークアップ(抜粋) 株主総会取締役会代表取締役社長監査役会 59

Slide 60

Slide 60 text

考えてみよう! 60

Slide 61

Slide 61 text

考えてみよう どのアプローチが望ましいでしょうか?  アクセスのしやすさ  運用のしやすさ もっと他のアプローチはないでしょうか? 61

Slide 62

Slide 62 text

CSSによる画像置換 62

Slide 63

Slide 63 text

厚生労働省 63

Slide 64

Slide 64 text

ハイコントラストモード 64

Slide 65

Slide 65 text

DOMツリー 65

Slide 66

Slide 66 text

CSSまとめ CSSで指定された背景画像はあくまで背景  背景なので、背景を非表示にすると消えてしまう  ハイコントラストモードや印刷時に出てこない 意味のある画像は背景にしない  意味のある画像はCSSではなく、HTMLで 66

Slide 67

Slide 67 text

OK: 意味のある画像は前景に置く 67

Slide 68

Slide 68 text

OK: 代替テキストが必要な画像は前景に置く 68

Slide 69

Slide 69 text

デザインからの取り組み～ビジュアルデザインとコンテンツ設計のアプローチ～

Slide 70

Slide 70 text

このセッションでお話しすること コンテンツをデザインするプロセス ビジュアルデザインで気をつけること  悩ましい代替テキストへのアプローチ  インタラクション  カルーセル問題とさまざまなアプローチ例 要件定義で気をつけること 70

Slide 71

Slide 71 text

コンテンツをデザインするプロセス 71

Slide 72

Slide 72 text

コンテンツをデザインするプロセス 要件定義  このサイトにどのようなコンテンツが必要になるか? コンテンツ設計  コンテンツとしてどのような要素を持たせるか? ビジュアルデザイン  コンテンツの各要素をどのように見せるか? 72

Slide 73

Slide 73 text

それぞれのプロセスで決めることの例 要件定義  このサイトには買い物かごの機能が必要 コンテンツ設計  表示するのは商品名、商品写真、金額、個数……etc. ビジュアルデザイン  写真を左に配置して商品名を大きく、その後に金額と個数も読めるように配置……etc. 73

Slide 74

Slide 74 text

ビジュアルデザインで気をつけること 74

Slide 75

Slide 75 text

よく言われる「わかりやすい」デザイン 1. コントラストを高めて見分けやすく 2. 行間や一行の文字数を工夫して読みやすく 3. どこが押せるかわかりやすく 4. リンクやボタンを大きくして押しやすく 5. スタイルを一貫させて認識しやすく 75

Slide 76

Slide 76 text

実は重要な5つのポイント 1. 視覚に依存せずテキストで示す 2. 文字は画像にせずテキストにする 3. フォーカス表示を消さない 4. 閃光を使わない 5. 拡大できるようにする 76

Slide 77

Slide 77 text

特に重要なのは視覚に依存しないこと 77

Slide 78

Slide 78 text

NG: 色に頼った表現 78

Slide 79

Slide 79 text

OK:色だけでなくテキストにも変化をつける 79

Slide 80

Slide 80 text

NG: 配置に頼った表現 80

Slide 81

Slide 81 text

OK:見た目の特徴だけでなく名前でも指示する 81

Slide 82

Slide 82 text

NG: 文字の装飾に頼った表現 82

Slide 83

Slide 83 text

OK:打ち消し線だけでなくテキストも併記する 83

Slide 84

Slide 84 text

悩ましい代替テキストへのデザインプロセスからのアプローチ 84

Slide 85

Slide 85 text

代替テキストが悩ましい例は、デザインに遡ることで解決できることがある 85

Slide 86

Slide 86 text

グラフと元データを併記する 86

Slide 87

Slide 87 text

充実したキャプションをつける 87

Slide 88

Slide 88 text

インタラクション 88

Slide 89

Slide 89 text

インタラクションとは Inter -action  相互作用のこと  ユーザーとシステムの相互作用のこと 狭義には  ユーザーがなんらか操作（入力）すると動いたり変化したりして反応（出力）するもの 89

Slide 90

Slide 90 text

Webにおけるインタラクションの例 テキストリンク ボタン テキスト入力欄 スクロールバー 90

Slide 91

Slide 91 text

動きを伴うインタラクションの例 91

Slide 92

Slide 92 text

動きを伴うインタラクションの例 92

Slide 93

Slide 93 text

カルーセル問題とアプローチ例 93

Slide 94

Slide 94 text

カルーセルとは? 94

Slide 95

Slide 95 text

Rio 2016 95

Slide 96

Slide 96 text

Rio 2016 96

Slide 97

Slide 97 text

Rio 2016 下部 97

Slide 98

Slide 98 text

Rio 2016 下部 98

Slide 99

Slide 99 text

なぜカルーセルが問題なのか 99

Slide 100

Slide 100 text

読み終わる前に消えてしまう/ 誤操作する 100

Slide 101

Slide 101 text

不意に動いた要素に注意を引かれてしまう 101

Slide 102

Slide 102 text

動き続ける要素に注意を引かれてしまう 102

Slide 103

Slide 103 text

OK: コンテンツが自動で動くが、すぐ止まる 103

Slide 104

Slide 104 text

首相官邸のアプローチ 104

Slide 105

Slide 105 text

首相官邸 105

Slide 106

Slide 106 text

首相官邸 106

Slide 107

Slide 107 text

富士通のアプローチ 107

Slide 108

Slide 108 text

富士通 108

Slide 109

Slide 109 text

じぶん銀行のアプローチ 109

Slide 110

Slide 110 text

じぶん銀行 110

Slide 111

Slide 111 text

考えてみよう! 111

Slide 112

Slide 112 text

考えてみよう どのアプローチが望ましいでしょうか?  アクセスのしやすさ  運用のしやすさ そもそも、なぜカルーセルが求められるのでしょうか? 112

Slide 113

Slide 113 text

要件定義で気をつけること 113

Slide 114

Slide 114 text

危険なパターン 114

Slide 115

Slide 115 text

PDF問題 115

Slide 116

Slide 116 text

116

Slide 117

Slide 117 text

紙もののコンテンツは要注意 PDFはアクセスしづらい場合がある  作り方によるが、スキャンした物は基本NG  HTMLにするほうが圧倒的にアクセシブル HTMLにする場合も、ほぼ再構成が必要  固定のレイアウトが想定されていることが多く、複雑な表や図版など、Webに適さない表現が多い 117

Slide 118

Slide 118 text

戦略からの取り組み～トップダウンのアプローチ～

Slide 119

Slide 119 text

このセッションでお話しすること 戦略とは? 戦略で気をつけること  アクセシビリティ方針を作ろう!  アクセシビリティ方針の注意点  悩ましい事例とさまざまなアプローチ例 おわりに 119

Slide 120

Slide 120 text

戦略とは? 120

Slide 121

Slide 121 text

戦略とは? プロジェクトの目的を明確にするプロセス  企業や組織の行動には必ず目的がある  何のためにサイトを作るのか分からないと、サイトに何が必要で何が不要かわからない 121

Slide 122

Slide 122 text

戦略フェイズでやること 与件の整理  RFPの確認、前提の確認など ビジネス要件の調査  運営者、ビジネス、ユーザーなどの確認 プロジェクト要件定義  プロジェクトの目的、数値目標、スコープ等の確認 122

Slide 123

Slide 123 text

戦略で気をつけること 123

Slide 124

Slide 124 text

アクセシビリティ方針を作ろう! 124

Slide 125

Slide 125 text

ウェブアクセシビリティ方針策定ガイドライン 125

Slide 126

Slide 126 text

方針に明記すべき事項 対象範囲  サイト名やドメインなど、対象とする範囲を明示  除外する部分がある場合は、特定できるように明記 達成等級及び対応度  A～AAAのうち、どのレベルを目標とするか明記する  5つの対応度のうち、どの対応度とするか選択  適合/ 準拠/ 一部準拠/ 配慮し試験/ 配慮 126

Slide 127

Slide 127 text

達成等級とは? WCAG 2.0は、アクセシビリティ確保のために守るべき達成基準を定めている達成基準には A, AA, AAA の 3つのレベルがある 127

Slide 128

Slide 128 text

WCAG 2.0 128

Slide 129

Slide 129 text

レベルA どんなサイトも満たすべき、最低限の基準  この基準を満たせないと、支援技術を駆使しても全くアクセスできなくなる場合がある  25項目の基準  非テキストコンテンツにテキストを用意する、キーボードでも操作できるようにする、など 129

Slide 130

Slide 130 text

レベルAA 望ましい基準  この基準を満たすと、支援技術を駆使しなくても多くの環境でアクセスできるようになる  13項目の基準  最低限のカラーコントラスト、文字サイズなど 130

Slide 131

Slide 131 text

レベルAAA 発展的な基準  この基準を満たすと、よりアクセスしやすくなることがある  23項目の基準  レベルA～AAの基準を厳しくしたものに加え、わかりやすい言葉を使う、など 131

Slide 132

Slide 132 text

アクセシビリティ方針の注意点 132

Slide 133

Slide 133 text

あいまいな方針 133

Slide 134

Slide 134 text

厳しすぎる方針、具体的すぎる方針 134

Slide 135

Slide 135 text

手段が目的になってしまう 135

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

ガイドラインに適合させるもっとも簡単な方法 138

Slide 139

Slide 139 text

アクセシビリティ方針のポイント 139

Slide 140

Slide 140 text

無理のない範囲で定める 140

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

厚生労働省のアプローチ 143

Slide 144

Slide 144 text

アクセシビリティについて 144

Slide 145

Slide 145 text

アクセシビリティについて(拡大) 145

Slide 146

Slide 146 text

文部科学省のアプローチ 146

Slide 147

Slide 147 text

アクセシビリティへの対応について 147

Slide 148

Slide 148 text

ウェブアクセシビリティ方針 148

Slide 149

Slide 149 text

ウェブアクセシビリティ取組み状況 149

Slide 150

Slide 150 text

首相官邸のアプローチ 150

Slide 151

Slide 151 text

151

Slide 152

Slide 152 text

ヤフー株式会社のアプローチ 152

Slide 153

Slide 153 text

ウェブアクセシビリティ方針 153

Slide 154

Slide 154 text

ウェブアクセシビリティ方針(続き) 154

Slide 155

Slide 155 text

グリー株式会社のアプローチ 155

Slide 156

Slide 156 text

156

Slide 157

Slide 157 text

ユーザー vs コンテンツ提供者 157

Slide 158

Slide 158 text

ユーザーの都合とコンテンツの都合 基本的に、コンテンツはユーザーに向けて提供されているもの  そのため、ユーザーの方向を見ている しかし時には、コンテンツ提供側の都合でユーザーメリットのない対応をすることも  典型例は広告  必ずしも悪いわけではなく、必要なこともある 158

Slide 159

Slide 159 text

どうやって判断する? 159

Slide 160

Slide 160 text

カルーセルの話 160

Slide 161

Slide 161 text

カルーセルは何を解決するのか? コンテンツ提供側から見たカルーセルのメリットは複数の要素を「同列」に表示できること 161

Slide 162

Slide 162 text

なぜ「同列」であることが重要なのか? 序列をつけたくない場合がある  何を先頭に表示するのか、もめる場合  複数のコンテンツを平等に扱いたい場合 ユーザーのためというより、コンテンツ提供側の政治的な要因 162

Slide 163

Slide 163 text

考えてみよう! 163

Slide 164

Slide 164 text

考えてみよう どうすればアクセシビリティへの取り組みを進めていけるのでしょうか? そのために、あなたには何ができるでしょうか?  自身のこととして、具体的に考えてみてください 164

Slide 165

Slide 165 text

おわりに 165

Slide 166

Slide 166 text

取り組むための重要なポイント1 制作の最初の段階から考える必要がある  ビジュアルデザインや実装だけでは解決できない どのプロセスにもアクセシビリティのポイントがある 166

Slide 167

Slide 167 text

取り組むための重要なポイント2 どのプロセスにもアクセシビリティのポイントがある  Webに関わる全ての人に関係がある  Webに関わるどんな人にもできることがある 167

Slide 168

Slide 168 text

目の見えない人に伝えるなんて無理? 168

Slide 169

Slide 169 text

目の見えない人に 100%全てを伝えるのは無理 169

Slide 170

Slide 170 text

100%でなければならないのか? 170

Slide 171

Slide 171 text

アクセシビリティは0か100かではない!  より多くの人により多くの情報が伝わればよい  少しでも多くの人に伝わるなら、それは意味があること 171