WCAG 2.0 実装方法集

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

-

SM11: SMIL 1.0で同期したテキストストリームによるキャプションを提供する

適用(対象)

SMIL 1.0

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

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

SMIL 1.0でキャプションを示す世界共通の標準フォーマットは存在しない。さまざまなユーザーエージェントが、さまざまなキャプションのフォーマットをサポートしている。キャプションのテキストストリームには、テキストストリームのsrc引数として、サポートされているフォーマットのファイルが提供されなければならない。

QuickTimeは、QTTextキャプションファイルをサポートしている。RealPlayer や GRiNSなどのRealベースのプレーヤーは、RealTextキャプションファイルをサポートしている。WindowsMediaは、SAMIファイルをサポートしているが、SMILをサポートしていない。Flashは、特定のファイル形式をサポートしていないが、XMLベースのキャプションファイルを解析することが可能でああり、実際にFLVPlaybackコンポーネントのSMILに対するサポートは、movie/server urlのようなパラメータ又は<switch>タグで指定されたmulti-bandwidthを検出するようになっている。

解説

この実装方法の目的は、耳の聞こえない利用者や視聴覚素材の会話の聞き取りが困難な利用者が、その素材を見て理解できるようにすることである。この実装方法では、会話と重要な音をすべて、画面上のキャプション領域に表示されるテキストストリームで提供する。

SMIL 1.0では、映像とキャプションに別々の領域を定義することができる。キャプションと映像の再生は同期されて、キャプションのテキストが画面上のある領域に表示される間、それに対応する映像が別の領域に表示される。

事例

事例 1: Quicktimeプレーヤー向けのSMIL 1.0のキャプションの例

コード例:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
  xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
  <head>
    <layout>
      <root-layout width="320" height="300" background-color="black"/>
      <region top="0" width="320" height="240" left="0" background-color="black" 
      id="videoregion"/>
      <region top="240" width="320" height="60" left="0" background-color="black" 
      id="textregion"/>
    </layout>
  </head>
  <body>
    <par>
      <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
      alt="Sales Demo"/>
      <textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt" 
      alt="Sales Demo Captions"/>
    </par>
  </body>
</smil>
		

事例 2: RealMediaプレーヤー向けのSMIL 1.0のキャプションの例

コード例:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="310" width="330"/>
      <region id="video" background-color="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" background-color="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <textstream src="salesdemo_cc.rt" region="captions" 
      system-captions="on" title="captions" 
      alt="Sales Demo Captions"/>
    </par>
  </body>
</smil>
		

この例は、<video> 及び <code><![CDATA[<textstream> タグを1個ずつ含んだ <par> セグメントを示している。system-captions属性は、利用者の使っているプレーヤーのキャプション設定がキャプションの表示を選択している場合のみ、テキストストリームを表示すべきであることを示している。<layout> のセクションは、映像及びキャプションに使用する領域を定義している。

事例 3: 内部テキストストリームを伴ったSMIL 1.0のキャプションの例

コード例:


<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="310" width="330"/>
      <region id="video" background-color="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" background-color="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <text src="data:,This%20is%20inline%20text." region="captions" begin="0s" 
      dur="3" alt="Sales Demo Captions">
        <param name="charset" value="iso-8859-1"/>
        <param name="fontFace" value="System"/>
        <param name="fontColor" value="yellow"/>
        <param name="backgroundColor" value="blue"/>
      </text>
    </par>
  </body>
</smil>
		

この例は、同期したテキストストリームをSMILファイル内に有する <text> 要素を示している。

参考リソース

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

検証

チェックポイント

  1. プレーヤーにキャプションの設定がある場合には、キャプションの表示を選択する。

  2. キャプションのあるファイルを再生する。

  3. キャプションが表示される。

判定基準

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

日本語訳における注記:

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