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

「Web アプリケーション アクセシビリティ — 今日から始める現場からの改善」を読みました。2023年2月27日発売で、発売した当日に入手したのですが、本文だけで551ページもある大作で、2か月半かけて、ようやく読み終えることができました。

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

本書は、ウェブアクセシビリティ向上に関する知識やノウハウが、幅広く、かつ詳細に盛り込まれた、いわば「集大成」な本です。本書の目次を見ていただくと、その内容の充実ぶりに圧倒されることでしょう。ウェブサイトやウェブアプリケーションの設計や開発にかかわる、すべてのデザイナーやエンジニアの皆さんのお手元にあってほしい一冊です。

この記事では、章ごとの読後感的なメモを記したいと思います。既にたくさんの方に読まれ、早くも重版されているようですが、さらに多くの方に読んでいただくきっかけになれば、嬉しく思います。

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

イントロダクション的な位置づけで、アクセシビリティの定義、障害者の種別ごとのウェブ利用状況、ガイドライン (WCAG : Web Content Accessibility Guidelines)、ウェブアクセシビリティに取り組む意義、について触れている章です。

冒頭で、アクセシビリティの定義を「利用可能な状況の幅広さ」(P.2) と表現しているのが、平易な言葉でありながらも端的で、秀逸だなと思いました。特定の状況でしか利用できないものはアクセシビリティが十分とは言えず、多様な状況においても等しくスムーズに利用できることを目指そう、という考えかたが、わかりやすく言語化されています。

ここで言う「状況」とは、ユーザーが障害を抱えていたり、加齢や怪我などに伴う能力低下を抱えていたり、その他環境上の制約があったり (音が出せない公共の場にいる、眩しい屋外にいる、幼子を抱えているなどで落ち着かない状態にある、視野が限られた小さな携帯端末画面を用いている ...) といったことを言います。

また、障害の「医学モデルと社会モデル」の言及にて、「障害はユーザー側にあるのではなく、ユーザーとサービスの間の界面に存在する」(P.25) とし、「そのサービスを利用しているときに障害を感じる人がいなければ (略)『そこに障害者はいない』という状況を作り出すことができる」(P.27) と説いており、以後の章を読み進めてゆくうえでのよい立脚点になっていると感じました。

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

実装面での基礎として、マシンリーダビリティとキーボード操作について、解説している章です。

とりわけ、HTML と WAI-ARIA によるセマンティクスについて書かれている中で、AOM (アクセシビリティオブジェクトモデル) の説明が丁寧になされているのが、勉強になりました。ウェブコンテンツの DOM と CSS オブジェクトモデルから AOM が生成され、スクリーンリーダーなどの支援技術が、その生成された AOM を (OS の アクセシビリティ API を介して) 読み取ることで、ウェブアプリケーションが操作可能になる ... という流れをここで押さえておくことができます。AOM にはプロパティ (Name、Role、Description、Expanded など) があること、またそれぞれの AOM プロパティには呼応する HTML 要素や ARIA 属性が定義されていることも併せて解説されており、こうした知識は仕様を読み込む際にも理解の助けになるでしょう。

第3章 フォームの改善

フォームのアクセシビリティについて解説する章です。「よくある事例で課題を知る」→「チェックポイント」→「よくある事例を改善する」というパターンで構成されており、ステップを踏んで学ぶことができます。

ラベルと説明 (description)、入力の支援 (不要なフォームコントロールの整理、autocomplete、type、inputmode、pattern といった属性の使いかた)、入力内容のバリデーションとエラーの提示、などが丁寧に解説されています。さらにはアプリケーションにありがちな、ユーザーが予測できない動作を排除することや、カスタムコンポーネント採用時の留意点についてもカバーされています。

個人的には、「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」のおさらい (＋アップデート) という感もあり、とても興味深いパートです。

第4章 UI デザインの改善

色とコントラスト、テキストのサイズ、テキストのレイアウト、ライティング (ページタイトル、見出し、ラベリング、など)、画像の代替テキスト、動画・音声メディア、アニメーション ... といった、視覚的な UI デザインでよくある課題と解決方法について網羅的に解説しています。また、モバイルデバイスでの表示やインタラクション、ページレイアウトにおける一貫性の担保、についても触れられています。この章も第3章と同様に、「よくある事例で課題を知る」→「チェックポイント」→「よくある事例を改善する」というパターンになっています。

なお本書は全体的にモノクロ印刷なのですが、「4.1 色とコントラスト」のセクションだけはフルカラー印刷になっています。紙の本で、このように一部分だけ刷色数を変えるというのは、コストやページ割の調整を含め簡単なことではないと推察しますが、それだけに、読者に伝えるべきことを着実に伝えようとする著者陣や編集者の方々の真摯さを感じました。

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

昨今のウェブサイトやアプリケーションで見られる、今どきな UI について、よくあるアクセシビリティ上の問題とその改善方法を解説しています。具体的には、モーダルダイアログ、通知、カルーセル、ツールチップ、ドラッグ＆ドロップ、ハンバーガーメニュー、などです。

いずれもインタラクション (動き) を伴う UI ということで、具体的なサンプルコードが豊富に掲載されています。インタラクションを司る部分は TypeScript で書かれており、私自身も含め、馴染みのない読者もいるかと思いますが、スクリプトの要点は本文中にわかりやすく説明されているので、コードを完全に理解できなくても、安心して読み進めることができます。

なお、この章のサンプルコードは CodePen でも公開されています。実際にスクリーンリーダーを立ち上げて挙動を体感する、といった使いかたもできるのでありがたいです。

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

ウェブサイトやアプリケーションのデザインの一貫性を保つ手段としてポピュラーになってきたデザインシステムですが、この章は地に足のついた議論を展開します。「たいていの場合、一貫性や品質、生産性に問題があるからこそ、デザインシステムを導入するのです。したがって、デザインシステム導入とは、多種多様になってしまったデザインを整理し、品質の低下したコードを大規模にリファクタリングする作業を意味します」(P.366) という厳しい現実を踏まえたうえで、「アクセシビリティのためにデザインシステムを導入」するというよりは「デザインシステムを導入する動きがあったり、あるいは未完成でもすでにデザインシステムがあるのであれば」それを「アクセシビリティの取り組みを加速させるチャンス」と捉えて乗っかる、という方向性を示しています。つまり「デザインシステムの一部としてアクセシビリティを浸透」(P.367) させようというものです。

興味深いのは、デザインシステムとアクセシビリティの関係が持つ、双方向性です。「デザインシステムによって品質の向上を見込んでいるのであれば、アクセシビリティの向上も同時に目標にできるはず」(P.368) という具合に、デザインシステムがアクセシビリティを後押しする側面もあれば、WCAG の達成基準が備えているヒューリスティクスやベストプラクティスがデザインシステムにとっての「良き制約」(P.372) たりえるという具合に、アクセシビリティがデザインシステムを後押しする側面もある、というわけです。このことは、「デザインシステムをアクセシビリティ向上のために使うだけではなく、デザインシステム自体の質の向上に、アクセシビリティは大きな役割を担うのです」(P.372) という一文でも端的に言い表されていて、とても重要なポイントだと思います。

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

アクセシビリティを、組織 (ひいては企業) の文化として定着させることは、とてもチャレンジングなことです。しかし本章では「難しいですよね」では終わらずに、「一定の再現性がある」(P.391) いわば「型」として、アクセシビリティを組織に導入するためのステップを丁寧に解説しています。

具体的には以下のようなステップが紹介されていますが :

こうした一連のステップにおいては、自らがアクセシビリティの旗振り役 (チャンピオン) として名乗りを上げる気概を持って、こつこつと積み上げてゆくことが肝要だと改めて思いました。

また個人的には、「アクセシビリティ書籍の輪読会を実施する」において、推薦図書のひとつとして「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」を挙げていただき (P.396)、大変光栄です。

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

ウェブサイトやアプリケーションを WCAG に適合する形で作れば、一応はアクセシブルなものになります。しかしそれだけでは、実は支援技術利用者のフラストレーションを拭い切れていないかもしれません。この章は、「設計したものをどうアクセシブルにするか」ではなく「はじめから多くの状況で負担や混乱なく使えるデザイン」(P.437) に重きを置いた、UI 設計の原理を説いています。

支援技術には様々なものがありますが、たとえ支援技術によってアクセシブルにウェブを利用できても、以下の課題が共通して見られます。

本章では上記の課題が支援技術ごとに具体的にどう現れるかを明らかにしたうえで、よくある UI デザインのアンチパターンが、いかにこうした課題を増幅しているかを丁寧に解説しています。そのうえで、以下の11の原理を導き出しています。

ごく大雑把に言ってしまえば、ユーザーに認知負荷、記憶負荷、身体負荷を極力かけない情報設計を徹底することによって、支援技術利用者が直面しやすい課題の出現を極力軽減しよう、というものです。私自身は普段のウェブサイトの設計で、モバイルファーストに基づく1カラムでのシリアルな情報設計を基本としていて、それがアクセシビリティにも直接つながる実感があるのですが、そういったことも含めて体系的に言語化されていて、心強く感じました。また、モードレスであることとアクセシブルであることがときに両立しにくいことのもやもやを感じることが正直あるのですが、本章では両者の間のトレードオフについても言及があって、改めて建設的に捉えることができました。

付録 支援技術と利用状況

本書の最後には付録として、障害当事者のユーザーが日々利用する支援技術についての詳細な説明があります。多種多様な支援技術がそれぞれ、ポインティングデバイスの操作、キーボード操作、画面表示 (GUI) をどのように変化させたり置き換えたりしているのか、また、各支援技術のユーザーはどんな課題 (支援技術を使わない場合と比べた面倒さ) に直面しがちなのか、について掘り下げられています。ここで言及されている諸課題は、上述の第8章 (アクセシブルな UI 設計の原理を導く) にもつながっています。

OS に標準で備わっている支援技術もいくつか紹介されているので、この章を参照しながら、実際に試しで使ってみるきっかけにもできるかと思います。

以上、とにかく内容が盛りだくさんな本書ですが、さらなる追補として、8回にわたる連載のウェブ記事が公開されています。主に第7章 (アクセシビリティの組織導入) を補足するものですが、こちらも併せて読んでみたいと思います。