WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

FLASH18: Flash で自動的に再生される音声をオフにするコントロールを提供する

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

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

適用(対象)

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

ユーザエージェント及び支援技術によるサポート

FLASH18 に関するユーザエージェントサポートノート (英語)を参照のこと。Flash テクノロジーノートも参照。

解説

この実装方法の目的は、Flash ムービーの読み込み時に自動的に開始される音声を、利用者がオフにできるようにすることである。音声をオフにするコントロールは、利用者が素早く簡単に見つけられるようにページの先頭近くに置く必要がある。これは、スクリーンリーダー、画面拡大ソフト、スイッチメカニズムなどの支援技術を利用する利用者にも利用しない利用者(認知障害、学習障害、言語障害のある利用者)にも役立つ。

この実装方法では、自動的に再生される音声を利用者がオフにできるようにするコントロールをコンテンツ制作者が実装する。アクセシビリティを最大化するためには、 Flash ムービーではなく HTML 文書にコントロールを追加する。HTML コントロールは、ExternalInterface クラスを通じて Flash ムービーと通信する。つまり、利用者は Flash コンテンツを操作しなくても、音声の再生を制御できるということである。実際のコンテンツでこの方法が適していない場合は、Flash コンテンツの内部にコントロールを配置することができる。その場合、このコントロールはキーボードで操作できるようにし、またタブ順序と読み上げ順序の最初に配置し、再生中の音声をオフにできることを明確に示すラベルを付ける。

事例

事例 1: Flash 内に音声を停止するボタンを提供する

この事例は、利用者が音声の再生を停止できるように Flash ムービーの内部にボタンを実装する方法を示している。ムービーがロードされると自動的に mp3 ファイルの再生を開始する、SoundHandler というクラスが作成される。

コード例:

package wcagSamples {
  import flash.display.Sprite;
  import flash.net.URLRequest;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  
  import fl.controls.Button;
  import fl.accessibility.ButtonAccImpl;
  
  import flash.events.MouseEvent;
  public class SoundHandler extends Sprite {
    private var snd: Sound = new Sound();
    private var button: Button = new Button();
    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast\
      /csbu_dev_podcast_epi_2.mp3");
    private var channel: SoundChannel = new SoundChannel();
    
    public function SoundHandler() {
      ButtonAccImpl.enableAccessibility();
      button.label = "Stop Sound";
      button.x = 10;
      button.y = 10;
      button.addEventListener(MouseEvent.CLICK, clickHandler);
      this.addChild(button);
      snd.load(req);
      channel = snd.play();
    }
    private function clickHandler(e: MouseEvent): void {
      if (button.label == "Stop Sound") {
        button.label = "Start Sound";
        channel.stop();
      } else {
        channel = snd.play();
        button.label = "Stop Sound";
      }
    }
  }
}

この実例は、Flash 内に音声を停止するボタンを提供するのサンプル(英語)で確認できる。また、Flash 内に音声を停止するボタンを提供するのソース(英語)をダウンロードすることもできる。

事例 2: Flash オブジェクトの前に音声を停止するボタンを提供する

ムービーがロードされると自動的に mp3 ファイルの再生を開始する、SoundHandler というクラスが作成される。HTML のボタンは、Flash ムービーを含む HTML 文書に配置される。このボタンをクリックすると、Flash Player JavaScript API を通じて HTML ページと Flash ムービーの間でアクションが通知され、その結果として SoundHandler クラスの toggleSound メソッドが呼び出される。

事例 2 の ActionScript 3.0 のコード

コード例:

package wcagSamples {
  import flash.display.Sprite;
  import flash.external.ExternalInterface;
  import flash.net.URLRequest;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  
  import flash.events.MouseEvent;
  public class SoundHandler extends Sprite {
    private var snd: Sound = new Sound();
    private var soundOn: Boolean = true;
    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast/\
      csbu_dev_podcast_epi_2.mp3");
    private var channel: SoundChannel = new SoundChannel();
    
    public function SoundHandler() {
      if (ExternalInterface.available)
      ExternalInterface.addCallback("toggleSound", this.toggleSound);
      snd.load(req);
      channel = snd.play();
    }
    
    private function toggleSound(enable: Boolean): void {
      if (! enable) {
        channel.stop();
        soundOn = true;
      } else {
        channel = snd.play();
        soundOn = true
      }
    }
  }
}

事例 2 の HTML コード

コード例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Flash Sound Toggle example</title>
    <script src="swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    
    swfobject.embedSWF("html_control_to_toggle_audio_as3.swf", 
      "flashPlaceHolder", "0", "0", "8");
    function init() {
            var soundOn = true;
            $("soundToggle").onclick = function(event){
                soundOn = !soundOn;
                $("flashPlaceHolder").toggleSound(soundOn);
                event.target.value = soundOn ? "Stop Sound" : "Start Sound";
            };
    }
    window.onload = init;
</script>

  </head>
  <body id="header">
    <h1>Flash Automatic Sound Demo</h1>
    <p>This page contains a Flash movie that automatically starts
      playing sound. Use the button below to stop or start the
      sound</p>
    <input id="soundToggle" type="button" value="Stop Sound"/>
    <p id="flashPlaceHolder">Flash needs to be installed for this
      example to work</p>
  </body>
</html>

この実例は、Flash オブジェクトの前に音声を停止するボタンを提供する」のサンプル(英語)で確認できる。また、Flash オブジェクトの前に音声を停止するボタンを提供する」のソース(英語)をダウンロードすることもできる。

検証

チェックポイント

ロード後に自動的に音声の再生を開始する Flash ムービーについて:

  1. ドキュメントのタブ順序の先頭にアクセシブルな HTML コントロールが配置されている。

  2. HTML ベースのコントロールがない場合は、Flash ムービーのタブ順序の先頭にアクセシブルなコントロールが配置されている。

  3. HTML コントロールまたは Flash ベースのコントロールを操作する。

  4. 音声の再生が停止される。

判定基準

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