このウェブページは、「WCAG 2.0 達成方法集 : WCAG 2.0 の達成方法と失敗例」における SMIL の達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般 (General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般 (General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。
ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。
達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。
SMIL 1.0 プレーヤーが利用可能な場合
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、会話の合間に入れられるよりも多くの音声解説を、視聴覚素材に付加することである。
SMIL 1.0 にはこれを達成する簡単な方法がないが、連続して順番に再生される複数のファイルに、音声ファイル及び映像ファイルを分割することによって実装できる。この方法によって追加した音声解説は、視聴覚コンテンツが停止している間に再生される。映像ファイルの最後のフレームは、画面に表示されたまま一時停止し、その間に音声ファイルが再生される。
これにより、映像は最初から最後まで再生されるように見えながらも、ところどころで停止して、その間に長めの音声解説が提供される。そして、音声解説が終了すると、映像の再生が自動的に再開する。
この拡張音声解説のオン/オフを操作するには、スクリプトを使用して、拡張音声解説を含んだ SMIL スクリプト及び含まない SMIL スクリプトの二つの間で切り替えることによって実装できる。又は、スクリプトを使用して、拡張音声解説を SMIL ファイルに追加したり SMIL ファイルから削除したりすることもできる。そうすることで、映像クリップは、単純に順序どおり再生されることになる。
スクリプトが使用できない場合は、二つのバージョンの映像を提供することによって可能となる。つまり、一つは拡張音声解説を含んだバージョン、もう一つは含まないバージョンを提供するのである。
コード例:
<?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 background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<seq>
<par>
<video src="video.rm" region="videoregion" clip-begin="0s" clip-end="5.4"
dur="8.7" fill="freeze" alt="videoalt"/>
<audio src="no1.wav" begin="5.4" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="5.4" clip-end="24.1"
dur="20.3" fill="freeze" alt="videoalt"/>
<audio src="no2.wav" begin="18.7" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="24.1" clip-end="29.6"
dur="7.7" fill="freeze" alt="videoalt"/>
<audio src="no3.wav" begin="5.5" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="29.6" clip-end="34.5"
dur="5.7" fill="freeze" alt="videoalt"/>
<audio src="no4.wav" begin="4.9" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="77.4" alt="video alt"/>
</par>
</seq>
</par>
</body>
</smil>
上記のマークアップは、五つの <par>
セグメントに分割されている。各セグメントに <video>
と <audio>
のタグが一つずつある (ただし、最後の <par>
に <audio>
がないのは意図的なものである)。拡張音声解説の通常の使い方は、音声解説が提供される間、メインのメディアを一時停止するというものである。SMIL 1.0でこれを実現するには、映像クリップの開始と終了を指定する「clip-begin
」と「clip-end
」を設定して、その「clip-begin
」と「clip-end
」で定義されるよりも長い再生時間をクリップに設定する。fill=「freeze」
は、拡張音声解説の再生中、映像の最後のフレームを保持する。<audio>
タグには「begin
」の属性があり、その前の <video>
タグで定義された「clip-end
」の値と同じ値を持っている。
「clip-begin
」「clip-end
」「dur」の値を決めるにあたっては、音声解説が開始及び終了する前の映像部分の時間と、拡張音声解説の全体の長さを調べる必要がある。「clip-begin
」と「clip-end
」は、それ自体の値を定義するが、「dur
」の値は、「clip-begin
」と「clip-end
」によって定義される拡張音声解説及び映像クリップを合計した長さとなる。最初の <par>
では、映像クリップが 0 秒で始まり、5.4 秒で終わる。そして記述の長さは 3.3 秒だ。このため、「dur
」の値は、5.4 + 3.3 = 8.7 秒となる。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
拡張音声解説のあるファイルを再生する。
音声解説のあるファイルを再生する。
映像がところどころ一時停止して、拡張音声解説が再生されることを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 2.0 プレーヤーが利用可能な場合
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、会話の合間に入れられるよりも多くの音声解説を、視聴覚素材に付加することである。
SMIL 2.0 では、特定の音声ファイルを特定のタイミングで再生するよう指定し、音声ファイルが再生される間は、画面が表示されたまま一時停止できる。
これにより、映像は最初から最後まで再生されるように見えながらも、ところどころで停止して、その間に長めの音声解説が提供される。そして、音声解説が終了すると、映像の再生は自動的に再開する。
この拡張音声解説のオン/オフを操作するには、スクリプトを使用して、拡張音声解説を含んだ SMIL スクリプト及び含まない SMIL スクリプトの二つの間で切り替えることによって実装できる。又は、スクリプトを使用して、拡張音声解説を SMIL ファイルに追加したり SMIL ファイルから削除したりすることもできる。そうすることで、映像クリップは、単純に順序どおり再生されることになる。
スクリプトが使用できない場合は、二つのバージョンの映像を提供することによって可能となる。つまり、一つは拡張音声解説を含んだバージョン、もう一つは含まないバージョンを提供するのである。
コード例:
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<excl>
<priorityClass peers="pause">
<video src="movie.rm" region="video" title="video" alt="video" />
<audio src="desc1.rm" begin="12.85s" alt="Description 1" />
<audio src="desc2.rm" begin="33.71s" alt="Description 2" />
<audio src="desc3.rm" begin="42.65s" alt="Description 3" />
<audio src="desc4.rm" begin="59.80s" alt="Description 4" />
</priorityClass>
</excl>
</body>
</smil>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
拡張音声解説のあるファイルを再生する。
映像がところどころ一時停止して、拡張音声解説が再生されることを確認する。
2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
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 background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<audio dur="0:01:20.00" src="salesdemo_ad.mp3"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
<head>
<layout>
<root-layout background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mov" region="videoregion" title="Sales Demo"
alt="Sales Demo"/>
<audio src="salesdemo_ad.mp3" title="audio description"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(デフォルトで常に再生されている場合を除いて、) コンテンツ/プレーヤーから音声解説を再生する方法を見つける。
音声解説のあるファイルを再生する。
音声解説が再生されるかどうかを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 2.0 プレーヤーが利用可能な場合
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、全盲又は視聴覚素材の映像を見るのが困難な利用者が、その素材の情報を得られるようにすることである。この達成方法では、視聴覚素材の会話の合間に入る音声解説によって、映像の説明が提供される。
コード例:
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<audio src="salesdemo_ad.mp3" begin="33.71s" title="audio description"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
この例は、<audio>
及び <video>
タグを1個ずつ含んだ <par>
セグメントを示している。音声の再生は、即座には開始されない。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(デフォルトで常に再生されている場合を除いて、) コンテンツ/プレーヤーから音声解説を再生する方法を見つける。
音声解説のあるファイルを再生する。
音声解説が再生されるかどうかを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 1.0
これは、次の達成基準に関連する達成方法である:
SM11 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、耳の聞こえない利用者や視聴覚素材の会話の聞き取りが困難な利用者が、その素材を見て理解できるようにすることである。この達成方法では、会話と重要な音をすべて、画面上のキャプション領域に表示されるテキストストリームで提供する。
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>
コード例:
<?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>
及び <textstream>
タグを 1 個ずつ含んだ <par>
セグメントを示している。system-captions 属性は、利用者の使っているプレーヤーのキャプション設定がキャプションの表示を選択している場合のみ、テキストストリームを表示すべきであることを示している。 <layout>
のセクションは、映像及びキャプションに使用する領域を定義している。
コード例:
<?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>
要素を示している。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
プレーヤーにキャプションの設定がある場合には、キャプションの表示を有効にする。
キャプションのあるファイルを再生する。
キャプションが表示されるかどうかを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 2.0
これは、次の達成基準に関連する達成方法である:
SM12 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、耳の聞こえない利用者や視聴覚素材の会話の聞き取りが困難な利用者が、その素材を見て理解できるようにすることである。この達成方法では、会話と重要な音をすべて、画面上のキャプション領域に表示されるテキストストリームで提供する。
SMIL 2.0 では、映像とキャプションに別々の領域を定義することができる。キャプションと映像の再生は同期されて、キャプションのテキストが画面上のある領域に表示され、それに対応する映像が別の領域に表示される。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="310" width="330"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" backgroundColor="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" systemCaptions="on"
title="captions" alt="Sales Demo Captions"/>
</par>
</body>
</smil>
この例は、<video>
および <textstream>
タグを1個ずつ含んだ <par>
セグメントを示している。systemCaptions 属性は、利用者の使っているプレーヤーのキャプション設定がキャプションの表示を選択している場合のみ、テキストストリームを表示すべきであることを示している。<layout>
のセクションは、映像及びキャプションに使用する領域を定義している。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="310" width="330"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" backgroundColor="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">
<param name="charset" value="iso-8859-1"/>
<param name="fontFace" value="System"/>
<param name="fontColor" value="yellow"/>
<param name="backgroundColor" value="blue"/>
</text>
<text src="data:,This%20is%20a%20second%20text."
region="captions" begin="3s" dur="3">
<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>
要素を示している。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
プレーヤーにキャプションの設定がある場合には、キャプションの表示を有効にする。
キャプションのあるファイルを再生する。
キャプションが表示されることを確認する。
3.の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 1.0 プレーヤーが利用可能な場合
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、耳が聞こえないか、またはそうでなくとも、視聴覚コンテンツにおいて発話を聞くことに問題のある利用者に、コンテンツを閲覧できる方法を提供することである。この達成方法では、発話と重要な音の全てがキャプション領域に表示される手話通訳の映像によって入手できる。
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="signingregion"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<video dur="0:01:20.00" region="signingregion" system-captions="on"
src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
コード例:
<?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 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="signingregion"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<video dur="0:01:20.00" region="signingregion" system-captions="on"
src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
この事例では、二つの <video>
タグを含む <par>
セグメントを示している。system-captions 属性は、利用者のプレーヤーの字幕設定が、字幕を表示する選択になっているとき、手話の映像が表示されるべきであることを示す。<layout>
セクションは、本編の映像と手話通訳の映像に割り当てる領域を定義している。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(手話通訳が常に表示される場合を除いて、) 手話通訳が表示されるように、コンテンツ内又はプレーヤーのコントロールを有効にする。
手話通訳を含むファイルを再生する。
手話通訳が表示されるかどうかを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
SMIL 2.0
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、耳が聞こえないか、またはそうでなくとも、視聴覚コンテンツにおいて発話を聞くことに問題のある利用者に、コンテンツを閲覧できる方法を提供することである。この達成方法では、発話と重要な音の全てがキャプション領域に表示される手話通訳の映像によって入手できる。
SMIL 2.0 では、二つの映像のために別々の領域を定義できる。二つの映像再生が同期していて、画面の一つの領域に本編のビデオを表示し、もう一つの領域に本編に対する手話通訳の映像を表示する。
コード例:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="310" width="330"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="signing" backgroundColor="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"/>
<video src="salesdemo_signing.mpg"
region="signing" systemCaptions="on"
title="sign language interpretation"
alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
この事例では、二つの <video>
タグを含む <par>
セグメントを示している。system-captions 属性は、利用者のプレーヤーの字幕設定が、字幕を表示する選択になっているとき、手話の映像が表示されるべきであることを示す。<layout>
セクションは、本編の映像と手話通訳の映像に割り当てる領域を定義している。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(手話通訳が常に表示される場合を除いて、) 手話通訳が表示されるように、コンテンツ内又はプレーヤーのコントロールを有効にする。
手話通訳を含むファイルを再生する。
手話通訳が表示されるかどうかを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。