react-scrollでページ内スクロール(to)を使うとhrefが出力されずtabで移動ができないときの対処法

react-scroll(Version1.8.9)を使用してページ内スクロール(toを使用)を実装する場合、通常はhref属性が自動的に生成されず、キーボードのTabキーでアンカータグにフォーカスできないことがあります。

<Link to="sample">sample</Link>

これは、react-scrollがスクロールをJavaScriptで制御するため、通常のアンカータグのようにhref属性が設定されないからです。

ページ内スクロールのリンクにキーボードのTabキーでフォーカスを付けるためには、以下の方法を試すことができます。

ダミーのhref属性を設定する

ページ内スクロールのリンクにhref属性を追加し、ダミーの値(通常は#)を設定します。
これにより、リンクはキーボードのTabキーでフォーカスできるようになります。

<Link to="sample" href="#">sample</Link>

aria-label属性を使用するとなお良い

アクセシビリティ向上のため、aria-label属性を使用してリンクの役割を説明します。
これはスクリーンリーダーのユーザーにとって役立ちます。

<Link to="sample" href="#" aria-label="sampleへスクロール">sample</Link>
トップへ