Skip to content

テクニック SCR14:不可欠ではないアラートの表示を任意にするために、スクリプトを使用する

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、緊急ではない情報提供のアラートにスクリプトを使用するウェブコンテンツ技術に適用される。

解説

このテクニックの目的は、株価アラートコンポーネントにおける変更を、通知するかどうかを切り替えることである。デフォルトでは、株価が変動すると、スクリーンリーダーによって変更が通知される。これは一部の利用者にとって煩わしい場合があるため、利用者が通知のオン又はオフを切り替えられるボタンが用意されている。

このテクニックでは、aria-live プロパティを用いて株価コンポーネントをライブリージョンにして、aria-atomic プロパティを用いて、株価が更新された際に更新された部分だけでなくコンポーネントのコンテンツ全体を読み上げるようスクリーンリーダーに指示する。このデモでは、株価は 10 秒ごとに更新される。通知がオンの場合、aria-live プロパティは assertive に設定され、オフの場合は off に設定される。通知の制御に使用される二つのボタンは、aria-pressed プロパティ (true 又は false に更新される) を用いて、どのボタンが押されているかをスクリーンリーダーの利用者に伝え、それによってスクリーンリーダーが株価の更新を読み上げるかどうかが決まる。実際には、ページに複数回の訪問があっても設定が維持されるよう、コンテンツ制作者は利用者のプリファレンスを保存するためのクッキー (又は同等のもの) の設定を検討すべきである。

事例

事例 1: 株価更新アラートに関するスクリーンリーダーの設定を変更する

以下のスクリプトは、aria-live コンポーネント内の株価を 10秒 ごとに更新する。利用者が「Turn Announcements Off」ボタンを押すと、株価が変動した際のスクリーンリーダーによる通知が停止する。「Turn Announcements On」ボタンを押すと、通知が再開する。

JavaScript

<script>
document.addEventListener("DOMContentLoaded", function (e) {
  const stockBox = document.querySelector("#stock-box");
  const stockMovement = document.querySelector("#stock-movement");
  const onBtn = document.querySelector("#live-on");
  const offBtn = document.querySelector("#live-off"); 
  const stocks = new Array("stock went down", "stock stayed the same", "stock went up");
  let loopCount = 0;	
		
  onBtn.addEventListener("click", modifyLive, false);
  offBtn.addEventListener("click", modifyLive, false);
		
  function modifyLive(e){
    let elm = e.currentTarget;
    let liveState = elm.getAttribute("id");
    if (liveState === "live-off"){
      stockBox.setAttribute("aria-live", "off");
      onBtn.setAttribute("aria-pressed", "false");
      offBtn.setAttribute("aria-pressed", "true");
    }
    else{
      stockBox.setAttribute("aria-live", "assertive");
      onBtn.setAttribute("aria-pressed", "true");
      offBtn.setAttribute("aria-pressed", "false");      
    }
  }
		
  setInterval(() => {
    if(loopCount >2){
      loopCount = 0;
    }
    stockMovement.innerHTML = stocks[loopCount];
      loopCount++;
    }, 10000)
  });
</script>

HTML

<body>
  <h1>Turbo Encabulator Stock Information</h1>	
  <div id="stock-box" aria-atomic="true" aria-live="assertive">
    <span>Turbo Encabulator Stock Price: </span>
    <span id="stock-movement">stock went up</span>
  </div>
  <p>Use the buttons to toggle screen reader announcements of stock changes:</p>
  <div>
    <button aria-pressed="true" id="live-on" type="button">
     Turn Announcements On</button>
    <button aria-pressed="false" id="live-off" type="button">
     Turn Announcements Off</button>
  </div>
</body>

このコードの動作例: Demonstration of toggling ARIA alerts

検証

手順

緊急ではない中断をサポートするウェブページにおいて:

  1. ウェブページを読み込んだとき、緊急ではないアラートが表示されないことを確認する。
  2. 緊急ではない中断を有効化および無効化するメカニズムがあることを確認する。

期待される結果

  • 緊急ではない中断をサポートするウェブページでは、チェック 1 及び 2 が真である。
Back to Top