Svelte入門：SvelteKitでのリンクオプション -Vol.5-

今日は、SvelteKitでのリンクオプションについて解説しています。

背景

SvelteKitでのリンクオプションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

リンクオプション

SvelteKitでは、アプリのルート間を移動するために、フレームワーク特有の<Link>コンポーネントではなく、<a>要素が使用されます。ユーザーがアプリに「所有」されているhrefを持つリンク（例えば、外部サイトへのリンクとは対照的に）をクリックすると、SvelteKitは新しいページのコードをインポートし、必要なデータを取得するためにload関数を呼び出すことで、新しいページにナビゲートします。

data-sveltekit-*属性を使用して、リンクの動作をカスタマイズすることができます。これらの属性は、<a>要素自体、または親要素に適用できます。

これらのオプションは、method="GET"を持つ<form>要素にも適用されます。

data-sveltekit-keepfocus

時には、ナビゲーション後にフォーカスをリセットしたくない場合があります。例えば、ユーザーが入力中に送信される検索フォームがあり、テキスト入力にフォーカスを維持したい場合などです。これにdata-sveltekit-keepfocus属性を追加すると…

<form data-sveltekit-keepfocus>
    <input type="text" name="query">
</form>

…ナビゲーション後も現在フォーカスされている要素がフォーカスを保持します。一般的に、この属性をリンクに使用することは避けてください。なぜなら、フォーカスされる要素が<a>タグになってしまい（以前にフォーカスされていた要素ではなく）、スクリーンリーダーやその他の支援技術のユーザーは通常、ナビゲーション後にフォーカスが移動することを期待するからです。また、この属性はナビゲーション後も存在する要素にのみ使用すべきです。要素が存在しなくなると、ユーザーのフォーカスが失われ、支援技術のユーザーにとって混乱する経験になる可能性があります。

1. data-sveltekit-keepfocusの目的：
   この属性は、ページナビゲーション後もある特定の要素にフォーカスを維持するために使用されます。
2. 主な使用ケース：

• リアルタイム検索フォーム：ユーザーが入力中に結果が更新される場合
• 自動保存機能のあるフォーム：ユーザーの入力に応じてページが更新される場合
• インクリメンタルロード：ユーザーのアクションに応じてコンテンツが追加される場合

1. アクセシビリティへの配慮：

• リンク（<a>タグ）への使用は推奨されません。これは、スクリーンリーダーユーザーの期待に反する可能性があるためです。
• ナビゲーション後も存在する要素にのみ使用すべきです。そうしないと、フォーカスが失われ、支援技術ユーザーに混乱を招く可能性があります。

1. 技術的な動作：

• 通常、SvelteKitはナビゲーション後にフォーカスをリセットしますが、この属性が付いた要素内の現在フォーカスされている要素は、そのフォーカスを保持します。

1. 使用上の注意点：

• この属性の使用は慎重に検討する必要があります。不適切な使用は、ユーザーエクスペリエンスを損なう可能性があります。
• ナビゲーション後にフォーカスを保持する要素が確実に存在することを確認してください。

1. ユーザーエクスペリエンスへの影響：

• 適切に使用された場合、ユーザーの作業の流れを中断せずにスムーズな操作を提供できます。
• 不適切に使用された場合、ユーザーが予期しない場所にフォーカスが残り、混乱を招く可能性があります。

1. 開発者の責任：

• この属性を使用する際は、アクセシビリティのベストプラクティスに従い、すべてのユーザーにとって良好な体験を提供することが重要です。

data-sveltekit-keepfocus属性は、特定のシナリオでユーザーエクスペリエンスを向上させる強力なツールですが、アクセシビリティとユーザビリティを慎重に考慮して使用する必要があります。

おわりに

今日は、 SvelteKitでのリンクオプションについて解説しました。