Webアプリケーションアクセシビリティ
Webアプリケーション
アクセシビリティ
今日から始める現場からの改善
伊原 力也、小林 大輔、桝田 草一、山本 伶（著）
技術評論社
ISBN-13: 978-4297133665
3,960円（税込）
576ページ
2023年2月27日発売
「使えない」を「使える」にするデザインと技術
Webアプリケーションは私たちの社会や生活になくてはならないものになっています。業務で利用するWebアプリケーションに限っても、情報共有アプリ、労務管理アプリ、会計アプリなど、多種多様なWebアプリケーションが利用されています。アクセシビリティは、こうしたWebアプリケーションをより多様な社会や生活に根付かせるために必要不可欠な品質のひとつといえます。
しかし、Webアプリケーションのアクセシビリティを高めることにはさまざまな課題があります。多くのWebアプリケーションは複雑なUIで構成されています。複雑なUIをアクセシブルにするには専門的なスキルが必要です。また、多くのWebアプリケーションには大規模かつ成長していく前提があります。このため、有志の取り組みに終始するのではなく、開発プロセスにアクセシビリティを組み込み組織全体にアクセシビリティを啓発していく必要があります。
本書の目的は、上記の課題を踏まえたうえで、みなさんが開発するWebアプリケーションのアクセシビリティを高めることです。
本書の構成
本書の構成は、筆者たちがそれぞれの事業会社で経験した、Webアプリケーションのアクセシビリティを高めるための歩みをたどっています。
アクセシビリティを知る
Webアプリケーションのアクセシビリティについて取り組む最初の動機は、アクセシビリティについて知り重要性を理解することです。
できるところから改善する
アクセシビリティの重要性を理解できたら、有志で、できるところからアクセシビリティの課題をひとつひとつ改善していきます。
本書では、❶よくある事例で課題を知る、❷チェックポイント、❸よくある事例を改善する、という3ステップでアクセシビリティの課題を解決する方法を示します。
組織全体で取り組む
アクセシビリティは徐々に改善される一方、有志による取り組みはいずれ限界を迎えます。アクセシビリティをさらに高めるには、組織全体へアクセシビリティを啓発し開発プロセスに組み込む必要があります。
最初からアクセシブルにする
組織全体でアクセシビリティに取り組む体制を作り上げても、課題を発見して改善するというフローを続けていく限り、アクセシビリティの課題は生じ続けてしまいます。課題が発生する前に最初からアクセシブルにする考え方が必要です。
目次
第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章 フォームの改善
Webアプリケーションに不可欠なフォームやエラーについて取り上げます。
3.1 ラベルと説明
3.2 入力の支援
3.3 制約の検証とエラー
3.4 ユーザーが予測できる動作
3.5 カスタムコンポーネント
第4章 UIデザインの改善
多くのWebアプリケーションで頻出する、色、文字、画像、動画といった基本的なデザインのアクセシビリティについて取り上げます。
4.1 色とコントラスト
4.2 テキストのサイズ
4.3 テキストのレイアウト
4.4 ライティング
4.5 画像の代替テキスト
4.6 動画・音声メディア
4.7 アニメーション
4.8 モバイルデバイス
4.9 ページのレイアウトと一貫性
第5章 複雑なUIパターンの改善
モーダルダイアログやツールチップといった、Webアプリケーションに頻出かつ複雑なUIをアクセシブルにする方法を検討します。
5.1 モーダルダイアログ
5.2 通知
5.3 カルーセル
5.4 シンプルなツールチップ
5.5 リッチなツールチップ
5.6 ドラッグ&ドロップ
5.7 ハンバーガーメニュー
5.8 画面遷移
第6章 デザインシステムとアクセシビリティ
デザインシステムを使って、組織全体でアクセシビリティの高いWebアプリケーションを開発する方法を説明します。
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設計の原理を導く
多様な利用環境から共通の課題を抽出し、アクセシビリティの課題を生まないUI設計の原理を提示します。
8.1 はじめからアクセシブルにするには
8.2 利用状況から共通の課題を導く
8.3 アンチパターンと対策❶——1画面に多くの状態を持つ
8.4 アンチパターンと対策❷——テキストが省略された画面
8.5 アンチパターンと対策❸——小さく密集した操作対象
8.6 アンチパターンと対策❹——ユーザーの要求ではない動作
8.7 アンチパターンと対策❺——確認や報告が多い
8.8 アンチパターンと対策❻——入力が多く手間どる
8.9 アクセシブルなUI設計の原理
付録 支援技術と利用状況
ポインティングデバイス、キーボード、画面表示といった一般的な入出力デバイスを、さまざまなハードやソフトによって別の形に置き換える方法を解説します。
1 ポインティングデバイスと支援技術
2 キーボード操作と支援技術
3 操作方式を変更する支援技術
4 画面表示と支援技術
連載 アクセシビリティを組織で向上させる
──社内外の認知・効果測定から、新規開発への組み込みまで紙幅の都合で収められなかった原稿を再構成し、gihyo.jpで連載。第7章「アクセシビリティの組織導入」の続編として、さらに取り組みを広げていくためのノウハウをまとめます。
推薦の声
著者
伊原 力也
@magi1125
2004年に株式会社ビジネス・アーキテクツに入社し、情報アーキテクトとして活動。2017年にfreee株式会社に入社。多様な働き方の実現を目指し、デザインチームのマネジメントおよびアクセシビリティ普及啓発を行う。外部コンサルタントとしてnote、Ubie、STUDIO、東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポート。ウェブアクセシビリティ基盤委員会（WAIC）委員、人間中心設計推進機構（HCD-Net）評議委員。著書（共著）に『デザイニングWebアクセシビリティ』、監訳書に『コーディングWebアクセシビリティ』『インクルーシブHTML＋CSS＆JavaScript』（いずれもボーンデジタル刊）がある。
小林 大輔
@sukoyakarizumu
2012年、サイボウズ株式会社に新卒で入社。プログラマーとしてクラウドサービス「kintone」の実装に携わる。2014年、ロービジョンの社員のユーザビリティテストを観察したことをきっかけにアクセシビリティの啓発・改善活動を開始。アクセシビリティエキスパートとして、アクセシブルなデザイン・実装の指導・社内ガイドラインの作成などに従事。2021年からはkintoneのデザインシステム構築に関わる。ウェブアクセシビリティ基盤委員会（WAIC）作業部会1主査。
桝田 草一
@masup9
2007年、株式会社構造計画研究所に入社し、製造業向けの法人営業・マーケティングを担当。2014年にデジパ株式会社に入社し、フロントエンドエンジニアに転身。2017年に株式会社サイバーエージェント入社。配信プラットフォーム、公営競技投票サービスのウェブフロントエンド開発を経て、アメーバブログ、ABEMAのアクセシビリティ向上プロジェクトを推進。2021年に株式会社SmartHRに入社。従業員サーベイ機能のプロダクトデザインを担当。また、アクセシビリティと多言語化を専門とするプログレッシブデザイングループを立ち上げてマネージャーに就任。全社のアクセシビリティ推進に従事している。
山本 伶
@ymrl
慶應義塾大学政策・メディア研究科修士課程修了後、モバイルゲームを手掛けるベンチャー企業を経て、2014年にfreee株式会社に入社。フロントエンド開発を中心にエンジニアとして会計・人事労務ソフトの機能開発に携わる。2019年にデザイナーに転身し、現在は社内で使われているデザインシステムの構築、社員研修をはじめとするアクセシビリティの普及啓発活動、アクセシビリティの高い製品がリリースされるためのプロセス整備などに取り組んでいる。