使用方法

<NuxtRouteAnnouncer/> を app.vue または layouts/ に追加して、支援技術にページタイトルの変更を知らせることでアクセシビリティを向上させます。これにより、スクリーンリーダーに依存するユーザーにナビゲーションの変更が通知されます。

<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）