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

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

  • 著者:太田良典、伊原力也
  • 定価:本体3,000円 + 税
  • 発行・発売:株式会社 ボーンデジタル
  • ISBN:978-4-86246-265-7
  • 総ページ数:296 ページ
  • サイズ:B5判、2色(一部フルカラー)

発売日:2015年07月24日

製品の購入はこちら

  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store

※書店でお買い求めの際には、予め在庫をご確認ください。≫取扱い店舗
※PDF書籍に関しては書店販売を行っておりません。

書籍カバー画像

誌面サンプル 1-1なぜWebはアクセシブルなのか

誌面サンプル 2-1アクセシビリティ方針を作らない

誌面サンプル 3-5紙媒体のコンテンツがそのまま使われる

誌面サンプル 4-4現在地がわからない

本書籍は、一般財団法人 国際ユニヴァーサルデザイン協議会主催「IAUDアウォード2015 銀賞・ウェブデザイン部門」を受賞いたしました。

本アウォードは国内外から49件のエントリーがあり、IAUDアウォード2015審査委員会による厳正且つ公正な審査の結果、本書籍は銀賞を受賞しました。

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

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

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

アクセシビリティのさまざまな誤解を解くには、納品ベースのクオリティで、どのような解決手段があるのか具体的に説明することが必要です。本書では、絵にしないとわかりにくいようなモノを除き、ほとんどが200以上の実例を引用して解説しています。その中には、著者の2人が所属するBA(ビジネス・アーキテクツ)での先進な取り組みも数多く含まれています。解説は査読協力者の方々(植木 真、木達一仁、徳丸 浩、中根雅文、羽山祥樹、守谷絵美:以上敬称略)によるご指導を経て、執筆・編集しております。

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

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

4章と7章をWeb担当者Forumで特別公開(全12回)

4章「ナビゲーション設計」、7章「コンテンツ設計」を、Web担当者Forumにて特別公開しています。

誌面サンプル 5-2思ったようにスクロールできない

誌面サンプル 6-3ラベルや説明が不足しているフォーム

誌面サンプル 7-4複雑な表が理解できない

誌面サンプル 8-1見た目に頼っている

誌面サンプル 9-4代替テキストの実装が不適切

  • 刊行によせて
  • 本書の構成

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 ページタイトルがわかりづらい
  • 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章:実装

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

付録

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

製品の購入はこちら

  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store

※書店でお買い求めの際には、予め在庫をご確認ください。≫取扱い店舗
※PDF書籍に関しては書店販売を行っておりません。

正誤表 / ダウンロード

正誤表

本書に誤り、または不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

p.67の図3のキャプションに間違いがありました。

左から3つ目がウェブ型、4つ目がハブ&スポーク型となります。

67ページ 図3の訂正

p.264の3行目に間違いがありました。

「定義リストのdl要素は」とありますが、正しくは「dl要素は」となります。

HTMLのdl要素は、元々は定義リスト (definition list) とされていましたが、HTML5では再定義されており、連想リスト (association list) あるいは記述リスト (description list) であるとされています。本書のこの記述はHTMLのバージョンに依存しない文脈になっていますが、本書は全体として最新のHTMLを扱うポリシーで書かれていますので、HTML4までの定義を採用した記述は適切ではありません。

とはいえ、ここはHTML5であることにこだわっている部分でもなく、dl要素が何であるかという議論は文脈とあまり関係ありませんので、単に「dl要素は」とさせていただきます。ご指摘ありがとうございました。

p.288の達成基準に間違いがありました。

  • 「1.2.9 音声のみ(収録済)」とありますが、正しくは「1.2.9 音声のみ(ライブ)」となります。
  • 「1.4.6 コントラスト(収録済)」とありますが、正しくは「1.4.6 コントラスト(高度)」となります。
  • 「1.4.9 文字画像(収録済)」とありますが、正しくは「1.4.9 文字画像(例外なし)」となります。
  • 「2.1.3 キーボード(収録済)」とありますが、正しくは「2.1.3 キーボード(例外なし)」となります。