<NuxtRouteAnnouncer>

ソース
<NuxtRouteAnnouncer>コンポーネントは、ページタイトルを含む非表示の要素を追加し、アシスティブテクノロジーにルート変更をアナウンスします。
このコンポーネントはNuxt v3.12以降で利用可能です。

使用方法

app.vue または app/layouts/ に <NuxtRouteAnnouncer/> を追加することで、アシスティブテクノロジーにページタイトルの変更を知らせ、アクセシビリティを向上させることができます。これにより、スクリーンリーダーを使用しているユーザーにナビゲーションの変更がアナウンスされるようになります。

app/app.vue
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

スロット

ルートアナウンサーのデフォルトスロットを通じて、カスタムHTMLやコンポーネントを渡すことができます。

<template>
  <NuxtRouteAnnouncer>
    <template #default="{ message }">
      <p>{{ message }} was loaded.</p>
    </template>
  </NuxtRouteAnnouncer>
</template>

プロップス

  • atomic: スクリーンリーダーが変更のみをアナウンスするか、コンテンツ全体をアナウンスするかを制御します。更新時にコンテンツ全体を読み上げる場合はtrueに設定し、変更のみの場合はfalseに設定します。(デフォルト false)
  • politeness: スクリーンリーダーのアナウンスの緊急度を設定します: off (アナウンスを無効にする)、polite (静寂を待つ)、または assertive (すぐに中断する)。(デフォルト polite)
このコンポーネントはオプションです。
完全にカスタマイズするには、そのソースコード.
useRouteAnnouncerコンポーザブルを使用して、基盤となるアナウンサーインスタンスにフックし、カスタムアナウンスメッセージを設定できます。