アラート
component操作の結果やお知らせを、ページの中に埋め込んで伝えるメッセージ表示です。成功・警告・エラーなど内容に応じて色とアイコンが変わります。
5 つのテーマ
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
インフォメーションタイトル
補足分が入ります。
バリエーション
タイトルのみ / 補足のみ / 閉じるボタン付き
保存しました
スマートフォンをお持ちでない場合は、お問い合わせからご連絡ください。別の方法をご案内します。
送信に失敗しました
時間をおいて再度お試しください。
テキストリンク
本文の中のリンクは .link のまま置く。色は本文と同じ色に自動で合い（緑にならない）、下線と太字で本文と区別できる。link-neutral などの色の指定は要らない。リンクの文言だけで行き先・操作が分かるようにする（「詳しくはこちら」にしない）
メンテナンスのお知らせ
10 月 5 日 2:00〜4:00 は一部の機能が使えません。メンテナンスの日程
本人確認が完了しました
案件への問い合わせができるようになりました。案件を探す
入力内容を確認してください
メールアドレスの形式が正しくありません。メールアドレスを直す
有効期限が近づいています
掲載は 10 月 31 日に終了します。掲載を延長する
新しい機能が使えます
表の並べ替えと絞り込みに対応しました。並べ替えと絞り込みの使い方
<div class="alert alert-negative"> … <p class="alert-body">メールアドレスの形式が正しくありません。<a class="link" href="#email"><span class="link-label">メールアドレスを直す</span></a></p> </div>
機能
このコンポーネントの用途
操作の結果やお知らせをページ内に埋め込んで伝えるメッセージ。テーマで意味を表す。
ページ全体に向けた常設のお知らせ・しばらく残す通知の置き場所。
操作した場所の直近で結果だけを短く伝えるなら inline-message、画面を覆って操作を止めたいなら modal。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓内容に応じてテーマを選ぶ（成功=success / エラー=negative / 注意=warning / 情報=info）。
- ✓閉じられるようにするなら alert-close を付ける。
- ✓本文の中のテキストリンクは <a class="link"><span class="link-label">…</span></a> のまま置く。色は本文と同じ色に 自動で合い、下線と bold で本文と区別できる。link-neutral 等の色の指定は要らない。
NG
- ✕一時表示のトースト代わりに使わない → alert はページ内常設メッセージ。時間で消える通知は DS に無く、操作直近の結果は inline-message で残す。
- ✕テーマを色の好みで選ばない → 意味（成功/エラー等）に合わせる。
- ✕アラートの中のリンクに text-* で色を付けない → アラートの文字色に合わせる既定を崩す。
- ✕リンクの文言を「詳しくはこちら」「詳細」にしない → リンクだけ読んでも行き先・操作が分かる文言にする （「メンテナンスの日程」「メールアドレスを直す」）。スクリーンリーダーはリンクだけを一覧にして移動できる。
内容に合ったテーマを選ぶ
意味と色の一致送信に失敗しました
時間をおいて再度お試しください。
エラーは 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 なし -->