本節では,WWW ページ・サイトというハイパーテキストにおいて,文書の関係を示すこと,それに,ページ・サイトのナビゲーションについても言及する。
a
要素では,rel
属性および rev
属性で,リンク先のリソース(文書)との関係を示すことができる。
図 13.1 のように,rel
属性は,現在の文書から見た,参照先(href
属性に書かれた)の文書との関係を与える。一方で,rev
属性は,参照先の文書から見た,現在の文書の関係を与える。これらの“関係”を表す語句には,次のようなものがある。
next
prev
contents
start
index
chapter
section
subsection
glossary
copyright
appendix
help
stylesheet
alternate
たとえば,本チュートリアル“Hop step XHTML”は,図 13.2 のように,目次(導入)のページがあって,Section 1,Section 2,Section 3,……,という構成になっている。であるから,
rel="next"
”である文書は Section 2 であるrel="next"
”である文書は Section 3 で,“rel="prev"
”である文書は Section 1 であるrel="contents"
”である文書は,目次(導入)になると関係を記述できる。また,現在の文書の“rel="next"
”の文書(次の文書)から見れば,現在の文書は“rel="prev"
”にあたる。これを,現在の文書内に書くならば,“rev="prev"
”となる。すなわち,上記の Section 2 に対して,次のように記述できる。
rel="next"
”である文書は Section 3。これは,Section 3 から見れば Section 2 は“前の文書”なので,“rev="prev"
”rel="prev"
”である文書は Section 1。これは,Section 1 から見れば Section 2 は“次の文書”なので,“rev="next"
” a
要素の accesskey
属性には,そのホットスポットへのアクセスキーを指定することができる。たとえば,Windows 版 Internet Explorer では,[Alt]キーを押しながら,Mac OS 版 Internet Explorer では,[Cmd]キーを押しながら,accesskey
属性のキーを押すと,そこへフォーカスが移される(操作可能な状態になる)。Netscape では,[Alt]キーを押しながらアクセスキーを押すと,ただちにそのリンクがアクティブになる。Opera 7 以降では,[Shift]キーを押しながら[Esc]キーを押し,続けてアクセスキーを押すと,リンクがアクティブになる。
これは,たとえばパソコンでウェブ閲覧をしていて,マウス操作が困難な人に対してはたいへん利用しやすいページとなる。それだけでなく,一連の文書において一貫したアクセスキーを割り当てれば,快適な閲覧環境となる。例として,“次の文書”に“N”,“前の文書”に“P”を割り当てれば,キー操作で次の文書へ,前の文書へとページを繰ることができる。
<ul>
<li><a href="hsxh14.htm" rel="next" accesskey="N">Section 14 へ[N]</a></li>
<li><a href="hsxh12.htm" rel="prev" accesskey="P">Section 12 へ[P]</a></li>
</ul>
また,携帯電話端末においても,アクセスキーの設定は操作のしやすさを大きく向上させる。
携帯電話端末では,コンパクトな XHTML である“XHTML Basic”が基本となるが,アクセスキーに関しては同様の考え方でよい。
アクセスキーは,設定されていれば特に何もしなくても閲覧者にそれとわかるように出力されるべきだが,2004 年 7 月現在,多くの環境ではそうはなっていない。したがって,必要ならばアクセスキーが何かを明示したほうが無難である。
PC のブラウザをはじめとした多くの環境で,[Tab]キーなどを用いて,フォーカスのある(操作可能な)要素を移動できるようになっている。通常,この順序はページのソースコード内での出現順であるが,tabindex
属性でこの順序を操作できる。この属性には,0 から 32767 の整数を与える。
tabindex
属性の数値は連続していなくてもかまわないし,同じ値が指定されたものが 2 つ以上あってもかまわない。これらは,次のような順序でフォーカスを得る。
tabindex
属性が 0 以外に指定されたものからフォーカスを得る。 tabindex
が無指定の場合,または 0 に指定されたものは tabindex
が前項であげたもののあとにフォーカスを出現順に得る。 例を見ながら解説しよう。
<p>
……<a href="..." tabindex="3">リンク 3</a>
……</p>
……
<p><a href="...">
リンク 2</a>
……</p>
……
<ul>
<li><a href="..." tabindex="2">リンク 3</a></li>
<li><a href="..." tabindex="3">リンク 4</a></li>
</ul>
<p><a href="...">リンク 5</a>
……</p>
結果から先に言ってしまうと,フォーカスは“リンク 3→リンク 1→リンク 4→リンク 2→リンク 5”の順で得ることになる。
まず,規則 1. から tabindex
属性が 0 以外に指定されているものが最初にフォーカスを得ることになる。規則 1.1. から最初は tabindex="2"
“リンク 3”。それより大きい数は tabindex="2"
の“リンク1”と“リンク 4”だが,規則 1.2. から出現順,すなわち“リンク 1”“リンク 4”の順になる。
それから,規則 2. から tabindex
属性が指定されていない残りが出現順,“リンク 2”“リンク 5”の順にフォーカスを得る。
タブインデックスは,適切に使用すれば閲覧環境の向上につながるが,一方で,脈絡なく指定した場合,マイナスの効果もありうる点に注意されたい。
WWW サイト・WWW ページ作成においては,WWW ページの最大の特徴であるハイパーリンクが重要な役割を果たすことは言うまでもない。関連語句で適切なページへ誘導することはもちろん,サイトのナビゲーションはアクセシビリティ・ユーザビリティの鍵を握る。
たとえば,サイト内で一貫したポリシーでナビゲーションのリンク(次のページ,前のページ,ひとつ上の階層へ,など)が設定されているか(現在のページがサイト内の“どこ”であるかを示しておくことも重要である)。また,長いページでは,先頭に“そのページの目次”を示しておき,id
属性をつけた見出しへのナビゲーションリンクを設定しておくと,ページの全体像がまず把握でき,必要な部分だけを閲覧したい訪問者の助けになる。前述の アクセスキーの設定も必要に応じて行うとよいだろう。