Webアプリケーションアクセシビリティ──今日から始める現場からの改善

（概要）

アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が、より多くの環境で、より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知などに障害があるケースも含みます。日々繰り返し利用するWebアプリケーションにこそ、アクセシビリティが求められます。

Webサイトに比べて、多くのインタラクションを行うWebアプリケーションでは、アクセシビリティの確保はやや難易度が高いものです。特に既存のWebアプリケーションは複合的な課題を抱えていることが多く、教科書どおりの方法では必ずしも改善できません。

本書では、Webアクセシビリティの基礎である「HTMLとWAI-ARIA」を解説したうえで、Webアプリケーションの要である「フォーム」、色やテキストなど「UIデザインの基本」、モーダルダイアログや通知など「少し複雑なUIパターン」の3分野に分けて、よくある事例を取り上げながら、現実的で段階的な改善方法を紹介します。

さらには、デザインシステムの活用や組織での推進法など、アクセシビリティの取り組みを定着・推進・向上させるためのノウハウも詳説します。


（こんな方におすすめ）

・Webアプリケーションエンジニア,フロントエンドエンジニア,デザイナー


（目次）

第1部 コンテナ技術の概要と動向、コンテナを活用したアプリケーション開発ワークフローを学ぶ

第1章 Webアクセシビリティとは

　　1.1 アクセシビリティとは

　　1.2 Webアクセシビリティとは

　　1.3 Webアクセシビリティと「障害」

　　1.4 WCAG──Webアクセシビリティの標準

　　1.5 Webアクセシビリティに取り組む理由

　　1.6 なぜWebアプリケーションでアクセシビリティなのか

第2章 Webアクセシビリティの基礎

　　2.1 基礎となるマシンリーダブルを理解する

　　2.2 キーボード操作の基本

　　2.3 非テキストコンテンツのマシンリーダビリティ

　　2.4 コンテンツ構造のマシンリーダビリティ

第3章 フォームの改善

　　3.1 ラベルと説明

　　3.2 入力の支援

　　3.3 制約の検証とエラー

　　3.4 ユーザーが予測できる動作

　　3.5 カスタムコンポーネント

第4章 UIデザインの改善

　　4.1 色とコントラスト

　　4.2 テキストのサイズ

　　4.3 テキストのレイアウト

　　4.4 ライティング

　　4.5 画像の代替テキスト

　　4.6 動画・音声メディア

　　4.7 アニメーション

　　4.8 モバイルデバイス

　　4.9 ページのレイアウトと一貫性

第5章 複雑なUIパターンの改善

　　5.1 モーダルダイアログ

　　5.2 通知

　　5.3 カルーセル

　　5.4 シンプルなツールチップ

　　5.5 リッチなツールチップ

　　5.6 ドラッグ&ドロップ

　　5.7 ハンバーガーメニュー

　　5.8 画面遷移

第6章 デザインシステムとアクセシビリティ

　　6.1 デザインシステムとは

　　6.2 デザインシステムとアクセシビリティの関係性

　　6.3 デザインシステムにアクセシビリティを織り込む

　　6.4 デザインシステムをアクセシビリティ視点で強化する

　　6.5 デザインシステムだけではアクセシブルにならない

第7章 アクセシビリティの組織導入

　　7.1 本章の読み方・使い方

　　7.2 情報を共有して仲間を探す

　　7.3 社内コミュニティを立ち上げる

　　7.4 自身の考えを社内で発信する

　　7.5 小規模な改善にトライする

　　7.6 周りがチェックと改善をできるように支援する

　　7.7 アクセシビリティを必要とする人に会う

　　7.8 アクセシビリティの社内オーナーになる

第8章 アクセシブルなUI設計の原理を導く

　　8.1 はじめからアクセシブルにするには

　　8.2 利用状況から共通の課題を導く

　　8.3 アンチパターンと対策（１）--1画面に多くの状態を持つ

　　8.4 アンチパターンと対策（２）--テキストが省略された画面

　　8.5 アンチパターンと対策（３）--小さく密集した操作対象

　　8.6 アンチパターンと対策--ユーザーの要求ではない動作