ページ内アンカーについて考える

リンク (ハイパーリンク) はウェブをウェブたらしめる、根幹的な機能です。この機能のおかげで、ウェブの利用者は、あるウェブページから別のウェブページへ (時にはページ以外のファイルであることもありますが)、手軽にジャンプすることができます。

一般的にリンクは、今いるページとは別のページ (の先頭) に遷移するものですが、ページ内の特定のセクション (ページ内アンカー) に遷移するリンクもあります。HTML の実装としては正しく (たとえば「WCAG 2.0」の Table of Contents など W3C の勧告文書でも普通に実装されています)、機能としても一見便利ですが、ユーザビリティやアクセシビリティの観点から考えると、以下のような問題を挙げることもできます。

ページ内アンカーを配置したい場合、そのページ自体が長い (複数の主題を含んでいる) ことが多い。

ウェブページの画面設計をプロジェクト関係者と検討していると、ページ内アンカーを配置したいという要望が出ることがありますが、そういう場合は大抵、そのページ自体が長いことが多いです。ページが長く複数の主題を含んでいるので、冒頭に (各々の主題つまり各アンカーにリンクする) 目次を配置しよう、という具合です。

メインコンテンツエリアに目次のような機能を配置すると、その分、実質的なメインコンテンツは下に押しやられる形になります。ならば目次の表示を小さくすれば?という意見もありますが、リンクとして機能させる以上はタッチインターフェースでの利用 (「fat finger」問題の回避) も配慮する必要があり、小さくするにも限度があります。

基本的にメインコンテンツエリアは、本来ユーザーに伝えたい情報 (ユーザーに利用してもらいたい機能) のみを置くことでシンプルにまとめたいものです。目次を設けなければならないほど多くの主題を含んでいるのであれば、主題ごとにページを分けることを検討しましょう。

主題ごとにページを分けると、アバウトネス (そのページが何であるか?どんな情報を提供しているのか?) がより明確になり、特定の目的を持ったユーザーが具体的なメリットを感じやすくなります。扱う情報のスコープが絞られる分、<title> や <meta (description)> の記述も自ずと具体的になるので、検索エンジンやソーシャルメディア (シェア) からの集客も期待できそうです。

ページ内アンカーは、一般的なユーザーのメンタルモデル (リンク即ち別ページヘの遷移) に合致しない。

一般的にユーザーは、リンクをクリック/タップすると、別のページに遷移すると予想し、遷移先には、そのページのアバウトネスを示す手掛かり (何のサイトかを示すヘッダー、ページの主題を端的に表わす大見出し、サイト内の位置づけを知るヒントとしてのグローバルナビゲーションやパンくず、など) が当然あるものと期待します。ところがページ内アンカーに遷移するリンクの場合、遷移先にはそのような手掛かりが無いため、ユーザーは「別のページに飛んだはずなんだけど、はて、どこに降り立ったんだろう?」と混乱する恐れがあります。実際には正しいリンク先であっても、ユーザー自身がコンテキストを見失い、結果に対して半信半疑になってしまうのです。

JavaScript によるアニメーション (リンクをクリック/タップするとページが自動スクロールして、遷移先となるアンカーのところで止まる視覚効果) を加えれば?というアイデアもありますが、「リンク即ち別ページへの遷移」というメンタルモデルが形成されているユーザーにとって、クリック/タップ直後のアニメーションは唐突過ぎて意味を咀嚼できないことが少なくありません (回線状況などでアニメーションがスムーズに動かない場合、なおさら「意味不明」なアニメーションになります)。

ちなみにこのような、ページ内アンカーまで自動スクロールするアニメーションは、外部ページからのアクセスに対しては挙動しなかったりするので、その意味でも中途半端な気がします。外部からの被リンクを受け得るほどの価値ある主題を含むのであればなおのこと、やはりその主題ごとにページを分けるのがよいのでは、と思います。

ページ内アンカーは、キーボード操作において、ユーザーが期待する挙動にならない。

ページ内アンカーはまた、キーボード操作のにおいても問題があります。ページ内アンカーに遷移するリンクに [Tab] キーでフォーカスを当てて、[Enter] キーを押すと、ブラウザウィンドウ内にはそのアンカーが埋め込まれたセクションが (一見問題なく) 表示されます。ところが、そこからさらに [Tab] キーを押した場合、ユーザーとしては「遷移後のアンカーを基点に、その次のフォーカス可能な要素にフォーカスが移る」ことを期待するものですが、実際そのように挙動するのは Firefox くらいで、多くのブラウザは以下のような挙動をするのです。

これでは、マウスが使えずキーボード操作に依存せざるを得ないユーザー (怪我や上肢障害、視覚障害など) にとって大きなフラストレーションになるだけでなく、最悪の場合、コンテキストを見失うことにもなりかねません。


以上のことから私自身は、なるべくならページ内アンカーの導入を避けるのが無難と考えています。どうしてもページ内アンカーを導入する必要がある場合は、上述した問題点をリスクとして理解しておきたいところです。