WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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

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

ユーザーエージェントによるサポートに関する全般的な情報は、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. 音声の再生が停止される。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。