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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

SMIL 1.0

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

解説

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="https://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. キャプションが表示されるかどうかを確認する。

期待される結果

  • #3 の結果が真である。