WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、メッセージ (アラート) を含むダイアログを利用者に表示することである。アラートが表示されたとき、それがフォーカスされると、利用者はそれを閉じるためにダイアログのOKボタンを押さなければならない。これらのアラートにフォーカスが移ってしまうと、特に、緊急ではない情報に使用されたとき、利用者の気が散ってしまうかもしれない。今日の名言、役に立つ小技、又は特定のイベントまでのカウントダウンなど、緊急ではない目的のアラートは、利用者がウェブページに提供された選択肢でそれらを有効にすることなしには現れないようにする。

この達成方法では、アラートを表示するかどうかの利用者の選択を保存するJavaScriptのグローバル変数に割り当てる。初期値は false にする。 ラッパー関数は、アラートを表示する前にこの変数の値をチェックするために作成される。alert() 関数を直接呼び出すよりもむしろ、アラートを表示するすべての呼び出しをこのラッパー関数にかけるようにする。ページの上部には、ページでのアラートの表示を利用者が有効にするためのボタンを提供する。この達成方法は訪問ベースで1回の訪問ごとに作動する。ページが読みこまれるたび、アラートは無効にされ、利用者は手動でそれらを有効にしなければならない。あるいは、コンテンツ制作者は、利用者の選択をセッションを越えて保存するためにクッキーを使用することができる。

事例

事例 1

以下のスクリプトは、利用者が「アラートを利用する」というボタンを選択するなら、10 秒ごとにアラートボックスに名言を表示する。利用者は再び「アラートを利用しない」を選択することで、名言のアラートボックスを非表示にすることができる。

コード例:


<script type="text/javascript">
var bDoAlerts = false;  // アラートを表示するかどうか指定するグローバル変数
/* アラートを有効/無効にする関数。
 * param ブーリアン型 bOn - trueでアラートを有効、falseで無効。
*/
function modifyAlerts(isEnabled) {
   bDoAlerts = isEnabled;
}
/* アラート表示のラッパー関数。bDoAlertsの値をチェックし
* bDoAlertsがtrueのときに alert() 関数を呼び出すだけ。
*/
function doAlert(aMessage) {
    if (bDoAlerts) {
       alert(aMessage);
    }
}
// 例 - 名言を表示するループ。
var gCounter = -1;  // カウンタを保存するグローバル変数
// quotes変数は名言のリストで初期化される
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
   if (++gCounter &amp;gt;= quotes.length) {★「&amp;gt;」は「>」ではないでしょうか?★
     gCounter = 0;
   }
   doAlert(quotes[gCounter]);
   setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>

ページの本文内には、アラートを有効にしたり無効する方法を含める。以下はひとつの例である:

コード例:


<body>
<p>アラートボックスを使用した名言の表示を有効にするには、以下のボタンを押してください。<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
アラートを利用する</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
アラートを利用しない</button></p>

このコードを実装したサンプル: アラートの実装例

検証

チェックポイント

JavaScript を使用した緊急ではないアラートをサポートするウェブページにおいて:

  1. ウェブページを読み込んだ際、緊急ではないアラートが表示されない。

  2. 緊急ではないアラートを有効にするメカニズムがある。

  3. 緊急ではないアラートを有効にすると、アラートが表示される。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。