WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

FLASH33: Flash オブジェクトのサイズに相対値を使用する

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

FLASH33 に関するユーザエージェントサポートノート (英語)を参照のこと。Flash テクノロジーノートも参照。

解説

この実装方法の目的は、em の値など相対的な単位を使用して、埋め込みの Flash オブジェクトの幅や高さを指定することである。Flash オブジェクトのサイズは、ムービーの幅と高さを 100% に設定することによって、コンテナ(親要素)のサイズに合わせて拡大することができる。コンテナの幅と高さは、相対的な単位を使用して設定する。これにより、テキストサイズの変更をサポートするユーザエージェントは、テキストサイズの設定の変更に応じて Flash オブジェクトのサイズを変更することが可能になる。Flash オブジェクトのサイズが調整されると、そのコンテンツが拡大または縮小され、ロービジョンの利用者でも読みやすくなる。

注記: この実装方法では、ブラウザでズーム機能を使用する利用者をサポートする必要はない。

事例

事例 1: テキストのサイズを変更する(最低限のサイズは維持する)

この事例では、SWFObject による動的なパブリッシュ手法(英語)を使用して HTML ドキュメント内に Flash オブジェクトをロードしている。Flash オブジェクトのコンテナ要素には、「flashPlaceHolder」というクラス名が付けられている。このクラス名は、CSS で相対的な em 値を使用して幅および高さを設定する際のターゲットとなる。利用者がブラウザのテキストサイズを拡大または縮小すると、それに応じて Flash オブジェクトも拡大または縮小される。テキストサイズを縮小したときにオブジェクトが小さくなりすぎることがないように、デフォルトのサイズに対して min-width および min-height プロパティを設定している。

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Flash Resize example</title>
    <script src="swfobject/swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", 
    "flashPlaceHolder", "100%", "100%", "8")      
</script>

    <style type="text/css">
  #flashPlaceHolder {
    width: 20em;
    height: 15em;
    min-width: 320px;
    min-height: 240px;
  }
</style>
  </head>
  <body id="header">
    <h1>Flash Resize Demonstration</h1>
    <p>When the browser's text size is changed, the Flash movie will be
      resized accordingly.</p>
    <p id="flashPlaceHolder">Flash needs to be installed for this
      example to work</p>
  </body>
</html>

この実例は、テキストのサイズを変更する(最低限のサイズは維持する)のサンプル(英語)で確認できる。また、テキストのサイズを変更する(最低限のサイズは維持する)のソース(英語)をダウンロードすることもできる。

検証

チェックポイント

  1. Flash オブジェクトが埋め込まれているウェブページを開く。

  2. HTML ソースコードで、Flash オブジェクトが格納されているオブジェクトの幅および高さのサイズが、em またはパーセント(%)などの相対的な単位で指定されている

判定基準

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