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

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

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

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

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

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

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

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

HTMLとアクセシビリティ
10

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

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

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

ダウンローダー(SiteSucker)
15

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

18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

そのソース
<divid="earthquakettitle"class="prt-disasterInfo">
<pstyle="margin:0010px-3px">
<ahref="/kinkyu/150603.html"><img
src="common/images/parts/nenkin_message_large.png"alt="日本年金機構にお
ける不正アクセスによる情報流出事案について"border="0"></a>
</p>
<!—
<pstyle="margin:0010px-3px">
<ahref="/kinkyu/150603.html"><img
src="common/images/parts/nenkin_message.png"alt="日本年金機構不正アクセ
ス事案について年金情報をめぐり、なりすましなどの犯罪が起こっています。ご
注意ください。"border="0"></a>
</p>
-->
38

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

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

大臣のHTML
<divclass=“contents”>
<pclass=“ruby”>しおざきやすひさ</p>
<pclass=“name”>塩崎恭久</p>
<p><ahref=“/kouseiroudoushou/profile/daijin.html”
class=“ico-link”>プロフィールはこちら</a></p>
</div>
<divclass=“image”>
<imgsrc=“images/daijin_img_01.jpg”alt=“塩崎恭久”
width=“137”height=“155”/>
</div>
43

副大臣のHTML
<divclass=“contents”>
<pclass=“ruby”>たけうちゆずる</p>
<pclass=“name”>竹内譲</p>
<p><ahref=“/kouseiroudoushou/profile/hukudaijin01.html”
class=“ico-link”>プロフィールはこちら</a></p>
</div>
<divclass=“image”>
<imgsrc=“images/hukudaijin_img_01.jpg”alt=“”
width=“137”height=“155”/>
</div>
44

冗長な代替テキスト
45

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

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

特許庁の組織図のalt
<divid=“tmp_contents”>
<h1>組織図</h1>
<p><imgalt=“特許庁の組織図”width=“530”
height=“706”
src=“/shoukai/soshiki/images/soshikizu.jpg”
/></p>
<pclass=“right”><em>［更新日 2015年5月13日］
</em></p>
</div>
50

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

文部科学省の組織図
52

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

法務省のアプローチ
54

AOIPro.の組織図周辺のマークアップ
<objectclass=“svg-image”data=“/files/chart-5-2.svg”width=“100%”>
<divclass=“bass-list-A01”>
<ul>
<li>株主総会
<ul>
<li>監査役会</li>
</ul>
</li>
<li>取締役会</li>
<li>代表取締役社長
<ul>
<li>経営会議</li>
<li>第一プロダクションディビジョン
<ul>
<li>制作ユニット</li>
(後略)
58

AOIPro.の組織図そのもののマークアップ(抜粋)
<gid=“svg-obj01-01”>
<usexlink:href=“#svg-box01-01”/>
<textx=“100”y=“21”>株主総会</text>
</g>
<textx=“100”y=“21”>取締役会</text>
<pathd=“M1000v-49”/>
</g>
<textx=“100”y=“21”>代表取締役社長</text>
<pathd=“M1000v-50”/>
</g>
<textx=“100”y=“21”>監査役会</text>
<pathd=“M015h-100”/>
</g>
59

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

64

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

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

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

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

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

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

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

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

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

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

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

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

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

NG:配置に頼った表現
80

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首相官邸のアプローチ
104

富士通のアプローチ
107

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

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

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

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

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

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

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

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

戦略で気をつけること
123

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首相官邸のアプローチ
150

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

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

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

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

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

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

どうやって判断する?
159

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related Content

More from Yoshinori OHTA (10)

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