content/patterns/alert/alert-pattern.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>アラート パターン</title>

    <!-- Core JS and CSS shared by all patterns -->
    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
    <link rel="stylesheet" href="../../shared/css/core.css">
    <script src="../../shared/js/highlight.pack.js"></script>
    <script src="../../shared/js/app.js"></script>
    <script src="../../shared/js/skipto.js"></script>
  </head>
  <body>
    <main>
      <h1>アラート パターン</h1>
      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

      <section id="about">
        <h2>このパターンについて</h2>
        <p>
          <a class="role-reference" href="#alert">アラート</a>は、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。動的にレンダリングされたアラートは、ほとんどのスクリーンリーダーで自動的にアナウンスされ、一部のオペレーティングシステムでは、アラート音が鳴る場合があります。現時点でスクリーンリーダーは、ページの読み込みが完了する前にページ上に存在するアラートを、利用者に通知しないことに注意することが重要です。
        </p>
        <p>
          アラートは、重要かつ一刻を争うかもしれない情報を、利用者の作業継続を妨げることなく提供することを目的としているため、キーボードフォーカスに影響を与えないようにすることが非常に重要です。<a href="../alertdialog/alertdialog-pattern.html">アラートダイアログ パターン</a>は、ワークフローを中断する必要がある状況のために設計されたものです。
        </p>
        <p>
          アラートが自動的に消えるように設計しないことも重要です。あまりにも早く消えるアラートは、<a href="https://waic.jp/translations/WCAG21/Understanding/no-timing.html">WCAG 2.1 達成基準 2.2.3</a> を満たすことができなくなる可能性があります。アラートによる割り込みの頻度も重要な設計上の考慮事項です。頻繁な割り込みは、視覚や認知に障害を持つ人々の利用性を阻害するため、<a href="https://waic.jp/translations/WCAG21/Understanding/interruptions.html">WCAG 2.1 達成基準 2.2.4</a> の要件を満たすことが難しくなります。
        </p>
      </section>

      <section id="examples">
        <h2>例</h2>
        <p><a href="examples/alert.html">アラートの例</a></p>
      </section>

      <section id="keyboard_interaction">
        <h2>キーボードの操作</h2>
        <p>該当なし。</p>
      </section>

      <section id="roles_states_properties">
        <h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
        <p>ウィジェットは <a class="role-reference" href="#alert">alert</a> ロールを持っています。</p>
      </section>
    </main>
  </body>
</html>