ナビゲーションリンクとアクティブ状態

目的：小さなナビゲーションバーを作成し、ユーザーとスクリーンリーダーにアクティブなルートを明確に示します。

• アクティブ状態のスタイル
• aria-current
• 小さな画面に適したレイアウト

現在のパスを比較して、リンクのアクティブ状態を計算します。視覚的にわかりやすいスタイルを適用し、アクティブなリンクにaria-current="page"を設定します。

小さなハッシュルーターと、アクティブなリンクにスタイルを適用してaria-currentを設定するNavコンポーネントを実装します。

アクセシビリティのヒント：

• ナビゲーションには実際の<a>リンクを使用します。
• アクティブなリンクにaria-current="page"を設定します。
• ナビゲーション後もフォーカスが見える状態を保ちます。

色とコントラストでアクティブ状態を明確に示します。タッチ領域は大きく（最小40px）、小さな画面でも余裕のある間隔を保ちます。

次の点は避けてください：

• ホバースタイルだけを使用すること。タッチ操作のユーザーには表示されません。
• アクティブなリンクにaria-currentを設定し忘れること。
• UIを更新せず、URLだけに頼ること。

まとめ：現在のパスからアクティブなリンクを計算し、明確なスタイルを適用して、スクリーンリーダーのためにaria-current="page"を設定します。