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

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

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

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

自己紹介 4

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

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

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

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

HTMLとアクセシビリティ 10

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

さまざまな環境 12

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

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

ダウンローダー(SiteSucker) 15

クローラー (Googlebot) 16

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

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

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

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

代替マウス 22

点字ディスプレイ 23

視線入力装置 24

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

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

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

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

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

HTMLでマークアップした場合 <!DOCTYPE html> <html lang=“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

代替テキスト 34

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

厚生労働省 36

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

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

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

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

答え: 合計7回 41

うち大臣は3回 42

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

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

冗長な代替テキスト 45

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

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

特許庁の組織図 49

特許庁の組織図のalt <div id=“tmp_contents”> <h1>組織図</h1> <p><img alt=“特許庁の組織図” width=“530” height=“706” src=“/shoukai/soshiki/images/soshikizu.jpg” /></p>
<p class=“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

法務省の組織図 55

AOI Pro. のアプローチ 56

AOI Pro. の組織図 57

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

AOI Pro. の組織図そのもののマークアップ (抜粋) <g id=“svg-obj01-01”> <use xlink:href=“#svg-box01-01”/> <text x=“100”
y=“21”>株主総会</text> </g> <g id=“svg-obj01-02”> <use xlink:href=“#svg-box01-01”/> <text x=“100” y=“21”>取締役会</text> <path d=“M100 0v-49” /> </g> <g id=“svg-obj01-03”> <use xlink:href=“#svg-box01-01”/> <text x=“100” y=“21”>代表取締役社長</text> <path d=“M100 0v-50” /> </g> <g id=“svg-obj02-01”> <use xlink:href=“#svg-box01-02”/> <text x=“100” y=“21”>監査役会</text> <path d=“M0 15h-100” /> </g> 59

考えてみよう! 60

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

CSSによる画像置換 62

厚生労働省 63

DOMツリー 65

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

NG: 色に頼った表現 78

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

NG: 配置に頼った表現 80

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

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

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

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

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

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

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

インタラクション 88

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

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

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

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

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

カルーセルとは? 94

Rio 2016 95

Rio 2016 96

Rio 2016 下部 97

Rio 2016 下部 98

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

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

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

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

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

首相官邸のアプローチ 104

首相官邸 105

首相官邸 106

富士通のアプローチ 107

富士通 108

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

じぶん銀行 110

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

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

危険なパターン 114

PDF問題 115

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

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

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

戦略とは? 120

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

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

戦略で気をつけること 123

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

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

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

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

WCAG 2.0 128

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

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

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

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

あいまいな方針 133

厳しすぎる方針、具体的すぎる方針 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

カルーセルの話 160

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

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

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

おわりに 165

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

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

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

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

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

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

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

さあ、はじめよう! 173

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

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

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

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

More Decks by Rikiya Ihara / magi

Featured

Transcript