23: Creating multiple pages with navigation menus

OperaWSC HTML

http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/

Your HTML menu tools -- links, anchors and lists

やり方は色々あるが、いずれにしろ link と a elements を使う。

  • link elements は documents 間の関係を表す。user agent にその document は複数の documents からなる講座のうちのひとつで、他に目次となる document がある、など。
  • Anchor (a elements) は他の document、あるいはその document の特定の場所へのリンクを表す。user agent によって自動的に辿られることはなく、ユーザが選んで辿る。

Anchor も link elements も勝手にメニューになるわけではなく、user agent やユーザがそれはただのリンクではなくナビゲーション・メニューだとわかるように構造と見た目を与えなければならない。
順番が重要ではないなら unordered list を使おう。id を ul element に付けておくと、CSS や javascript でいぢりやすい。
順番が重要なら ordered list を使う。
メニューにリストを使うのがすばらしい3つの理由:

  • 全てが ul element などに収まるので、CSS や javascript を適用しやすい
  • ネストできるので、階層化されたメニューにもできる
  • スタイルをつけなくてもそれなりにメニューっぽく表示される

ネストする場合は、li element の後ではなく、中にサブリストを入れる。

The need for flexibility

サイトのメニューというのは変化するモノなので、それを念頭に置いて作ること。

  • サイトのメニューに置く項目が増えたり減ったり
  • 他の言語への翻訳
  • サーバサイドで動的に生成される

Different types of menu

いくつかのタイプのメニューがある。大抵はリストを使うが、そうではないものもある。

  • ページ内ナビゲーション: リンクがそのページ内の特定の部分を指す。
  • サイト内ナビゲーション: サイト全体のナビゲーション。リンクがそのサイト内の別のページを指す。
  • 関連コンテンツ: そのページの題材と関連のあるサイト内外のページ。
  • サイトマップ: サイト内のすべてのページを、関連するページごとに整理したもの。
  • ページ送り: そのページがより大きなコンテンツの一部である場合。part 1, part 2, part 3 など。
In-page navigatien (table of contents)

リンクのリストを使う。リンク先となるセクションの elements に id を付けておき、リンクの href attribute を "#" に続けて id の値とする。それぞれのセクションには ”back to menu" リンクを用意しておく。
これでちゃんと動くはずだが、IE の bug のためにもうちょっとやることがある。
1. IE6/7 で example of in-page navigation を開く
2. マウスを使わず、キーボードでリンクを辿る。Tab でリンクを選び、Enter で辿る。
3. 一見うまく動く（リンク先のところまでスクロールする）
4. もう一度 Tab キーを押したときに、正しい挙動は飛んだ先のセクション内の最初のリンクにフォーカスするというものだが、IE6/7 はページの最初のリンクまで戻ってくれやがる。
これに対処するには "hasLayout" という IE 特有のプロパティを扱わなければならない。詳しくは http://www.satzansatz.de/cssd/onhavinglayout.html で説明されている。簡単な方法:（リンク先のセクションを包む）div element に CSS で width を指定する。IE ではアンカー（リンク先）が hasLayout property を持つ element の中になければならない。
これはウザいが、セクションにスタイルを適用したり、見出しがどこの見出しなのかわからないという問題（次の見出しまでにある全てがその見出しの対象だとされている）。
INFO: Opera でのキーボードによるリンク選択は少々異なる。Shift を押したまま矢印で上下左右のリンクやフォームを選べる。これは "spatial navigation" と呼ばれる。

Site navigation

たぶん一番使う。サイト内の階層化された構造からユーザが自由に選ぶことができる。リストはこの目的に完璧な手段である。
HTML としては特に変わったことはない。

Providing visitors with a "You are here" feeling
ひとつ考えるべきなのは、サイト内を移動しているユーザが今どこにいるのかをメニュー内でどう目立たせるかということ。
基本的には、現在のページへのリンクはしないこと。例外（web-app, blog の permalinks など）もあるが、99% の場合はそんなことをするとユーザは混乱する。メニューでも同様に、現在のページへのリンクはしないようにする。削除してしまうこともできるが、リンクではなくして strong にするなどして目立たせるとよい。これで screen reader などでも、メニュー内のそれが現在のページであることがわかる。

How many options should you give users at one time?
他に考えるべきことに、ユーザにいくつの選択肢を与えるかということ。多くのサイトでメニューから全てのページにアクセスできるようにしようと javascript や CSS で曲芸をしている。メニューの一部を選択されるまで隠しておく（"rollover menus" と呼ばれる）といった方法だが、いくつか問題がある。

  • 全てのユーザが意図した通りに沿うさするわけではない。キーボードを使うユーザは結局目的のページへのリンクに辿り着くまで何度も Tab キーを押さなければならない。
  • HTML をたくさん書き加える羽目になるし、それは本来不要であることも多い。
  • あまりたくさんの選択肢を与えるとユーザは嫌になるかもしれない。人間は決定するのが嫌いなものだ。
  • ページのコンテンツがあまりないのにリンクがたくさんあると、検索エンジンはそのページを重要視しない。

結局メニューにいくつの項目をいれるかはあなたの自由なのだが、なるべくサイトの主要な部分へのリンクのみにするのがよいだろう。必要ならサブメニューを使えばいい。

Contextual menus

デスクトップアプリでのコンテキスト・メニュー（右クリックででてくるやつ）。web ページ上では、関連性の高い他の情報へのリンク。

Sitemaps

サイトマップというのはサイト全体の案内図。ちょっと見ただけでサイト全体の構造がわかり、サクッと目的のページへ行くことができる。
サイトマップもサイト内検索も、急いでいるユーザに素早く目的のページへ行かせたり、迷子になったユーザの非常口として機能する。
HTML としてはリンクが大量にあるネストした巨大なリスト、あるいはいくつかに分割されたそれに見出しを付けてセクションとしたもの。

Pagination

複数のページに分かれた document に必要になる。
HTML としては特に目新しいことはなく、現在のページに相当する部分をリンクではなく目立たせた、リンクのリスト。
これは通常プログラムによって生成されるが、基本的なルールは変わらない。

When lists are not enough -- image maps and forms

ほとんどの場合 bulleted/numbered list で事足りるが、他のやり方が必要な場合もある。

Setting hotspots with image maps

ひとつはイメージマップという、画像の一部分（"hotspot" ともいう）をリンクにしてしまう技術。

<img src="..." alt="..." usemap="#skillset_Map">
<map name="skillset_Map">
   <area shape="poly" alt="..." coords="..." href="...">
   <area ...>
</map>
  • img element: usemap attribute に map element の name attribute の値を "#" 付きで指定する。
  • map element: name attirbute を指定しておき、img element の usemap attribute で指定させる。child element として area elements を持つ。
  • area element: hotspot を定義する
    • href attribute: リンク先
    • alt attribute: 代替テキスト
    • shape: 対象とする「一部」のカタチ。rect, circle, poly
    • coords: hotspot とする範囲の位置。画像の左上を基準としてピクセルかパーセントで指定。長方形であれば左上と右下、円形であれば中心と半径を、多角形なら全ての角とする点を指定する。

これを手作業で作るのはとてもしんどいので、Adobe のアプリなんかでは専用のツールがある。

Saving screen space and preventing link overload with forms

もう一つの方法は select element を使ったフォームを作るもの。select element 内に他のページを選択肢として定義し、ユーザはその中から選んでボタンを押す。
この方法の良い点はたくさんの選択肢を与えても、画面上の空間をあまり使わないことだろう。
optgroup element を使えば選択肢をグループ分けすることもできる。
これをやるにはサーバーサイドに、ユーザをユーザが選んだページへ送るスクリプトが必要だ（javascript でも同じことはできるが、javascript を off にしていても動くようにしなければならない）。
もうひとつの利点として、わかりにくいのだが、やたら多数のリンクを作らなくて済むというものがある。支援技術を使っているユーザは、よく多数のリンクからなるリストに出くわしてうんざりするのだが、そんなことにはならない。また、検索エンジンもそのページは（テキストとリンクの比率からサイトマップなどと勘違いして）価値がないとは思わない。ただし、支援技術としてページないのリンク一覧を作るものがあり、もし重要なリンクが select メニューにしか存在しないと、ユーザはそのリンクに気づかないかもしれない。主要なリンクは通常のリンクとしておき、さらなる選択肢を select element によるメニューとするのがよいだろう。

Whene to put the menu, and offering options to skip it

メニューをどこに置くか。スクロールできないとか、目が見えないのでキーボードで操作するユーザのことを考えてみよう。
document を読み込んで、最初に出くわすのはその document の場所（URL？）とタイトルで、その次に document の上から下へ読み上げられる。リンクがあるたびに一旦止まり、そのリンクを辿るかどうかユーザに尋ねる。あるいは全てのリンクを一覧したり、見出しから見出しへとジャンプする。

もしメニューが document の最初にあると、ユーザは最初にメニューに出くわす。本文に到達するのに 15 も 20 ものリンクがあるのはイライラするだろう。
やり方は2つある。

  • メニューを本文の後に置く。画面上では CSS で上の方に表示させることもできる。
  • "skip the menu"。メニューの直前に本文まで進むリンクを置いておくことで、ユーザはメニューをすっ飛ばしてすぐに本文に辿り着くことができる。さらに "go back to menu" のようなリンクを本文の最後に付け加えてもいい。このスキップ・リンクは screen reader だけでなく、モバイル末端でも役に立つ。

Summary

  • メニューには、リンクのリストが最強
  • メニューは変化する
  • ページ内ナビゲーション: ページ内の特定の部分へのリンク
  • サイト内ナビゲーション: サイト内の他のページへのリンクと、それらの構造
    • 現在のページへはリンクしない
  • Contextual navigation: 関連ページ
  • Sitemaps: 非常口、あるいは速攻
  • Pagination: 複数ページからなる document 内を行ったり来たり
  • Image maps: 画像にホットスポットを作って、グラフィカルなメニュー
  • Form menus: 広い空間を使わず大量のリンクも作らずに、よりおおくの選択肢を
  • Skip links とメニューの位置

Exercise Questions

コピペで答えられる質問ばっかだったのでパス