<NuxtRouteAnnouncer>

使い方

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