リフロー型の本格的な電子書籍版が登場！

EPUB・PDFのセットで販売します。本サイトで購入いただくと販売データと別に付録（Kindle用に調整したEPUB）が付属します。

※付録の内容は事前の予告なしに変更される場合があります。

なお、下記の電子書籍ストアでも販売します。こちらには付録が含まれません。

• Amazon.co.jp
• 達人出版会
• テックブックゾーン マナティ（マイナビ出版）

お試し版データのダウンロード

1章「はじめに」（紙版書籍10ページ分）を、お試しください。このダウンロードデータは、書籍の概要の理解を深め、アクセシブルな電子書籍であることを体験いただくことを目的として提供しております。お試し版ダウンロードについて、注意事項など詳しくは下記「正誤表 / ダウンロード」をご参照ください。

• EPUB（約6MB）

EPUB/Kindle版電子書籍について

PDFを含む電子書籍版は、本書初版第1刷に見つかった修正事項を反映しています。

EPUB/Kindle版の文章内に出現するリンクは、目次を除いて外部サイトへのリンクとなっています。検証は国内の主要なOS・デバイス・リーダーアプリで可能な限り行い、利用に大きな問題がないことを確認しております。テキストや画像の拡大・縮小、ブックマークやメモ、検索など、各リーダーアプリが提供する機能に準じてお使いいただけます。参考までに、優先的に検証した利用環境をお知らせします。

• パソコン
  • iBooks（Mac OS X High Sierra、同Sierra）
  • Kindle（Mac OS X High Sierra、同Sierra、Windows10）
  • Readium（Mac OS X High Sierra、同Sierra、Windows10）
• スマートフォン、タブレット
  • iBooks（iPhone8、iPhone 6、iPad Pro）
  • Kindle（iPhone8、iPhone 6、Nexus7 2012）
• スクリーンリーダー
  • NVDA 2017.3jp（Windows10 + Edge）
  • VoiceOver（iOS11 + iBooks）
  • TalkBack（Android6.0.1 + Kindle）

多様なユーザーニーズや閲覧環境に応える、HTML+CSS & JavaScriptの実装をマスターしよう!

この書籍は、パソコン、スマートフォン、タブレット、時計、テレビなどのインターネットコンテンツの多様化が進む中で、あらゆる人・検索ロボットやユーザーエージェントなどのマシーンを含む、幅広いターゲットにとって使いやすいコンテンツやインターフェイスのデザインをどのように実現するのかを解説するものです。HTML5、CSS3、JavaScriptといったフロントエンド言語のデザインパターン(プログラムのパターン)を豊富なコンテンツやインターフェイスの実例とともに紹介します。 原書のInclusive Design Patterns – Coding Accessibility Into Web Designは2016年10月にドイツ Smashing Magazineから刊行され、高い評価とレビューを得ています。 この書籍は、上記書籍の日本語版として、プロフェッショナル/学生を問わず、今日のWebサイトやWebアプリケーションを設計、デザイン、実装(プログラミング)するあらゆる従事者の方をターゲットに制作しました。

既刊のデザイニングWebアクセシビリティ、コーディングWebアクセシビリティの実装面の理解を深めるために

HTMLやCSSに関する書籍は、主にレイアウトなどの見た目を実現するためのHTMLやCSSのパターン集が多くなりますが、本書はWebの本質に立った、「あらゆる環境やユーザーにとって使える(つまり除外しない)」WebサイトやWebアプリケーションの実装のアプローチ方法について解説しています。これは、弊社刊行のデザイニングWebアクセシビリティなど限られた書籍でしかアプローチされていません。 弊社既刊「デザイニングWebアクセシビリティ」や「コーディングWebアクセシビリティ」をお読みいただいた方は、豊富なコードパターン解説を通じて、実装面の理解をぜひ深めてみてください。

推薦コメント：株式会社サイバーエージェント　Webフロントエンドディベロッパー　佐藤歩様

一見して見慣れない「インクルーシブ」という主題だが、フロントエンド開発の本質を実によくとらえている。利用環境がどのような条件下にあっても使用に耐えうる堅牢な実装は、サービスやコンテンツの価値を最大化するために不可欠である。本書が取り扱う事例は決して新奇なものではない。しかし、一般的な事例を「インクルーシブ」な視点から再考することによって、優れたフロントエンド開発者のみが実践してきた秘伝を学ぶことができるはずだ。

好評の既刊書籍の著者、監修者が再び集結！

ヘイドン・ピカリング

実用デザイナー、ライターで講演を行うかたわら、SMASHING MAGAZINEのWebアクセシビリティ担当エディター、The Paciello Groupのコンサルタントも務める。Webをインクルーシブな場所にするための新しい方法や革新的な手段に関心を持ち、ユーザー調査、システム思考、プレーンで昔ながらのセマンティックを持つHTMLといったものすべてを活用する。文章を書いたり、コードを書いたり、イラストを描いているとき以外は、メンタルヘルスに関するキャンペーンを行ったり、サウンドデザインに挑戦したり、自分でデチューンしたSGのコピーギターでドゥームメタルのリフを繰り返し弾いたり。そしていつも、オリジナルレシピのギネスとナガチリで燃料補給している。

太田良典(弁護士ドットコム株式会社)

エキスパートエンジニア。HTML仕様の翻訳や解説といった個人活動をしながら、2001 年よりビジネス・アーキテクツで大規模企業サイトの制作や管理に従事。Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞（情報セキュリティ部門）」を受賞。 アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の翻訳作業部会主査として活動。 著書（共著）に『デザイニングWebアクセシビリティ』（ボーンデジタル）など。

伊原力也(freee株式会社)

アクセシブルなインタラクションデザインの実践を標榜し、Webサービスやスマートフォンアプリの設計業務に従事。ウェブアクセシビリティ基盤委員会（WAIC）理解と普及作業部会委員としても活動。HCD-Net認定 人間中心設計専門家。クリエイティブユニットmokuva所属。共著書に『デザイニングWebアクセシビリティ』、監訳書に『コーディングWebアクセシビリティ』（ボーンデジタル）。

1章：はじめに

• 1-1 Webデザインを考え直す
• 1-2 インクルーシブデザイン
• 1-3 インクルーシブなボタン

2章：ドキュメント全体

• 2-1 DOCTYPE
• 2-2 lang属性
• 2-3 レスポンシブデザイン
• 2-4 フォントサイズ
• 2-5 プログレッシブエンハンスメント
• 2-6 アセットの管理
• 2-7 フォントのサブセット化
• 2-8 title要素
• 2-9 main要素
• 2-10 ページを見てみよう
• 2-11 フレームワーク、プリプロセッサ、タスクランナーについての注意

3章：パラグラフ

• 3-1 書体
• 3-2 組版
• 3-3 インラインリンク
• 3-4 自動化されたアイコン
• 3-5 パラグラフの記述
• 3-6 まとめ

4章：ブログ記事

• 4-1 main要素
• 4-2 見出しの構造
• 4-3 article要素
• 4-4 プログレッシブエンハンスメントと相互運用性
• 4-5 Flesch-Kincaidリーダビリティテスト
• 4-6 見出しとリンクテキスト
• 4-7 ビデオ
• 4-8 フローシステムの確立
• 4-9 まとめ

5章：パターンごとの評価

• 5-1 原則ごとの評価における問題点
• 5-2 Custom ElementsとShadow DOM

6章：ナビゲーション領域

• 6-1 ナビゲーションランドマーク
• 6-2 サイト内共通のナビゲーション
• 6-3 目次
• 6-4 まとめ

7章：メニューボタン

• 7-1 アイコンの表示方法
• 7-2 ラベルづけ
• 7-3 古いブラウザ
• 7-4 操作
• 7-5 タッチターゲット
• 7-6 まとめ

8章：インクルーシブ・プロトタイピング

• 8-1 ペーパープロトタイピング
• 8-2 紙からコードへ

9章：商品リスト

• 9-1 リストの長所
• 9-2 カギとなる情報
• 9-3 商品のサムネイル
• 9-4 「今すぐ購入」アクション
• 9-5 SERP
• 9-6 まとめ

10章：フィルターウィジェット

• 10-1 見た目の例
• 10-2 マークアップ
• 10-3 CSSによる拡張
• 10-4 JavaScriptによる拡張
• 10-5 検索結果をもっと読み込む
• 10-6 表示オプション
• 10-7 動的なコンテンツへの柔軟な対応
• 10-8 まとめ

11章：登録フォーム

• 11-1 コンテキストに応じたフォーム
• 11-2 基本のフォーム
• 11-3 必須フィールド
• 11-4 パスワードを表示する
• 11-5 フォーム検証
• 11-6 マイクロコピーライティング
• 11-7 まとめ

12章：テスト駆動マークアップ

• 12-1 セレクタのロジック
• 12-2 テスト駆動のタブインターフェイス
• 12-3 1つですべてを賄う必要はない