画面右下にスライドインする通知トースト。role="status"で支援技術にも伝え、prefers-reduced-motionでは動きなしで表示します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
position: fixed と inset で右下に固定し、出現は @keyframes で「少し下＋透明」から現在位置へ戻すスライドインにしています。toが省略されているのは「要素本来の状態へ戻る」というCSSアニメーションの仕様を利用した書き方です。role="status" を付けると、表示された時点でスクリーンリーダーが内容を読み上げます（割り込みの強いrole="alert"はエラー用に取っておきます）。
実運用では「JSで要素を追加→数秒後に削除」の管理が必要です。複数同時に出す場合は縦に積むコンテナを用意します。
右下にスライドインするトースト通知を作ってください。position: fixedとinsetで配置、@keyframesで下からのフェードイン、role="status"の付与、prefers-reduced-motionでのアニメーション無効化も含めてください。