アクセシブルな設計やコンテンツ制作のアプローチ

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

「ガイドライン対策」といった後ろ向きなアクセシビリティ対応ではなく、戦略・要件策定→情報設計→ビジュアルデザイン→実装・コーディングといった各段階で、ユーザーにとって使いやすいと思えるものを作る。そのことで、ごく自然にアクセシビリティを獲得できる方法をノウハウ集の形でまとめています。

在庫あり

ご注文日から最短２営業日でお届けいたします。詳しくはこちら。この商品は送料無料にて、ボーンデジタルが直接販売、発送いたします。

この商品のお求め方法

定価	3,240円（税込）
判型	B5正寸
総ページ数	296
発売日	2015年7月24日
ISBN	978-4-86246-265-7
著者	太田良典、伊原力也
発行	株式会社ボーンデジタル

数量

※後からでも冊数変更できます

誰でもどんなデバイスからでも情報や機能を利用できること=アクセシビリティが重要

この書籍は、ともすれば「規格や達成基準をどう理解し、サイトやサービスを準拠させるか」という実装面に目が向きがちだったアクセシビリティ関連の従来の書籍と一線を画します。「特別な取り組みをせず、普通に戦略・要件策定→情報設計→ビジュアルデザイン→実装・コーディングを行うことが達成基準を満たすことにつながる」ということを、具体的に制作を進める中でつまづく疑問(Q)と解決手段(A)を通じて解説します。書かれている内容は、良質なユーザー体験を生むためのノウハウです。これまでWebアクセシビリティに足が遠のきがちだった方にもぜひお読みいただきたいと思っています。

解決手段は実在するサイト事例をもとに解説

アクセシビリティのさまざまな誤解を解くには、納品ベースのクオリティで、どのような解決手段があるのか具体的に説明することが必要です。本書では、ユーザーが使いづらい＆困った状況は下の写真のようにイラストで、解決策は200以上の実例を引用して解説しています。その中には、著者の2人が所属するBA（ビジネス・アーキテクツ）での先進な取り組みも数多く含まれています。

推薦コメント：株式会社インフォアクシア　代表取締役　植木真様

アクセシビリティというと、ガイドラインへの対応が目的となってしまいがちです。しかし、ユーザーの利用環境が多様化するなか、私たちが目指すべきはより多くのユーザーが使えるようにすることであり、海外ではアクセシブルなユーザー体験（AUX）という視点が提唱されています。本書は、アクセシビリティをコンテンツの品質基準として位置づけ、まさにそのAUX視点でのデザインプロセスを理解・実践するために必読の一冊です。

第1章

サイトを作る前に

そもそもなぜアクセシビリティが重要なのか、アクセシビリティのさまざまな誤解も解いていきます。

なぜWebはアクセシブルか
なせアクセシビリティと向き合うのか
アクセシビリティのさまざまな誤解

第2章

戦略の策定

まず目的を明確にし、ビジネス要件やプロジェクトの方針、そしてアクセシビリティ方針を策定します。

概要と流れ
2-1 ウェブアクセシブルティ方針を作らない
2-2 適切でないアクセシビリティ方針
2-3 手段が目的になってしまう

第3章

要件定義

方針を踏まえた上で、具体的にどのような機能やコンテンツが必要になるのか検討し、サイトが満たすべき要件を定義します。

概要と流れ
3-1 CAPTCHAの導入でアクセス不能になる
3-2 ブラウザやOSの機能が干渉を受ける
3-3 コンテンツ側の冗長なアクセシビリティ機能
3-4 動画コンテンツにアクセスできない
3-5 紙媒体のコンテンツがそのまま使われる
3-6 CMSの導入に失敗する

第4章

ナビゲーション設計

コンテンツをサイトの中でどう位置づけ、どう分類し、ユーザーにどう見せるのかを検討します。

概要と流れ
4-1 分類や並び順がわかりづらい
4-2 カテゴリ名や構造がわかりづらい
4-3 ナビゲーションに一貫性がない
4-4 現在地がわからない
4-5 再調整したり、やり直す手がかりがない
4-6 情報への到達手段が少なすぎる

第5章

インタラクション設計

ユーザーの理解を助け、操作を快適にして、ユーザビリティやアクセシビリティを向上することを検討します。

概要と流れ
5-1 デバイスに依存したUI
5-2 思ったようにスクロールできない
5-3 勝手に新規タブやポップアップが開く
5-4 一定時間で勝手にページ移動する
5-5 動きをコントロールできない
5-6 音が勝手に再生される

第6章

システム設計

フォームを中心としたシステムの設計について扱います。問い合わせ、アンケート、といった、ユーザーが入力操作を行うようなシステムを想定しています。

概要と流れ
6-1 情報が不足しているフォーム
6-2 不要な項目を入力させられるフォーム
6-3 ラベルや説明が不足しているフォーム
6-4 入力が困難なフォーム
6-5 ミスを誘発するフォーム
6-6 エラーが解決できないフォーム
6-7 確認・訂正ができないフォーム
6-8 戻る機能が使えないフォーム
6-9 時間切れで作業が継続できなくなるフォーム

第7章

コンテンツ設計

ユーザーに提供するコンテンツそのものについて、構成要素を決め、テキスト原稿や素材を調達する際のポイントを整理します。

概要と流れ
7-1 ページタイトルがわかりづらい/li>
7-2 適切な見出しが立っていない
7-3 言葉がわかりにくい
7-4 複雑な表が理解できない
7-5 画像を含むコンテンツが理解できない
7-6 リンク先がわからない

第8章

ビジュアルデザイン

サイトのナビゲーションやインタラクション、コンテンツのそれぞれの要素について、視覚的な見せ方、ビジュアルを検討していきます。

概要と流れ
8-1 見た目に頼っている
8-2 コントラストが低い
8-3 どこが押せるかわからない
8-4 テキストブロックが読みづらい
8-5 文字が画像になっている
8-6 フォーカスが見えない
8-7 小さく密集したものが押せない
8-8 スタイルに一貫性がない
8-9 閃光で発作が起きる
8-10 拡大すると問題が起きる

第9章

実装

HTMLやCSS、JavaScriptを書いたり、画像を切り出したりといった作業を行い、実際にブラウザで閲覧できるWebページの形を作っていきます。

9-1 概要と流れ
9-2 文法ミスがある
9-3 セマンディクスが不適切
9-4 コンテンツがCSSに依存している
9-5 代替テキストの実装が不適切
9-6 リンク先がわからなくなる実装
9-7 ラベルがマークアップされていない
9-8 スクリーンリーダー対応が不適切

付録

巻末資料集

本書の内容とWCAG2.0や達成等級がどのような関係にあるか、参考資料を提供します。

WCAG2.0と本書内容の対照表
関連情報・資料集

画像をクリックすると拡大表示いたします。

読者の皆様、ならびに関係者の皆様に深くお詫び申し上げるとともに、この場で訂正させていただきます。

●P064　図3のキャプション
【誤】左から3点目「ハブ＆スポーク型」、4点目「ウェブ型」
【正】左から3点目「ウェブ型」、4点目「ハブ＆スポーク型」

●P264　本文
【誤】定義リストのdl要素は
【正】dl要素は
HTMLのdl要素は、元々は定義リスト (definition list) とされていましたが、HTML5では再定義されており、連想リスト (association list) あるいは記述リスト (description list) であるとされています。本書のこの記述はHTMLのバージョンに依存しない文脈になっていますが、本書は全体として最新のHTMLを扱うポリシーで書かれていますので、HTML4までの定義を採用した記述は適切ではありません。とはいえ、ここはHTML5であることにこだわっている部分でもなく、dl要素が何であるかという議論は文脈とあまり関係ありませんので、単に「dl要素は」とさせていただきます。ご指摘ありがとうございました。

●P288　WCAG 2.0 と本書内容の対照表
【誤】1.2.9 音声のみ（収録済）
【正】1.2.9 音声のみ（ライブ）

【誤】1.4.6 コントラスト（収録済）
【正】1.4.6 コントラスト（高度）

【誤】1.4.9 文字画像（収録済）
【正】1.4.9 文字画像（例外なし）

【誤】2.1.3 キーボード（収録済）
【正】2.1.3 キーボード（例外なし）