Hayato Hasegawa

トップに戻るボタンのアクセシビリティを考える

公開日: 11/10/2024

トップに戻るボタンとは

ウェブサイトの下部に設置されることが多い、ボタン(もしくはリンク)です。 押下すると画面がページ上部へと戻ることが出来ます。便利(?)ですね。

そんなトップに戻るボタンですが、多くのウェブサイトで考慮できてると嬉しい(?)ポイントが一つ存在します。

キーボード操作している時に、フォーカスがトップに戻るボタンに残ったままの状態が多い!

画面上ではページトップへ戻っているものの、フォーカスはトップに戻るボタンに残ってることが多いです。 せっかく画面上部に戻ったのに、フッター内のリンクにフォーカスされるなんてことをしばしば体験します。

ユーザー体験が環境に応じて違うのは好ましくありません。

キーボード操作も考慮するために、トップに戻るボタン押下時はフォーカス位置も移動させる必要があります。

トップへ戻った後のフォーカス位置はどこが良い?

ここまで書いておいてですが、どこにフォーカスさせるが良いか、ここが絶対ですという見識は持っていません。 探してみたら以下のような記事や議論がありました。 https://www.digitala11y.com/scroll-to-top-where-should-the-focus-land/ https://www.linkedin.com/posts/raghavasatish_accessibility-a11y-question-activity-6867327293543526400-myr0

ウェブサイトの構造に応じて、最適なフォーカス位置を模索する必要がありそうです。

そもそもトップに戻るボタンって必要?

個人的な意見ですが、私はトップに戻るボタンをほぼ利用したことがないですし、必要なの?って思っています。

キーボード操作では、「Command + ↑」で上部に戻れますし、スクリーンリーダーではメインコンテンツ要素、もしくは大見出しにジャンプが可能です。

よく右下に追従する形で表示されますが、コンテンツを隠してまで表示する必要があるのか・・・。

コンテンツ量が多いページであれば、トップに戻るボタンの設置は有用だと考えられます。

しかし、多いコンテンツ量にフォーカスを当てるべきであり、脳死でトップに戻るボタンを設置することは問題のひた隠しではないでしょうか。

他のウェブサイトでよく見るからと安易な理由でデザインするのではなく、