Hop step XHTML―ホップ ステップ XHTML

Section 13:ハイパーテキストモジュール(2)

 本節では,WWW ページ・サイトというハイパーテキストにおいて,文書の関係を示すこと,それに,ページ・サイトのナビゲーションについても言及する。

文書間の関係

 a 要素では,rel 属性および rev 属性で,リンク先のリソース(文書)との関係を示すことができる。

rel 属性にはその文書から見た関係を,rev 属性には参照先の文書から見た関係を与える。
図 13.1 [D]

 図 13.1 のように,rel 属性は,現在の文書から見た,参照先(href 属性に書かれた)の文書との関係を与える。一方で,rev 属性は,参照先の文書から見た,現在の文書の関係を与える。これらの“関係”を表す語句には,次のようなものがある。

next
次の文書。
prev
前の文書。
contents
目次の文書。
start
一連の文書中の,最初の文書。
index
索引。
chapter
一連の文書において,“章”にあたる文書。
section
一連の文書において,“節”にあたる文書。
subsection
一連の文書において,“項”にあたる文書。
glossary
用語集。
copyright
著作権情報。
appendix
付録,補足情報。
help
ヘルプ。
stylesheet
スタイルシート。これは,Let's begin XHTML の Section 16 で見たように,もっぱら外部に用意したスタイルシートを読み込むときに使用する。
alternate
代わりになる文書。
一連の文書の,rel 属性の与え方の例。
図 13.2 [D]

 たとえば,本チュートリアル“Hop step XHTML”は,図 13.2 のように,目次(導入)のページがあって,Section 1,Section 2,Section 3,……,という構成になっている。であるから,

  • Section 1 の“rel="next"”である文書は Section 2 である
  • Section 2 の“rel="next"”である文書は Section 3 で,“rel="prev"”である文書は Section 1 である
  • Section 1,2,3,……,の“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 つ以上あってもかまわない。これらは,次のような順序でフォーカスを得る。

  1. まず,tabindex 属性が 0 以外に指定されたものからフォーカスを得る。
    1. その数の若いものから。
    2. 同じ数が 2 つ以上ある場合は出現順。
  2. tabindex が無指定の場合,または 0 に指定されたものは tabindex が前項であげたもののあとにフォーカスを出現順に得る。
  3. 要素が無効化されている場合には,フォーカスを得ることはない。

 例を見ながら解説しよう。

<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 属性をつけた見出しへのナビゲーションリンクを設定しておくと,ページの全体像がまず把握でき,必要な部分だけを閲覧したい訪問者の助けになる。前述の アクセスキーの設定も必要に応じて行うとよいだろう。