WD-WAI-PAGEAUTH-0414
WD-WAI-PAGEAUTH-0414
これはW3C会員およびその他の利害関係者による検討のためのW3Cワーキングドラフトです。この文書はドラフト文書であり、何時にても他の文書によって更新され、置換され、あるいは廃止される場合があります。W3Cワーキングドラフトを参照資料として利用したり「進行中の作業」以外のものとして引用することは不適切です。これは進行中の作業であって、W3CやWAI GLワーキンググループによる裏書きや合意を示すものではありません。
この文書は W3C WAI Activity の一部として生み出されており、アクセシビリティの高いウェブページを制作するための提案勧告の草稿として意図されています。WAI-GL ワーキンググループの目標は私達の憲章の中で論じられています。
この文書は、自分のページを障害のある人々にとってよりアクセス性が高くインデックスロボットに対してより有益にするためにHTML制作者が従うべきマークアップのガイドラインの一覧です。ガイドラインの一覧に続いて、制作者やウェブマスターがページのアクセシビリティを確認するために使うべきチェックリストがあります。HTMLで書かれた文書を生成するツール(オーサリングツール、ファイル変換パッケージその他の製品)は、これらのガイドラインに従った文書を生み出すべきです。この文書は Web Accessibility Initiative によって公開されている一連のアクセシビリティ文書の一部です。
この文書についての詳細なコメントを w3c-wai-gl@w3.org までお送りください。WAI制作者ガイドラインに関する公開のコメントもこのメーリングリストに送ることができます。
注意. このページはスタイルシートを使用しているため、印字上の問題に遭遇している方々もいます。私達は問題を訂正するように努力していますが、そうした方々には私達の解決策の調査を助けてくださるようお願いします。
この文書は、HTML制作者がそのページのアクセシビリティを向上させるために従うべきガイドラインを勧告するものです。ガイドラインの中には HTML 4.0 の機能を利用するものもありますが、多くはそれ以前のバージョンのHTMLにも同様に当てはまります。
アクセシビリティ改良のための方法は、大まかに以下のカテゴリーに分かれます。
以下のセクションは、HTML制作者がそのページのアクセシビリティを向上させるために使用すべき具体的なガイドラインを提供します。
各ガイドラインにはその重要性を説明する格付けがついています。
ガイドラインにはそれぞれ、1つまたはそれ以上のHTML(や場合によってはスタイルシート言語)の「戦略」によって実装される場合があります。それぞれの戦略は、その適用の要急性に従って分類されている場合があります。
分類のついていない戦略は、HTML 4.0 以前のバージョンのHTMLについて、また新旧のブラウザについて機能します。
DL, UL, OL, LI) は、リストを作成するためにだけ使われるべきです。字下げといったような表現上の効果のためにリスト項目を使うことは避けましょう。
[新規] 項目間隔の制御には、HTMLアトリビュートよりもスタイルシートを使いましょう。注意.この節の項目7をご覧ください。
BLINK エレメントや MARQUEE エレメントを避けるべきです。まず何よりも、これらのエレメントはHTML 4.0 の一部分ではありません(特定のブラウザ専用の拡張であり、避けられるべきです.項目1をご覧ください)。次に、点滅したり移動したりするテキストは、画面読み上げ器に正しく読まれないか全く読まれず、逆に認識障害をもつ人々に影響を及ぼし得ますし、一般的に人々にとってうるさいものです(Jared Spool の本 "Web Site Usablity" をご覧ください)。制作者は、スタイルシートを使って、違うフォントやサイズや色といったような他の方法でテキストに注意をひくべきです。B や Iも)の利用は避けましょう。TT, FONT) やアトリビュート ("align", "background") の代わりにスタイルシートを使うべきです。制作者は文書に構造を付加するエレメント(STRONG, EM, H1, H2, ABBR などといったもの)を使うよう勧められます。表現にスタイルシートを使っている文書は、個人的なスタイルシートやブラウザ設定を通じて文書の見かけ(大きな印字、色のコントラストなど)をユーザが調整するできるようにします。EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM.H1, H2, などがあります。H1, H2 など)を使って操作ツールを生成するブラウザなど)に情報を供給します。BLOCKQUOTE エレメントを使ってはいけません。スタイルシートを使いましょう。テキストの組み表レイアウトを作成するために PRE を使っては行けません。テーブルを使いましょう。HR) は、あるユーザには構造の変更を伝達することもありますが、すべてのユーザに伝達しない場合があります。代わりに DIV や SPAN で構造を指定しましょう。例:
<DIV class="navigation-bar">
<HR title="ナビゲーションバー">
[ <A rel="Next" href="next.html">次ページ</A> |
<A rel="Previous" href="previous.html">前ページ</A> |
<A rel="First" href="first.html">先頭ページ</A> ]
</DIV>
<HR title="新しい節"><ABBR title="Idaho:アイダホ">ID</ABBR>
<ACRONYM title="World Wide Web:ワールドワイドウェブ">WWW</ACRONYM>ヒント集
alt" アトリビュートは AREA エレメントや IMG エレメントには強制的です。フォーム上の送信ボタンとして使われているボタン(INPUT, BUTTON エレメント)にも使われるべきです。例: <IMG src="magnifyingglass.gif" alt="Search">. しかしながら、代替テキストのための勧告は、グラフィックの使われ方(飾りボタン、リストマーカー、図解など)によって変わります。立ち入った情報は付録 B - 代替テキスト制作ガイドラインをご覧ください。
OBJECT が使われていれば、テキストを OBJECT エレメントの本体の中に提供することができます。例:<OBJECT data="magnifyingglass.gif">Search</OBJECT>
注意. 画像の外観についての長文説明が提供されてもよいでしょう。解決戦略については次の勧告を見ること。
<IMG src="97sales.gif" alt="1997年の売り上げ">
<A href="sales.html" title="1997年の売り上げ解説図の説明">D</A>
IMG エレメントの "longdesc" アトリビュートを使いましょう。例:<IMG src="97sales.gif" alt="1997年の売り上げ" longdesc="sales.html">
OBJECT の本体の内部にテキストを提供しましょう。<OBJECT data="sales.gif">
1997年の売り上げは下記の ...
</OBJECT>
AREA エレメントの"alt" アトリビュートや "title" アトリビュートの値を使って、イメージマップグラフィックの代わりにリンクの一覧を表示することができるからです。ブラウザが定義されている領域の座標を知っていますから、イメージマップ内部の領域へのキーボード操作も可能です。
サーバ側イメージマップを使わなければならないときは、制作者はイメージマップの選択肢の代替的一覧表を提供するべきです。代替的リンク一覧表がイメージマップの後にあれば、制作者は IMG エレメントの "alt" アトリビュートで代替リストの存在と位置とを示すべきです。もっと素直な解決方法は、新しくて後方互換性も乏しいのですが OBJECT エレメントの本体の内部に代替的リンクを組み込むことです(下記の例を見ること)。最後の可能性はアクセス可能な代替ページを制作することです。
クライアント側イメージマップについては解決戦略がいくつかあります。
AREA で MAP エレメントが使われているならば AREA エレメントの "alt" アトリビュートを設定します。たとえば IMG エレメントで
<IMG src="welcome.gif" alt="ライブラリのエリアのイメージマップ"
usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30" href="reference.html"
alt="リファレンス">
<AREA shape="rect" coords="34,34,100,100" href="media.html"
alt="オーディオ、ビジュアル工房">
</MAP>
OBJECT エレメントを使います。
<OBJECT data="welcome.gif" usemap="#map1">
ライブラリには
<A href="reference.html">リファレンス</A>
や <A href="media.html">オーディオ、ビジュアル工房</A>
を含むエリアがあります。
もっとテキストを続けたり前に置いたりできます。
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="ref.html" alt="リファレンス">
<AREA shape="rect" coords="34,34,100,100"
href="media.html" alt="オーディオ、ビジュアル工房">
</MAP></OBJECT>
MAP エレメントを A エレメントと一緒に使って、アクティブな地域形状を指定し、文脈的情報を提供することができます。
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>サイトのナビゲーション:
<A href="guide.html"
shape="rect" coords="0,0,118,28">アクセスガイド</a> |
<A href="shortcut.html"
shape="rect" coords="118,0,184,28">進む</A> |
<A href="search.html"
shape="circle" coords="184,200,60">検索</A> |
<A href="top10.html"
shape="poly" coords="276,0,373,28,50,50">トップ10n</A>
</MAP>
</OBJECT>
この例において、MAP エレメントは OBJECT エレメントの内容であり、代替的リンクはイメージマップ (navbar1.gif) が表示されない場合に表示されるだけであることに注意してください。
A エレメントの "title" アトリビュートを使います。例.
<A href="home.html" title="XYZ社サイト全体の検索">
<IMG src="magnifyingglass.gif" alt="検索">
</A>
NOSCRIPT エレメントは、制作者がスクリプトの内容の代替的表現を補うことを可能にします。例.
<SCRIPT type="text/tcl">
...スポーツのスコアのビルボードを表示するためのTclスクリプト...
</SCRIPT>
<NOSCRIPT>
<P>昨日の試合の結果:
ブルズ 91 対ソニックス 80 <A href="bullsonic.html">ブルズ対ソニックスの試合の要約</A>
...その他のスコア...
</NOSCRIPT>
APPLET エレメントの内容として説明文を補充しましょう。
<APPLET code="Press.class" width="500" height="500"
alt="Java アプレット:温度がどのように圧力に影響するか.">
温度が風船の中の分子を増加させるにつれて...
</APPLET>
注意. APPLET エレメントはHTML 4.0 では廃止されつつあります。
OBJECT エレメントの内容として説明文を補充しましょう。
<OBJECT classid="java:Press.class" width="500" height="500"
title="Java アプレット:温度がどのように圧力に影響するか.">
温度が風船の中の分子を増加させるにつれて...
</OBJECT>
より複雑なバージョンは、OBJECT エレメントが情報の代替的表現を提供するために埋め込まれてよいという事実を利用します。
<!-- まずアプレットを試します. -->
<OBJECT title="温度がどのように圧力に影響するか"
classid="java:Press.class" width="500" height="500">
<!-- だめならMPEGビデオを試します. -->
<OBJECT data="pressure.mpeg" type="video/mpeg">
<!-- だめならGIF画像を試します. -->
<OBJECT data="Pressure.gif">
<!-- だめなら説明文と代替物をレンダリングします. -->
温度が風船の中の分子を増加させるにつれて...
</OBJECT></OBJECT></OBJECT>
APPLET エレメントまたは OBJETC エレメントの内容の内部に与えられるべきです。APPLET エレメントや OBJECT エレメントの本体の内部に内容を提供すること(この節の項目1)は、後方互換性を有しますから、代替テキストを提供する好ましい方法です。
APPLET エレメントの "alt" アトリビュートを使う。
<APPLET code="Duke.class" width="50" height="50"
alt="Java アプレット:手を振る公爵.">
</APPLET>
注意. APPLET エレメントはHTML 4.0 では廃止されつつあります。
OBJECT エレメントを使うときには、"title" アトリビュートの内部または OBJECT エレメントの内部に代替テキストを指定する(この節の項目1を見ること)。
<OBJECT classid="Duke.class" width="50" height="50"
title="Java アプレット:手を振る公爵.">
</OBJECT>
注意. この領域ではさらなる探求が必要です。しばらくお待ちください。
title" アトリビュートを使いましょう。<A href="mittens.wav"title="にゃお">Calico は「やあ」と言う.</A>
headers" アトリビュートや "scope" アトリビュートを用いることです。付録にある最初2つのテーブルの例を参照してください。abbr" アトリビュート)は、短くても意味のあるものであるべきです。これは、各セルについて行や列ラベルを読み上げる将来のスピーキング技術にとって特に有益なことでしょう。省略形表記は繰り返しや読み上げ時間を節約します。付録にある例を参照してください。TABLE エレメントの "summary" アトリビュート)は、特に非視覚的ユーザにとって有益です。付録にある例を参照してください。axis" アトリビュート)を参照してください。ヒント集
LABEL, A, CAPTION, LEGEND エレメントの "accesskey" アトリビュートは、制作者が、キーボードショートカットを文に結びつけることを可能にします。たとえば、リンクに結びつけられているとき、それはユーザを結びつけられた文書に連れて行きます。<A accesskey="C" href="doc.html">XYZ社ホームページ</A>FRAMESET の末尾に NOFRAMES エレメントを組み込むべきです。Central Reference Document の例を参照してください。IMG エレメントや OBJECT エレメントに 代替テキストを指定することを可能にします。
<FRAMESET cols="10%,90%" title="電子文書のライブラリ">
<FRAME src="nav.html" title="ナビゲーションバー">
<FRAME src="doc.html" title="文書">
<NOFRAMES><A href="lib.html" title="ライブラリリンク">
電子ライブラリへ行く</A>
</NOFRAMES>
</FRAMESET>
FRAME エレメントや IFRAME エレメントで "longdesc" アトリビュートを使って、長文説明を指し示します。
BUTTON エレメントか INPUT エレメントかを使いましょう。LABEL エレメントの "for" アトリビュートを使ってラベルを明示的に結びつけることができます。
[新規] LABEL エレメントの "for" アトリビュートは明示的な結びつけを可能にします。例.
<FORM action="http://somesite.com/adduser" method="post">
<FIELDSET>
<LEGEND>個人情報</LEGEND>
<LABEL for="familyname">姓:</LABEL>
<INPUT type="text" id="familyname" tabindex="1">
<LABEL for="personalname">名:</LABEL>
<INPUT type="text" id="personalname" tabindex="2">
...その他の個人情報...
</FIELDSET>
<FIELDSET>
<LEGEND>投薬歴</LEGEND>
...投薬歴情報...
</FIELDSET>
</FORM>
<INPUT type="image" name="submit" src="button.gif" alt="送信">
tabindex" アトリビュートはフォーム制御の間にタブ操作順を指定します。例.
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
FIELDSET エレメントはフォーム制御をグループ化し、LEGEND エレメントは各グループにラベルをつけます。ガイドライン 10.2 の例をご覧ください。OPTGROUP エレメントを(SELECT エレメントと一緒に)使います。例.
<FORM action="http://somesite.com/prog/someprog"
method="post">
<P><SELECT name="ComOS">
<OPTGROUP label="Comm サーバー">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 + ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 + ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 + ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 + ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 + ComOS 3.5
</OPTGROUP>
</OPTGROUP>
<OPTGROUP label="ルーター">
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX + ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX + ComOS 3.5R
</OPTGROUP>
</OPTGROUP>
</SELECT>
</FORM>
accesskey" アトリビュートを用いて割り当てられます。この例は、"U" をアクセスキーとして割り当てています。"U" をタイプすると、ラベルにフォーカスが与えられ、それが制御にフォーカスを与え、その結果としてユーザはテキストを入力できます。
<FORM action="submit" method="post">
<LABEL for="user" accesskey="U">ユーザ名</label>
<INPUT type="text" name="user">
</FORM>
もし、最善の努力を尽くしても、なおどれかのページがアクセス可能でないならば、アクセス可能で、同等の情報を有し、アクセス不能のページと同じ頻度でメンテナンスされる代替ページへのリンクを提供しましょう。メンテナンス費用のせいで代替ページが時期遅れになる傾向が強まりますから、代替ページはは勧められた慣行ではありません。もし代替ページを作るのであれば、メインページと同じ頻度で更新され、同等の情報を提供するものでなければなりません。
LINK エレメントを用いて)適切な情報を提供しましょう。もしユーザがデフォルトメディア型を "aural", "braille", "tty" に設定していれば、ユーザエージェントは自動的に代替ページを読み込むべきです。例.
<HEAD>
<TITLE>バーチャルモールへようこそ!!</TITLE>
<LINK title="テキスト版"
rel="alternate" href="text_only.html"
media="aural, braille, tty">
</HEAD>
一般的なサイト設計のガイドラインに従うことは、アクセシビリティをさらに向上させるでしょう。
<HEAD><TITLE>リファレンスマニュアル -- 第1章</TITLE>
<LINK rel="Start" title="マニュアルの最初のページ"
type="text/html"
href="http://someplace.com/manual/start.html">
<LINK rel="Next" title="第2章"
type="text/html"
href="http://someplace.com/manual/ch2.html">
</HEAD>
Good Web Site Design Practices - Chapter 25 in the Central Reference Document
headers" - 以下の例は "headesr" アトリビュートにヘッダ情報を結びつける方法を示したものです。"headers" アトリビュートは、現在のデータセルに結びつけられたヘッダセル(行、列ラベル)の一覧を指定します。これは、各ヘッダセルが "id" を有していることを要求します。
<TABLE border="border" summary="この表は各評議員が飲むコーヒーの杯数、
コーヒーの種類(カフェイン抜きやレギュラー)、砂糖の有無を一覧表にしたものです.">
<CAPTION>各評議員の飲むコーヒーの杯数</CAPTION>
<TR>
<TH id="t1">氏名</TH>
<TH id="t2">杯数</TH>
<TH id="t3" abbr="種類">コーヒーの種類</TH>
<TH id="t4">砂糖</TH>
<TR>
<TD headers="t1">T. Sexton</TD>
<TD headers="t2">10</TD>
<TD headers="t3">エスプレッソ</TD>
<TD headers="t4">なし</TD>
<TR>
<TD headers="t1">J. Dinnen</TD>
<TD headers="t2">5</TD>
<TD headers="t3">カフェイン抜き</TD>
<TD headers="t4">あり</TD>
</TABLE>
音声合成装置は、以下のように話すことでレンダリングをするでしょう。
見出し: 各評議員の飲むコーヒー
まとめ: この表は各評議員が飲むコーヒーの杯数、コーヒーの種類
(カフェイン抜きやレギュラー)、砂糖の有無を一覧表に
したものです.
氏名: T. Sexton, 杯数: 10, 種類: エスプレッソ, 砂糖: なし
氏名: J. Dinnen, 杯数: 5, 種類: カフェイン抜き, 砂糖: あり
scope" - 以下の例は、先の例と同じヘッダとデータ情報とを結び付けていますが、"headers" よりも "scope" アトリビュートを使っています。"scope" は、以下の値のうちのひとつをとらなければなりません。row, col, rowgroup, colgroup. スコープは、データセルのセットを、現在のヘッダセルに結びつけるように指定します。この方法は特に単純なテーブルのために有益です。この例は、音声合成装置により、先の例のようにレンダリングされるでしょう。
<TABLE border="border"
summary="この表は各評議員の飲むコーヒーの杯数、コーヒーの種類
(カフェイン抜きやレギュラー)、砂糖の有無を一覧表にしたものです.">
<CAPTION>各評議員の飲むコーヒーの杯数</CAPTION>
<TR>
<TH scope="col">氏名</TH>
<TH scope="col">杯数</TH>
<TH scope="col" abbr="種類">コーヒーの種類</TH>
<TH scope="col">砂糖</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>エスプレッソ</TD>
<TD>なし</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>カフェイン抜き</TD>
<TD>あり</TD>
</TABLE>
"axis" - 以下の例は、テーブル内部にカテゴリーをどのように作成するかを示したものです。
<TABLE border="border">
<CAPTION> 旅行費用の報告 </CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="expenses">食事</TH>
<TH id="a3" axis="expenses">宿泊</TH>
<TH id="a4" axis="expenses">運賃</TH><TD>小計</TD>
</TR>
<TR>
<TH id="a6" axis="location">San Jose</TH>
<TH></TH><TH></TH><TH></TH><TD> </TD>
</TR>
<TR>
<TD id="a7" axis="date">1997/08/25</TD>
<TD headers="a6 a7 a2">37.74</TD>
<TD headers="a6 a7 a3">112.00</TD>
<TD headers="a6 a7 a4">45.00</TD><TD></TD>
</TR>
<TR>
<TD id="a8" axis="date">1997/08/26</TD>
<TD headers="a6 a8 a2">27.28</TD>
<TD headers="a6 a8 a3">112.00</TD>
<TD headers="a6 a8 a4">45.00</TD><TD></TD>
</TR>
<TR>
<TD>subtotals</TD><TD>65.02</TD><TD>224.00&
</TD><TD>90.00</TD><TD>379.02</TD>
</TR>
<TR>
<TH id="a10" axis="location">Seattle</TH>
<TH></TH><TH></TH><TH></TH><TD> </TD>
</TR>
<TR>
<TD id="a11" axis="date">1997/08/07</TD>
<TD headers="a10 a11 a2">96.25</TD>
<TD headers="a10 a11 a3">109.00</TD>
<TD headers="a10 a11 a4">36.00</TD><TD></TD>
</TR>
<TR>
<TD id="a12" axis="date">1997/08/28</TD>
<TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">109.00</TD>
<TD headers="a10 a12 a4">36.00</TD><TD></TD>
</TR>
<TR>
<TD>小計</TD><TD>131.25</TD><TD>218.00
</TD><TD>72.00</TD><TD>421.25</TD>
</TR>
<TR>
<TH>合計</TH><TD>196.27</TD><TD>442.00
</TD><TD>162.00</TD><TD>800.27</TD>
</TR>
</TABLE>
一般的に制作者は、グラフィックや画像の視覚的外観ではなく機能を説明する代替テキストを指定するべきです。制作者は自分自身にこの質問をするべきです。もし文書を電話を通じて声を出して読んでいるならば、この画像やグラフィックに遭遇したときに、聞き手にページが理解できるようにするためにどのように言うでしょうか?
画像についてのテキスト情報を提供するために使うことができる IMG のアトリビュートは3つあります。
alt" - (視覚的な説明よりも)機能的であり文脈化されたラベルや説明文を与えるために使われるべきです。ユーザやサーチエンジンのためのテキスト的置換としてそれを考えましょう。写真が存在しているという点にユーザの注意をひくべきではなく、また文法的に正しくあるべきです。適切なときには、読み上げの休止を示すために、代替テキストを句読点(コンマ、コロン、ピリオド)で終えます。
title" - これはHTML 4.0 に導入された新しいアトリビュートであり、ほとんどすべてのエレメント(タイトルをアトリビュートとしてサポートしないのは HEAD, BODY とその他8つのエレメントだけです)についての追加的情報を提供するためのものです。その適切な利用についてや、代替テキストとどのように組み合わせて使えば候補動かんせいを維持できるかという点について議論があります。
longdesc" - 画像の完全な視覚的説明(地図、解説図、その他きわめて重要な情報に必須です)があるページへのリンクを提供するために使われます。長文説明では必ず画像の趣旨やメッセージを伝えます。
注意. OBJECT エレメントで埋め込まれた画像の代替テキストを提供することは異なる獲物であって、将来カバーされるでしょう。
画像の簡潔なテキスト的等価物を提供します。代替テキストを提供することは必須ですが、長文説明を提供することは推奨事項です。
例. <IMG src="sailboats.gif" alt="静かな水面のヨット" longdesc="sailboatsdesc.html">
そして sailboatsdesc.html の内部には
小さい町の賑やかな通りの端の静かな水面につながれた10艘のヨットの写真
ユーザの中にはグラフィックの短い説明さえも見たくない人もいるかもしれませんから、これはできる限り短くとどめます。私達は将来、ユーザがダウンロードして見たい型の画像を選択できるようにするスタイルシートや class 値、XMLの利用について勧告を作成する予定です。
例1.
<STYLE ...><!-- UL { list-style: none }-->
<UL>
<LI><IMG src="star.gif" alt="Item:">オードリー</LI>
<LI><IMG src="star.gif" alt="Item:">ローリー</LI>
<LI> ... </LI>
</UL>
例2.(避ける)
<STYLE ...><!-- UL { list-style: url(star.gif) }-->
<UL>
<LI> オードリー</LI>
<LI> ローリー</LI>
<LI> ... </LI>
</UL>
例.
<STYLE ...><!-- UL { list-style: none }-->
<UL>
<LI><IMG src="red.gif" alt="新規:">Roth IRA</LI>
<LI><IMG src="yellow.gif" alt="旧式:">401 K</LI>
<LI> ... </LI>
</UL>
例.
<STYLE ...><!-- OL { list-style: none }-->
4枚目のアルバムに収録した歌のタイトル.
<OL>
<LI><IMG src="bullet1.gif" alt="One:">部屋</LI>
<LI><IMG src="bullet2.gif" alt="Two:">いいやつ</LI>
<LI> ... </LI>
</OL>
等価的なテキスト的リンク文を 代替テキストの中に提供する(すなわち、リンクはそれが言おうとしていることについての、グラフィックの代わりにテキストになる)。
例. <A href="routes.html"><IMG src="topo.html" alt="ボールダーズ登山ジムの現行ルート"></a>
セクションを分離するものとして使われるグラフィック(例.水平線)については、そのグラフィックが表現するものについての情報を提供する。言い換えると、視覚的な読者が受け取るものと同等のテキスト列を提供する。
例.
<IMG src="redline.gif" "第7章 - 視覚的表示 - の終わり">
<H1>第8章 - 聴覚的、触覚的表示</H1>
画像がスタイル化されたり色満載のテキストの画像にすぎないならば、代替テキストは画像内のテキストと同じものでなければならない。
<P>これは私達が言おうとしていることの<IMG src="BigRedExample.gif" alt="例">です。</P>
ページのレイアウトを強制するために見えない画像や透明な画像が使われることが多い。「空文字列」(alt="") の代替テキストか「空白」(alt=" ") の代替テキストかのどちらでも文脈が要求しているものを提供する。
例1. 単語やグラフィックの間の注意深く定義された間隔を作成するために画像が使われている。画像が読み込まれない時に単語がつながってしまわないようにするために「空白」代替テキストが使われている。
私の詩には大きなスペースが<IMG src="10pttab.gif alt=" ">ここに必要なのです。
例2. 画像は、グラフィックが一定の位置に現れるように強制するために使われている。
<IMG src="spacer.gif" alt=""><IMG src="colorfulwheel" alt="運命の車輪">
OBJECT を用いて組み込まれた画像のための代替テキストは、後方互換的な解決策であるが、新しいブラウザにまたがる一貫性を有してはいません。
各ガイドラインには、その重要性を説明する格付けが結び付けられている場合があります。
もし最善の努力を尽くしてもなおページがアクセス可能でなければ、アクセス可能で同等の情報を有し、アクセス不能ページと同じ頻度でメンテナンスされる代替ページへのリンクを提供する。
このW3Cワーキングドラフトの元々の草稿は、アメリカ教育省 国立障害リハビリテーション調査研究所からの出資の下で、ウィスコンシン大学 Trace R & D Center により積み上げられた the Unified Web Site Accessiblity Guidelines を基礎とするものです。
Unified Guidelines への協力者の完全なリストは http://trace.wisc.edu/docs/html_guidelines/version7.htm で入手可能です。
私達は、その作業がこの文書の基礎となった Unified Guidelines の積み上げに使われた、下記の参照資料セクションに列挙されている方々にも感謝したいと思います。