【注意】 この文書は、W3Cが技術ノートとして公開している「HTML Techniques for Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/)」を、ZSPCが個人的に翻訳したものです。この技術ノートの正式な基準となる文書は、あくまでW3Cのサイト内にある英語版であり、この文書には翻訳上の間違いや不適切な表現が含まれている可能性がありますのでご注意ください。
Copyright
©1999 - 2000 W3C® (MIT,
INRIA, Keio), All Rights
Reserved.
この文書のすべての原著作権は、W3C(マサチューセッツ工科大学・フランス国立情報処理自動化研究所・慶應義塾大学)が保有します。また、この文書には、W3Cの「免責事項」「商標」「文書利用許諾」「ソフトウェア使用許諾」で示される規定が適用されます。
この文書は、アクセシブルな HTML (Hypertext Markup Language) コンテンツ (HTML 4.01 [HTML4] を参照) を制作するための手法を解説したもので、「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」([WCAG10]) に適合した文書を制作したいと考えるウェブコンテンツ制作者の手助けとなることを意図しています。ただし、この文書に書かれている手法は、「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」に適合したHTMLを制作しようとする人の手助けになるとは思われますが、上記のガイドラインに適合することを保証するものではありませんし、適合させるための唯一の方法でもありません。
この文書は、アクセシブルなウェブコンテンツを制作するための一連の技術文書の中の一編です。関連する他の文書については、「ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書」[WCAG10-TECHS] を参照してください。
注意：この文書にはHTMLでのアクセシブルなソリューションのための多くの例文が掲載されていますが、その中にはコンテンツ制作者がするべきではない事を説明するための非推奨例も含まれています。非推奨例は目立つようにはしてありますが、それらはあくまで説明のためだけに掲載されているという点に注意してください。
本版は、前の版にあったいくつかのリンク切れ部分を修正したものです。
この2000年11月6日版の文書は、ウェブコンテンツ・アクセシビリティ・ガイドライン・ワーキンググループ (WCAG WG) によって作成および是認された一連の技術ノートの中の一文書です。この技術ノートは、W3Cのメンバーによって検討や是認が行われた文書ではありません。これらの一連の文書は、１つのファイルから成る1999年5月5日版のW3C技術ノート「ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書」に置き換わるものです。初期の文書で項目として分けられていた部分は、本版ではそれぞれ個別に発展させたテクノロジー別の文書に分割されました。テクノロジー別のより小さな文書に分けられたことによって、特定のテクノロジーに焦点を絞って利用することもできます。
「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」の勧告 [WCAG10] に書かれている内容は永続的なものですが、この姉妹編である一連の文書は、テクノロジーの変化やコンテンツ制作者によって発見されるアクセシブルなウェブデザインのためのより効果的な手法などに応じて発展させていく予定です。
この一連の文書には、更新履歴のほか未解決の問題および解決済の問題の一覧も用意されています。文書に対するコメントや現在抱えている問題に対する解決策などがありましたら、ぜひお寄せください。ワーキンググループ宛のこの文書に関するコメントは、「w3c-wai-gl@w3.org」までお送りください。公開されたアーカイブも用意されています。
この文書は、英語版が唯一の正式な基準文書となっていますが、他の言語への翻訳版もあります。
この文書で見つかった誤りの一覧については「ウェブコンテンツ・アクセシビリティ・ガイドライン正誤表」を参照してください。また、この文書内で誤りを発見された場合は、「wai-wcag-editor@w3.org」まで、ぜひご連絡ください。
World Wide Web Consortium (W3C) の Web Accessibility Initiative (WAI) では、様々なウェブアクセシビリティに関する資料や情報を提供しています。WAI アクセシビリティ・ガイドラインは、「WAI Technical Activity」の活動の一環として作成されたものです。 WCAGワーキング・グループの目的については、「the charter」に記載されています。
現在のW3C勧告とその他の技術文書の一覧も用意されています。
コンテンツ制作者は、構造的なタグ付けを行うべきです。また、その際には仕様に従う必要もあります。構造的な要素と属性(HTMLの要素と属性の索引参照)を使うことによって、文書の一貫性を高め、他のツールに対して情報を提供できるようになります。ここで言う他のツールとは、たとえば索引作成ツール、サーチエンジン、表の内容をデータベースに登録するプログラム、見出し要素を使用するナビゲーション・ツール、ある言語のテキストを他の言語に翻訳する自動翻訳ソフトなどのことを指します。
該当するチェックポイント：
構造を表す要素の中には、文書自身に関する情報を提供するものがあります。そして、それは文書の「メタデータ」と呼ばれています。メタデータとは、データに関する情報のことです。うまく適切に作られたメタデータは、ユーザーに対して重要な位置情報を提供します。文書に関する有益な情報を提供するHTMLの要素には、以下のようなものがあります。
文書の中に一度だけ現れるTITLE要素(必須)は、ほぼすべてのHTML4.01要素に適用できるtitle属性とは異なることに注意してください。コンテンツ制作者は、HTML4.01の仕様に従ってtitle属性を使うようにしてください。たとえば、title属性はリンク部分に対して、リンク先の情報を提供する目的で使われます。
この要素は、そのページの制作者に関する情報を提供するために使用することができます。
該当するチェックポイント：
この要素を使用すると、キーワードや制作者に関する情報などの文書に対するメタデータを指定することができます。ページの移動や自動的な更新を行う目的でMETA要素を使うべきではない理由とそれに関する情報については、自動的なページの更新の節を参照してください。
以下に示す例は、HTMLの非推奨とされる例です。最初の行は、ユーザーのページを一定の間隔で更新させます。コンテンツ制作者は、プッシュ・テクノロジーのまねをして、この手法を使うべきではありません。制作者には、ユーザーがそのページを読むのにどのくらいかかるのかは、予測することはできません。更新が早すぎると、ユーザーを混乱させることになります。コンテンツ制作者は、定期的に更新することは避けて、ユーザーが最新の情報を望んだ時にそれを選択できるようにするべきです。
【非推奨例】
<META http-equiv="refresh" content="60"> <BODY> <P>...情報... </BODY>
【例終了】
以下のHTMLの(META要素を使った)例は、一定の時間が経過した後に別のページへと移動させるものです。しかし、このタグの使い方は標準のものではありませんし、ユーザーやブラウザの訪問済ページのヒストリーを混乱させることにもなるため、制作者はこの方法によって別のページへと移動させるべきではありません。
【非推奨例】
<HEAD>
<TITLE>この方法を使ってはいけません！</TITLE>
<META http-equiv="refresh" content="5;
http://www.example.com/newpage">
</HEAD>
<BODY>
<P>現在ご使用のブラウザが、自動的な更新をサポート
している場合は、５秒後に
<A href="http://www.example.com/newpage">新しいサイト</A>
へ移動します。移動しない場合には、手動でリンク
部分をクリックしてください。
</BODY>
【例終了】
該当するチェックポイント：
公開されている正式な文法に適合していることを検証し、文書の先頭でその妥当性を宣言することによって、ユーザーはその文書の構造が信頼できるものであることを認識することができます。また、それによってユーザーエージェントは、必要な時にその用法をどこで探せばよいのかを知ることもできます。W3Cの検証サービスは、その文書が公開されている文法の全リストに掲載されている文法に適合しているかどうかを検証するものです。
できるだけ、W3Cの提供する文法に適合しているかどうかを検証するようにしてください。アクセシビリティに関して検討済のテクノロジーも参照してみてください。
該当するチェックポイント：
コンテンツ制作者は、文書のナビゲーションの手段と構成を示すために、LINK要素とリンクタイプ([HTML4]の6.12節を参照)を使用するべきです。ユーザーエージェントによっては、それによってナビゲーション・ツールを組み込んだり、タグ付けにもとづいて関連文書をまとめて印刷することができるかもしれません。
たとえば、その文書が小説の第２章であれば、HEAD要素に以下のようなLINK要素を入れることができます。
<LINK rel="Next" href="chapter3"> <LINK rel="Prev" href="chapter1"> <LINK rel="Start" href="cover"> <LINK rel="Glossary" href="glossary">
【例終了】
該当するチェックポイント：
リンク要素は、代わりとなる文書を示すために利用することもできます。ブラウザは、その種類や設定に従って、代わりの文書を自動的にロードするべきです。以下にLINK要素の使用例を示します。
【例】
LINK要素をサポートしたユーザーエージェントは、それが音声(aural)や点字(braille)、文字幅が固定の機器(tty)用であった場合には、代わりのページをロードします。
<HEAD>
<TITLE>バーチャルモールへようこそ！</TITLE>
<LINK title="テキスト版"
rel="alternate"
href="text_only"
media="aural, braille, tty">
</HEAD>
<BODY><P>...</BODY>
【例終了】
該当するチェックポイント：
以下に示すHTML4.01の機構は、内容をグループ化してわかりやすくします。
これらのグループ化のための仕組はすべて、それを使うことが適切で自然である場合(つまり、情報が論理的なグループ化に役に立つ場合)に使用されるべきです。コンテンツ制作者は、すべてのユーザーを混乱させないためにも、でたらめなグループ化をしないようにしてください。
該当するチェックポイント：
内容の長い文書は、しばしば様々な章に分けられ、章は副次的な論題を持ち、それはさらに節に分割され、さらに段落へというような具合になっています。そして、これらの情報の意味的なかたまりが、文書の構造を作り上げています。
各区分はHTMLの見出し要素(H1〜H6)で開始されるべきです。見栄えを良くするために他のタグで補足される場合もありますが(たとえば、横罫線を引くためにHR要素を使うなど)、視覚的な表現は文書の区分を識別するものとしては十分ではありません。
ユーザーによっては見出しを利用して文書を拾い読みしますので、文書の構造を伝えるために見出しを適切に使うことは重要なことだと言えます。見出し要素は正しい順序で階層化する必要があります。たとえばHTMLの場合は、H2要素はH1要素のすぐ下の階層に、H3要素はH2要素の次の階層にというように使うべきです。コンテンツ制作者は、見出しの階層を飛ばすべきではありません(たとえばH1のすぐ下の階層にH3を使うなど)。また、フォントの表示を変更する目的で見出しを使わないでください。フォントのスタイルを変更するためには、スタイルシートを使ってください。
HTMLでは、見出し要素はその区分を開始するだけで、それ自体には区分の内容を含まないことに注意してください。以下の例では、見出しとそれに続く内容の見栄えを制御するために、スタイルシートを使用しています。
<HEAD>
<TITLE>料理のテクニック</TITLE>
<STYLE type="text/css">
/* 見出しとそれに続く内容のインデント */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
<BODY>
<H1>料理のテクニック</H1>
〜簡単な説明〜
<DIV class="section2">
<H2>油を使った調理</H2>
〜この節の内容〜
</DIV>
<DIV class="section2">
<H2>バターを使った調理</H2>
〜この節の内容〜
</DIV>
【例終了】
該当するチェックポイント：
１つのページで複数の異なる言語を使用している場合には、言語が変わるすべての箇所を「lang」属性で明示するようにしてください。
<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. <Q>My name is Natasha,</Q> she said. <Q lang="it">Piacere,</Q> he replied in impeccable Italian, locking the door.
【例終了】
言語の変更を明示することは、いくつかの理由で重要なことだと言えます。
該当するチェックポイント：
タグ付け(以下の例参照)またはHTTPヘッダを利用して、基本となる言語を明示しておくことも推奨されています。
以下の節では、テキストの一部に対して構造を与える方法を説明しています。
該当するチェックポイント：
強調部分をタグ付けするためには、それにふさわしいHTMLの要素であるEMとSTRONGを使用するべきです。B要素とI要素は視覚的な表現上の効果を作り出すための要素ですので、使うべきではありません。EM要素とSTRONG要素は、様々な方法(フォントスタイルの変更や音声での抑揚の変更など)で表現可能な構造的強調を示すために作られた要素です。
該当するチェックポイント：
略語と頭字語はABBRとACRONYMでタグ付けし、省略していない状態の言葉を示すためにtitle属性を使用してください。
【例】
<P>ようこそ<ACRONYM title="World Wide Web">WWW</ACRONYM>へ！
【例終了】
同様のことが、テーブルの行や列の見出しとして使われる短縮された言いまわしにも適用されます。もし、見出しの言葉がすでに省略語になっている場合には、ABBRを使用して省略していない状態の言葉を示すようにしてください。また、見出しの言葉が長い場合には、データの表の節に書かれているように、その省略形を提供できるようにもなっています。
【例】
... <TH>First name</TH> <TH><ABBR title="Social Security Number">SS#</ABBR> ...
【例終了】
該当するチェックポイント：
Q要素とBLOCKQUOTE要素は、それぞれインラインとブロックレベルでの引用文をタグ付けするために使用します。
【例】
この例では、BLOCKQUOTEで長めの引用をしています。
<BLOCKQUOTE cite="http://www.example.com/loveslabourlost">
<P>Remuneration! O! that's the Latin word for three farthings.
--- William Shakespeare (Love's Labor Lost).
</P>
</BLOCKQUOTE>
【例終了】
該当するチェックポイント：
画像(たとえば、数学の方程式など)を使うのではなく、可能であればタグ付け(とスタイルシート)を利用することによって、アクセシビリティを向上させることができます。理由は以下の通りです。
例としてあげると、ウェブ上で数式を表すためには以下のような手法があります。
TeXは技術論文を作成するために一般に使用されています。そして、それらはウェブ上で公開するためにHTMLに変換されます。しかし、多くの変換ソフトは画像を生成し、非推奨のタグを使用し、レイアウトのためにテーブルを使う傾向があります。したがって、コンテンツ提供者は、以下のようにするべきです。
HTML4.01の仕様では、その他の要求に合わせて以下の構造的な要素が定義されています。
該当するチェックポイント：
HTMLのリスト要素であるDLとUL、OLは、リストを作るためだけに使用されるべきです。インデントなどの効果を目的として使用するべきではありません。CSS技術書 [WCAG10-CSS-TECHNIQUES]のレイアウトのためのCSSとテーブルの情報を参照してください。
番号つきのリストは、視覚以外でアクセスしているユーザーが内容を読み進める場合に役立ちます。視覚以外でアクセスしているユーザーは、リストの内容で、特にそれが入れ子になっていて各項目にその階層が示されていない場合に、迷子になってしまう可能性があります。ユーザーエージェントがリストの前後関係を明確に示す手段(たとえば、CSS2の「:before」疑似要素のサポートなど)を提供するようになるまでは、コンテンツ制作者はリストの中に前後関係を知るための手掛かりを入れておくようにしてください。
番号の付けられたリストであっても、単純な番号よりは階層ごとの番号を組合せた番号の方がより有益なものとなります。たとえば、「1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1,」のように番号の付けられたリストは、以下のように単純な番号をつけられた同じリストよりも、前後関係がわかりやすくなります。
1.
1.
2.
1.
3.
2.
1.
上のリストの場合は、「1, 1, 2, 1, 2, 3, 2, 1」のように読み上げられ、リストの階層についての情報は一切伝えません。
[CSS1]と[CSS2]では、ユーザー・スタイルシートを使って番号のスタイルを制御できるようになっています(これは番号付きのリストに限らず、すべてのリストに適用できます)。
【例】
以下のCSS2のスタイルシートは、UL要素またはOL要素で作られた入れ子のリストに対して、階層ごとの番号を組合せた番号をつけるものです。各項目は、「1, 1.1, 1.1.1」のように番号が付けられます。
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>
【例終了】
CSS2が広くサポートされるようになるか、ユーザーエージェントが他の方法でリストの表現方法を制御できるようになるまでは、コンテンツ制作者は番号の付けられていない入れ子になったリストに対して、前後関係の手掛かりとなるものをつけるようにしてください。視覚以外でアクセスしているユーザーは、リストがどこで始まってどこで終わるのか、または各リスト項目はどこから始まっているのかなどを知るのが難しい場合があります。たとえば、画面上でリストの項目が途中で次の行に送られている場合、それがリストの中のそれぞれ別の２つの項目だと認識されるかもしれません。これは、古いスクリーンリーダーを使っている場合に起きる可能性のある問題です。
番号なしのリスト内のLI要素で作られるリスト項目の前につけられるマークのスタイルを変更するには、スタイルシートを使ってください。CSSを使用すると、マークにする画像がロードされない場合の予備のスタイル(たとえば「disc」など)を指定しておくことができます。
【例】
<HEAD>
<TITLE>Using style sheets to change bullets</TITLE>
<STYLE type="text/css">
UL { list-style: url(star.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Audrey
<LI>Laurie
<LI>Alice
</UL>
【例終了】
ユーザーが視覚的に表示されるリスト項目間の違いをより理解しやすいようにするためには、コンテンツ制作者はリスト項目の前か後ろにテキストのラベルをつけるようにしてください。
【例】
この例では、新しい情報は「New」というテキストのフォントスタイル(太字)と色(黄色のマークと黄色い背景に赤い文字)によって伝えられます。
<HEAD>
<TITLE>Bullet styles example</TITLE>
<STYLE type="text/css">
.newtxt { font-weight: bold;
color: red;
background-color: yellow }
.newbullet { list-style : url(yellow.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
<LI> 401(k)</LI>
</UL>
</BODY>
【例終了】
該当するチェックポイント：
DLとDT、DDによって作られる定義リストに対して、マークとして画像をつけないようにしてください。もし画像を使うのであれば、画像に対して同等の役割を果たすテキストをつけるようにしてください。
【非推奨例】
<HEAD> <TITLE>定義リストに画像を使った非推奨例</TITLE> </HEAD> <BODY> <DL> <DD><IMG src="star.gif" alt="* ">Audrey <DD><IMG src="star.gif" alt="* ">Laurie <DD><IMG src="star.gif" alt="* ">Alice </DL>
【例終了】
コンテンツ制作者は、リスト項目の前につけるマークがそれに付け加えて別の(視覚的な)情報も表すようにはしないください。もし、同時に別の情報も表すのであれば、そのマークに対してわかりやすい同等の役割を果たすテキストをつけてください。
【非推奨例】
<DL> <DD><IMG src="red.gif" alt="New:">Roth IRA</DD> <DD><IMG src="yellow.gif" alt="Old:">401(k)</DD> </DL>
【例終了】
この節では、テーブルとTABLE要素内に配置できる要素のアクセシビリティについて説明します。データを組織化するためのテーブルと、ページを視覚的にレイアウトするためのテーブルの２種類がそれぞれ説明されています。
コンテンツ制作者は、HTML4.01のデータを表すテーブルを、様々な方法でよりアクセシブルにすることができます。
該当するチェックポイント：
該当するチェックポイント：
この例は、TD要素で作られるデータセルとそれに対応するヘッダをheaders属性によって関連付ける方法を示したものです。headers属性には、データセルに関連するヘッダセルのリストを指定します。この場合、各ヘッダセルにはid属性が指定されている必要があります。
<TABLE border="1"
summary="この表は、各上院議員が飲んだコーヒー
の量とそのコーヒーの種類(レギュラー
またはカフェイン抜き)、砂糖を入れるか
どうかを示したものです。">
<CAPTION>各上院議員が飲んだコーヒーの量(単位：杯)</CAPTION>
<TR>
<TH id="header1">名前</TH>
<TH id="header2">杯</TH>
<TH id="header3" abbr="種類">コーヒーの種類</TH>
<TH id="header4">砂糖</TH>
<TR>
<TD headers="header1">T. Sexton</TD>
<TD headers="header2">10</TD>
<TD headers="header3">エスプレッソ</TD>
<TD headers="header4">なし</TD>
<TR>
<TD headers="header1">J. Dinnen</TD>
<TD headers="header2">5</TD>
<TD headers="header3">カフェイン抜き</TD>
<TD headers="header4">入れる</TD>
</TABLE>
【例終了】
スピーチシンセサイザは、たとえばこのテーブルを次のように表現します。
タイトル：各上院議員が飲んだコーヒーの量(単位：杯)
要約 ：この表は、各上院議員が飲んだコーヒー
の量とそのコーヒーの種類(レギュラー
またはカフェイン抜き)、砂糖を入れるか
どうかを示したものです。
名前 ：T. Sexton、杯：10、種類：エスプレッソ、砂糖：なし
名前 ：J. Dinnen、杯：5、種類：カフェイン抜き、砂糖：入れる
視覚的なユーザーエージェントでは、たとえばこのテーブルを次のように表現します。
次の例は、前に紹介したものと同様にヘッダセル(TH)とデータセル(TD)を関連付けるものです。ただし、ここではheaders属性ではなくscope属性を使用しています。scope属性の値には「row, col, rowgroup, colgroup」の中のいずれかを指定する必要があります。scope属性は、それを指定したヘッダセルに関連付けるデータセルの範囲を指定するものです。この方法は、単純な表に使用すると特に便利です。この表が読み上げられる場合には、前の例とまったく同じように表現されます。headers属性とscope属性のどちらを使うかは、表の複雑さによります。ヘッダセルとデータセルの関係がタグ付けで明確にされている限りは、どちらを使っても表現形態には影響しません。
【例】
<TABLE border="1"
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="1">
<CAPTION>出張旅費の報告</CAPTION>
<TR>
<TH></TH>
<TH id="header2" axis="expenses">食費
<TH id="header3" axis="expenses">宿泊費
<TH id="header4" axis="expenses">交通費
<TD>小計</TD>
<TR>
<TH id="header6" axis="location">サンノゼ
<TH> <TH> <TH> <TD>
<TR>
<TD id="header7" axis="date">1997年8月25日
<TD headers="header6 header7 header2">37.74
<TD headers="header6 header7 header3">112.00
<TD headers="header6 header7 header4">45.00
<TD>
<TR>
<TD id="header8" axis="date">1997年8月26日
<TD headers="header6 header8 header2">27.28
<TD headers="header6 header8 header3">112.00
<TD headers="header6 header8 header4">45.00
<TD>
<TR>
<TD>小計
<TD>65.02
<TD>224.00
<TD>90.00
<TD>379.02
<TR>
<TH id="header10" axis="location">シアトル
<TH> <TH> <TH> <TD>
<TR>
<TD id="header11" axis="date">1997年8月27日
<TD headers="header10 header11 header2">96.25
<TD headers="header10 header11 header3">109.00
<TD headers="header10 header11 header4">36.00
<TD>
<TR>
<TD id="header12" axis="date">1997年8月28日
<TD headers="header10 header12 header2">35.00
<TD headers="header10 header12 header3">109.00
<TD headers="header10 header12 header4">36.00
<TD>
<TR>
<TD>小計
<TD>131.25
<TD>218.00
<TD>72.00
<TD>421.25
<TR>
<TH>合計
<TD>196.27
<TD>442.00
<TD>162.00
<TD>800.27
</TABLE>
【例終了】
この表は、サンノゼとシアトルの２ヵ所での出張旅費を、日付と科目(食費、宿泊費、交通費)別に一覧表にしたものです。以下の画像は、視覚的に表現するユーザーエージェントでの表示例です。[出張旅費の表の説明]
該当するチェックポイント：
制作者は、レイアウトや位置決めにはスタイルシート使用するべきです。もし、レイアウトのためにテーブルを使わなければならない場合は、読んで意味のわかる順序で線形化されるようにしなければなりません。テーブルが線形化されると、各セルの内容を単純に段落にして(たとえばページの下方向に)つなげたような状態になります。したがって、各セルは横列に沿って順に読んだ場合に意味が通るようにして、かつ線形化されても意味が通るように構造を表す要素を入れておくべきです。
また、レイアウトのためにテーブルを使う場合は、視覚的な体裁を実現する目的で構造を表す要素を使わないでください。たとえば、TH(テーブル・ヘッダ)要素は通常、太字でセンタリングされた状態で表示されます。そのセルが実際には縦列または横列のデータに対するヘッダでない場合には、スタイルシートを使用するか、その属性の整形に関する属性を使用するようにしてください。
該当するチェックポイント：
テーブルをレイアウトのために使っていてセル内のテキストが折り返されている場合、HTMLのソースを解釈しない古いスクリーンリーダーやテーブルをセルごとに移動できないブラウザでは問題が発生します。古いスクリーンリーダーはページ全体に渡って、たとえ別の縦列の内容であっても同じ行にあるテキストを連続する１つの文章として読み上げます。
たとえば、テーブルが画面上で次のように表示された場合、
今日の午前中、30%の確立で ウィスコンシン大学の授業は、 にわか雨が降ります。しかし、 9月3日から再開されます。 雨は週末には上がるでしょう。
スクリーンリーダーは、以下のように読み上げるかもしれません。
今日の午前中、30%の確立でウィスコンシン大学の授業は、 にわか雨が降ります。しかし、9月3日から再開されます。 雨は週末には上がるでしょう。
一般に、ページをレイアウトするために使われているテーブルを線形化する方法は、非常に単純なものです。それは、テーブルからテーブル関連のタグを単純に取り除くことで行われます。このように処理するツールはいくつかあり、スクリーンリーダーや一部のブラウザではテーブルを線形化するための一般的な方法となっています。
しかし、データを表すテーブルを線形化するためには、別の方法が要求されます。データセルはそれを取り囲むセルやヘッダセルによって提供される情報によって成り立つため、その関係を示す視覚的に得られる情報を、線形化したテーブルでも表現する必要があります。
たとえば、縦列の配置順を指定するようにしてください。自然言語の文字表記の方向は縦列の配置順に影響し、それがさらに線形化されるテーブルにも影響を与える場合があります。dir属性を使用すると、縦列の配置順を指定することができます(たとえば、「dir="rtl"」は右から左：right-to-left の指定です)。
このタグ付けは、ブラウザがテーブルを線形化する場合にも役立ちます。横列を基準として線形化する場合には、まずヘッダを横方向に順に読み上げ、続く各セルの前では対応する縦列のヘッダをそれぞれ読み上げる、というように行うものもあります。そうでなく、縦列を基準として線形化するものもあります。今後作られるブラウザや支援技術では、テーブルを自動的に線形化したり、もしデータが適切にラベル付けされていればセル毎に移動することができるようになるでしょう。WAI Evaluation and Repair working group では、常に各種ツールの進歩の状況を調査し、また自身でも線形化したりセル毎に移動できるようなツールの開発を行っています。詳細は、[WAI-ER] を参照してください。
すぐできるテスト法：スクリーンリーダーがテーブルをどのように読み上げるかを知る良い方法は、そのページに紙を当てて、それを下げながらテーブルの内容を１行ずつ読んでみることです。
HTML3.2対応のブラウザでは、TFOOT要素で指定した横列がテーブル本体(TBODY)の前に表示されてしまいます。
該当するチェックポイント：
リンク部分の言葉には、極端に漠然としたものを使うべきではありません。「click here」という言葉は使わないでください。この言葉は特定の装置に依存した(この場合はポインティング・デバイスのみを対象とした)言葉であるだけでなく、そのリンクの先に何があるのかもまるで表していません。「click here」ではなく、たとえば「トドに関する詳しい情報」や「このページのテキスト版」などのように、リンク部分の言葉はリンク先の本質を表したものにするべきです。前述の例の後者の場合(または他の特定の形式や言語の文書を示す場合)は、ユーザーが自分に合ったバージョンを自動的に得ることができるように、コンテント・ネゴシエーションを使うこともできます。
リンク部分の言葉を明確にする他に、コンテンツ制作者はリンク先をはっきりと正確に説明するようなtitle属性の値を指定することもできます。
もし、同じページで複数のリンクが同じ言葉を使っている場合、それらはすべて同じリンク先を指すようにするべきです。そのように一貫性を保つことで、ページ・デザインだけでなくアクセシビリティも向上します。
もし、異なるリンク先を指す複数のリンクが同じ言葉を使用している場合、それぞれのA要素のtitle属性に異なる値を指定して、それらを区別できるようにしてください。
音声で利用しているユーザー(目の見えない人、見ることが困難な人、小さな画面を利用している人やディスプレイを使用していない人)は、そのページを素早く目で拾い読みすることができません。このようなユーザーは、ページの概要を知るため、または早くリンクを探すために、リンクからリンクへタブで移動したり、ページ上のリンクのリストを調べ直したりします。
したがって、関連するリンクが並んでいるような場合には、最初のリンクにはそれらを紹介するような情報も入れて、それ以降のリンクにはそれぞれを区別するための情報を入れてください。こうすることによって、それらを順序通りに読むユーザーは、その関係を知ることができます。
【例】
<A href="my-doc.html">この文書のHTML版</A>、 <A href="my-doc.pdf" title="この文書のPDF版">PDF版</A>、 <A href="my-doc.txt" title="この文書のテキスト版">テキスト版</A>
【例終了】
該当するチェックポイント：
リンクの内容として画像を使う場合は、その画像に対して同等の役割を果たすテキストを指定してください。
【例】
<A href="routes.html">
<IMG src="topo.html"
alt="ボールダー・クライミング・ジムへの行き方">
</A>
【例終了】
もしくは、リンクとしてテキストもつけている場合は、IMG要素のalt属性の値としてスペースを入れてください。このテキストは画像の横に表示されることに注意してください。
【例】
<A href="routes.html">
<IMG src="topo.html" alt=" ">
ボールダー・クライミング・ジムへの行き方
</A>
【例終了】
該当するチェックポイント：
複数のリンクが論理的に１つのまとまりとして分類できる場合(たとえば、サイト内の各ページに配置してあるナビゲーション・バーなど)は、それらを１つの単位としてタグ付けするべきです。ナビゲーション・バーは一般に、そのページの最初に位置しています。そして、それはスピーチ・シンセサイザを利用しているユーザーは、そのページの興味のある内容にたどり着く前に、毎回多くのリンクの読み上げを聞かなければならないことを意味します。ユーザーがリンクのグループを(それを見ることのできるユーザーが、各ページにある同じような部分を読み飛ばすのと同様に)読み飛ばせるようにするには、いくつかの方法があります。
将来的には、ユーザーエージェント側で、ナビゲーション・バーなどを読み飛ばすことができるようになると思われます。
【例】
この例では、MAP要素によってリンクをグループ化し、title属性によってそれがナビゲーション・バーであることを示しています。そして、グループ化したリンクの中の最初のリンクは、グループの後にあるアンカーへと移動するようになっています。また、各リンクは、リンクしていない印刷可能な(両端をスペースで囲った)文字で区切られていることに注意してください。 （【訳注】MAP要素には、HTML4.01の場合はname属性を、XHTML1.0の場合はid属性を必ず指定する必要がありますので注意してください。）
<BODY>
<MAP title="ナビゲーション・バー">
<P>
[<A href="#how">ナビゲーション・バーを読み飛ばす</A>]
[<A href="home.html">ホーム</A>]
[<A href="search.html">検索</A>]
[<A href="new.html">更新情報</A>]
[<A href="sitemap.html">サイトマップ</A>]
</P>
</MAP>
<H1><A name="how">このサイトの使い方</A></H1>
<!-- このページのコンテンツ -->
</BODY>
【例終了】
該当するチェックポイント：
ページ中のアクティブな要素に対してキーボードでアクセスできるということは、ポインティング・デバイスを使うことのできない多くのユーザーにとっては重要なことです。ユーザーエージェントには、ユーザーがあるキーを打つことによって特定の働きをするような機能が含まれている場合があります。HTML4.01では、コンテンツ制作者がaccesskey属性を使ってキーボード・ショートカットを指定できるようになっています。
【例】
この例では、ユーザーは「C」キーを使用してリンク先へ移動することができます。
<A accesskey="C" href="doc.html" hreflang="en"
title="XYZ company home page">
XYZ company home page</A>
【例終了】
注意：ユーザーエージェント側で、全体的なキーの割り当てを示すことができるようになるまでは、割り当てられているキーの情報を提供するようにしてください。
該当するチェックポイント：
ここでは画像(GIFアニメーションのようなシンプルな動画も含む)とイメージマップのアクセシビリティについて説明します。
数式を画像で表すことについては、画像にするよりはタグとスタイルシートを使うの節を参照してください。
該当するチェックポイント：
IMG要素を使う場合は、alt属性を使用して短かい同等の役割を果たすテキストをつけるようにしてください。注意：この属性の値は「alt-テキスト」と呼ばれています。
【例】
<IMG src="magnifyingglass.gif" alt="検索">
【例終了】
OBJECT要素を使う場合は、OBJECT要素の内容として同等の役割を果たすテキストを入れてください。
【例】
<OBJECT data="magnifyingglass.gif" type="image/gif">
検索
</OBJECT>
【例終了】
該当するチェックポイント：
短い同等の役割を果たすテキストでは画像の役目や働きが十分に伝えられない場合は、longdesc属性で指定するファイルで付加的な情報を提供してください。
【例】
<IMG src="97sales.gif" alt="1997年の売上"
longdesc="sales97.html">
sales97.htmlの内容：
図表では、1997年の売上の推移を示してします。図表は
棒グラフになっており、月ごとの売上の伸び率を示して
います。1月の売上は1996年の12月にくらべて10%アップ
していますが、2月は3%のダウン・・・
【例終了】
longdesc属性をサポートしていないユーザーエージェントのために、画像の横に説明へのリンクもつけてください。（【訳注】このリンクを示す場合、英語の場合では一般に "Description" の [D] が使われています）。
【例】
<IMG src="97sales.gif" alt="1997年の売上" longdesc="sales.html"> <A href="sales.html" title="1997年の売上の図表に関する説明">[D]</A>
【例終了】
OBJECT要素を使う場合は、要素の内容として長めの同等の役割を果たすテキストを入れてください。
【例】
<OBJECT data="97sales.gif" type="image/gif">
1997年の売上は、我々の予想した
<A href="anticipated.html">予想購入数
</A>を・・・
</OBJECT>
【例終了】
OBJECT要素の内容には、alt-テキストとは違ってタグ付けもできることに着目してください。つまり、コンテンツ制作者はOBJECT要素内で付加的な情報へのリンクも提供できるということです。
【例】
<OBJECT data="97sales.gif" type="image/gif">
1997年の売上の図表。
<A href="desc.html">テキストによる説明文</A>
も用意されています。
</OBJECT>
【例終了】
注意：表示されないD-linkは、longdesc属性の採用により非推奨となりました。
表示されないD-linkとは、alt属性の値として「D-link」または「D」を指定したA要素の内容として含まれる小さい(1pixel)画像または透明な画像のことを指します。他のD-linkと同様に、画像に対する同等の役割を果たすテキストを参照できるようにするものです。他のリンクと同様、ユーザーはtabキーを使って、そこに移動することができます。表示されないD-linkは、表現上の理由から目に見えるD-linkを配置したくないと考えるデザイナーに対して、このような(仮の)解決方法を提供するものです。
該当するチェックポイント：
ASCIIアート(文字による絵や図表など)は、使わないでください。画像であれば容易に同等の役割を果たすテキストをつけることができますので、代わりに画像を使うようにしてください。もし、ASCIIアートを使わなければならない場合には、以下のようにASCIIアートを読み飛ばすことができるようなリンクをつけてください。
【例】
<P> <a href="#post-art">ASCIIアートを読み飛ばす</a> <!-- ここにASCIIアートを配置 --> <a name="post-art">ASCIIアートの説明</a>
【例終了】
ASCIIアートには、たとえばこのようなタグ付けもできます。[ ASCIIアートの図表を読み飛ばす | 図表の説明を参照する ]：
【例】
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
光りの点滅の頻度 (Hz)
【例終了】
ほかの方法として、小さなASCIIアートにはABBR要素とそのtitle属性を使うこともできます。
【例】
<P><ABBR title="ASCIIアートのスマイルマーク">:-)</ABBR>
【例終了】
ASCIIアートが複雑な場合は、同等の役割を果たすテキストが適切に表現されているかどうか確認してください。
ほかに、ASCIIアートの代りに普通の言葉で置き換えるという方法もあります。たとえば、<ウインク>は、ウインクしているスマイルマーク「;-)」の代りになります。また、マイナスと大なり記号による矢印(例：-->)は、「therefore(その結果・したがって)」という言葉で、一般的でない省略形の「gr8」は、「great」という言葉で置き換えることができます。
イメージマップとは、「アクティブな領域」を持った画像のことを言います。ユーザーが領域の中の１つを選択すると、リンク先へ移動する、サーバーに情報を送るなどの何らかの働きをします。イメージマップをアクセシブルにするためには、コンテンツ制作者は視覚的に確認できる領域に結び付けられた各働きを、ポインティング・デバイスなしでもアクティブにできるようにしなければなりません。
イメージマップは、MAP要素によって作られます。HTMLでは、クライアントサイド(ユーザーのブラウザ側でURIを処理)とサーバーサイド(クリックされた座標をサーバー側で処理)の２種類のイメージマップを使うことができます。いずれのイメージマップの場合でも、コンテンツ制作者は同等の役割を果たすテキストを提供しなければなりません。
サーバーサイド・イメージマップは特定の入力装置を必要としますので、コンテンツ制作者はサーバーサイド・イメージマップ(ismap属性を使用)ではなく、クライアントサイド・イメージマップ(usemap属性を使用)を使うようにしてください。もし、サーバーサイド・イメージマップを使わなければならない場合(たとえば、shape属性の値では領域の図形を表現できない場合など)は、制作者は同じ機能や情報をアクセシブルな代りの形式で提供するようにしてください。これを実現するための１つの方法は、各リンクへキーボードで移動できるように、アクティブな各領域に対応するテキストのリンクも提供することです。サーバーサイド・イメージマップを使わなければならない場合には、サーバーサイド・イメージマップの節も参考にしてください。
該当するチェックポイント：
イメージマップは視覚的な情報を伝えるものですので、同等の役割を果たすテキストをつけるようにしてください。他のリンクと同様、リンクしている部分の言葉は、その前後を読まなくても意味がとれるようなものになっていなければなりません。良いリンクテキストの書き方については、リンクしている部分の言葉の節を参照してください。また、ユーザーは頻繁に利用するリンクには、キーボード・ショートカットがついていることを望んでいるかもしれません。キーボードによるアクセスの節も参照してください。
マップを作るためにAREA要素が使われている場合は、alt属性を使用してください。
【例】
<IMG src="welcome.gif" alt="Image map of areas in the library"
usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference">
<AREA shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab">
</MAP>
【例終了】
以下の例では目的は同じですが、画像についての詳しい情報を提供するために、IMG要素ではなくOBJECT要素を使用して画像を配置しています。
【例】
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
There are several areas in the library including
the <A href="reference.html">Reference</A> section and the
<A href="media.html">Audio Visual Lab</A>.
</OBJECT>
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference">
<AREA shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab">
</MAP>
【例終了】
該当するチェックポイント：
同等の役割を果たすテキストに加えて、反応する各領域と同じリンク先のテキストによるリンクも提供してください。AREA要素の代りにA要素を使用すると、アクティブな領域とテキストによるリンクを同時に指定することができます。
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigate the site.
[<A href="guide.html" shape="rect"
coords="0,0,118,28">Access Guide</A>]
[<A href="shortcut.html" shape="rect"
coords="118,0,184,28">Go</A>]
[<A href="search.html" shape="circle"
coords="184.200,60">Search</A>]
[<A href="top10.html" shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
Top Ten</A>]
</MAP>
</OBJECT>
【例終了】
上の例では、イメージマップ(navbar1.gif)が表示されない場合にのみ代替のリンクが表示されるように、MAP要素がOBJECT要素の内容となっていることに注意してください。
また、リンク部分が大カッコ([])で区切られている点にも着目してください。これは、目の見えるユーザーに対して視覚的に各リンクを区別しやすくするためだけでなく、古いスクリーンリーダーが、隣り合う複数のリンクを１つのリンクとして読み上げてしまうことを防ぐためのものでもあります。
コンテンツ制作者は、隣り合うテキストのリンクの間に、スペースで囲った印刷可能な文字(大カッコや縦棒「|」など)を入れるようにしてください。ただし、リンクとして画像が使用される場合には問題は発生しませんが、グラフィカルなブラウザは画像をロードできない場合にプレースホルダを表示するため、alt-テキストはリンクとして読めなくなります。リンクのグループ化とそれを読み飛ばす仕組も参照してください。
該当するチェックポイント：
該当するチェックポイント：
サーバーサイド・イメージマップを使わなければならない場合、コンテンツ制作者はイメージマップでの選択の代りとなるものも提供するべきです。それには、３つの方法があります。
【例】
<A href="http://www.example.com/cgi-bin/imagemap/my-map">
<IMG src="welcome.gif" alt="ようこそ!(下にテキストのリンクもあります)" ismap>
</A>
<P>[<A href="reference.html">Reference</A>]
[<A href="media.html">Audio Visual Lab</A>]
【例終了】
サーバーサイドとクライアントサイドのイメージマップは、フォームの送信ボタンとして使われることもあります。詳しくはグラフィカルなボタンの節を参照してください。
該当するチェックポイント：
該当するチェックポイント：
アプレットは、APPLET要素とOBJECT要素のどちらを使っても文書に組み込むことができますが、OBJECT要素を使う方が望ましいと言えます。
該当するチェックポイント：
OBJECT要素を使う場合は、要素の内容として同等の役割を果たすテキストを入れてください。
【例】
<OBJECT classid="java:Press.class" width="500" height="500">
気温が上がるにつれて、バルーン内の分子は・・・
</OBJECT>
【例終了】
OBJECT要素には、その情報の代りとなる別の表現方法を組み込むことができる、という機能を利用した少し複雑な例を示します。
【例】
<OBJECT classid="java:Press.class" width="500" height="500">
<OBJECT data="Pressure.mpeg" type="video/mpeg">
<OBJECT data="Pressure.gif" type="image/gif">
気温が上がるにつれて、バルーン内の分子は・・・
</OBJECT>
</OBJECT>
</OBJECT>
【例終了】
APPLET要素を使う場合は、alt属性とAPPLET要素の内容となる部分に同等の役割を果たすテキストを入れてください。これによって、２つの手段(alt属性または要素内容)のうちいずれか一方しかサポートしていないユーザーエージェントでもうまく変換されるようになります。
【非推奨例】
<APPLET code="Press.class" width="500" height="500"
alt="Javaアプレット：どのように気温が気圧に作用するか">
気温が上がるにつれて、バルーン内の分子は・・・
</APPLET>
【例終了】
該当するチェックポイント：
アプレット(OBJECT要素とAPPLET要素のいずれで作られている場合でも)が他の代りとなる形式では再現できないような対話型の操作(たとえば、物理の実験をするような操作)を必要とするものである場合は、アプレット自身をアクセシブルなものにしてください。
もし、アプレットが動くものであれば、制作者はその動作を止めるための手段を提供するべきです(例については、[TRACE]を参照)。また、オーディオとビデオによる表現をアクセシブルにする方法については、次の節を参照してください。
アクセシブルなアプレットを作るためのさらに詳しい情報については、[JAVAACCESS]と[IBMJAVA]を参照してください。これらの会社では、Java Swing classをアクセシブルにすると同時に、アクセシビリティAPIの開発も行っています。
関連するチェックポイント：
該当するチェックポイント：
必要であれば、そのページを理解できるようにするために、視覚的な情報に対して同等の役割を果たすテキストをつけてください。例として、天気予報のページの一部で雲と降水量のアニメーションが繰り返し再生されるような場合を考えてみます。このアニメーションは天気予報の他の部分(自然言語のテキストで表現される部分)を補足するものですので、冗長にならないような説明をつけるべきです。しかし、もしそのアニメーションを、学生が大陸に関連する雲の形成を学ぶような教育的な場面で使用するのであれば、そのアニメーションを見ることはできないが、それについて学びたいと考える人に向けた説明が書かれるべきです。
プラグインを必要とするような他のオブジェクトを配置する場合も、OBJECT要素を使用するべきです。しかし、Netscapeブラウザの後方互換性を考慮する場合は、以下のように独自拡張のEMBED要素をOBJECT要素の中に入れて使ってください。
【非推奨例】
<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
codebase="http://example.com/content.cab" width=100 height=80>
<PARAM name="Movie" value="moviename.swf">
<EMBED src="moviename.swf" width=100 height=80
pluginspage="http://example.com/shockwave/download/">
</EMBED>
<NOEMBED>
<IMG alt="Still from Movie"
src="moviename.gif" width=100 height=80>
</NOEMBED>
</OBJECT>
【例終了】
より詳しい情報については、[MACROMEDIA]を参照してください。
見ることができるユーザーに対しては、フレームは１つのページを異なる複数の区域で編成したものを示します。それが見えないユーザーに対しては、各フレームの内容の相互関係(たとえば、１つは目次で他はその内容を示すなど)を他の方法で伝える必要があります。
現在実装されているフレーム(FRAMESET・FRAME・IFRAMEの各要素で作られる)には、以下のような理由で問題があります。
以降の節では、フレームをアクセシブルにする方法を説明します。また、HTML4.01とCSSを使ったフレームの代りとなるものの紹介や、現在のフレームの実装に関わる制限についても説明します。
該当するチェックポイント：
【例】
フレームに名前をつけるにはtitle属性を使用してください。（【訳注】ここで言う「名前」とは主にユーザーが利用するもので、HTMLで使用する名前をつける場合はname属性やid属性を使用します）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>シンプルなフレーム文書</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
title="電子文書のライブラリ">
<FRAME src="nav.html" title="ナビゲーション・バー">
<FRAME src="doc.html" title="文書">
<NOFRAMES>
<A href="lib.html" title="ライブラリへのリンク">
電子ライブラリへ移動する</A>
</NOFRAMES>
</FRAMESET>
【例終了】
該当するチェックポイント：
【例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>今日のニュース</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%">
<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" title="宣伝">
<FRAME src="sitenavbar.html" name="navbar"
title="サイト全体のナビゲーション・バー" longdesc="frameset-desc.html#navbar">
</FRAMESET>
<FRAME src="story.html" name="story" title="選択された記事 - メーン・コンテンツ"
longdesc="frameset-desc.html#story">
<FRAMESET rows="*,20%">
<FRAME src="headlines.html" name="index" title="国内の他の
ヘッドラインの一覧" longdesc="frameset-desc.html#headlines">
<FRAME src="ad.html" name="adspace" title="広告">
</FRAMESET>
<NOFRAMES>
<p><a href="noframes.html">フレーム無しバージョン</a></p>
<p><a href="frameset-desc.html">各フレームの説明</a></p>
</NOFRAMES>
</FRAMESET>
</HTML>
以下は、frameset-desc.htmlの内容の例です。
#Navbar - このフレームでは、サイト内の主要なページへの
次のようなリンクを提供します。世界のニュース、
国内のニュース、ローカル・ニュース、
技術関連ニュース、娯楽ニュース。
#Story - このフレームには、現在選択されている記事が表示されます。
#Index - このフレームには、その日のヘッドラインの記事への
リンクがその分野の範囲内で表示されます。
【例終了】
フレームの内容が変更されると、同等の役割を果たすテキストは当てはまらなくなりますので注意してください。また、フレームの説明へのリンクは、FRAMESET要素内のNOFRAMES要素に入れる代りの内容においても提供されるべきです。
該当するチェックポイント：
【例】
この例では、ユーザーが「top.html」を読もうとして…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>これが「top.html」です</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="大量の文書">
<FRAME src="main.html" title="コンテンツが表示されるフレーム">
<FRAME src="table_of_contents.html" title="目次">
<NOFRAMES>
<A href="table_of_contents.html">目次</A>
<!-- 「main.html」にある他のナビゲーション関連
のリンクもここに入れる。 -->
</NOFRAMES>
</FRAMESET>
</HTML>
ユーザーエージェントがフレームを表示しない場合、ユーザーは同じ情報を持ったフレーム無しバージョンに(リンクによって)アクセスできます。
【例終了】
該当するチェックポイント：
コンテンツ制作者は、フレームの内容と各フレームの関係が理解できるように、各フレームに対して同等の役割を果たすテキストを提供する必要があります。この場合、フレームの内容の変更に伴って、その説明も変更されなければならないことに注意してください。もし、フレームの内容として画像を直接入れた場合、それは不可能となります。したがって、コンテンツ制作者はフレームのソース(src属性の値)を常にHTMLファイルにするべきです。画像はHTMLファイルの中に入れることができますし、その同等の役割を果たすテキストもフレームの内容の変更に伴って正しく変化することになります。
【例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>正しいframeset文書</TITLE> </HEAD> <FRAMESET cols="100%" title="変化するframeset"> <FRAME name="goodframe" src="apples.html" title="リンゴ"> </FRAMESET> </HTML>
<!-- apples.html の内容 --> <P><IMG src="apples.gif" alt="リンゴ">
【例終了】
以下の非推奨例のように、フレームに直接IMG要素を入れることは避けるべきです。
【非推奨例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>悪いframeset文書</TITLE>
</HEAD>
<FRAMESET cols="100%" title="固定的なframeset">
<FRAME name="badframe"
src="apples.gif" title="リンゴ">
</FRAMESET>
</HTML>
たとえば以下のように、あるリンクによってフレームに新しい画像が配置された場合…
<P>美しい <A target="badframe" href="oranges.gif" title="オレンジ">オレンジ</A> の果樹園にぜひお越しください。
最初のフレームのタイトル("リンゴ")は、新しいフレームの内容("オレンジ")に当てはまらなくなることに注意してください。
【例終了】
該当するチェックポイント：
コンテンツ制作者は、フレームの表示先として「target="_blank"」を使用して、新しいウインドウを指定することは避けてください。
最も一般的なフレームの使い方の１つは、ユーザーのブラウザのウインドウを、ナビゲーションのウインドウと内容を表示するためのウインドウの２つに分割するものです。フレームの代りになるものとして、以下のような方法を試してみることをお勧めします。
【例】
<P> <OBJECT data="nav.html"> <A href="nav.html">目次</A>へ。 </OBJECT>
文書の最後にナビゲーションの仕組みを配置するということは、スタイルシートが無効にされていた場合に、ユーザーが文書内の重要な情報を最初に読むことができるということを意味する。
OBJECT { float: left; width: 25% }
次のCSSの指定は、ナビゲーションの仕組みをページの左下に配置して、ユーザーがページをスクロールしても位置が変わらないように固定する。
OBJECT { position: fixed; left: 0; bottom: 0 }
注意：ナビゲーションの仕組みをはじめとする他のコンテンツは、サーバーサイド・インクルードを用いて文書に挿入することもできます。
該当するチェックポイント：
先の例では、フレームの大きさがパーセンテージで指定されていることに留意してください。ユーザーがウインドウをリサイズした場合、フレームはそれに応じて調整され、読める状態を保ちます。
この節では、フォームとFORM要素内に配置できる構成部品のアクセシビリティについて説明します。
該当するチェックポイント：
次の例では、各要素にtabindex属性でTab移動順を("field2", "field1", "submit"の順になるように)設定しています。
【例】
<FORM action="submit" method="post"> <P> <INPUT tabindex="2" type="text" name="field1"> <INPUT tabindex="1" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit"> </FORM>
【例終了】
この例では、(accesskey属性を使用して)accesskeyとして「U」を割り当てています。「U」キーを押すことで、ラベルにフォーカスを与えます。別の言い方をすると、ユーザーがテキストを入力できるように、入力フィールドにフォーカスするということです。
【例】
<FORM action="submit" method="post">
<P>
<LABEL for="user" accesskey="U">名前</LABEL>
<INPUT type="text" id="user">
</FORM>
【例終了】
該当するチェックポイント：
コンテンツ制作者は、自然で適切な単位で情報をグループ化するべきです。フォームの構成部品が論理的な単位でグループ化できる場合はFIELDSET要素を使ってグループ化し、そのグループをLEGEND要素でラベル付けしてください。
【例】
<FORM action="http://example.com/adduser" method="post"> <FIELDSET> <LEGEND>個人情報</LEGEND> <LABEL for="firstname">名：</LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">姓：</LABEL> <INPUT type="text" id="lastname" tabindex="2"> ・・・他の個人情報・・・ </FIELDSET> <FIELDSET> <LEGEND>病歴</LEGEND> ・・・病歴情報・・・ </FIELDSET> </FORM>
【例終了】
コンテンツ制作者は、自然で適切な単位で情報をグループ化するべきです。メニューの選択肢のリストが長い(選択するのが難しくなる)場合には、コンテンツ制作者は、SELECT要素内の項目(OPTIONで定義)をOPTGROUP要素を使って階層化してください。その際、OPTGROUP要素のlabel属性で、選択肢のグループにラベルを付けてください。
【例】
<FORM action="http://example.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">ComOS 3.7.1版 PortMaster 3
<OPTION label="3.7" value="pm3_3.7">ComOS 3.7版 PortMaster 3
<OPTION label="3.5" value="pm3_3.5">版 PortMaster 3
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">ComOS 3.7版 PortMaster 2
<OPTION label="3.5" value="pm2_3.5">ComOS 3.5版 PortMaster 2
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">ComOS 3.7R版 IRX
<OPTION label="3.5R" value="IRX_3.5R">ComOS 3.5R版 IRX
</OPTGROUP>
</SELECT>
</FORM>
【例終了】
該当するチェックポイント：
前の節にあった例で、LABEL要素にHTML4.01のfor属性を使用した場合は次のようになります。
ラベルは、タグ付けかページ上の配置位置によって、それがわかるようにフォームの構成部品と関連付けられるものです。以下の例では、ラベルとフォームの構成部品が、タグ付けによってどのように関連付けられるかを示しています。
【例】
<LABEL for="firstname">名：
<INPUT type="text" id="firstname" tabindex="1">
</LABEL>
【例終了】
該当するチェックポイント：
ボタンを装飾するために画像を使うことで、フォームを独特でわかりやすいものにすることができます。ボタン(INPUT要素またはBUTTON要素)に画像を使うということは、その画像に同等の役割を果たすテキストが付けられるということを前提とすれば、本質的にアクセシブルでなくなるということではありません。
しかし、INPUT要素の「type="image"」で作られたグラフィカルなフォームの送信ボタンは、サーバーサイドのイメージマップを作成します。マウスでボタンがクリックされると、クリックされたx,yの座標が内容の一部としてサーバーに送信されます。
画像とイメージマップの節では、なぜサーバーサイド・イメージマップを避けるべきなのかを説明し、代りにクライアントサイド・イメージマップを使うことを提案しています。HTML4.01では、グラフィカルなボタンとして、すでにクライアントサイド・イメージマップが使えるようになっています。サーバーによって提供される機能性を維持するためには、HTML4.01の勧告([HTML4], section 17.4.1)に記されている以下のような選択肢があります。
もしサーバーがクリックされた位置によって異なる処理を行う場合、グラフィカルでないブラウザを使用しているユーザーは、不利な条件に置かれることになります。
そのため、制作者は代りの方法を考える必要があります。
- １つのグラフィカルな送信ボタンの代りに、複数の(それぞれ独自の画像を持った)送信ボタンを使う。制作者は各ボタンの配置を決めるために、スタイルシートを利用することができる。
- スクリプトと共にクライアントサイド・イメージマップを使う。
該当するチェックポイント：
【例】
いくつかの古い支援技術は、正しく機能するためにTEXTAREA要素のようなフォームの構成部品に対して初期値のテキストを必要とします。
<FORM action="http://example.com/prog/text-read" method="post">
<P>
<TEXTAREA name=yourname rows="20" cols="80">
ここに、あなたの名前を入力してください。
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
【例終了】
「送信」ボタンとして使用される画像には、同等の役割を果たすテキストをつけるようにしてください。
【例】
<FORM action="http://example.com/prog/text-read" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="送信"> </FORM>
【例終了】
キーボードによるアクセスの節は、フォームの構成部品にも当てはまる内容ですので参照してみてください。
HTML3.2対応のブラウザの中には、次のような動作をするものがあります。
この節では、SCRIPT要素によって文書中に組み込まれるスクリプトのアクセシビリティについて説明します。
該当するチェックポイント：
コンテンツ制作者は、スクリプトを無効にしていたり、スクリプトをサポートしていないブラウザを使用している場合でも、そのページがアクセシブルであるようにしなければなりません。
【非推奨例】これは、スクリプトがサポートされていなかったりロードされなかった場合に、ユーザーエージェントで先へ進めないリンクとなる例です。
<A href="javascript:">...</A>
【例終了】
該当するチェックポイント：
該当するチェックポイント：
該当するチェックポイント：