@magi1125 @sukoyakarizumu @masup9 と共著で書いた「Webアプリケーションアクセシビリティ」という本が、2月27日に発売になります！

この本は、各社でWebアプリケーションのアクセシビリティを推進していくうえで「デザイナーやエンジニアとして開発している現場のメンバーのために、アクセシビリティを向上させるために必要な知識がまとまった本が欲しよね」ということで執筆しました。そうして出来上がった本はまさかの576ページで、ソフトカバー製本のくせに自立します。

そんな大ボリュームな本になったのは、著者4人が4人とも、デザインもコーディングもやる人たちで、各社のサービスのアクセシビリティ向上を牽引していて、そしてとにかく言いたいことがいっぱいいっぱいあるから……という感じです。言いたいことが多すぎて、「これ以上ページ数を増やすわけにはいかない」ということで、576ページに収めきれなかった7章の後半がgihyo.jpの連載記事になっていたりもします。

ここまでたっぷりの内容を詰め込めたことには作り手としては大満足なんですが、一方で不安になることもあります。それはつまり、「あまりに分厚すぎて、読む前に諦められてしまうんじゃないか……」というところ。少しも読んでもらえないよりは、1人でも多くの人に1章だけ、1ページだけでも読んで、何か1つでも、どこかのWebアプリケーションのアクセシビリティ向上に役立ってほしいわけです。

もちろん、「こういう順で全部読んで全部わかってほしい！」という気持ちで本の構成を考えていたわけで、全部読んで超すごいものが作られてほしいところではありますが……。

というわけで、「こんな人はこんな読み方をすると良いのでは！」というのを考えて記事にすることで、1人でも多くの人に読んでもらえるようにしたいな、と思ってこの記事を書いてます。ちなみに他の著者には「こういう記事を書こうと思ってる」とは言ったものの、内容は特に喋ってないので、たぶん他の人はぜんぜん違うことを言いそうな気がします。なんなら4人でそれぞれが思う最高の読み方の話だけで一晩中喋っていられそうな気もする。

本書の構成

読み方の提案の前提として、どんな目次の本なのかを、章のタイトルだけ紹介してみます。詳しい目次はサポートサイトに掲載しています。

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

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

• 第3章 フォームの改善

• 第4章 UIデザインの改善

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

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

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

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

• 付録 支援技術と利用状況

章のタイトルだけを見ると、エンジニアサイドの人にとっては「デザインの本なのかな？」と思ってしまうかもしれません。ところが、2～5章にはがっつりとコードのサンプルが出てきます。しかも、複雑な動きをするコンポーネントのサンプルコードをシンプルに表現するためにReactを使っていたりします。これはもしかしたらデザイナーサイドの人にとっては敬遠されてしまう要因かもしれません

このままではエンジニアにもデザイナーにも敬遠されてしまう……！だからこそ、この記事でオススメの読み方を紹介できればと思っています。

ただし私はこの順で読んだわけではないのです。著者なのでね。

コードが苦手なデザイナー向け: 1→4→2→3→8→7

なるべくコードを読まず、とにかくデザイナーとしてのタスクに少しでもアクセシビリティの視点を入れていくには、1章を読んだあとで先に4章、そのあと2章と3章を読み、そして8章を読んだあとに7章を読むのが良いのではと思います。

1章はこれから読んでいく内容の前提となる内容で、すべての人ん読んでもらいたい章です。「アクセシビリティとは何か」から始まって、誰にとって重要なのか、WCAGというガイドラインの存在、そして何故アクセシビリティに取り組むのか、という構成になっています。

ちなみに私はこの章の最初の段落がとても気に入っています。こんなスッキリとアクセシビリティの向上に取り組んでいくことの魅力を伝えてしまう文章があっただろうか。

4章の前半は色やテキストの表示のように、デザイナーにとって最も身近で、本当にすぐに実践できる部分が中心になっています。このあたりを読むだけで、すぐに「アクセシビリティに取り組みはじめました」と言えるような、デザイナーが自分だけでできる範囲の改善の具体的な例が紹介されています。4章の後半になると企画や要件定義フェーズ、開発の初期段階で考慮しなければならない、ひとつの画面の中に完結しづらいような内容にもなってきますが、いずれにしろ視覚的な面が中心となるような内容で、デザイナーにとってとっつきやすく、いきなり読むのには適した内容だと思います。

2章と3章は、4章に比べるとHTMLやJavaScriptの書き方に起因する問題を扱っていて、少しとっつきにくさがあるかもしれません。しかし、インタラクティブなWebアプリケーションがアクセシブルになっていくためには視覚的な側面以外にもデザイナーがやるべきことがあり、その入口が2章と3章です。

2章では、マシンリーダビリティ、すなわちスクリーンリーダーのような支援技術がWebコンテンツを解釈する仕組みと、そこで問題が起きないようにする手法が紹介されています。Webというプラットフォーム上のコンテンツがアクセシビリティを高めやすいのは、まさにこのマシンリーダビリティが存在し、ユーザーがコンテンツをどう受容するかをカスタマイズしやすくなっているからです。そして、2章を読めば、デザイナーがマシンリーダビリティに対して果たす役割の大きさに気付くことができるはずです。

3章は、Web上のフォームにターゲットを絞って、フォームを操作する上で起きるさまざまな問題について解説しています。Webアプリケーションを作る上では、フォームの使い勝手の良し悪しがユーザビリティの高低に直結することは想像に難くありません。そしてアクセシビリティの問題も、同じようにフォームで数多く発生し得ます。誰にとっても使える・使いやすいフォームを作ることは、デザイナーにとってとても重要なミッションでしょう。

デザイナーは仕事をするうえでたくさんの情報を整理し、たくさんのことを考えているはずです。2章と3章を読むと、ワイヤーフレームや画面モックと一緒に、それらが作られる課程に存在した情報や思考のなかには、実はアクセシビリティを高める上で重要で、エンジニアに伝える必要のあるものが含まれていることに気付けるんじゃないかと思います。

8章は、なんだかトビラのページに壮大なことが書かれています。

ずいぶんと大袈裟な感じもしますが、この8章では本当にアクセシビリティの問題を生まれる前に消し去る、問題の起きにくいUI設計とは何なのかを根本から問い直す内容になっています。7章までの内容が、起きている問題に対してパッチを当てていくかたちなのに対して、そもそも問題が起きないように設計の最初から意識するべき原理を解いています。この原理は、アクセシビリティの視点から、UI設計そのものを改善するもので、あらゆるデザイナーに一読してほしいものになっています。

4→2→3→8と、デザイナーという仕事に強く関連している場所で、アクセシビリティのために「今日からできる現場からの改善」のヒントになりそうな場所を紹介してきました。そしてそれを、会社のなかで、他のデザイナーはもちろんエンジニアやそれ以外の職種のメンバーに広め、多きなうねりを作っていくための章が7章です。

7章では、まさにアクセシビリティの取り組みをメンバー1人からはじめて、それを全社を巻き込んだ動きにまで広げていく方法論が説かれています。freeeで実際にこれまでやってきたことを中心に紹介していますが、同じような動きは各社でも起きてきていたからこそ、本にすることができています。この本がキッカケになって、多くの会社でそういったムーブメントが起きていくことを期待しています。

Webアプリケーションを作る現場のエンジニア向け: 1→2→3→5→7→6

本書は「今日から始める現場からの改善」を謳うだけあって、Webアプリケーションの開発現場でコードを書いているエンジニアにこそ読んでほしい本です。そんなエンジニアが、まさに現場で活用できる順に読んでいくのなら、1章から3章までを読み、4章は飛ばして5章、そして7章を読み、最後に6章、という順が良いかなと思います。

1章がこれから読む内容の前提で、最初に読むべきなのはデザイナー向けの読書順と同じです。2章では、HTMLのコードがどう解釈され、スクリーンリーダーのような支援技術や、キーボードでのインタラクションにどう影響するのかを知ることができます。そして3章がフォームです。フォームが重要であることは先述のとおりです。ここまでの内容から、これまでなんとなく書いていたHTMLが、なんとなくのままでは伝わらない・使えないという状況を起こしてしまう実感を得ることができるはずです。

そして5章です。この本の中でも大きなページ数の割合を持つこの章では、モーダルダイアログ、通知、カルーセル、ツールチップ、ドラッグ&ドロップ、ハンバーガーメニュー、SPAの画面遷移という、複雑で動的でありながらいまどきのWebアプリケーションならどこにでもあるコンポーネントやインタラクションを題材に、どんな問題が発生しやすく、それをどう解決していけるのかを解説しています。ここまでに読んできた章は、この5章を理解するためにあると言っても良いかもしれません。そしてこの5章で扱われるような話題を体系的に学べる日本語の資料がこれまでほとんど存在しなかったのが、私がこの本を書いている理由のひとつでもあります。

5章で扱う内容は、必ずしも複雑で動的なコンポーネントやインタラクションのパターンのすべてをカバーするものではありません。しかし、ここで扱わなかったものであっても、その類のものを取り扱う際に、何に気を付けて、どうやって改善していくのかというところへのヒントは可能な限り詰め込んだはずです。こういったものを自作せず、既存のライブラリに頼ることも多いかと思いますが、「どのライブラリを選ぶのが最もアクセシビリティが高いのか」「このライブラリをどう使ったり、どう修正したりすればアクセシビリティを高められるのか」のヒントとしても、必ず役に立つはずです。

この本に登場するコードは、場所によってはTypeScriptで書かれたReactコンポーネントであったり、HTMLとVanilla JSであったりします。その場所その場所でもっともシンプルに説明できる表現を選んでいます。コードのまわりの本文ではそのコードが何をしていて、どこにどんな問題があり、それをどう改善しているのかの説明を入れてあります。ReactやTypeScriptが未経験、あるいは逆にVanilla JSが未経験であっても、つまりコードの中の細かいテクニックを知らなくても、この本で伝えたいことは読み取れるのではないかと思います。実際に動くサンプルもサポートサイトで提供予定なので、どうぞご活用ください。

デザイナーにオススメしたのと同じく、エンジニアにも7章はオススメです。1人で始めた取り組みを、エンジニア内外、そして組織全体に広げて大きなムーブメントにしていくために、ぜひ参考にしてもらいたいなと思います。

そして最後にはあえて6章を持ってきました。ここまで読んできたエンジニア諸氏には「もっと仕組みで解決したい」欲求が満ちているんではないかと想像します。それを解決するためにはデザインシステムの構築が役立つのでは、そして役立てる場所とそうもいかない場所があるのでは、というのが6章の内容です。まさにこれは私がデザインシステムを作り始めるキッカケのひとつでもあったし、そして数年間やってきてわかってきた知見でもあります。

付録もすごいぞ

というところまでが本編の読む順番の提案でした。あえて章を飛ばしたり順番を入れ替えたりする提案をしてみましたが、本の構成というものにはその意図があるわけで、抵抗のない人にはぜひ最初から最後まで順番に全部読んでもらえるととても嬉しいです。この記事で提案した読み方をした人も、いつかはぜひ飛ばした章まで読んでもらいたいと思っています。

しかしまずは、「部分的に読んだけど3960円払うだけの価値があった」と思っていただけるのであれば、それで十分でもあります。

全部読むといえば、本書にはこれまたボリュームたっぷりの「支援技術と利用状況」という付録がついています。これはWebコンテンツに限らず、IT機器を使う上でどんな状況が存在するのかという内容を整理して紹介しています。これは本編を深く理解する上で役に立つ知識でもあり、万が一自分や家族や友人や周囲の人が、病気や怪我などでそれまで使えいたIT機器がそれまで使えていたやり方で使えなくなった時にどんなオプションが存在するのかという意味でも知っておいて損のない内容だと思います。単なる息抜きとしても、あまり知る機会のないものが多く紹介されているので、ぜひ目を通してみてください。

そんな本書は2月27日発売で、当日は記念イベントもやります

くどいようですが、本書の発売日は2月27日です。なんと来週の月曜日です！電子版はGihyo Digital PublishingでのPDF版の配信は紙版と同じ2月27日、Kindle版の配信は3月3日となるようです。Gihyo Digital PublishingではEPUB版も追って提供される予定で、Gihyo Digital Publishingで購入すればPDF版とEPUB版の両方がダウンロードできるようになります。

そして、2月27日には、発売記念イベントも開催予定です！

2月27日はこの本のはじまりの日であり、そしてあなたの「今日から始める現場からの改善」のはじまりの日となるかもしれません。ぜひ一緒に盛り上げて、そしてこの世界中のWebアプリケーションをアクセシブルにしていきましょう！