『インクルーシブ 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 多様なユーザーニーズに応えるフロントエンドデザインパターン


追記:
本書は電子書籍版も存在します。上記AmazonのリンクからKindle版を入手することができますし、本書を出版しているボーンデジタル社のショップからも入手できます。また、筆者による電子書籍版の宣伝エントリーもあります。

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

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

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

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

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

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

WCAG 2.0解説書の更新版と、How to meet WCAG 2.0の日本語訳が公開されました

2016年版のWCAG 2.0達成方法集がWAICサイトで公開されましたの続き。

まずは解説書から。



このエントリーの執筆時点で最新となるWCAG 2.0 解説書の更新が公開されました。WAIC WG4の初会合が去年の6月のことでしたから、1年と4ヵ月ほどで、WG4の当初の目標である、WCAG 2.0の解説書と達成方法集を最新のものに更新するという目標をついに成し遂げることができました。関係者のみなさま、お疲れ様でした。

今回の解説書の更新では、上述のブログエントリーでも言及したような、翻訳の品質向上が試みられています。例えば、「ガイドライン 1.1 を理解する」の新旧訳を見比べてもらうとよく分かるのかなと思います(原文の日付は更新されていますが、原文の内容は全くの同一です。)

最新版(執筆時点で2016年10月7日付け)の「ガイドライン 1.1 を理解する」
http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv.html
2016年3月17日付けの「ガイドライン 1.1 を理解する」
http://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/text-equiv.html

最初に目に付くのは訳註が追加されている点でしょうか。訳出にも手が加えられている様子も見て取れると思います。このような訳の見直しもあわせて行われているのが今回の更新の特長です(もちろん、最新版にあわせたことが一番の目玉なのですが)。

解説書については、当面は主にCA11yなどのイベントによるフィードバックにより、適宜見直しがされていくものと思われます。もちろん、そういったイベントに関係なくお気づきの点がありましたら、WAICのお問い合わせの要領に従ってコメントを頂ければ幸いです。メールをするのが面倒だという人は、GitHub waic/wcag20にissueやpull requestをすると言う方法もあります。GitHubは敷居が高いという人は、@momdo_にメンションを飛ばしてもらっても構いません。みなさまからのコメントを歓迎します。




そして、How to meet WCAG 2.0について。



内容を一言でいうならクイックリファレンスと言ったところです(まあURLにもそうありますしね)。

解説書と打って変わってタイトルが英語のままだったり、中身についても一部英語が残ったままだったりしますが、細かいところは目を瞑ってラフなものでとにかく一度公開してみよう、という方針で公開する運びとなりました。英語を日本語にする残りのタスクについては、おいおい作業が行われると思われます*1。これについては(まだ何もドキュメントが整備されてませんが)GitHub waic/wai-wcag-quickrefであれやこれやの作業が行われるみたいです。issueはそのうち立てます、たぶん。




おまけで今後のWG4の活動方針について。

もちろん既存文書のメンテナンスは継続的に行われていく予定ですが、それとは別にATAG 2.0の日本語訳(fukumotoy/atag20-ja)についてWG4のもとで翻訳作業を行う流れにあります。これは、オーサリングツールのためのアクセシビリティガイドラインであり、CMSやブログも視野に入れているガイドラインでもあります。

この他にもいろいろと動きがあるみたいですが、それはまた別の機会にブログに記していきたいと思います。

*1:WAIC内部のレビューでも、もうちょっと日本語にした方がいいのではという指摘があり、それを振り切っての公開だったりするので、問題の認識はされています。