読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

base要素とナビゲーションスキップとアクセシビリティと。

ユーザビリティ・アクセシビリティ

2008年4月14日21時:追記

はてブのコメントに関して書き足しました(文末)。

base要素とナビゲーションスキップを同時に実装すると、そのナビゲーションスキップは本当に機能していますか?

base要素とその使い道

いきなり引用で申し訳ないのですが、base要素とは、

HTML 文書の基準 URI を指定します。href属性に書かれた URL が、この文書の基準 URL とされ、相対参照を解釈する際に利用されます。

base要素@ばけらの HTML リファレンス(未完成)

とのことでして、コードはこんなふうに使います。

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<base href="http://www.123kobe.com" />

HTML文書のURLの起点を作るみたいなものですね。
僕はbase要素を今まで一度も使ったことはありませんでした。ただ、今回リニューアルしたうちのサイト(NPO法人しゃらく)で初めて使いました(まだ作り掛けなんですが)。その理由としては、

MODx用のメモ

タイトルが全てなんだけども、フレンドリーURL使ってて、フレンドリーエイリアスを効かせてると、
Breadcrumbsとかおかしくなるから。

Nishiaki's Log: MODxでテンプレートにはbaseを忘れるなよオレ

今回上記のNPO法人しゃらくのサイトにはMODxというCMSを入れていて、更にフレンドリーエイリアスというURLを簡素化できる設定を行い、その上でBreadcrumbsというスニペットを使っています。
すると、引用先にあるようにbase要素を指定しておかないと、Breadcrumbsが吐き出すURLがめちゃくちゃになってしまうのです。

base要素とナビゲーションスキップ

上記の理由から僕は初めてbase要素を使ったのですが、ナビゲーションスキップ(ナビゲーションスキップについては以前書いたことがあります)とバッティングすることを初めて知りました。音声ブラウザやスクリーンリーダーでどのページのナビゲーションスキップをクリックしても、全てトップページに戻るのです。
今回僕はbase要素にサイトのトップページのアドレスを指定し、一方、ナビゲーションスキップには次のコードを書きました。

<p class="skipNavi"><a href="#skipNavi">ナビゲーションをスキップする。</a></p>

こう書くと、href属性のURLは「base要素(トップページ)+#skipNavi」と解釈してしまい、結果その行き先は「http://www.123kobe.com/#skipNavi」と、どのページでクリックしてもトップページに戻ってしまいました。
冷静に考えれば至極当然なのですが、base要素にはこんな落とし穴があったのです。ちなみに、今でもこの状況は改善できておらず、どうしようかなと悩んでいる最中です。
というわけで、自分の失敗から導き出す結論ですが、base要素とナビゲーションスキップを同時に使う際にはアクセシビリティの確認を念入りに行ったほうがよさそうです。

追記

以下、はてブのコメントに対する追記です。

[html]CMSの方でなんとかならないのだろうか。

はてなブックマーク - 徒栞 / 2008年04月13日

やってみた人はいるようです。少し前の記事なのですが、Cubix | base hrefを使わないなど。ただ僕はPHPをちゃんとできる人間ではないので、なんか無理っぽいなーと。

[HTML][Web Design]そうなのか。なるほど。 / スキップしないで済むように、ナビゲーションを本文の後にもってくればいいような気もするが、どうなんだろう。

はてなブックマーク - カナかな団首領のブックマーク / 2008年04月14日

これはボイスサーフィンという音声ブラウザの中の人が「尻ナビ方式」と呼んでいるコンテンツの配置形態ですね。音声ブラウザ対応エッセンス〜ナビゲーションメニュースキップで紹介されています。
この形態はブログなどであれば、メニューを全てフッターに集め、1カラムでデザインすることによってできるとは思うのですが、いかんせん企業サイトなどは難しいかなと思っています。メニューをフッターに持っていくデザインがあまり一般的ではありませんし、フッターのメニューをpositionなどで本文の上部に持っていこうとすると、某ブラウザのバグにめちゃくちゃにはまりそうな気がしたりするのです。
ただ、江東区は結構頑張って、メニューをHTMLの後半で書いて、positionで上に持っていっているみたいですね。