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

アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が、より多くの環境で、より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知などに障害があるケースも含みます。日々繰り返し利用する Web アプリケーションにこそ、アクセシビリティが求められます。
Web サイトに比べて、多くのインタラクションを行う Web アプリケーションでは、アクセシビリティの確保はやや難易度が高いものです。特に既存の Web アプリケーションは複合的な課題を抱えていることが多く、教科書どおりの方法では必ずしも改善できません。
本書では、Web アクセシビリティの基礎である「HTML と WAI-ARIA」を解説したうえで、Web アプリケーションの要である「フォーム」、色やテキストなど「UI デザインの基本」、モーダルダイアログや通知など「少し複雑な UI パターン」の 3 分野に分けて、よくある事例を取り上げながら、現実的で段階的な改善方法を紹介します。
さらには、デザインシステムの活用や組織での推進法など、アクセシビリティの取り組みを定着・推進・向上させるためのノウハウも詳説します。

『Web アプリケーションアクセシビリティ』 (伊原 力也、小林 大輔、桝田 草一、山本 伶 著、技術評論社) は、フォームや通知、モーダルダイアログのように操作の多い Web アプリケーションを、より多くの人と環境で使える状態へ段階的に直していくための実践書です。副題は「今日から始める現場からの改善」で、NDL の書誌では 2023 年 3 月刊、版元の発売日は 2023 年 2 月 27 日です。版元は対象を Web アプリケーションの開発者とデザイナーとしており、既存のプロダクトを抱えたまま改善を始めたいチームに向いた一冊です。

全 8 章の構成、HTML と WAI-ARIA の基礎から組織導入まで

目次は、はじめにに続く全 8 章と付録で構成されています。第 1 章「Web アクセシビリティとは」で定義や障害との関係、WCAG の概略を押さえ、第 2 章「Web アクセシビリティの基礎」でマシンリーダブルという考え方、キーボード操作の基本、非テキストコンテンツとコンテンツ構造を扱います。第 3 章はフォームの改善、第 4 章は色とコントラストやテキスト、代替テキスト、モバイルデバイスなどの UI デザインの改善、第 5 章はモーダルダイアログ、通知、カルーセル、ツールチップ、ドラッグ & ドロップ、ハンバーガーメニュー、画面遷移といった複雑な UI パターンの改善です。後半の第 6 章はデザインシステムとアクセシビリティ、第 7 章はアクセシビリティの組織導入、第 8 章はアンチパターンからアクセシブルな UI 設計の原理を導く内容で、付録では支援技術と利用状況を扱います。目次の項目には「事例」と「改善」、あるいは「課題」と「改善方法」の組が多く並んでおり、よくある失敗から改善方法へ進む書き方と読めます。

なぜ Web アプリケーションでは対応が難しくなるのか

文書を読むことが中心の Web サイトに比べ、Web アプリケーションは画面の一部が操作に応じて書き換わり、開閉や選択の状態が刻々と変わります。スクリーンリーダーなどの支援技術は、ブラウザーが HTML から組み立てるアクセシビリティツリーを通して画面を理解するため、見た目だけで作った部品は、何の役割を持つのか、いま開いているのか、どこにフォーカスがあるのかが伝わりません。セマンティック HTML で役割を表す要素を選び、足りない部分だけを WAI-ARIA の属性で補い、キーボードでの移動とフォーカスの戻し先を設計するという順番が基本になるのはこのためです。本書の目次にも、WAI-ARIA よりも HTML ネイティブのセマンティクスが優れている理由や、控えめな通知をスクリーンリーダーに伝えるライブリージョンといった項目があり、この順番に沿って改善を積み上げる構成になっています。アクセシビリティ を障害のある人だけの話にとどめず、版元の紹介文が言う「利用可能な状況の幅広さ」として捉えると、一時的なけがや屋外での利用、加齢による見えにくさまでが同じ設計の延長に入ってきます。

開発者とデザイナーの両方に、現場の改善を後押しする材料

版元の著者紹介によると、4 名はいずれも Web サービスを開発する企業でアクセシビリティの改善や普及啓発に携わってきた実務家です。第 6 章と第 7 章でデザインシステムへの織り込み方や、社内コミュニティの立ち上げ、小規模な改善の試行、社内オーナーになるまでの進め方を扱っている点は、技術的な正解は分かっても組織で続かないという壁にまで踏み込んだ部分です。一方で、規格の達成基準を 1 項目ずつ解説する逐条の解説書や、評価と試験の手順書を求める人には、目的が合わない可能性があります。デザインの側から学びの順序を組み立てたい場合は、Web デザイン本の選び方 も併せて眺めておくと、本書の置きどころを決めやすくなります。

既存の Web アプリケーションで、キーボードで操作できない部品やスクリーンリーダーに状態が伝わらない画面を抱えながら、どこから手を付けるべきか迷っている開発者やデザイナーにとって、事例と改善の組で段階的に進められる本書は、明日の改修の優先順位を決める手がかりになる一冊です。