紙版コーディングWebアクセシビリティ

WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

  • 著者:ヘイドン・ピカリング
  • 監訳:太田良典、伊原力也
  • 定価:本体2,300円 + 税
  • 発行・発売:株式会社 ボーンデジタル
  • ISBN:978-4-86246-266-4
  • 総ページ数:200 ページ
  • サイズ:A5判、フルカラー

発売日:2015年03月27日

製品の購入はこちら

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

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

書籍カバー画像

誌面サンプル はじめに

誌面サンプル 1−2本書の内容

誌面サンプル 2-2ボタンのスタイル

誌面サンプル 3-3初めてのARIAウィジェット

HTML5+JavaScriptのモダンWebアプリをアクセシブルに!

本書は、Web制作者が情報源として利用しているSmashing Magazineで2014年6月に公開された書籍「Apps For All – Coding Accessible Web Applications」の日本語訳版です。 WAI-ARIAとは、HTMLドキュメントに詳細な情報を付加する仕様で、W3Cが2014年に1.0を勧告しています。今後アメリカでの急速な普及が進むにつれ、日本でも「HTML、CSS、JavaScriptなどフロントエンド技術を実装するエンジニアやデザイナーにとって学ぶべきこと」となっていくことが予想されますが、日本語による情報が乏しいのが現状です。そのような状況を鑑み、ウェブアクセシビリティ基盤委員会(WAIC)でJIS X 8341-3の策定に従事する太田良典氏、太田氏と同じく所属するBA(ビジネス・アーキテクツ)で先進な取り組みを行っていることで知られる伊原力也氏を監訳に迎え、日本語版をお届けすることになりました。

ガイドラインの穴埋めに留まらない、知的好奇心をくすぐる内容

今までのWebアクセシビリティ関連書籍にありがちだったWCAG2.0やJIS X 8341-3:2010をベースにした抽象的な解説とは一線を画し、HTML+CSS+JavaScriptにおけるキーボード操作やスクリーンリーダー対応における課題をコーディングで解決する、非常に具体的な内容です。問題を解決するための手法として関心を集めていながら日本語の文献が乏しく、なかなか勉強できずに困っているという声が大きく聞かれたWAI-ARIAを解説しています。

推薦コメント:株式会社ミツエーリンクス 取締役CTO 木達一仁様

Webデザインの現場において、HTML5の採用やマルチデバイス対応が必須となりつつある昨今、「アクセシビリティについて学びたいのですが良い書籍を知りませんか?」 そんな質問を受けるたびに回答に苦慮していました。 本書は、そんな私の悩みを解消する福音であり、また今後求められるであろうWebアクセシビリティ対応、特にWAI-ARIAの活用を学ぼうとするすべての人々にとって、すばらしい手引となることでしょう。

誌面サンプル 4-2有名なランドマーク

誌面サンプル 5-1何をどう隠すべきか

誌面サンプル 6-3ダイアログ

誌面サンプル

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

1章:すべての人のために ― アクセシブルとは何か?

アクセシブルとは何か? Web とは何か? そもそものWeb の思想と担保されるべきアクセシビリティとはどういうことなのかについて、本書籍のねらいを交えて解説します。

  • 1-1 Web標準
  • 1-2 本書の内容
  • 1-3 セマンティクスとスクリーンリーダー

2章:ボタンのすべて ― WAI-ARIAの基本

もっとも頻出するコントロールである「ボタン」を題材に、「ロール(役割の定義)」「ステート(状態を伝える)」「プロパティ(情報を提供する)」というWAI-ARIAの基本を解説します。

  • 2-1 button要素
  • 2-2 ボタンのスタイル
  • 2-3 ボタンにラベルをつける

3章:WAI-ARIAの進む道 ― WAI-ARIAの基本思想とルール

WAI-ARIA の全体像について。HTML5 の既存の要素のマークアップにパッチを当てるように記述することで、支援技術向けにもマークアップを拡張できるという基本思想とルールを解説します。

  • 3-1 ARIA:平等への情熱
  • 3-2 ロールプレイング
  • 3-3 初めてのARIAウィジェット
  • 3-4 ルールを知る

4章:飛んでいこう ― ページ内に目印をつける「ロール」

ページ内の移動やナビゲーションについて。ページ内に目印をつけて自由に移動することを可能にする「ランドマークロール」を中心に「ロール」を解説します。

  • 4-1 分割する
  • 4-2 有名なランドマーク
  • 4-3 メインイベント
  • 4-4 見出しを忘れずに!
  • 4-5 リンクをハイジャック

5章:いないいないばあ ― メニューやタブの「ステート」

JavaScript を用いて、「いないいないばあ」と出たり隠れたりするメニューやタブなどの「ステート」について。フォームや各種メニュータイプ別にコードを交えて解説します。

  • 5-1 何をどう隠すべきか
  • 5-2 ヒントをちょうだい!
  • 5-3 プログレッシブな折りたたみ項目
  • 5-4 ダブを1つください!

6章:生きてる! 生きてる! ― 「ライブリージョン」や「ダイアログ」

フランケンシュタインの名セリフ「It’s Alive! – 生きてる、生きてる! 」じゃないですが、ユーザーとコンテンツの対話に欠かせない「ライブリージョン」や「ダイアログ」の実装を解説します。

  • 6-1 警告!
  • 6-2 全体像を見せる
  • 6-3 ダイアログ

付録:巻末資料集

  • 監訳者が日本語の情報サイトなどを独自に整理してお届けします。
  • #a11y
  • ブログ
  • テスティングツール
  • WAI-ARIA
  • そして最後に…

製品の購入はこちら

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

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

正誤表 / ダウンロード

正誤表

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

p.149、p.152のコードにおいて、aria-controls属性の値に誤りがありました。

原書のとおりですが、訳注を示すべきでした。申し訳ございません。正しくは下記のとおりです。

p.149

【誤】

【正】

p.152

【誤】

【正】

p.149、p.151のコードにおいて、section要素にrole=”tabpanel”を付けているのは誤りです。

現在のHTML5仕様では、section要素のAllowed ARIA role attribute valuesにtabpanelが含まれていないため、バリデーションエラーになります。原書のとおりですが、訳注を示すべきでした。申し訳ございません。validにするためには、たとえば各section要素を囲むdiv要素を追加し、そちらのほうにid属性やrole属性を設定するような方法が考えられます。一例を示します。

p.149

【誤】

【望ましい対応例】

p.151

【誤】

【望ましい対応例】