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

TRANS

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

スムーススクロールは音声ブラウザで確認すること。

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

スムーススクロールを実装する際は音声ブラウザでの読み上げを確認しておいたほうがよいようです。

jQueryなどのスムーススクロール

たまに見かけるjQueryのモジュールでページ最下部からページの最上部にスムーズにスクロールさせるためのページ内リンクがあります。スクリプトもいろいろと紹介されているので、使っているサイトも多くあります。
ただ、そのうちのいくつかのモジュールでは音声ブラウザでうまく動作しないものがあります。
どういうことかというと、普通のページ内リンクはリンクの文字列(例えば、「ページの最上部へ」)を女性の声などで読み上げているときに、Enterをクリックするとid属性やname属性でマークアップされた任意の場所に飛び、音声ブラウザは自動的にそこから読み上げを再開します。
ただし、スムーススクロールで紐付けられたページ内リンクでEnterをクリックすると音声ブラウザがid属性やname属性でマークアップされた任意の場所に飛ばずに、一旦読み上げが完全に停止してしまいます。その後、左や右などのキーボードをクリックし読み上げを再開させようとすると、ページ内リンクの元の箇所から再度読み上げが始まります。要はページ最上部に戻るためのリンクが機能しないということです。
こういった状況にあまり遭遇しないかもしれませんが、スムーススクロールを実装する際にはちゃんと音声ブラウザでテストしておいたほうがよいようです。また、それでも使用する際には、JavaScriptのコードを変更するといった改善策が求められます。
ちなみに、ページ内リンクについてはAlertbox: ページ内リンクの使用は避けよう(2006年2月21日)も参考にしてください。