WCAG 2.0 実装方法集

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

-

FLASH9: 収録済みの同期したメディアにキャプションを提供する

適用(対象)

Adobe Flashをベースにしたコンテンツ

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

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

ユーザーエージェントによるサポートに関する全般的な情報は、Flashのユーザーエージェントによるサポートを参照のこと。

解説

この実装方法の目的は、聴覚障害のあるユーザーや同期したメディア内の音声や会話を聞くことが困難な利用者が、音声情報の代替手段としてキャプションを見るように選択できるオプションを提供することである。この実装方法では、すべての会話と重要な音がテキストとして提供されるが、それらのテキストは利用者が要求した場合以外は表示されない。結果として、必要な場合にのみ表示される。これは、FLVPlayback コンポーネントと FLVPlaybackCaptioning コンポーネントを使用して実現できる。注記:FLVPlayback のスキンを使用すると、クローズドキャプションボタンがデフォルトでアクセシブルになる。ただし、カスタムスキンを実装する場合は、クローズドキャプションボタンがアクセシブルかどうかをコンテンツ制作者がテストする必要がある。

事例

事例 1: Timed Textのキャプションファイルを Flash に追加する

  1. 外部ツール(Magpie やシンプルなテキストエディタなど)を使用して、Timed Textを用いたキャプションの XML ファイルを作成する。ビデオコンテンツを停止して再生し、音声情報の適切な部分(会話、重要な背景音、イベントサウンドなど)ごとに開始と終了のタイムコードおよび代替テキストを挿入する。Magpie のようなツールにはこの作業を簡単に行うことができる高度な機能がある。これに対し、テキストエディタでは次のキャプション文書の例に示すようにメディアプレーヤーからタイムコードを読み取って XML に含める必要がある。

  2. Flash では、ステージに FLVPlayback コンポーネントの新しいインスタンスを作成し、[コンポーネントインスペクタ]パネルまたは[パラメータ]パネルを使用して contentPath 値を flv ビデオファイルに設定する。

  3. CC(クローズドキャプション)ボタンを含むスキンを使用するように「Skin」パラメータを設定する。

  4. さらに、コンポーネントのリストから FLVPlayback キャプションコンポーネントのインスタンスを作成する。[コンポーネントインスペクタ]パネルで、「Source」パラメータをTimed TextのXMLファイルの名前に設定する。キャプションは、プレーヤーのフレームの下部に自動的に配置される。

コード例:

<?xml version="1.0" encoding="UTF-8"?>

<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="defaultSpeaker" tts:backgroundColor="black"
        tts:color="white" tts:fontFamily="SansSerif" tts:fontSize="12"
        tts:fontStyle="normal" tts:fontWeight="normal"
        tts:textAlign="left" tts:textDecoration="none"/>
      <style id="defaultCaption" tts:backgroundColor="black"
        tts:color="white" tts:fontFamily="Arial" tts:fontSize="12"
        tts:fontStyle="normal" tts:fontWeight="normal"
        tts:textAlign="center" tts:textDecoration="none"/>
    </styling>

  </head>
  <body id="thebody" style="defaultCaption">
    <div xml:lang="en">
      <p begin="0:00:00.20" end="0:00:02.20">If there were nothing in
        our universe</p>
      <p begin="0:00:02.20" end="0:00:05.65">the fabric of space-time
        would be flat.</p>

      <p begin="0:00:05.65" end="0:00:08.88">But add a mass, and
        dimples form within it.</p>
      <p begin="0:00:16.61" end="0:00:19.84">Smaller objects that
        approach that large mass</p>
      <p begin="0:00:19.84" end="0:00:23.41">will follow the curve in
        space-time around it.</p>
      <p begin="0:00:32.64" end="0:00:36.84">Our nearest star, the
        sun, has formed such a dimple</p>

      <p begin="0:00:36.84" end="0:00:38.00">and our tiny planet
        Earth</p>
      <p begin="0:00:38.00" end="0:00:41.50">goes along for the ride
        in the curve of its dimple</p>
      <p begin="0:00:41.50" end="0:00:43.80">staying in orbit around
        the sun.</p>
      <p begin="0:00:45.67" end="0:01:55.00"/>

    </div>
  </body>
</tt>

この実例は、「Timed Textのキャプションファイルを Flash に追加する」のサンプル(英語)で確認できる。また、「Timed Textのキャプションファイルを Flash に追加する」のサンプルをダウンロードすることもできる。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines

http://www.buraks.com/captionate/

http://www.w3.org/AudioVideo/TT/

検証

チェックポイント

Flash ムービーで表示されるすべてのビデオコンテンツを見て、次のことを確認する。

  1. すべての音声コンテンツでキャプションを利用でき、デフォルトまたはユーザー環境設定によってオンになる。

  2. ビデオに含まれるすべての音声情報がキャプションで適切に説明されている。

判定基準

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

日本語訳における注記:

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