ウェブサイト制作には「なんだかよく分からないが、そう決まっている」という決まりごとがいくつかある。そのうちの一つが「メニューやナビゲーションにはリストタグを使え」というものだ。しかし、その理由を尋ね歩いても、納得のゆく答えを見つけるのは難しいかもしれない。「そういうものだから」というのが、大方の意見だろう。
そもそもリストタグはメニューを横に並べるのには適していない。メニュー(とくに、グランドナビゲーション)のために発明されたのではないことは明らかだ。大抵のグランドナビゲーションは横に並べてあるので、CSSのディスプレイ指定を使って無理矢理に横に並べなければならない。
そこでいろいろと探したところ「ナビゲーションにリストタグを使うべきか」という英語の文章を見つけた。この文章によると、大抵の(多分、アメリカのことだろう)教科書には「ナビゲーションにはリストタグを使え」と書いてあるそうだ。たぶん、この習慣が日本にも伝わったのだろうと思われる。
ところが、目の見えない人用の支援ツールを研究した結果「リストタグを使ったメニューは認識しにくい」ということが分かったのだと言う。ユニバーサルデザインに配慮すれば、スパンタグを使った方がよいらしいのだ。
HTML5には、NAVというタグがある。だから、NAVタグで囲みさえすれば、仕様には合致していると言える。NAVタグを使うと「そこは、本文とは関係がない」という指定ができる。メニューやナビゲーションにリストタグを使うかどうかは、好みの問題だということになるだろう。
しかし、話はそれほど単純なものではなさそうだ。レスポンシブデザインが一般化し、それに対応したプラグインが発展した。「ナビゲーションにはリストタグを使う」ことが一般化しているので、大抵のプラグインもナビゲーションのリスト構造の把握に、リストタグとそのネストを利用している。つまり、レスポンシブデザインを意識すると、ナビゲーションやメニューにはリストタグを使わざるを得なくなるというわけだ。
ここで出てくるのは「メニュー構造をネストすべきか」という問題だ。確かに、ネスト構造を取るとサイト構想は把握しやすくなる。アコーデオンやドロワーを使えば、かなり多くのメニューを表示できるだろう。しかし、これはPCを使ってメニューを縦に並べた場合に言えることだ。これをタブレットやスマートフォンで表示するとかなり分かりにくい画面構成になることは間違いない。
そもそも、どうしてメニューにリストタグを使うようになったのかはよく分からない。昔のウェブサイトデザインを見ると、ナビゲーションが左横に縦に並んでいるものが多く見られる。単に文字を並べているだけなので、リストタグをそのままメニューとして使っていたのだろう。意外とそのころの名残が習慣として残っているだけなのかもしれない。