トースト

トーストは、モバイルおよびデスクトップオペレーティングシステムで普及しているプッシュ通知を模倣するように設計された軽量の通知です。

トーストは、訪問者またはユーザーへの小さな割り込みを意図しているため、最小限の、要点を得た、非インタラクティブなコンテンツを含める必要があります。**重要**な使用方法の情報については、以下のアクセシビリティのヒントセクションを参照してください。

概要

拡張性と予測可能性のあるトーストを推奨するために、ヘッダー（タイトル）と本文を提供することをお勧めします。トーストヘッダーはスタイル `display: flex` を使用しており、Bootstrapのマージンとフレックスボックスユーティリティクラスのおかげでコンテンツを簡単に配置できます。

トーストはわずかに半透明であるため、表示されるものと調和します。`backdrop-filter` CSSプロパティをサポートするブラウザの場合、トーストの下にある要素をぼかそうとします。

<template>
  <div class="p-3 bg-secondary progress-bar-striped" style="min-height: 170px;">
    <b-button class="mb-2" variant="primary" @click="$bvToast.show('example-toast')">
      Show toast
    </b-button>
    <b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
      Hello, world! This is a toast message.
    </b-toast>
  </div>
</template>

<!-- toast-intro.vue -->

**注:** 上記の例では、`static`プロパティを使用して、トーストを<b-toaster>ターゲットコンテナに移動するのではなく、ドキュメント内にそのままレンダリングしています。また、トーストの透明性を示すためにのみ、外側の<div>にクラス `bg-secondary`と `progress-bar-striped`を追加しました。

トーストの機能と注意事項

• トーストは、インジェクション `this.$bvToast`オブジェクトを介してオンデマンドで生成するか、<b-toast>コンポーネントを使用して手動で作成できます。
• タイトルは省略可能ですが、含める必要があります。`toast-title`スロットを使用しない限り、タイトルは<strong>要素内にレンダリングされます。
• トーストの右上にある閉じるボタンは、`no-close-button`プロパティを使用して削除できます。
• タイトルを指定せず、`no-close-button`プロパティを設定しない限り、タイトルバーが表示されます。
• 自動非表示は5000ミリ秒後に発生します。これは、`auto-hide-delay`プロパティで変更するか、`no-auto-hide`プロパティで無効にできます。
• 自動非表示が有効になっている場合、トーストにカーソルを合わせている間、自動非表示カウントダウンは一時停止します。 `no-hover-pause`プロパティを`true`に設定することで、この機能を無効にできます。
• 自動非表示機能を無効にする場合は、閉じるボタンを非表示にしないでください。閉じるボタンを非表示にする場合は、トーストが自動的に閉じるようにしてください。**重要**な使用方法の情報については、以下のアクセシビリティのヒントセクションを参照してください。
• トーストの透明度は、`solid`プロパティを`true`に設定することで無効にできます。
• トーストは、名前付きの<b-toaster>ターゲットコンポーネント内に表示されます。BootstrapVueには、定義済みのトースターターゲットがいくつか用意されています。トーストは、表示される前にドキュメント内で名前付きトースターを確認し、名前付きトースターターゲットが見つからない場合は動的に作成します。
• トースターターゲットは、含まれている<b-toast>コンポーネントの位置を制御するためにCSSで完全に定義されています。
• トーストは、任意の名前付きトースターをターゲットにすることができます。
• トースターコンポーネントに表示される場合にVueリスト遷移をサポートするために、トーストはクラス `b-toast`を持つ<div>でラップされます。

BootstrapVueは、PortalVueを使用してトーストをトースターに転送します。

オンデマンドトースト

<b-toast>コンポーネントをアプリに配置する必要なく、`this.$bvToast` Vueコンポーネント *インスタンス* インジェクションを介して、アプリのどこからでも動的トーストを生成します。

`this.$bvToast.toast()`メソッドを使用して、オンデマンドトーストを生成します。このメソッドは2つの引数を受け入れます

• `message`: トースト本文のコンテンツ（文字列、または`VNodes`の配列）。必須。メッセージが空のトーストは表示されません。 `VNodes`の配列をメッセージとして渡す例については、高度な使用方法セクションを参照してください。
• `options`: タイトルや追加の構成オプションを提供するためのオプションのオプションオブジェクト。 `title`オプションは、文字列または`VNodes`の配列にすることができます

`options`引数は、<b-toast>コンポーネントが受け入れるほとんどのプロパティ（ `static`と`visible`を除く）を、ケバブケース名形式ではなく、キャメルケース名形式で受け入れます。

<template>
  <div>
    <b-button @click="makeToast()">Show Toast</b-button>
    <b-button @click="makeToast(true)">Show Toast (appended)</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toastCount: 0
      }
    },
    methods: {
      makeToast(append = false) {
        this.toastCount++
        this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
          title: 'BootstrapVue Toast',
          autoHideDelay: 5000,
          appendToast: append
        })
      }
    }
  }
</script>

<!-- toasts-bv-toast-example.vue -->

`this.$bvToast.toast()`を使用して生成されたトーストが非表示になると、自動的に破棄され、ドキュメントから削除されます。

注意事項

• `this.$bvToast`インジェクションは、完全な`BootstrapVue`プラグインまたは`ToastPlugin`プラグインを使用している場合にのみ使用できます。 `b-toast`または`b-toaster`コンポーネントのみをインポートする場合は使用できません。 `$bvToast`インジェクションのみをインポートするには、`BVToastPlugin`プラグインを使用します。
• 新しい`$bvToast`インジェクション（mixin）は、各Vue仮想マシンインスタンス（つまり、各インスタンス化されたコンポーネント）に対して作成され、インスタンスの`this`および`$root`コンテキストにアクセスする必要があるため、`Vue.prototype`への直接アクセスを介して使用できません。
• `this.$bvToast.toast()`を介して生成されたトーストは、`this.$bvToast.toast()`メソッドを呼び出すVueインスタンスの子であり、そのVueインスタンス（つまり、コンポーネントまたはアプリ）も破棄された場合に非表示になり、破棄されます。 vmコンテキストが<router-view>内にあり、`$route`が変更された場合、トーストも破棄されます（<router-view>のすべての子が破棄されるため）。オンデマンドトーストをルーター`$route`の変更にわたって保持するには、代わりに`this.$root.$bvToast.toast()`を使用して、トーストの親をアプリのルートにします。
• トーストにはメッセージが必要です。メッセージが空のオンデマンドトーストは、サイレントに表示されません。

オプション

トーストには、スタイルと動作を制御できるさまざまなオプションがあります。オプションは、<b-toast>コンポーネントのプロパティと、`this.$bvToast.toast()`に渡されるオプションオブジェクトのプロパティの両方として使用できます。 `this.$bvToast.toast()`にオプションを渡す場合は、コンポーネントプロパティ名のキャメルケースバージョンを使用します。つまり、`no-auto-hide`ではなく`noAutoHide`を使用します。

タイトル

`title`オプションを使用して、トーストにタイトルを追加します。トースト`message`と同様に、タイトルは単純な文字列、またはVNodeの配列にすることができます。メッセージとタイトルとしてVNodeの配列を渡す例については、高度な使用方法セクションを参照してください。

透明度

トーストはデフォルトで半透明の背景を持ちます。デフォルトの透明度を無効にするには、solid プロパティを true に設定して、背景色からアルファチャンネルを削除します。

CSSファイルではなくSCSSファイルを使用する場合、BootstrapVueのカスタムSCSS変数 $b-toast-background-opacity を使用して透明度を変更することもできます。テーマ設定 リファレンスセクションを参照してください。

バリアント

BootstrapVueトーストは、カラーバリアントを定義するためのカスタムCSSを提供します。バリアントは、標準のBootstrap v4バリアント名に従います。カスタムSCSSで定義されたBootstrapカラースキームのバリアントがある場合、トーストのカスタムSCSSは自動的にトーストバリアントを作成します（テーマ設定 リファレンスセクションを参照）。

<template>
  <div>
    <b-button @click="makeToast()" class="mb-2">Default</b-button>
    <b-button variant="primary" @click="makeToast('primary')" class="mb-2">Primary</b-button>
    <b-button variant="secondary" @click="makeToast('secondary')" class="mb-2">Secondary</b-button>
    <b-button variant="danger" @click="makeToast('danger')" class="mb-2">Danger</b-button>
    <b-button variant="warning" @click="makeToast('warning')" class="mb-2">Warning</b-button>
    <b-button variant="success" @click="makeToast('success')" class="mb-2">Success</b-button>
    <b-button variant="info" @click="makeToast('info')" class="mb-2">Info</b-button>
  </div>
</template>

<script>
  export default {
    methods: {
      makeToast(variant = null) {
        this.$bvToast.toast('Toast body content', {
          title: `Variant ${variant || 'default'}`,
          variant: variant,
          solid: true
        })
      }
    }
  }
</script>

<!-- toast-variants.vue -->

トースターターゲット

BootstrapVueには、次の「組み込み」トースター名（およびSCSSで定義された関連スタイル）が付属しています。

• b-toaster-top-right（右上）
• b-toaster-top-left（左上）
• b-toaster-top-center（中央上）
• b-toaster-top-full（上部全体）
• b-toaster-bottom-right（右下）
• b-toaster-bottom-left（左下）
• b-toaster-bottom-center（中央下）
• b-toaster-bottom-full（下部全体）

<template>
  <div>
    <b-button @click="toast('b-toaster-top-right')" class="mb-2">b-toaster-top-right</b-button>
    <b-button @click="toast('b-toaster-top-left')" class="mb-2">b-toaster-top-left</b-button>
    <b-button @click="toast('b-toaster-top-center')" class="mb-2">b-toaster-top-center</b-button>
    <b-button @click="toast('b-toaster-top-full')" class="mb-2">b-toaster-top-full</b-button>
    <b-button @click="toast('b-toaster-bottom-right', true)" class="mb-2">b-toaster-bottom-right</b-button>
    <b-button @click="toast('b-toaster-bottom-left', true)" class="mb-2">b-toaster-bottom-left</b-button>
    <b-button @click="toast('b-toaster-bottom-center', true)" class="mb-2">b-toaster-bottom-center</b-button>
    <b-button @click="toast('b-toaster-bottom-full', true)" class="mb-2">b-toaster-bottom-full</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      toast(toaster, append = false) {
        this.counter++
        this.$bvToast.toast(`Toast ${this.counter} body content`, {
          title: `Toaster ${toaster}`,
          toaster: toaster,
          solid: true,
          appendToast: append
        })
      }
    }
  }
</script>

<!-- toast-targets.vue -->

注意事項

• CSSで定義されていないトースターターゲット名は、ドキュメントの下部にレンダリングされ、スタックされ、配置されません（<body> 内の <b-toaster> に追加され、クラス名とIDはトースターターゲット名に設定されます）。トースターのデフォルトスタイルは、z-index が 1100 であることだけです。
• アプリで同時に b-toaster-top-* トースター同士、または b-toaster-bottom-* トースター同士を使用しないでください。小さな画面（つまり、xs）では、通知が隠れたり重なったりする可能性があります。

前置と後置

トーストはデフォルトで、指定されたトースターに表示されているトーストの一番上に、作成された順に前置されます。新しいトーストを一番下に追加するには、append-toast プロパティを true に設定します。

自動非表示

auto-hide-delay プロパティ（値はミリ秒）を使用して自動非表示の遅延時間を変更します。デフォルトは 5000 です（最小値は 1000）。または、no-auto-hide プロパティを true に設定して、自動非表示機能を完全に無効にします。

自動非表示が有効になっている場合、トーストにマウスポインターを合わせると自動非表示タイマーが一時停止します。トーストからマウスポインターを外すと、自動非表示タイマーが再開されます。no-hover-pause プロパティを true に設定することで、この機能を無効にできます。

閉じるボタン

トーストには、デフォルトでユーザーがクリックすると非表示になる閉じるボタンがあります。no-close-button プロパティを true に設定すると、これが防止され、デフォルトの閉じるボタンのないトーストが作成されます。

一意のIDを指定し、this.$bvToast.hide(id) メソッドを使用して特定のトーストを非表示にすることで、トーストのカスタム閉じるボタンを作成することは可能です。

<template>
  <div>
    <b-button @click="showToast">Show Toast</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      showToast() {
        // Use a shorter name for `this.$createElement`
        const h = this.$createElement
        // Create a ID with a incremented count
        const id = `my-toast-${this.count++}`

        // Create the custom close button
        const $closeButton = h(
          'b-button',
          {
            on: { click: () => this.$bvToast.hide(id) }
          },
          'Close'
        )

        // Create the toast
        this.$bvToast.toast([$closeButton], {
          id: id,
          title: `Toast ${this.count}`,
          noCloseButton: true
        })
      }
    }
 }
</script>

<!-- toasts-advanced.vue -->

トーストのロール

トーストは、デフォルトの role 属性が 'alert'、aria-live 属性が 'assertive' でレンダリングされます。カジュアルな通知を目的としたトーストの場合は、is-status プロパティを true に設定します。これにより、role 属性と aria-live 属性がそれぞれ 'status' と 'polite' に変更されます。

詳細については、以下のアクセシビリティセクションをご覧ください。

リンク

必要に応じて、href プロパティと to プロパティを使用して、トースト本文をリンク（<a>）または <router-link>（または <nuxt-link>）に変換します。設定すると、トースト本文全体がリンクになります。

<template>
  <div>
    <b-button @click="toast()">Toast with link</b-button>
  </div>
</template>

<script>
  export default {
    methods: {
      toast() {
        this.$bvToast.toast(`Toast with action link`, {
          href: '#foo',
          title: 'Example'
        })
      }
    }
  }
</script>

<!-- toast-link.vue -->

<b-toast> コンポーネント

一度に1つだけのトーストを表示したいカスタムコンポーネントがある場合は、<b-toast>コンポーネントを使用します。<b-toast>コンポーネントは、カスタムコンポーネントまたはアプリのどこにでも配置でき、要素をレンダリングしません（レイアウトに影響を与えないコメントプレースホルダーノードをレンダリングします）。

トーストは、v-model（visibleプロパティに関連付けられています）を介して表示したり、コンポーネントのshow()およびhide()インスタンスメソッドを使用して表示したり、this.$bvToast.show(id)およびthis.$bvToast.hide(id)メソッドを介して表示したりできます（<b-toast>コンポーネントに一意のIDを設定する必要があります）。

トーストは、デフォルトでb-toaster-top-right <b-toaster>コンポーネントに配置されます。toasterプロパティで指定されたトースターは、ドキュメントにまだ存在しない場合、オンデマンドで作成されます。

staticプロパティをtrueに設定することにより、<b-toast>をドキュメント内に強制的に表示させることができます。トーストの表示と非表示は引き続き必要ですが、トースターコンポーネントに転送されません。

<template>
  <div>
    <b-button @click="$bvToast.show('my-toast')">Show toast</b-button>

    <b-toast id="my-toast" variant="warning" solid>
      <template #toast-title>
        <div class="d-flex flex-grow-1 align-items-baseline">
          <b-img blank blank-color="#ff5555" class="mr-2" width="12" height="12"></b-img>
          <strong class="mr-auto">Notice!</strong>
          <small class="text-muted mr-2">42 seconds ago</small>
        </div>
      </template>
      This is the content of the toast.
      It is short and to the point.
    </b-toast>
  </div>
</template>

<!-- toast-component.vue -->

スロット

• toast-title：デフォルトのタイトル要素を置き換えるコンテンツ。
• default：トースト本文のコンテンツ

どちらのスロットも、必要に応じて次のスコープでスコープされます

スロットは、<b-toast>コンポーネントを使用する場合にのみ使用できます。

<b-toaster> ターゲットコンポーネント

<b-toaster>コンポーネントは、トーストが表示されるコンテナ（*トースター*）を提供します。トースターには一意の名前が必要であり、トーストは特定の名前付きトースターに表示されるようにターゲットにすることができます。

ほとんどの場合、<b-toast>はドキュメントにない場合、リクエストされたトースター名で<b-toaster>コンポーネント（<body>に追加されます）を自動的に挿入するため、このコンポーネントを直接使用する必要はありません。ただし、アプリに明示的にトースターを配置する場合があります。

トースターのnameは、挿入されたコンテナのIDになり、レンダリングされたトースターコンテナのクラス名としても使用されます。

トースターの位置とトースター内のトーストの位置は、完全にCSSクラス（トースターの名前に基づく）によって制御されます

次の「組み込み」トースター名（および関連するスタイル）は、BootstrapVueのカスタムSCSSで定義されています

• b-toaster-top-right（右上）
• b-toaster-top-left（左上）
• b-toaster-top-center（中央上）
• b-toaster-top-full（上部全体）
• b-toaster-bottom-right（右下）
• b-toaster-bottom-left（左下）
• b-toaster-bottom-center（中央下）
• b-toaster-bottom-full（下部全体）

上記のトースターは、トーストをスタックされた（カラム形式）ビューポート内に固定して配置します（つまり、ビューポートのスクロール位置に関係なく、常に表示されます）。ビューポート画面に収まるよりも多くのトーストがある場合、他のトーストが閉じられる/非表示になるまで、一部は画面外に視覚的に隠されます。

<b-toast>は、デフォルトでb-toaster-top-rightトースターを使用します。

注意事項

• 同じ名前の<b-toaster>がすでにドキュメントに存在する場合（<b-toast>、this.$bvToast.toast()によって自動作成されたか、手動で配置された場合）、<b-toaster>は空の<div>要素をレンダリングし、コンソール警告を発行します。
• <b-toaster>コンポーネントを手動で配置する場合は、アプリのルート要素の一番下の最後の要素として配置してください。そうすることで、アプリのすべてのページで使用できるようになります。
• 破棄されたトースターは、トースター名に対してターゲット設定された新しいトーストが表示されると自動的に再作成されます。
• ほとんどの場合、必要に応じて自動的に生成されるため、アプリに<b-toaster>コンポーネントを手動で配置/作成する必要はありません。ただし、トースターのデフォルト設定をオーバーライドする必要がある場合は、ルートの変更によって破棄されない場所にトースターを配置してください。

高度な使用方法

トーストを生成するためにthis.$bvToast.toast(...)メソッドを使用する場合、トーストのコンテンツが単なる文字列メッセージ以上のものであることが望ましい場合があります。上記のオンデマンドトーストセクションで述べたように、より複雑なコンテンツのためにVNodesの配列をメッセージとタイトルとして渡すことができます。

トーストのコンテンツはシンプルで要点を絞ってください。インタラクティブなコンポーネントや要素をトースト内に配置しないでください。これは、支援技術のユーザーに問題を引き起こす可能性があります。以下のアクセシビリティセクションを参照してください。

以下は、より複雑なトーストコンテンツを生成するために、Vueのthis.$createElement()メソッドを使用する例です

<template>
  <div>
    <b-button @click="showToast">Show Toast with custom content</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      showToast() {
        // Use a shorter name for this.$createElement
        const h = this.$createElement
        // Increment the toast count
        this.count++
        // Create the message
        const vNodesMsg = h(
          'p',
          { class: ['text-center', 'mb-0'] },
          [
            h('b-spinner', { props: { type: 'grow', small: true } }),
            ' Flashy ',
            h('strong', 'toast'),
            ` message #${this.count} `,
            h('b-spinner', { props: { type: 'grow', small: true } })
          ]
        )
        // Create the title
        const vNodesTitle = h(
          'div',
          { class: ['d-flex', 'flex-grow-1', 'align-items-baseline', 'mr-2'] },
          [
            h('strong', { class: 'mr-2' }, 'The Title'),
            h('small', { class: 'ml-auto text-italics' }, '5 minutes ago')
          ]
        )
        // Pass the VNodes as an array for message and title
        this.$bvToast.toast([vNodesMsg], {
          title: [vNodesTitle],
          solid: true,
          variant: 'info'
        })
      }
    }
 }
</script>

<!-- toasts-advanced.vue -->

アラートとトースト

場合によっては、単純なアラートスタイルのメッセージ（つまり、Cookieの使用通知など）が必要になることがあります。このような場合、通常はトーストの代わりに、Bootstrapのユーティリティクラスといくつかのカスタムスタイルを<b-alert>コンポーネントに適用することで、固定位置のアラートを使用する方が適切です

<template>
  <div>
    <b-button size="sm" @click="showBottom = !showBottom">
      {{ showBottom ? 'Hide' : 'Show' }} Fixed bottom Alert
    </b-button>
    <b-alert
      v-model="showBottom"
      class="position-fixed fixed-bottom m-0 rounded-0"
      style="z-index: 2000;"
      variant="warning"
      dismissible
    >
      Fixed position (bottom) alert!
    </b-alert>

    <b-button size="sm" @click="showTop = !showTop">
      {{ showTop ? 'Hide' : 'Show' }} Fixed top Alert
    </b-button>
    <b-alert
      v-model="showTop"
      class="position-fixed fixed-top m-0 rounded-0"
      style="z-index: 2000;"
      variant="success"
      dismissible
    >
      Fixed position (top) alert!
    </b-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBottom: false,
      showTop: false
    }
  }
}
</script>

<!-- fixed-position-alerts.vue -->

ユーザーのビューポート内で固定位置を設定するために、クラス position-fixed を使用し、ビューポートの下部または上部にアラートを配置するために、クラス fixed-bottom または fixed-top を使用します。クラス m-0 はアラート周りのデフォルトのマージンを削除し、rounded-0 はデフォルトの角丸を削除します。また、アラートがページ上の他のコンテンツよりも上に表示されるように、z-index を大きな値に設定します (fixed-top と fixed-bottom のデフォルトは 1030 です)。特定のレイアウトに合わせて z-index を調整する必要がある場合があります。

アラートのマークアップは、<b-alert> コンポーネントを配置したDOM内に残るため、スクリーンリーダーとキーボードのみを使用するユーザーは、タブシーケンス（閉じるボタンにアクセスするため）に簡単にアクセスできます。

アクセシビリティ

トーストは、訪問者またはユーザーに対する**小さな中断**を意図しています。そのため、スクリーンリーダーや同様のアシスティブテクノロジーを使用するユーザーを支援するために、トーストはaria-liveリージョンでラップされます。ライブリージョンへの変更（トーストコンポーネントの挿入/更新など）は、ユーザーのフォーカスを移動したり、ユーザーを中断したりすることなく、スクリーンリーダーによって自動的にアナウンスされます。さらに、aria-atomic="true" が自動的に設定され、トースト全体が常に単一の（アトミックな）ユニットとしてアナウンスされるようになります。変更された内容がアナウンスされることはありません（トーストの内容の一部のみを更新する場合、または後で同じトーストの内容を表示する場合に問題が発生する可能性があります）。

ユーザーのウィンドウの下部または上部に表示される単純なメッセージが1つだけ必要な場合は、固定位置の <b-alert> を代わりに使用してください。

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

通常、トーストメッセージには、ユーザーの操作を**必要としない**、1行または2行の重要でないメッセージが表示されます。特別な対策を講じなければ、トーストには、障害のあるユーザーと障害のないユーザーの両方に影響を与える可能性のある、多くのアクセシビリティの問題が発生する可能性があります。次のリストは完全ではありませんが、トーストを使用する際の一般的なガイドラインを提供します。

• 必要な情報がプロセスにとって重要である場合（たとえば、フォームのエラーリストの場合）、<b-toast> の代わりに <b-alert> コンポーネントを使用してください。
• <b-toast> は、デフォルトで、属性 role を 'alert' に、aria-live を 'assertive' に設定します。エラーなどの重要なメッセージの場合は、このデフォルト設定が適切です。そうでない場合は、プロパティ is-status を true に設定します。これにより、属性 role が 'status' に、aria-live が 'polite' に変更されます。
• ページの読み込み時にトーストメッセージがポップアップ表示されないようにしてください。ページの読み込み時に予期しないアクションを実行すると、スクリーンリーダーのユーザーは非常に混乱します。ページの読み込み時またはルートの変更時にトーストが必要な場合は、トーストの表示を数秒遅らせて、スクリーンリーダーがトーストによって中断されることなく現在のページに関する情報のアナウンスを完了できるようにします。
• プロパティ no-auto-hide を true に設定する場合は、ユーザーがトーストを閉じることができるように、閉じるボタンが必要です。プロパティ no-close-button も true に設定している場合は、独自の閉じるボタンを提供するか、他の方法でトーストを閉じる必要があります。トーストのタブインデックスは 0 なので、キーボードのみを使用するユーザーがアクセスできます。
• スクリーンリーダーが現在のトーストの読み取りを中断して新しいトーストをアナウンスし、前のトーストのコンテキストが失われる可能性があるため、短時間に多くのトーストを開始することは避けてください。
• テキストコンテンツが長いトーストの場合は、auto-hide-delay をより長いタイムアウトに調整して、ユーザーがトーストのコンテンツを読み取ることができるようにします。平均的な人は1分間に約200語を読むため、メッセージを表示しておくのに適した時間は5秒+単語あたり300ミリ秒です。ベストプラクティスとして使用すべき最短のデフォルトは5秒（5000ms）です。妥当なデフォルトのタイムアウトに加えて、ユーザーがトーストの表示時間を選択できるようにすることもできます。ほとんどの人は、自分が速い読者か遅い読者かを本能的に理解しています。ユーザーログインの一部であるプロファイル設定を使用すると、遅い読者はメッセージが速すぎる場合に長い時間を選択でき、速い読者はメッセージが長すぎる場合に短い時間を選択できます。
• 記憶喪失や注意散漫、ADHDなどの障害関連の問題を考慮に入れるため、ベストプラクティスは、ユーザーが過去に表示されたトーストメッセージのリストを参照できる場所を実装することです。できれば、このリストはソート可能で、デフォルトは時系列順にする必要があります。

Internet Explorerのスクリーンリーダーのサポート

残念ながら、NVDA または JAWS スクリーンリーダーで使用されるIE 11は、トーストが表示されたときに正しくアナウンス/音声化しません。IE 11を使用している視覚障碍のあるユーザーベースが多数いる場合は、トーストを表示するだけでなく、トーストメッセージテキストのコピーが動的に配置される、IE 11ブラウザ専用のオフスクリーン aria-live リージョン（ページの読み込み時に作成）を作成することをお勧めします。