jQueryで実装したページトップへスクロールするボタンにフォーカスを外す処理を加え、キーボードユーザーのユーザビリティを少し向上させてみました。
scroll-to-top.html
scroll-to-top.js
$('.js-scroll-to-top').on('click', function() {
$('html,body').animate({ scrollTop: 0 }, 500);
return false;
});
↑機能的には十分ですが、ボタンクリック後にもフォーカスが残ってしまいます。
ページトップへスクロールボタンは大抵ページの下部にあったり、上部で非表示になるため、フォーカスが残ってしまうとキーボード操作のユーザーはタブキーを連打して現在地を移動しなくてはいけなくなるかもしれません。
scroll-to-top.js
$('.js-scroll-to-top').on('click', function() {
$('html,body').animate({ scrollTop: 0 }, 500);
this.blur(); //フォーカスを外す
return false;
});
this.blur();を加えればボタンクリック後にページトップへスクロールボタンからフォーカスが外れ、次の操作に移行しやすくなります。
