Click here to visit our sponsor

ECサイトのお勧め商品カタログ|映画好きのBS/CSガイド

Webアクセシビリティ: インライン要素 - 置き換え

インライン要素 - 置き換え: 本論へ


インライン要素 - 置き換え 本論

IMG インライン画像

指定位置に画像を配置する要素。内容を持たない空要素です。

画像の形式としては、JPEG GIFが一般的で、比較的新しいブラウザではPNG形式もサポートされています。

画像フォーマット

JPEG(Joint Photographic Experts Group)

カラー静止画像の符号化を進めている国際機関(ISOとITU-Tの合同組織) JPEGが制定した圧縮方式。正式名称はJFIF(JPEG File Interchange Format)。

写真などの微妙に変化する階調を持つ画像から、人間があまり感知出来ないデータを間引く事により、圧縮する技術。(間引かれたデータは元に戻らない不可逆圧縮)フルカラーを扱えますが、アイコン等単純な画像には効率悪く、透過色も設定出来ないため、主に写真に用いられます。

GIF(Graphics Interchange Format)

アメリカCompuServeというパソコン通信で開発された画像フォーマット。

アイコン、イラスト等シンプルな画像を効率的に扱え、使用出来る色数は256色に限られています。透過色、インターレース、アニメーションという機能もありますが、画像の圧縮にユニシス社(Unisys)が特許を保有するLZWアルゴリズムを使用するため、GIFを生成するソフトは同社のライセンスが必要となり、だんだん使われなくなる方向にあります。

PNG(Portable Network Graphics)

1996年W3C勧告になった画像フォーマット。

ただし、古いブラウザでは表示出来ない、透過機能が有効にならない等の不具合があります。主なブラウザは最新版でサポートしています。

画像の扱い方

[『ユニバーサルHTML/XHTML』神崎 正英(かんざき まさひで) 氏 著より引用]

属性

src="URI"

省略不可です。
表示したい画像のURIを指定します。

alt="代替テキスト"

省略不可です。

何故imgが置き換え要素といわれるのか、
たとえば
<p>本日は晴天成り。</p>
これにimgを入れたいとします。
<p>本日は<img src="sun.gif" alt="晴天" width="10" height="10">成り。</p>
これがaltなしならば、
<p>本日は成り。</p>
こう書いているのと同じくなる訳です。

単なる飾りならば
<img src="sun.gif" alt="" width="10" height="10">
こうすればいい訳です。

alt属性はそのイメージが伝えるべき意味を記すために使われます。そうする事により、テキストとしての情報が埋め込まれ、イメージをサポートしていないメディアではそれに変わる情報になるわけです。

ですから、リンク先があるイメージの場合はalt属性を空にする事は不可となります。

longdesc="URI"

イメージ部分の仔細情報を付与したい場合、使用します。たとえば、グラフやイメージマップなどの場合、alt属性のみでは説明出来ないため、利用します。

width="幅" height="高さ"

画像の幅、高さを「ピクセル数」または「パーセンテージ(%)」で指定します。これらを指定しておくとブラウザ側で画像の表示スペースを確保するため、それ以降に続く内容をすぐに表示出来ます。逆に指定がない場合は画像のロードが終わるまでそれ以降の内容は表示されません。

title="補足説明"

表示された画像の説明はalt属性ではなく、title属性を使用します。この属性を使用した場合、優先的にツールチップ表示として使用されます。

lang="言語コード"

ここで指定された言語コードがalt属性、title属性に適用され、読み上げソフトなど音声変換時に参照されます。

usemap="URI"

map要素のname属性、id属性で指定された名前を指定し、画像にクライアントサイド・イメージマップを対応させます。仕様上は他のファイルで定義されているイメージマップにも対応する事となっていますが、多くのブラウザでは同じファイル内で定義されたイメージマップにのみ対応しているようです。「#名前」の形式で指定します。

ismap

サーバーサイド・イメージマップを使用する際に使用します。XHTMLでは最小化せずにismap="ismap"と指定します。アクセシビリティとしてはサーバーサイド・イメージマップを使用せずにクライアントサイド・イメージマップを使用する事が推奨されています。(仔細はmap要素にて)

name="名前" id="名前"

スクリプト言語などから参照する事が可能なように指定します。古いブラウザとの互換のため、name属性を指定、最新ブラウザ対応のid属性と併記します。ただし、XHTML1.1では廃止されていますので、id属性のみの指定が無難でしょう。

このページのトップへ戻る

OBJECT オブジェクト

マルチメディア形式のデータを配置する要素。
今後出て来るであろうメディアにも考慮した設計になっていますが、何かと問題も多く、正しく実装されていないブラウザが多いようです。

また、複数のマルチメディアオブジェクトの同期制御を可能にするSMILの仕様により、今後変わっていく可能性もあり、難しい要素です。

現状ではimg要素、applet要素、iframe要素、embed要素、bgsound要素の代わりに使用可能となっています。
(embed要素、bgsound要素はW3C勧告では定義されていないブラウザ拡張要素、applet要素、iframe要素はStrictDTDでは使用出来ない非推奨要素です)

この要素内ではmap要素、param要素の場合を除き、指定されたデータ形式がブラウザ未対応な場合、無視され仕様となり、入れ子にして、複数のオブジェクトを指定することが可能となっています。


<p>
<object data="my.mpeg" type="video/mpeg">
<object data="my.png" type="image/png">
<a href="my.html">自己紹介します</a>
</object>
</object>
</p>

object要素の歴史

1993年マーク・アンドリーセンがimg要素を提案しましたが、www-talkメーリングリスト(wwwの実装方法などを話し合うオンラインディスカッション)において、バーナーズ=リーが新たな要素タイプを作らず、既存の要素に属性を追加すべきと主張。Mosaic(現在のヴィジュアル・ブラウザの草分け)がこれを押し切り、img要素を実装。しかし、img要素は空要素のため、代替テキストをつける習慣も形成されず、alt属性もしばらく経った後、オプションとして使用されるのみでした。HTML3.0では幻の要素 FIG なるものも出ましたが、実現せず。アプレット、プラグイン等マルチメディアが多様化し始め、その取り込み方も混乱を極め、HTMLでの埋め込みオブジェクトの本来の形を取り戻すべく、HTML4.0にしてようやくobject要素の規格が導入されました。

属性

data="URI"

オブジェクトとして配置するデータのURIを指定します。
相対URIの場合はcodebase属性を指定し、それを基準にURIが参照されます。

type="MIMEタイプ"

data属性指定のデータのMIMEタイプを指定します。
この属性は必須ではありませんが、ブラウザがサポートしていない形式のデータをロードさせないため、指定しておいた方がよいでしょう。

classid="URI"

JAVAやActiveXなどの実行プログラムのURIを指定します。
オブジェクトによってはdata属性指定のデータの代わりにもなりますし、一緒に使用される事もあります。codebase属性を指定されていれば、それを基準にURIが参照されます。

codetype="MIMEタイプ"

classid属性指定のデータのMIMEタイプを指定します。
この属性は必須ではありませんが、ブラウザがサポートしていない形式のデータをロードさせないため、指定しておいた方がよいでしょう。指定ない場合はtype属性の値が参照されます。

archive="URI"

オブジェクトに関連したファイルをまとめたアーカイブのURIを指定します。
スペースで区切り、複数指定も可能です。この属性を使用すると少ないコネクションで 複数のファイルがロード出来るので、ロード時間が短縮されます。codebase属性を指定されていれば、それを基準にURIが参照されます。

codebase="URI"

data属性、classid属性、archive属性で相対URIが指定された際、基準となるURIを指定します。この属性が指定ない場合は現在のURIが基準となります。

width="幅" height="高さ"

オブジェクトの幅、高さを「ピクセル数」または「パーセンテージ(%)」で指定します。

usemap="URI"

map要素のname属性、id属性で指定されている名前を指定し、オブジェクトにクライアントサイド・イメージマップを対応させます。一般的には「#名前」の形式で指定します。

declare

この属性指定の場合はそのオブジェクトは宣言されたのみで実行されません。実行するにはボタンやリンクを利用します。XHTMLでは最小化せず、declare="declare"と記します。

standby="ロード中のメッセージ"

オブジェクトがロードしている間に表示されるメッセージを指定します。

name="名前"

他から参照される事が出来るようにする為の名前を指定します。

tabindex="Tab移動順"

タブキーを押して項目間を移動させる場合、その順序を指定します。指定出来る値は0-32767。ただし、0を指定したり、指定ない場合は指定されているものの後に移動します。 同じ値の場合はより前にあるものから順に移動します。上肢不自由な方の為のアクシビリティとして、指定が推奨されています。(キーボードでの操作が容易になる)サイト構成を考える場合、統一されたページ操作を確保し、そのマニュアル的ページを提供すべきでしょうね。

JAVAアプレットの場合

プログラムコードであるクラスファイルを示すため、「java:」という特別なスキームで始まるURIをclassid属性に記します。object要素でうまくアプレートが扱えないブラウザではapplet要素を使用出来ますが、DTDをTransitionalとして宣言しなければなりません。

以下の例の場合、Win IE6では二つ表示され、Win Mozilla Win Opera ではひとつ表示されます。Win Netscape Navigator4.*ではハングアップするようです。


<object classid="java:my.class"
 codetype="application/java" codebase="/lib/java/">
<param name="image" value="my.png">
<param name="init" value="1">

<applet classid="java:my.class"
 codetype="application/java" codebase="/lib/java/">
<param name="init" value="1">
<param name="interval" value="10">

<a href="my.html">自己紹介します</a>

</applet>

</object>

プラグインの場合

プログラムコードのURIをclassid属性に指定し、必要に応じ、読み込むデータをdata属性、あるいはparam要素に指定します。Macromedia Shockwaveでは以下のようになりますが、Shockwaveのようなプラグインではclassid属性のURIはclaid:というスキームを使います。codebase属性を使い、プラグインがインストールされていない場合の為、 コードを提供するライブラリのURIを指定も出来ます。ただし、classid属性のURIのclaid:以下のスキームはWindowsレジストリの登録IDであるため、他のOSでは意味をなさず、Netscapeの拡張タグであるembedタグを使用せねばならないかも知れません。 その場合は文章型宣言は出来なくなります。


<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
 height="430" width="480">
<param name="src" value="my.dcr">

<embed ser="my.dcr" height="430" width="480">
<noembed>

<a href="my.html">自己紹介します</a>

</noembed>

</object>

アプレット、プラグインの安全性

プラグインソフト、ActiveXコントロールはローカルディスクの資源にアクセス出来る構造のため、信頼が確立されていないプラグイン/ActiveXをインストールすると、予期せぬトラブル、新たなるセキュリティホール(抜け穴)が出来る可能性も持ち合わせています。JAVAアプレットは利用者の許可なしにディスクアクセスすることも配信元以外にアドレスを通信する事もなく安全な仕組みにはなっていますが、特殊なセキュリティホールがゼロとは言えません。JAVAアプレット、ActiveXともに認証の署名をコードに加え、 安全性を確保していますが、プログラムのバグによるセキュリティホールは防ぐ事は出来ません。このような安全性からの問題でこれらを実行不可にする利用者もいるという事をコンテンツ提供側はまず認識すべきでしょう。

「Flash」コンテンツの使い勝手やアクセシビリティ向上のための10カ条

米Macromedia社によるもので、以下の点に留意する事となっています。

  1. ユーザーが何を求めてWWWサイトへやってくるのか,その「用件」に適う内容を提供すること
  2. WWWサイトの目的となる事業や顧客のニーズを十分満たす内容にすること
  3. 不必要なイントロは入れないこと
  4. ナビゲーション(WWWの構成)は,使いやすく,整理されたものにすること
  5. ユーザー・インタフェースを統一すること
  6. 必要以上に動画を使いすぎないこと
  7. サウンドも使いすぎないように。ON/OFFの切り替えボタンを常に表示すること
  8. 一般電話回線で接続するユーザーのことを考え,ページは5秒以内で表示されるように。トップページは40Kバイト以下に。
  9. アクセシビリティに配慮し,身体に障碍のあるユーザーにも使い易いWWWの設計をすること
  10. ユーザビリティのテストを行い,使い勝手を確認すること
このページのトップへ戻る

2002-07-18 著作 2003-12-11 加筆
Copyright ©2003-2013 問い合わせ. All Rights Reserved
[all that's jazz][wag ひょうきん者]
Netscape 6.* Mozilla(ja) だと「表示」→「スタイルシートを使う」で画面表示を変更できます。
Netscape Communicator 4.* は簡易版のスタイルシートを適用しています。
このページのトップへ戻る