まもなく発売の新刊を、ひと足先に、ご恵贈いただいた。
じつはすでにAmazonで予約していたので、手元に2冊、あることになる。
コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
Heydon Pickering (著), 太田良典, 伊原力也 (監修)
アクセシビリティのイベントに行くと、国内のトップクラスといわれるマークアップエンジニアが、多く参加している。いつも不思議に思う。
優れた技術者は、アクセシビリティに興味を持ちやすいものなのだろうか。
本書を読んで、腑に落ちた。
コードはどうあるべきか。マークアップの美学を追っていくと、やがて、アクセシビリティに辿りつく。
本書は、そういう本である。
コードには、良いコードと、悪いコードがある。美学があるコードと、ダサいコード、ともいえる。
ベテランのエンジニアに、おおむね共通する美学として「HTMLは、意味をマークアップすべきである」というのがある。これを「セマンティック」と呼ぶこともある。
引用：コーディングWebアクセシビリティ P45
これまでに見てきたように、特定の動作を表す真の<button>ボタンだけをボタンらしい見た目にするべきです。（中略）にもかかわらず、.buttonという暗号がこの過ちを許してしまっています。
<div class="button">...</div>
たとえば、<div class="button"> というコードは、ダサい部類に入る。
ボタンなら、button要素や、input要素があるはずだ。div要素は、クリックさせるためのものではない。
意味にあったマークアップをしていないから、パッと見て、他の制作者には理解しづらい。アクセシビリティもあやうい。なにか心地悪さがある。（もちろん、やむにやまれぬ理由もあろうが）
本書で扱うWAI-ARIA（HTMLの拡張）には、「ランドマーク ロール」という概念がある。
たとえば、role="banner" という属性がある。ウェブサイト全体の、いわゆる「ヘッダ」を示す。
そのウェブサイトのロゴや、運営者、サイト内検索などの、その親にあたるDOM要素に付与する。
引用：コーディングWebアクセシビリティ P.101
キーボードユーザーとスクリーンリーダーは上から下へとドキュメントをたどること、そして共通の role="banner" ランドマークは通常は上に置かれることに注目すると、次のような問題が見えてきます。
- ユーザーは、サイト名を何度も告げられることを求めていない。
- ユーザーは、お決まりのスローガンがあったとしても、何度も読むことことを望んでいない。
- ユーザーが特に望んでいないのは、<iframe> バナー広告に何度も遭遇することである。
role="banner" という「ランドマーク ロール」 が、なぜ必要なのか。
なぜ、それはページの上部に置かれるのか。
突き詰めて考えると、つまりはユーザーが、そうなっていることを望むからだ、と気がつく。
この箇所は「コーディングWebアクセシビリティ」という書籍の価値観を、よく表している。
アクセシビリティのコーディング、とは、すなわち、
「コードをつうじて、ユーザーを考える」
ということにほかならない。
優れたマークアップエンジニアは、ウェブページの要素ひとつひとつに、ユーザーに何を伝えたいか、コードで意味を与えていく。
見出しとして伝えるべきところはどこか。ユーザーにとって、ナビゲーションとはどうふるまうべきか。ユーザーが、クリックしたい要素はどこまでか。ウェブページは、どんなふうに見えて、聞こえているだろうか。
コードを書くことを突き詰めると、やがてそれは、ユーザーを考えること、そのものに至る。
すごい、と言われる技術者は、これを肌で知っている。だから、優れたマークアップエンジニアは、アクセシビリティにこだわるのだろう。
本書「コーディングWebアクセシビリティ」は、マークアップエンジニアの胸を熱くする、そんな本である。
コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
Heydon Pickering (著), 太田良典, 伊原力也 (監修)
発売は 2015年3月27日。予約受付中。ご興味ある方は、ぜひお手にとってみてはいかが。
