diff options
Diffstat (limited to 'files/ja/learn/accessibility/multimedia/index.html')
| -rw-r--r-- | files/ja/learn/accessibility/multimedia/index.html | 371 |
1 files changed, 371 insertions, 0 deletions
diff --git a/files/ja/learn/accessibility/multimedia/index.html b/files/ja/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..e79aa9a6e9 --- /dev/null +++ b/files/ja/learn/accessibility/multimedia/index.html @@ -0,0 +1,371 @@ +--- +title: アクセシブルマルチメディア +slug: Learn/Accessibility/Multimedia +tags: + - Accessibility + - Article + - Audio + - Beginner + - CodingScripting + - HTML + - Images + - JavaScript + - Learn + - Multimedia + - Video + - captions + - subtitles + - text tracks +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">アクセシビリティの問題を引き起こす他のカテゴリーは、マルチメディアでです。ビデオ、オーディオ、画像といったコンテンツは、支援技術 (assistive technologies) とユーザーが理解可能となる適切な代替テキストを必要とします。この記事ではその方法を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML 、CSS 、JavaScript に対する基本的な理解、 <a href="/ja/docs/Learn/Accessibility/What_is_accessibility">前回の記事</a> の理解</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>マルチメディアが引き起こすアクセシビリティの問題、およびその解決方法を理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="Multimedia_and_accessibility" name="Multimedia_and_accessibility">マルチメディアとアクセシビリティ</h2> + +<p>このモジュールまで、様々なコンテンツに対してそのアクセシビリティを保証するために何が必要かを見てきました。シンプルな文章から始まって、データテーブル、画像、フォーム要素やボタンといったネイティブのコントロール、より複雑なマークアップ構造 (<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 属性) などです。</p> + +<p>一方こちらの記事は、アクセシビリティの保証が難しい別のマルチメディアのコンテンツ群について扱っています。画像、ビデオ、{{htmlelement("canvas")}} 要素、Flash 動画などは、スクリーンリーダーによる理解やキーボードによるナビゲーションが容易ではないため、私たちが手を差し伸べる必要があります。</p> + +<p>ですが絶望はしないでください。ここではマルチメディアをアクセシブルにするために利用できる技術について紹介し、あなたの手助けをします。</p> + +<h2 id="Simple_images" name="Simple_images">シンプルな画像</h2> + +<p>私達は既に <a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a> で HTML 画像のシンプルな代替テキストについてカバーしました — 詳細を確認するために、そこに戻っても良いです。簡単に言うと、ビジュアルコンテンツとなり得るものは、スクリーンリーダーがユーザーのために読み上げることができるよう、代替テキストが利用可能であることを保証するべきです。</p> + +<p>例えば:</p> + +<pre class="brush: html"><img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> +</pre> + +<h2 id="Accessible_audio_and_video_controls" name="Accessible_audio_and_video_controls">アクセシブルなオーディオとビデオコントロール</h2> + +<p>ウェブベースのオーディオ/ビデオのコントロールを実装するのは問題にはならないはずですよね？調べてみましょう。</p> + +<h3 id="The_problem_with_native_HTML5_controls" name="The_problem_with_native_HTML5_controls">ネイティブ HTML5 コントロールの問題</h3> + +<p>HTML5 の video と audio インスタンスは、ビルトインのコントロールと一緒に提供されており、何も設定せずにメディアの制御を行うことができます。例えば (<code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">ソースコード</a>と<a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">実際の動作</a>を参照):</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio> + +<br> + +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>control 属性は、あなたがメディアプレイヤーに対して期待する再生/一時停止ボタンやシークバーといった基本的なコントロールを提供します。Firefox と Chrome では次のように表示されます。</p> + +<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> + +<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p>しかし、これらのコントロールには問題があります:</p> + +<ul> + <li>たいていのブラウザーではキーボードでアクセスできません。つまりネイティブプレイヤー内でコントロール間をタブ移動できません。Opera と Chrome ではいくらか動きますが、理想的なものではありません。</li> + <li>ネイティブコントロールは各ブラウザーによって異なるスタイルと機能が提供され、かつスタイリングすることができません。それは、サイトのスタイルガイドに従うのが容易ではないことを意味します。</li> +</ul> + +<p>これを改善するために、私たちは自分たちのカスタムコントロールを作成することができます。どのようにするのか見てみましょう。</p> + +<h3 id="Creating_custom_audio_and_video_controls" name="Creating_custom_audio_and_video_controls">カスタム audio/video コントロール</h3> + +<p>HTML5 の video と audio は HTML メディア要素という API を提供しています。これは、あなたが定義したボタンや他のコントロールにカスタム機能をマップすることを可能にします。</p> + +<p>上の video を例として、カスタムコントロールを追加してみましょう。</p> + +<h4 id="Basic_setup" name="Basic_setup">基本のセットアップ</h4> + +<p>はじめに、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>、 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>、そして <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> のコピーを取得し、あなたのハードドライブのディレクトリーに保存します</p> + +<p>main.js というファイルを新規作成し、同じディレクトリーに保存します。</p> + +<p>最初に、ビデオプレイヤーの HTML を見てみましょう。HTML の中は次のようになっています:</p> + +<pre class="brush: html"><section class="player"> + <video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section></pre> + +<h4 id="JavaScript_basic_setup" name="JavaScript_basic_setup">JavaScript の基本セットアップ</h4> + +<p>私たちは video の下にいくつかの簡単なボタンを挿入しました。もちろん、このままではこれらのコントロールは何もしません。機能を加えるためには JavaScript を使います。</p> + +<p>まずはそれぞれのコントロールの設定を保持しておく必要があります。JavaScript ファイルの先頭に次のコードを追加してください:</p> + +<pre class="brush: js">const playPauseBtn = document.querySelector('.playpause'); +const stopBtn = document.querySelector('.stop'); +const wdBtn = document.querySelector('.rwd'); +const fwdBtn = document.querySelector('.fwd'); +const timeLabel = document.querySelector('.time');</pre> + +<p>次に、video/audio プレイヤー自身の参照を取得する必要があります。次の行を先ほどのコードの下に加えてください:</p> + +<pre class="brush: js">const player = document.querySelector('video');</pre> + +<p>これは {{domxref("HTMLMediaElement")}} オブジェクトへの参照を保持します。このオブジェクトは、私たちのボタンに機能を紐づけるために使用可能ないくつかの便利なプロパティやメソッドを持っています。 </p> + +<p>私たちのボタンの機能を作る前に、カスタムコンロールの邪魔にならないようネイティブコントロールを削除しましょう。JavaScript の下に次のコードを追加してください:</p> + +<pre class="brush: js">player.removeAttribute('controls');</pre> + +<p>最初から controls 属性を含めないようにするのではなく、わざわざこのようにするのには理由があります。もし JavaScript コードが何らかの理由で失敗しても、ユーザーは利用可能な何かしらのコントロールを使うことができるのです。</p> + +<h4 id="Wiring_up_our_buttons" name="Wiring_up_our_buttons">ボタンを紐つける</h4> + +<p>最初に、再生/一時停止ボタンをセットアップしましょう。次のように、再生と一時停止をシンプルな条件によって切り替えることで、この機能を実現できます。これをあなたのコードの下に追加しましょう:</p> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>次に、ストップボタンを制御する次のコードを下に追加しましょう:</p> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; +};</pre> + +<p>{{domxref("HTMLMediaElement")}} には <code>stop()</code> 関数がありません。そこで <code>pause()</code> 関数を使用し、同時に <code>currentTime</code> に 0 を設定します。</p> + +<p>続いて、巻き戻しと早送りボタンです。次のブロックをあなたのコードの下に追加してください:</p> + +<pre class="brush: js">rwdBtn.onclick = function() { + player.currentTime -= 3; +}; + +fwdBtn.onclick = function() { + player.currentTime += 3; + if(player.currentTime >= player.duration || player.paused) { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>これらはとてもシンプルで、クリックされる度に <code>currentTime</code> 単に 3 秒を足すか引くだけです。実際のビデオプレイヤーでは、あなたはもっと手の込んだものを作りたいでしょう。</p> + +<p>早送りボタンが押されたとき、 <code>currentTime</code> がメディアのトータルの <code>duration</code> よりも大きいか、そしてメディアが再生されていないかをチェックするという点についても気をつけてください。もしいずれかの条件が満たされているなら、ビデオが再生されていない時に早送りしようとしてもおかしくならないよう、単純にビデオを停止するか、ビデオの最後まで飛ばします。</p> + +<p>最後に、再生時間を表示するために次の内容をコードの最後に追加します:</p> + +<pre class="brush: js">player.ontimeupdate = function() { + let minutes = Math.floor(player.currentTime / 60); + let seconds = Math.floor(player.currentTime - minutes * 60); + let minuteValue; + let secondValue; + + if (minutes<10) { + minuteValue = "0" + minutes; + } else { + minuteValue = minutes; + } + + if (seconds<10) { + secondValue = "0" + seconds; + } else { + secondValue = seconds; + } + + mediaTime = minuteValue + ":" + secondValue; + timeLabel.textContent = mediaTime; +};</pre> + +<p>時間が更新される度に (1秒に一度) 、この関数を実行します。これは秒として渡された currentTime の値 (秒で与えられる) から分と秒の数を算定するもので、もし分か秒の値が 10 以下であれば先頭に 0 を追加し、表示用の値を生成して時間ラベルに追加します。 </p> + +<h4 id="Further_reading" name="Further_reading">参考記事</h4> + +<p>ここでは、video/audio プレイヤーに対してどのようにカスタムしたプレイヤー機能を加えるかという基本的なアイデアが得られます。video/audio プレイヤーに対して、古いブラウザーでの Flash のフォールバックも含めて、より複雑な機能を加えるには、以下のリンク先を参照してください:</p> + +<ul> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> +</ul> + +<p>さらに私たちは、あなたがどのようにしてオブジェクト指向システムを作ることができるかを見せるために高度な例も作りました。これは、ページ内のすべての video と audio プレイヤーを見つけ (どれだけ存在していたとしても)、私たちのカスタムコントロールを追加するものです。<a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> を見てください (<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">ソースコード</a>も見てください) 。</p> + +<h2 id="Audio_transcripts" name="Audio_transcripts">オーディオトランスクリプト(Audio transcripts)</h2> + +<p>聴覚障害の方にオーディオコンテンツを提供する場合、トランスクリプトのテキストを必ず用意する必要があります。これらは同じページの中に何らかの形で含んでも良いですし、リンクされた別ページに用意することもできます。</p> + +<p>トランスクリプトを実際に作成する際は、次の選択肢があります。</p> + +<ul> + <li>商用サービス — プロフェッショナルに料金を払って文字起こししてもらうことができるでしょう。例として <a href="https://scribie.com/">Scribie</a>、<a href="https://castingwords.com/">Casting Words</a>、<a href="https://www.rev.com/">Rev</a> などの会社を見てください。色々見てアドバイスをもらい、あなたがうまく作業できる評判の良い会社を見つけてください。</li> + <li>コミュニティ/草の根/自身の文字起こし — あなたがアクティブなコミュニティや職場のチームの一員であるなら、彼らに文字起こしのヘルプを頼むことができるでしょう。試しに自分自身で文字起こしに挑戦することもできます。</li> + <li>自動サービス — <a href="https://trint.com/">Trint</a> のように利用可能な AI サービスがあります。サイトにビデオ/オーディオファイルをアップロードすれば、自動的にそれを書き起こします。YouTube では、自動的にキャプション/トランスクリプトを生成するように選択できます。生成されるトランスクリプトのクォリティは、どれだけ明瞭に話されているかに応じて大きく変わります。</li> +</ul> + +<p>人生の多くのものがそうであるように、あなたは支払った分相応のものを手に入れます。つまり、サービスが異なれば、トランスクリプト作成に要する時間と正確さが異なるということです。文字起こしをするために信頼できる会社や AI サービスにお金を払えば、正確なトランスクリプトを早く入手できるでしょう。料金を払いたくないのであれば、遅く、質の低いものになりやすいです。</p> + +<p>オーディオリソースを公開するがトランスクリプトは後で提供する、という約束は良いものではありません。そのような約束は大抵守られず、ユーザーとの間にある信頼を損なってしまいます。もしオーディオが対面ミーティングやライブスピーチのようなものであるならば、それらが行われている間にノートを取り、オーディオと共に公開して、後からまとめ上げるということはできるでしょう。</p> + +<h3 id="Transcript_examples" name="Transcript_examples">トランスクリプト例</h3> + +<p>もしあなたが自動サービスを使用しているならば、おそらくツールが提供しているユーザーインターフェイスを使用する必要があるでしょう。例えば、<a href="https://www.youtube.com/watch?v=mwF-PpJOjMs">Wait, ARIA Roles Have Categories?</a> を見て、 3点メニュー (. . .) <em>> Show Transcript</em> を選択してください。トランスクリプトは別のパネルに表れるでしょう。</p> + +<p>オーディオとそのトランスクリプトを表示するユーザーインターフェイスを自身で作成する場合、あなたのが考える形で作ることができますが、表示/非表示が可能なパネルを含むと良いかもしれません。私たちの <a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-ui</a> の例を見てください。 (<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">ソースコード</a> も見てください).</p> + +<h3 id="Audio_descriptions" name="Audio_descriptions">オーディオの説明</h3> + +<p>オーディオに伴った映像がある場合、追加のコンテンツを描写するためにオーディオの説明を提供する必要があるでしょう。</p> + +<p>多くの場合これはビデオの形を取り、この章の次のセクションで説明されるテクニックを使用してキャプションを埋め込むことができます。</p> + +<p>しかし、いくつかのエッジケースもあります。例えば、スプレッドシートやグラフの資料を使用したミーティングの録音オーディオがあるかもしれません。その場合、それらの資料がオーディオとトランスクリプトとともに提供されていることを確認するべきであり、特にトランスクリプトの中でそれらの資料に言及されている箇所をリンクとすることが大事です。これは聴覚障害の方だけでなく、すべてのユーザーの助けになります。</p> + +<div class="note"> +<p><strong>注</strong>: オーディオトランスクリプトは、一般的に様々なユーザーグループを助けます。聴覚障害の人へオーディオに含まれたコンテンツにアクセスを提供するように、オーディオをダウンロードすることが困難な狭い帯域のユーザーのことを考えて見ましょう。パブやバーのような騒音の多い環境で、雑音のためにオーディオを聞くことが難しいユーザーのことも考えて見ましょう。</p> +</div> + +<h2 id="Video_text_tracks" name="Video_text_tracks">ビデオテキストトラック</h2> + +<p>聴覚障害者、視覚障害者、そして他のユーザー (狭い帯域のユーザーや、ビデオで使用される言語を話さないユーザー) にとってビデオをアクセシブルにするために、ビデオコンテンツにテキストトラックを含める必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: テキストトラックは障害者だけでなく他のユーザーにとっても便利になる可能性があります。例えば、うるさい環境 (スポーツ中継を流している混雑したバーなど) にいるためにオーディオが聞こえないユーザーや、他の人を邪魔したくない静かな場所 (図書館など) にいるユーザーなどです。</p> +</div> + +<p>これは新しいコンセプトではありません — テレビ放送では、かなり長い間クローズドキャプションを提供しています:</p> + +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> + +<p>一方で、多くの国では英語の映画を自国の母語の字幕とともに提供していて、DVD では他の言語の字幕も利用可能となっています。</p> + +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> + +<p>テキストトラックには、目的に応じた様々な種類のものがあります。あなたが接する主な種類は、次のものです:</p> + +<ul> + <li>キャプション — オーディオを聞くことができない聴覚障害者のためのものであり、話されている言葉、誰が話しているか、人が怒っているのか悲しんでいるのか、どのような雰囲気の音楽が流れているのかなど、場面に関する情報を含みます。</li> + <li>字幕 — 話されている言語を理解しないユーザーのための翻訳された音声の台本です。</li> + <li>ディスクリプション (Descriptions) — ビデオを見ることができない視覚障害者のための描写を含みます。例えば、どのようなシーンに見えるか、などです。</li> + <li>チャプタータイトル — メディアリソースを移動するユーザーを助けることを目的としたチャプターマーカーです。</li> +</ul> + +<h3 id="Implementing_HTML5_video_text_tracks" name="Implementing_HTML5_video_text_tracks">HTML5 ビデオテキストトラックの実装</h3> + +<p>HTML5 のビデオで表示されるテキストトラックは、WebVTT で記述される必要があります。これは、テキストの文字列とメタデータを含むテキストフォーマットであり、テキストが表示されるべき時間や、スタイル、ポジションといった情報まで含みます。これらの文字列はキュー (cues) と呼ばれます。</p> + +<p>典型的な WebVTT ファイルは、次のようなものです:</p> + +<pre>WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</pre> + +<p>HTML のメディア再生と共に表示させるためには、次のことをする必要があります:</p> + +<ul> + <li>.vtt ファイルとしてアクセス可能な場所に保存します。</li> + <li>{{htmlelement("track")}} 要素で .vtt へのリンクを設定します。 <code><track></code> は <code><audio></code> か <code><video></code> の間に設置する必要がありますが、すべての <code><source></code> 要素の後でなければいけません。 {{htmlattrxref("kind","track")}} 属性を使い、キューが字幕、キャプション、ディスクリプションのどれなのかを指定します。さらに、 {{htmlattrxref("srclang","track")}} を使って、字幕でどの言語が使用されているのかを伝えます。</li> +</ul> + +<p>例を見てみましょう:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>これは、字幕が表示されたビデオとなり、次のようになります:</p> + +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>詳細は <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> を読んでください。あなたは、GitHub で GIan Devlin によって作られた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">例</a>をこの記事と併せて見ることができます。(<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source ソースコード</a> も見てください) この例では JavaScript を使用して、ユーザーが異なる言語の字幕を選択できるようになっています。字幕を表示するためには、"CC" ボタンをクリックして英語、ドイツ語、スペイン後のオプションを選択する必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: テキストトラックは {{glossary("SEO")}} でも役に立ちます。検索エンジンはテキストによって更新されるためです。検索エンジンは、テキストトラックによってビデオの途中に直接リンクすることさえできます。</p> +</div> + +<h2 id="Other_multimedia_content" name="Other_multimedia_content">その他のマルチメディアコンテンツ</h2> + +<p>上のセクションでは、あなたがウェブページに載せたいかもしれないすべての種類のマルチメディアコンテンツをカバーしていません。また、ゲーム、アニメーション、スライドショー、埋め込まれたビデオ、そして他の利用可能なテクノロジーを利用して作られたコンテンツを扱う必要があるかもしれません。例えば:</p> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li>Flash</li> + <li>Silverlight</li> +</ul> + +<p>そのようなコンテンツには、アクセシビリティの懸念事項とケースバイケースで対応する必要があります。いくつかのケースでは、これはそれほど悪いことではありません。例えば:</p> + +<ul> + <li>もし Flash や Silverlight のようなプラグイン技術を使用してオーディオコンテンツを埋め込んでいる場合、上の {{anch("Transcript examples")}} セクションで既に紹介したのと同じ方法でオーディオトランスクリプトを提供することができるでしょう。</li> + <li>Flash や Silverlight のようなプラグイン技術でビデオコンテンツを埋め込んでいる場合、それらの技術で利用可能なキャプション/字幕の技術を利用することができます。例えば、 <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>、<a href="https://help.adobe.com/en_US/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html">Using Timed Text Captions</a> (Flash用) 、 <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a> などを見てください。</li> +</ul> + +<p>しかし、他のマルチメディアはアクセシブルにすることがそう簡単ではありません。例えば、没入型 3D ゲームやバーチャルリアリティアプリを扱っている場合、そのような体験に対して代替テキストを提供することは非常に困難であるし、盲目のユーザーはそのようなアプリのターゲットに当てはまらないと考えるかもしれません。</p> + +<p>しかしそのようなアプリでも、視力や色覚に問題を抱えるユーザーにとって認識できるよう、カラーコントラストや表示の明瞭さが十分であるかどうか、そしてキーボードからアクセス可能であるかを確かめることはできます。アクセシビリティは、100% を常に目指すというよりは、可能な限り行うものであるということを覚えておいてください。100% は大抵不可能なのです。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このチャプターでは、マルチメディアにおけるアクセシビリティの関心ごとの要約をいくつかの実践的なソリューションと共に提供しました。</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + + + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは?</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> |