アクセシビリティからはじめる、 WebサイトのUI/UXデザイン

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

View Slide

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

View Slide

本日の流れ
 ご挨拶・ご紹介
 セッション1: マークアップからの取り組み
～ボトムアップのアプローチ～
 セッション2: デザインからの取り組み
～ビジュアルデザインとコンテンツ設計のアプローチ～
 セッション3: 戦略からの取り組み
～トップダウンのアプローチ～
3

View Slide

自己紹介
4

View Slide

BA
5

View Slide

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

View Slide

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

View Slide

マークアップからの取り組み
～ボトムアップのアプローチ～

View Slide

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

View Slide

HTMLとアクセシビリティ
10

View Slide

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

View Slide

さまざまな環境
12

View Slide

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

View Slide

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

View Slide

ダウンローダー(SiteSucker)
15

View Slide

クローラー (Googlebot)
16

View Slide

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

View Slide

18

View Slide

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

View Slide

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

View Slide

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

View Slide

代替マウス
22

View Slide

点字ディスプレイ
23

View Slide

視線入力装置
24

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

HTMLでマークアップした場合


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

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

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

30

View Slide

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

View Slide

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

View Slide

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

View Slide

代替テキスト
34

View Slide

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

View Slide

厚生労働省
36

View Slide

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

View Slide

そのソース

src="common/images/parts/nenkin_message_large.png" alt="日本年金機構に
おける不正アクセスによる情報流出事案について" border="0">

src="common/images/parts/nenkin_message.png" alt="日本年金機構不正アク
セス事案について年金情報をめぐり、なりすましなどの犯罪が起こっています。
ご注意ください。" border="0">

-->
38

View Slide

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

View Slide

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

View Slide

答え: 合計7回
41

View Slide

うち大臣は3回
42

View Slide

大臣のHTML

しおざきやすひさ
塩崎恭久
class=“ico-link”>プロフィールはこちら

width=“137” height=“155” />

43

View Slide

副大臣のHTML

たけうちゆずる
竹内譲
href=“/kouseiroudoushou/profile/hukudaijin01.html”
class=“ico-link”>プロフィールはこちら

width=“137” height=“155” />

44

View Slide

冗長な代替テキスト
45

View Slide

46

View Slide

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

View Slide

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

View Slide

特許庁の組織図
49

View Slide

特許庁の組織図のalt

組織図
height=“706”
src=“/shoukai/soshiki/images/soshikizu.jpg”
/>
［更新日 2015年5月13
日］

50

View Slide

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

View Slide

文部科学省の組織図
52

View Slide

文部科学省の組織図のalt
（平成27年10月1日現在）
文部科学大臣
副大臣（2名）
大臣政務官（2名）
事務次官
文部科学審議官（2名）
大臣官房
人事課
総務課
会計課
政策課
国際課
文教施設企画部
施設企画課
施設助成課
計画課
参事官
生涯学習政策局
政策課
調査企画課
生涯学習推進課
(後略、全129行)
53

View Slide

法務省のアプローチ
54

View Slide

法務省の組織図
55

View Slide

AOI Pro. のアプローチ
56

View Slide

AOI Pro. の組織図
57

View Slide

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

株主総会

監査役会

取締役会
代表取締役社長

経営会議
第一プロダクションディビジョン

制作ユニット
(後略)
58

View Slide

AOI Pro. の組織図そのもののマークアップ (抜粋)

株主総会

取締役会

代表取締役社長

監査役会

59

View Slide

考えてみよう!
60

View Slide

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

View Slide

CSSによる画像置換
62

View Slide

厚生労働省
63

View Slide

64

View Slide

DOMツリー
65

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

NG: 色に頼った表現
78

View Slide

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

View Slide

NG: 配置に頼った表現
80

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

インタラクション
88

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

カルーセルとは?
94

View Slide

Rio 2016
95

View Slide

Rio 2016
96

View Slide

Rio 2016 下部
97

View Slide

Rio 2016 下部
98

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

首相官邸のアプローチ
104

View Slide

首相官邸
105

View Slide

首相官邸
106

View Slide

富士通のアプローチ
107

View Slide

富士通
108

View Slide

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

View Slide

じぶん銀行
110

View Slide

考えてみよう!
111

View Slide

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

View Slide

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

View Slide

危険なパターン
114

View Slide

PDF問題
115

View Slide

116

View Slide

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

View Slide

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

View Slide

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

View Slide

戦略とは?
120

View Slide

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

View Slide

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

View Slide

戦略で気をつけること
123

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

WCAG 2.0
128

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

あいまいな方針
133

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

首相官邸のアプローチ
150

View Slide

151

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

156

View Slide

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

View Slide

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

View Slide

どうやって判断する?
159

View Slide

カルーセルの話
160

View Slide

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

View Slide

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

View Slide

考えてみよう!
163

View Slide

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

View Slide

おわりに
165

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

誰にもできることがある
ほんの少しでも意味がある
172

View Slide

さあ、はじめよう!
173

View Slide

174

View Slide

ありがとうございました
175

View Slide

アクセシビリティからはじめる、 WebサイトのUI/UXデザイン

アクセシビリティからはじめる、 WebサイトのUI/UXデザイン

Rikiya Ihara

More Decks by Rikiya Ihara

Featured

Transcript