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

リンク (ハイパーリンク) はウェブをウェブたらしめる、根幹的な機能です。一般的にリンクは、今いるページとは別のページに遷移するものですが、ページ内の特定のセクション (ページ内アンカー) に遷移するリンクもあります。たとえば、ページの冒頭に目次を設けておき、目次の項目のいずれかをクリックまたはタップすると、該当するセクションにジャンプできる、という具合です。

ページ内アンカーへのリンク (<a> 要素の href 属性で、リンク先としてページ内の特定のセクションの ID 名を指定すること) は、HTML の実装としては正しく、機能としても便利です。ただし、ユーザビリティの観点から考えると、以下のような問題をはらむことがあり、その導入にあたっては、慎重に検討、判断したいところです。

ページ内アンカーの配置が必要なページは、そもそもそのページ自体が長すぎるかもしれない。

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

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

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

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

ページ内アンカーは、一般的なユーザーのメンタルモデルに合致しない。

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

JavaScript によるアニメーション (リンクをクリックするとページが自動スクロールして、遷移先となるアンカーのところで止まる視覚効果) を加えれば？というアイデアもありますが、回線状況などでアニメーションがスムーズに動かない場合もあり、ユーザーにとってかえって「意味不明」な挙動になってしまう恐れがあります。また、このようなページ内のアニメーションは、外部ページからのアクセスに対しては挙動しなかったりするので、その意味でも中途半端な気がします。外部からの被リンクを受け得るほどの価値ある主題を含むのであればなおのこと、やはりその主題ごとにページを分けるのがよいと思います。

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

(2020年12月7日追記)
本記事の執筆当初に記載した以下の内容は、その後、主要ブラウザの機能改善によって、キーボード操作によるアクセシビリティの問題が解消されたため、削除します。詳しくは、「ページ内アンカーへのキーボード操作でのアクセシビリティ (ブラウザ側の機能改善)」をご参照ください。

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

  • OS X Safari では、ページ内アンカーに遷移する前のリンクを起点に、その次のフォーカス可能な要素にフォーカスが移る。
  • Chrome や Internet Explorer では、当該ページのいちばん上のフォーカス可能な要素にフォーカスが移る (強制的に「ふりだしに戻る」状態になる)。

これでは、キーボード操作に依存せざるを得ないユーザー (怪我や上肢障害などでマウスが使えない人) にとって大きなフラストレーションになるだけでなく、最悪の場合、コンテキストを見失ってしまうことにもつながります。ページ内アンカーを採用する際には、このようなフォーカス制御についても、考慮に入れる必要があります。

関連記事