アラート
component操作の結果やお知らせを、ページの中に埋め込んで伝えるメッセージ表示です。成功・警告・エラーなど内容に応じて色とアイコンが変わります。
5 つのテーマ
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
バリエーション
タイトルのみ / 補足のみ / 閉じるボタン付き
保存しました
スマートフォンをお持ちでない場合は、お問い合わせからご連絡ください。別の方法をご案内します。
送信に失敗しました
時間をおいて再度お試しください。
機能
このコンポーネントの用途
操作の結果やお知らせをページ内に埋め込んで伝えるメッセージ。テーマで意味を表す。
画面を覆って操作を止めたいなら alert ではなく modal。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓内容に応じてテーマを選ぶ（成功=success / エラー=negative / 注意=warning / 情報=info）。
- ✓閉じられるようにするなら alert-close を付ける。
NG
- ✕一時表示のトースト代わりに使わない → alert はページ内常設メッセージ。
- ✕テーマを色の好みで選ばない → 意味（成功/エラー等）に合わせる。
内容に合ったテーマを選ぶ
意味と色の一致送信に失敗しました
時間をおいて再度お試しください。
エラーは negative、成功は success…と内容にテーマを合わせる。アイコン＋文言でも意味が伝わる。
<div class="alert alert-negative">…送信に失敗しました…</div>
送信に失敗しました
時間をおいて再度お試しください。
エラー内容に success（緑・チェック）を使わない。色・アイコンと文言が矛盾し混乱を招く。
<div class="alert alert-success">…送信に失敗しました…</div> <!-- 不一致 -->
アラートのアクセシビリティ
色だけでなくアイコン＋文言で意味を伝えます。動的に表示する通知は role="status"／role="alert"（aria-live）でフォーカスを移さずに読み上げます（WCAG 4.1.3）。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
意味は色だけでなくアイコン＋文言で伝える。各テーマは本文とのコントラストを確保。
文字は rem / トークンで拡大に追従。長文でも折り返して欠けない。
閉じるボタンは Tab／Enter で操作でき、フォーカスリングが出る。
動的表示は role="status"（穏やか）／role="alert"（緊急）で、フォーカスを奪わずに読み上げる。閉じるボタンは aria-label="閉じる"。
DS が担保する機能
追加実装なしで満たされる
- ✓各テーマに固有アイコン＋色＋文言（色だけに依存しない）
- ✓本文・アイコンのコントラストを確保
- ✓閉じるボタン（
alert-close）はキーボード操作＋フォーカスリング
実装時の必須対応
プロダクト側で担保する
- !動的に挿入する通知に
role="status"（成功・情報）／role="alert"（エラー・警告）を付ける - !内容に合うテーマを選び、色と文言を一致させる
- !閉じられる場合は
alert-closeにaria-label="閉じる" - !一時表示のトースト代わりに使わない（alert はページ内常設メッセージ）
テスト方法
スクリーンリーダー / 自動チェック
- SR動的に挿入された瞬間、フォーカスを移さずにメッセージが読み上げられる（
role/aria-live） - 操作グレースケール表示でもアイコンと文言で意味が分かる
- 自動axe / Lighthouse で
role・閉じるボタン名・コントラストを確認
動的に出す通知は role / aria-live で伝える
達成基準：WCAG 4.1.3 ステータスメッセージ
保存しました
成功・情報は role="status"、エラー・警告は role="alert"。フォーカスを奪わず読み上げる。
<div class="alert alert-success" role="status">…保存しました</div> <div class="alert alert-negative" role="alert">…送信に失敗</div>
保存しました
role が無いと、後から挿入しても SR 利用者に気づかれない。
<div class="alert alert-success">…保存しました</div> <!-- role なし -->