アクセシビリティ：JSでスムーススクロール処理をしたらフォーカス位置も移動していることを確認する

最近ではscroll-behaviorでスムーススクロールを実装することもあるかもしれませんが、JavaScriptで実装している場合は「スクロール先の要素にフォーカスが移動しているか」の確認が必要です。

スクロール位置がトリガーになる要素（aタグやbuttonタグなど）から移動していないと、キーボードの利用者は移動先の要素に行き着けず、ページ内リンクの機能自体を使えなくなってしまうからです。

この症状が起きてしまうのは、JavaScriptを使ったスムーススクロールがevent.preventDefault()を使ってaタグなどのデフォルトの動作を防止しているためです。
HTMLとCSSだけの場合はフォーカス設定は不要なので、実装によって本来なら使える機能を損なっていることになります。

JavaScriptで実装する場合

sweet-scrollというライブラリを使った実装例です。

import SweetScroll from 'sweet-scroll';

const scroller = new SweetScroll({
  after(offset, $trigger, scrollElement) {
    const destination = document.getElementById(scrollElement.ctx.hash.replace('#', ''));
    destination.setAttribute('tabindex', '-1');
    destination.focus();
  },
});

• sweet-scrollにはコールバック関数（ここではafter）が用意されているのでこれを使います
• scrollElement.ctx.hashで#fooのようなハッシュ値が取得できるので、これを使って移動先の要素を取得します
• tabindexを-1に設定することで通常のTabキー操作ではフォーカスされないがJavaScriptではフォーカス管理できる状態にします
• .focus()で移動先の要素にフォーカスを移動します