『インクルーシブ HTML + CSS & JavaScript』をレビューしました

アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん(@bakera)と伊原さん(@magi1125)のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。


さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング(@heydonworks)さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー(@stevefaulkner)さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。

日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの中の人でおなじみ、@caztchaさんがレビューされています。本書の副題に「多様なユーザニーズに応える」とあるように、内容はアクセシビリティの観点が絡んでくるのですが、@caztchaさんのレビューがなされているので安心ですね!既にインクルーシブ HTML + CSS & JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン — Website Usability Infoでこの書籍の紹介がなされているので、こちらも参照するとよいでしょう。

また、残りのお二方はSlack A11YJでの募集により、@keita_kawamotoさんと@mt_dew2さんがレビューをされています。@keita_kawamotoさんは面識がないので紹介できませんが*2、@mt_dew2さんはW3C CSS Module 仕様書もくもく会@東京の主催の人、というとピンと来る人がもしかしたらいるかもしれません。いわゆるアクセシビリティガチ勢とは一線を画す立場でウェブ制作に携わっている人の視点からもレビューされているので、これからアクセシビリティに関係した勉強をしたいというような人も安心だと思われます。


アクセシビリティという単語を先に書きましたが、本書はそれだけの観点ではありません。書籍に携わっている人の紹介はこれぐらいにして、肝心の本の中身の紹介をすべきという声もありますので、百聞は一見にしかず、ここで初稿のサンプルページをチラ見してみましょう!*3



というような塩梅で、(HTML5 Conferenceでのセッションで触れられていたように*4)1/5ぐらいが監訳者による訳註で埋まっていたり*5緑本にも登場した謎のイラストが本書でも見られたりと、パッと見でかなり熱い中身になっております。もちろん、本文の核となる部分の説明も安定感があります。ウェブ標準を意識しつつ一歩踏み込んで本であるにもかかわらず、純粋に難解な部分は比較的少ない本であると言えるでしょう(依然として洋書独特な言い回しは付いてきますが)。ボリュームのある訳註が本文のちょっとした箇所での引っかかり感を大幅に緩和していますから、緑本よりかなり読みやすくなっていると思われます。

ウェブ標準を意識したと言う面では、少なくとも訳註ではHTML仕様に言及する際、半ば意図的にWHATWG HTMLへの言及とW3C HTMLへの言及とが使い分けされており、発行現在(2017年秋)の最新の状況が反映されています。また、WCAG 2.0への言及も本文や訳註で折に触れてされています。具体的なシチュエーションやコード例とともに仕様を触れることができるため、より理解を深めることができるのではないかなと。さらに、脚注でも昨今話題のMDN*6へのURLが多数あり、電子書籍版が発行された暁にはリンクが付与されるでしょうから、素早くアクセスできるという意味で役立つこと請け合いです。

仕様面だけでなく、実装面も充実しています。例えば、WAI-ARIAの絡みでNVDAやVoiceOverの読み上げが本文で言及されていますが、原著当時の挙動と比較して現在の挙動で違いがもしあれば、訳註で補足がなされています。もちろん、支援技術だけでなく、ウェブブラウザーの実装状況への言及もなされています。レガシーなIEからChromeなどの最新のものまで、OSもWindowsMacAndroidiOSと必要に応じて言及がされています。と、自分で書いてて思ったのですが、挙動の補足がなされるということは、監訳者がちゃんとコードを実際に確認していると言うことでもありますね。結構な作業量になるはずで、頭の下がる思いであります。

書籍の構成も目を引くものがあります。8章ではプロトタイピング、12章ではテスト駆動といったものも興味深いですが、7章ではメニューボタン、10章では(項目を絞り込む)フィルターウィジェット、11章では登録フォームといった具合に、後半の章でかなり具体的な状況を厚く取り扱っています。動的な部分を含むサイトにおいてCSSJavaScriptを駆使しつつも、特定のユーザーを排除しないインクルーシブなサイトというのはこういう風に作れば実現できる、ということが本書を読めば体感できるのではないでしょうか。

後半部分は応用的な話でありますが、もちろん前半は基礎よりな話になっています。2章ドキュメント全体は上で掲げたページサンプルの章です。DOCTYPE宣言とlang属性についておまじないのように書いている人もいるかもしれませんが、なぜそのように書くかということが、現状を踏まえた分かりやすい説明がされているのが見て取れると思います(この2つについて詳しく説明されている書籍はあまりないのではないかと思います)。こういった調子で、3章パラグラフ、4章ブログ記事と基礎的な事項についても盛り込まれており、HTMLの理解も深めることができると思います。追記:本書のFacebook公式ページにある紙面紹介から目次が見れるみたいです。


ということで、誰もが使いやすいインクルーシブなウェブサイトに興味がある、HTMLやCSSJavaScriptの理解を深めたい、アクセシビリティを考慮したWAI-ARIAの具体的な使い方をかじってみたい、ウェブ標準仕様の理解のとっかかりを掴みたい、緑のアクセシビリティ本のセンスが大好きだ、太田さん・伊原さんのファンだ、といった人は11月4日発売予定と言うことですので、予約してみてはいかがでしょうか。

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

*1:『デザイニングWebアクセシビリティ』と『コーディングWebアクセシビリティ』の通称。私の書評のようなものは、 『デザイニングWebアクセシビリティ』流し読みの感想電子書籍版デザイニングWebアクセシビリティの献本をいただいた電子書籍版コーディングWebアクセシビリティをご恵贈いただきましたにあったりします。

*2:ホームページをざっと見たところ、どうやら福岡におられるらしい

*3:出版社の中の人である@orange_junoさんの了承済みというやつです

*4:当該セッションのスライド

*5:セッションのYouTubeアーカイブ・監訳者による発言直前からの再生。もっとも、サンプルの1枚目の分量からして、あながち誇張表現でもないことがわかると思います。

*6:ウェブ開発者に朗報--MS、グーグル、Mozillaがブラウザ関連文書を1カ所に - ZDNet Japan