お使いのブラウザは最新版ではありません。最新のブラウザでご覧ください。

CNET Japan ブログ

コードをつうじて、ユーザーを考える ~「コーディングWebアクセシビリティ」書評

2015/03/24 02:00
  • このエントリーをはてなブックマークに追加

まもなく発売の新刊を、ひと足先に、ご恵贈いただいた。
じつはすでに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日。予約受付中。ご興味ある方は、ぜひお手にとってみてはいかが。

※このエントリは CNET Japan ブロガーにより投稿されたものです。朝日インタラクティブ および CNET Japan 編集部の見解・意向を示すものではありません。
運営事務局に問題を報告

最新ブログエントリー