hn要素を各エリアに配置し、アクセシビリティを高くする。

ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。

ある全盲の音声ブラウザユーザの意見

最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。

ページ全体の構造がイメージしやすいこと
迷子にならないように道しるべがあること
自分の行きたい場所にすぐに行けること

1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。
また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
今回、ブログに書きたいのは2つ目の「迷子にならないように道しるべがあること」というところです。音声ブラウザユーザはデザインという視点から自分がページのどこにいるのかを把握することができないため、迷子になる可能性が非常に高いと聞きます。そこで、ページ制作者は音声ブラウザユーザが今どこにいるのか、ということを何らかの手段で教えてあげることが非常に重要になります。
さて、先ほどの音声ブラウザユーザの意見を参考にHTMLを作ってみると、こんな感じになりました。

<div class="header">
</div>

<div class="globalNavi">
<p>メニューはここから</p>
以下、メニューが続く
<p>メニューはここまで</p>
</div>

<div class="mainContents">
<p>本文はここから</p>
以下、本文が続く。
<p>本文はここまで</p>
</div>

<div class="subContents">
<p>ローカルメニューはここから</p>
以下、ローカルメニューが続く。
<p>ローカルメニューはここまで</p>
</div>

<div class="footer">
</div>

と、こんな感じです。div要素で始まるコンテンツの各エリアに対して「○○○はここから」「○○○はここまで」と書くことによって、各エリアがどこまで続くのかを示すことができるということです。これで、音声ブラウザユーザが各エリアの開始地点と終了地点を把握することができ、ページがどこまで続くのかを把握することができます。
もちろん、実際にはこれらの箇所はOFF-LEFTなどの方法で画面外に飛ばしてしまうということになると思います。

やり過ぎは禁物か？

でも、このHTMLは僕の感覚では正直気持ち悪い。ちょっと前に読んだ456 Berea StreetのOverdoing accessibility（アクセシビリティのやりすぎ）ではないかなと思うのです。
アクセシビリティを確保する上では、あくまで適切なHTMLが絶対解だろうと。やり過ぎはよろしくないのではないか。もちろん、ナビゲーションスキップのように、それ自体がある程度市民権を得ており、必ず役立つであろうテクニックは使ってよいとは思うのですが。

西村あさひ法律事務所のサイトを参考する。

話は変わりますが、西村あさひ法律事務所はbAの人たちが作ったらしく、よく参考にしています。偶然ホームページリーダでダラダラとサイトを読み上げているときに、ところどころにこんなHTMLの箇所を見つけました。

<!-- [ UTILITIES ] -->
<div id="header-utility">
<h2>ユーティリティ</h2>

<!-- [ GLOBAL NAVI ] -->
<div id="global-navi">
<h2>このサイトのメインメニュー</h2>

<!-- [ REFERENCE AREA ] -->
<div id="reference-area">
<h2>リファレンス</h2>

<!-- [[[ FOOTER AREA ]]] -->
<div id="footer-area">
<h2>このサイトの共通情報</h2>

それぞれのエリアの開始時にh2要素が入っています。これらh2要素には共通して以下のCSSが当てられています。

/* =========== for accessibility issue =========== */

#header-area h2,
#site-search legend,
#reference-area h2,
#footer-area h2 {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: 0;
	height: 0;
	font-size: 0;
	color: #fff;
	background: #fff;
}

これらh2要素は普通にブラウザでサイトを見ても一切出てきていません。OFF-LEFTの1つの形だとは思うのですが、それで画面外に飛ばしているのです。また、コメントを見てもらえれば分かるのですが、「for accessibility issue」と名付けられています。

heading要素で各エリアにページ内の起点を作る。

僕はbAの中の人から直接伺ったわけではないのであくまで憶測ですが、hn要素でマークアップすることによってアクセシビリティを高めようとしているのではないかと思うのです。この方法によって、音声ブラウザユーザにとっては以下のメリットがあるのかなと思います。

見出しジャンプを使える音声ブラウザであれば、どこからでも各エリアに自由に行き来できる。
各エリアに説明文があるので、その内容が読み上げる前に分かり、ブラウジングの時間の短縮につながる。
各エリアに必ず（本文以外）hn要素があれば、そのデザインの一貫性からページの構造を理解する助けになる。

また、個人的にはこの形であればHTML的にも気持ち悪さを感じることもありません。

以下、メモ

HTML5であれば各エリアにarticle要素やaside要素を使えることにより、音声ブラウザによるナビゲーションは飛躍的によくなりそう。
上記の事例では各エリアのh2要素の内容が英語で書かれており分かりづらい印象を受ける。日本語のほうが分かりやすいだろうが、企業ブランドを優先させたのかな？

Trans

NPOやソーシャルビジネスの創業・経営・マネジメント