[ホーム] [翻訳について] [検証:WDG] [ウェブ内容アクセス指針1.0]
Techniques for Web Content Accessibility Guidelines 1.0
Copyright(C) 1999 W3C
(MIT,
INRIA,
Keio), All Rights Reserved. W3C
liability,
trademark,
document
use and
software
licensing rules apply.
この文書は、「ウェブ内容アクセス指針1.0」(「ウェブ内容接近性指針1.0」)で定義されているチェックポイントに手段を提供する技術一覧です。
この文書は、 ウェブ・アスクセス性発案者(Web Accessibility Initiative)が出版している一連のアクセス性文書の一つです。
この文書は、議論の目的のみにW3Cから入手できる覚書です。W3Cによるこの覚書の公開は、W3CやW3C班やW3C会員による推薦を意味していません。
ウェブ内容アクセス指針1.0(Web Content Accessibility Guidelines 1.0)は安定したものになるよう試みられて(W3C仕様書と同様に)いますが、この最新の文書は技術的変化にともなって発展し、内容開発者は入手利用しやすいページ設計でより効果的な技術を見つけると考えられます。
この文書は、W3C ウェブアクセス性発案(Web Accessibility Initiative)の一つとして作成されました。 ウェブ内容指針作業班の目標は、 作業班憲章で言及されています。
最新のW3C仕様書やその他の技術文書の一覧は、 http://www.w3.org/TRにあります。
この文書への詳細なコメントは、 wai-wcag-editor@w3.org宛にお送りください。
各チェックポイントには優先度合が記載されており、このレベルは作業班がアクセス性へのチェックポイントの影響度合に基づいて割り当てたものです。
チェックポイントによっては、ある状況の下では優先レベルが変わるように特定されています。
この文書でのチェックポイントは、ウェブ内容アクセス指針1.0と一致した番号付けになっています。
この文書は「ウェブ内容アクセス指針1.0」で定義されたチェックポイントに手段を与える技術一覧です。この文書は次のように組織化されています:
チェックポイント図に、技術の使い方が用意されています。各チェックポイント用に、図にその定義(「ウェブ内容アクセス指針1.0」にある)やチェックポイントに技術を適用するリンクがあります。さらに、各セクションのはじめに、そのセクションを入手利用するチェックポイントのリストがあります。
この文書には、HTMLやCSSなどで入手利用しやすさの解決を示す多数の事例がありますが、内容開発者は何をするべきでないかを示す、いずれ破棄される例もあります。いずれ破棄される例は強調されていて、読み手は注意して近ずくべきです−−表示的目的だけの意味です。
以下のセクションでは、ウェブ内容開発者が文書やサイトを設計する際心に留めておくべき入手利用性に言及します。
文書や一連の文書を設計する場合内容開発者は、文書が利用者にどのように表現されるかを考える前に、まず最初に考えている文書構造を決めるよう努力すべきです。文書構造と内容がどのように表現されるかを区別することは、入手利用性の改善・管理のしやすさ・移植性など色々な利点をもたらします。
何が構造で何が表現(体裁)かを決めるのは、同時に挑戦することかもしれません。例えば、多くの内容開発者は水平方向罫線 ( HR要素)は構造上の区域を伝えると考えています。見える利用者にとってこれは正しいのですが、見えない利用者やグラフィックなブラウザを使ってない利用者には水平方向罫線は意味のないものよりもましなものになります(HR要素は構造上の区域に適用されると推測しますが、それ以上の情報はなく、なんら保証はありません)。HTMLでは、新しいセクションを決めるために内容開発者はHTML 4.0 見出し要素( H1〜H6)を使うべきです。これらは、水平方向罫線のような見かけやその他合図で補足されるかもしれませんが、それらで置き換えられるべきではありません。
逆の場合あります:内容開発者は表現効果を達成するために、構造的な要素を使用すべきではありません。例えばHTMLで、 BLOCKQUOTE要素は、ブラウザによってはテキストを字下げするかもしれませんが、引用を識別するためであって表現的な副効果をねらって設計するものではありません。字下げのために使われたBLOCKQUOTE要素は、その要素はブロック引用をマーク付けするのに使われていると思っている利用者や検索エンジンを混乱させます。
XML文書で表現と構造の分離は継承されます。Norman Walshは、「XMLガイド」"A Guide to XML" [WALSH]で言ってます、
HTMLブラウザは大部分固定コード化されています。ブラウザは H1タグを認識するので、第一レベル見出しは表示は同じです。XML文書は固定されたタグ組を持っていないので、このやり方ではうまくいきません。XML文書の表現はスタイルシートに依存していま す。
簡単なテスト! 内容が構造的か表現(体裁)的かを決めるには、自分のアウトラインを作成してみることです。階層構造上での各ポイントが、構造の変わり目を示します。この変化をマーク付けするには構造的なマークアップを使い、これらの変化を視覚上や音響的により明確なものにするのに表現的な(体裁上の)マークアップを使います。水平罫線はアウトラインではっきりしたものではなく、従って構造的なものではなく表現的な(体裁上の)ものです。 注意この簡単なテストで、章・節・パラグラフ構造がわかります。句内の構造を決めるには、省略語・自然言語の変化・定義やリスト項目を探します。
このセクションの チェックポイントは: 1.1・ 1.2・ 1.5・ 13.10・ 3.3・ 12.1・ 12.2
テキストは、画像読み取り・非視覚的なブラウザ・点字読み取りで処理できるので、全ての利用者が入手利用できます。視覚的に・拡大されて・表題を作成するためにビデオと同調してといったように、それは表示されます。非テキスト情報(画像・アプレット・音響・マルチメディア表現など)のある文書を設計するなら、出来る限り等価テキストで情報を補うことを考慮します。
等価テキストには、内容の機能(働き)や目的を記述します。込み入った内容(チャート・グラフなど)には、等価テキストが長くなり、記述的な情報になるかもしれません。
ロゴ・写真・送信ボタン・アプレット・リストの印・アスキー文字作品やイメージマップ内のリ全てのリンクまたページをレイアウトするのに使用された隠された画像にも、等価テキストを用意すべきです。
チェックポイント! 等価テキストが役に立つかどうかを決めるのにいいテストは、電話で声をだして文書を読んでると想像してみることです。ペイージを聞き手が分かるようにするためにこの想像に出会ったら、あなたはなんと言いますか。
等価テキストをどのように特定するかは、文書言語によってことなります。
例えば、要素とは独立にHTMLでは、内容開発者が属性( "alt"や "longdesc")や要素内容( OBJECT要素)で等価テキストを特定できます。
クイックタイムといったビデオ形式では、開発者は色々な代替オーディオとビデオ・トラックがかけ、代替オーディオとビデオ・クリップとテキスト・ファイルをお互いに同調させることができます。
XML DTDsを創る場合、説明を要する要素は説明と強調する何らかの手段をもっているようにしておきまよう。
画像書式によっては、画像情報にそってたデーター・ファイルに内部テキストが書けるものがあります。画像書式(Portable Network Graphics、 [PNG]を参照)がこのようなテキストをサポートしているなら、内容開発者もそこに情報を提供できるでしょう。
ページやサイトを設計する場合、内容開発者は後方互換性を考慮しなければなりません。何故ならば:
従って、古い技術のことを考慮して設計する場合、以下の技術を考えておきます:
ほとんどのページを入手利用しやすくできるが、あるページ全体もしくは一部分に入手利用しにくいということも起こりえます。入手利用しやすい代替を作成するためのさらなる技術には以下のものがあります:
ここに入手利用しやすい代替ページへのリンクのための二つの技術をあげておきます:
例
LINKをサポートしている表示代行手段は、利用者のブラウザが「音声」・「点字」・「テレタイプ」をサポートしていると識別したら、利用者のために代替ページを読み込みます。
<HEAD>
<TITLE>Welcome to the Virtual Mall!</TITLE>
<LINK title="Text-only version"
rel="alternate"
href="text_only"
media="aural, braille, tty">
</HEAD>
<BODY><P>...</BODY>
例終り
だれでもが、マウスその他のポイント装置のあるグラフィックな環境であるとはかぎりません。キーボード・代替キーボード・音声入力などによって、リンクをたどりフォーム制御を作動している利用者もいます。内容開発者は、利用者がポイント装置以外のものでページと交信できるように、必ず保証すべきです。キーボード・アクセス(とマウスアクセス)用に設計されたページは、一般的にその他の入力装置の利用者に入手利用しやすいものです。もっと言えば、キーボード・アクセスのためにページを設計することで、たいがい全体的な設計もうまく改善します。
リンクやフォーム制御へのキーボード・アクセスは、幾つかの方法で特定されます:
オブジェクト(アプッレトやマルチメディア=プラッグ)を呼び込み、そのインターフェースがマーク付け言語を通して制御できない要素があります。そのような場合、内容開発者は入手利用できるインターフェースのある等価代替を提供すべきです。
このセクションでの チェックポイントは: 14.3・ 13.4・ 13.5・ 13.3・ 13.7と 13.2
各ページを統一した様式で表現しておけば、利用者は容易に操作機序を決め、またより容易に重要な内容を探す操作機序に飛べます。これによって学習や読むことが困難な人を助け、また全ての利用者も容易に操作できることになります。前もって、サイト上の情報を見つけたりまた望まない場合それを避けられる見込みが、増えます。
ページ間で同じ所に現われる構造例としては:
誘導(操作)機序で、利用者がサイトを通して取る一組の経路を作成します。誘導バー・サイトマップそして検索機能を提供すれば、そのサイトで探したい情報に至る見通しが高くなります。サイトが性質上極めて視覚的なものであるなら、利用者は何処へいこうとしているのかまた何処にはいったのかという地図を形作ることができないかどうかを、構造から誘導操作することはできないかもしれません。これを助けるには、内容開発者はなんらかの誘導操作機序を説明すべきです。説明とサイト案内は、そのサイトで迷いそれに主に頼るので、入手利用しやすいことが大切です。
検索機能を提供する場合、内容開発者は様々な熟達度レベルや設定条件を満たす検索機構を提供すべきです。殆んどの検索機構は検索項目のキーワードを要求します。文字を書くことが難しい利用者やそのサイトの言語に不慣れな利用者は、検索で正確な文字を必要とするなら、必要なものを見つけるのが困難です。検索エンジンはスペル・チェッカーを持ち、代わりになる「一番近いもの」を提出したり、例による質問検索や類似検索など提供できるかもしれません。
このセクションの チェックポイントは: 14.1・ 13.8と 14.2
以下、ページやサイトの分かりやすさ(把握)を助ける技術について論じます。
以下の書式様式の示唆によって、そのサイトの内容が全ての人、特に読み方や認識上で困難を感じる人、にとって読み易くなります。幾つかのガイド( [HACKER]をはじめ)で、この問題やその他の書式様式問題も詳しく論じられています。
訳者注: [日本語:分かりやすく、論理的に]に日本語での資料があります。
文書が読みやすいかどうかを決める手助けに、「Gunning-Fog(もやもやの撃退)判読測定」( [SPOOL]に書かれていて、 [TECHHEAD]で例とアルゴリズム(手順)がオンラインであります)を使ことを考えてみます。このアルゴリズムは一般的に、内容が読みやすい場合、点数は低くなっています。結果の例として、聖書・シェクスピア・マーク=トウェイン・TVガイドは全てFog indexes(霧インデックス)6のあたりです。タイムス・ニューズウィーク・ウォール=ストリート=ジャーナルは平均的な霧インデックス11です。
満足に読めなかったり全く読めない人にとって、等価なマルチメディアは分かりやすくする手助けになります。マルチメディア表現が必ずしもテキストを理解しやすくするとは限りません。時には、マルチメディア表現でより戸惑わされることもあります。
テキストを補うマルチメディアの例:
時には内容開発者は、利用者がレフレッシュを求めていないのに、リフレッシュや変更をするページを作成します。この自動的なリフレッシュは利用者には方向性を失うことになります。その代わりに、設定条件段階で制作者は以下のようにすべきです:
注意 チェックポイント7.4と チェックポイント 7.5の両者は、遺物的な表示代行手段によってもたらされる問題に働きかけます。新しい表示代行手段は、リフレッシュができないようにし、ページの先頭に新しい情報へのリンクを代わりとすべきです。
以下は旧式でいずれ廃止されるHTMLの例です。最初のは利用者のページをページ上で規則的な間隔をおいて変更します。内容開発者は"push"技術に似せるためにこの技術を使用すべきではありません。開発者は、利用者が何回ページを読む要求をするか、予測することはできません;不十分なレフレッシュは利用者が方向付けができなくしてしまいます。内容開発者は周期的なリフレッスを避け、利用者が最新の情報を求める時に選択できるようにしておくべきです。
旧式でいずれ廃止される例
<META http-equiv="refresh" content="60"> <BODY> <P>...Information...</P> </BODY>
次のHTML例( META要素を使った)は、時間切れになると或るページから別のページに利用者を送ります。しかし、利用者はこの標準ではないマーク付けで利用者を再度方向付けしてはいけませんし、利用者を方向付けできなくし、既に訪問したページのブラウザの後付けを断ってしまいます。
旧式でいずれ廃止される例
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;
http://www.acme.com/newpage">
</HEAD>
<BODY>
<P>
あなたのブラウザがリフレッシュをサポートしているなら、
あなたは<A href="http://www.acme.com/newpage">new site</A>に、
5秒で転送されます。そうでないなら、リンクを手動で選択して下さい。
</P>
画面上でのちらつきや発光は、光感受性てんかんのある利用者の発作の元になるかもしれなく、内容開発者は画面がちらつきのもとになることを避けなければなりません。4〜59/一秒(ヘルツ)で20発光/一秒で感受性が一番高いちらつきや点滅が、暗から明への急速な変化(ストロボライト)も同様に、てんかん発作の引き金になります。
束にされている文書は、オフラインで読みやすくします。まとまったパッケージを作るには:
このセクションで、アクセス問題が解決されていて持っていないかを決めるためのウェブ文書のテストの戦略と技術を論じます。これらのテストは、主なアクセス問題に光をあて、多くの入手利用障害を減らす上で価値あるものです。しかし、筋書をテストすることのなかには、ただ障害に起因する状況を写すだけのものもあります;障害がある利用者が経験するもの全てをシミュレート(模擬実験をする)していません。現実の設定で、期待したより有効性が少ないかもしれません。従って戦略の一つとして、障害がある人がページやサイトを利用しようと試みる様子を内容開発者は、観察することを薦めています。
以下のテストとそれに従って設計の調整を完了してしてもなおページが入手利用しやすくないなら、入手利用しやすい 代替ページを作成するべきです。
注意 これらのテストを通過することで、「ウェブ内容アクセス指針1.0」の 適合を保証されたわけではありません。
検証サービスでページの構文を照合できます(例えばHTML・CSS・XMLなど)。正しい構文(使い方)によって、ソフトウェアーはよい書式の文書をより容易に処理できるので、多くのアクセス問題が取り除かれます。また検証サービスによっては、構文だけに基づいた(例えば、文書で入手利用上重要な属性や特有値=プロパティーがない)アクセス問題を警告します。しかし正しい構文が、文書が入手利用しやすいという保証にならないことに注意して下さい。例えば、言語仕様書に従って画像に等価テキストを提供していても、そのテキストが不正確であったり不十分であったりするかもしれません。従って検証サービスによっては、あなたに質問し、分析のより本質的な箇所を通してあなたをすすめます。自動検証サービスの幾つかの例として以下のものがあります。:
検証サービスは普通解決すべき問題は何か、どのようにそれらを解決するのかの事例もしばしば与えます。普通、制作者を助けて各問題の手ほどきはできませんが、対話式に文書を調整するのを助けます。WAI評価と修復作業班(WAI Evaluation and Repair Working Group、 [WAI-ER])は、制作者を助け問題の同定だけではなくて対話的に問題を解決する一組の道具を開発すべく作業をすすめています。
大部分の表示代行手段(ブラウザ)や操作システムでは、利用者がソフトウェアーが見・音を出し・振る舞う方法を変える設定を修正できます。色々な表示代行手段で、異なる利用者がウェブで全く違った体験をしていることを心に留めておいて下さい。従って:
音声合成装置でページを読む人は、スペル間違いのある単語を合成装置の一番いい推測を判読できないかもしれません。文法チェッカーは、ページのテキスト内容が正しいことを保証する手助けをします。その文書が自国語でかかれていない読み手や文書の言語を習い始めた人を助けます。そしてそのページの分かり方を増す手助けをします。
注意 これを書いている時点で、全ての表示代行手段が、ウェブ・ページの入手利用性を有意義に増すかもしれない、(新)HTML 4.0属性や要素をサポートしているとは限りません。
ブラウザやその他の表示代行手段がアクセス性機能をサポートしているかにについての情報は、W3Cウェブ・サイト( [WAI-UA-SUPPORT])を参照してください。
一般的にHTML表示代行手段は、サポートしていない属性を無視し、サポートしていない要素の内容を表示します。
以下のセクションで、入手利用しやすいHTML文書設計のための幾つかの技術の一覧を提示します。このセクションは、話題(とHTML仕様書と同じ構成で、 [HTML40])によって組織化されています。
内容開発者は構造的なマーク付けを仕様書に従って使用すべきです。構造的な要素と属性(どれがそうなのかは HTML要素と属性の索引を参照)は、文書の一貫性を促し、その他の道具(例、索引化道具・検索エンジン・表をデーターベースに抽出するプログラム・見出し要素を使う誘導道具・テキストをある言語から別の言語に翻訳する自動翻訳ソフトウェアー)に情報を提供します。
文書自体についての情報を提供する構造的な要素があります。これは、文書に関するメタデーターと言われます−−メタデーターとは、データーについての情報ということです。よくできたメタデーターは、利用者に重要な方向付けを提供することができます。文書についての有益な情報を提供するHTML要素は、以下のものを含んでいます:
セクションは、HTML見出し要素からはじまるべきです( H1〜H6)。別のマーク付け(例えば、水平の区域線を作る HR要素)がこの要素をおぎない表現を改善するかもしれませんが、文書セクションを同定するのに視覚的な表現では十分ではありません。
見出し誘導操作で文書を速読する利用者もいますので、文書構造を伝えるには適切に見出しを使うことが重要です。利用者は見出し要素を適切に順序だてなければなりません。例えばHTMLで、H2要素はH1要素に続き、H3要素はH2要素に続くべきです。内容開発者は、レベルを飛び越してはいけません(例えば、H1から直接H3へ)。文字効果を作るために見出しを使ってはいけません;例えば、 文字様式変更するスタイツシートを使用します。
HTMLでは、見出し要素(H1〜H6)だけがセクションのはじめにきて、要素の内容として使ってはいけません。見出しと内容の表現を制御するのに、スタイルシートがどのように使われているかを、以下のHTMLマーク付けで示します:
<HEAD>
<TITLE>Cooking techniques</TITLE>
<STYLE type="text/css">
/* Indent header and following content */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
<BODY>
<H1>Cooking techniques</H1>
... some text here ...
<DIV class="section2">
<H2>Cooking with oil</H2>
... text of the section ...
</DIV>
<DIV class="section2">
<H2>Cooking with butter</H2>
... text of the section ...
</DIV>
例終り
内容開発者は文書の誘導機構と組織化を記述するのに、 LINK要素やリンク型( [HTML40]を参照)を使うべきです。表示代行手段によっては、誘導道具を合成したりこのマーク付けに基づいた一組の文書を順序付けて印刷できるものもあります。
以下の LINK要素は、本の第二章の頭にあるものです:
<LINK rel="Next" href="chapter3"> <LINK rel="Previous" href="chapter1"> <LINK rel="Start" href="cover"> <LINK rel="Glossary" href="glossary">
例終り。
以下のHTML 4.0機構は内容をグループ化し、理解を助けます:
これらのグループ化機構は、適切で自然な場合、例えば情報そのものが論理的なグループに導く場合、に使用されるべきです。内容開発者はグループを無闇に作成すべきではなく、というのは利用者を困惑させるからです。
一つのページに異なった言語を使う場合、"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>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!
例終り
Qと BLOCKQUOTE 要素 は、それぞれインライン引用とブロック引用をマーク付けします。
例
この例は、 BLOCKQUOTEで長い引用をマーク付けしています:
<BLOCKQUOTE cite="http://www.shakespeare.com/loveslabourlost">
<P>Remuneration! O! that's the Latin word for three farthings.
--- William Shakespeare (Love's Labor Lost).
</P>
</BLOCKQUOTE>
例終り
このセクションの Checkpointsは: 3.1.
できるなら、画像(例、数学方程式)でなくマーク付け(やスタイルシート)の使用が、以下の理由で、アクセス性を促進します:
例として、数学をウェブ上に置く技術を考えます:
TeXは技術的な文章を作成するのによく使われ、その技術書はウェブ出版用にHTMLに変換されます。しかし、画像を生成し、旧式でいずれ破棄されるマーク付けを使い、レイアウトにテーブルを使う傾向があります。そこで、内容提供者は次のようにすべきです:
HTML 4.0仕様書は、稀なマーク付け要求のために以下の構造的な要素を定義しています:
HTMLのリスト要素 DL・ ULと OLは、リストを作成するためにだけ使用されるべきで、字下げといった形式効果のために使うべきではありません。
序列番号付リストは、非ビジュアルな利用者の誘導をたすけます。非ビジュアルな利用者は、特に入れ子リストで各リスト項目の特別な入れ子レベルを指定していない場合、リストで方向を見失うかもしれません。表示代行手段がリスト文脈を明確に決める手段(例、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要素で作成される非序列リスト項目の印を変更するには、スタイルシートを使います。印画像が読み込めないないなら、CSS1で代用印の様式(例、丸)を特定できます。
例
<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>Deprecated example using image in DL lists</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要素に置ける要素について論じまう。二つのタイプのテーブルを論じまう:データーを組織化するのに使われるテーブルとページの視覚的なレイアウトを作るのに使われるテーブルです。
このセックションの チェックポイントは: 5.5・ 5.1・ 5.2そして 5.6
内容開発者はHTML 4.0データー表を幾つかの方法で入手利用しやすくできます:
このマーク付けで、入手利用できるブラウザとその他の表示代行手段が、非ビジュアルな方法にテーブルを再構築もしくは操作できるようになります。
テーブル見出しについての情報は、HTML 4.0仕様書( [HTML40]のセクション11.4.3)のテーブル見出しの手順とその議論を参照ください。
この例で、データーセル( TDで作られた)を対応する見出しと、 "headers"属性によって、どのように協調させるのかを示しています。"headers"属性は、該当するデーターセルと協調する見出しセル(行と列ラベル)のリストを特定します。これには、"id"属性を持った見出しセルが必要です。
<TABLE border="1"
summary="This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="header1">Name</TH>
<TH id="header2">Cups</TH>
<TH id="header3" abbr="Type">Type of Coffee</TH>
<TH id="header4">Sugar?</TH>
<TR>
<TD headers="header1">T. Sexton</TD>
<TD headers="header2">10</TD>
<TD headers="header3">Espresso</TD>
<TD headers="header4">No</TD>
<TR>
<TD headers="header1">J. Dinnen</TD>
<TD headers="header2">5</TD>
<TD headers="header3">Decaf</TD>
<TD headers="header4">Yes</TD>
</TABLE>
例終り
音声合成装置はこのテーブルを以下のように読み取るでしょう:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee
consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
ビジュアルな表示代行手段はこのテーブルを次のように表示するでしょう:
次の例は前と同じ header (TH)とdata (TD)セルを伴っているいますが、今度は "headers"でなく、 "scope"属性を使っています。"Scope"は、次の値の一つをとります: "row"・"col"・"rowgroup"もしくは"colgroup"。Scopeは、該当ヘッダー・セルと協調されるデーター・セルの組を特定します。この方法は、単一テーブルの場合特に有用です。このテーブルの音声読み取りは前の例と同じです。"headers"と"scope"属性の選択は、テーブルの複雑さに係わります。ヘッダーとデータ・セルの関係がマーク付けで明確になされる程には、出力には影響を及ぼしません。
例
<TABLE border="1"
summary="This table charts ...">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
<TR>
<TD>T. Sexton</TD> <TD>10</TD>
<TD>Espresso</TD> <TD>No</TD>
<TR>
<TD>J. Dinnen</TD> <TD>5</TD>
<TD>Decaf</TD> <TD>Yes</TD>
</TABLE>
例終り
以下の例では、 "axis"属性を使って、テーブルに範疇分けをどのようにして作り出すかを示しています。
例
<TABLE border="1">
<CAPTION>Travel Expense Report</CAPTION>
<TR>
<TH></TH>
<TH id="header2" axis="expenses">Meals
<TH id="header3" axis="expenses">Hotels
<TH id="header4" axis="expenses">Transport
<TD>subtotals</TD>
<TR>
<TH id="header6" axis="location">San Jose
<TH> <TH> <TH> <TD>
<TR>
<TD id="header7" axis="date">25-Aug-97
<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">26-Aug-97
<TD headers="header6 header8 header2">27.28
<TD headers="header6 header8 header3">112.00
<TD headers="header6 header8 header4">45.00
<TD>
<TR>
<TD>subtotals
<TD>65.02
<TD>224.00
<TD>90.00
<TD>379.02
<TR>
<TH id="header10" axis="location">Seattle
<TH> <TH> <TH> <TD>
<TR>
<TD id="header11" axis="date">27-Aug-97
<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">28-Aug-97
<TD headers="header10 header12 header2">35.00
<TD headers="header10 header12 header3">109.00
<TD headers="header10 header12 header4">36.00
<TD>
<TR>
<TD>subtotals
<TD>131.25
<TD>218.00
<TD>72.00
<TD>421.25
<TR>
<TH>Totals
<TD>196.27
<TD>442.00
<TD>162.00
<TD>800.27
</TABLE>
例終り
このテーブル(表)は、二箇所での旅行経費をリストしています:サンフランシスコとシアトルで、日付と範疇(食事・ホテルそして移動)。以下の画像は、ビジュアルな表示代行手段での表示をしめしています。[ 旅行表の説明]
制作者は レイアウトと配置にはスタイルシートを使用すべきです。しかしレイアウトにテーブルを使うことが必要な場合、テーブルは読む順位で線形化にならなければなりません。テーブルが線形化されると、テーブルセルの内容は次々とパラグラフのつながり(例、ページ保存)になります。セルは、順に(行もしくは列順に)読み取る場合、理にかなったものでなければなりませんし、構造的な要素(例、パラグラフ・見出し・リストなど)を取りページが線形化した後も道理にかなったになるべきです。
また、レイアウトを作成するのにテーブルを使う際視覚的な効果を作るために構造的なマーク付けを使用しない。例えばTH (テーブル見出し)要素は、通常視覚的に中央化されボールド体(太字体)で表示されます。セルが実際上データー行や列の見出しではないなら、スタイルシートや要素の書式属性を使います。
ページもしくはセルのテキストがワードラップ(折り返す)する データー表をレイアウトするのに使われたテーブルは、古い画面読み取りでは問題を生じ、個々のテーブル・セルの誘導ができなくHTMLソースやブラウザが解釈できなくなります。これらの画面読み取りは、ページをまたがって読み取り、異なる列から一つのセンテンスと同じ行のセンテンスを読み取ります。
例えば、テーブルは画面にこの様に表示されます:
There is a 30% chance of Classes at the University of Wisconsin rain showers this morning, but they will resume on September 3rd. should stop before the weekend.
これは画面読み取りによって以下のように読み取られます:
There is a 30% chance of Classes at the University of Wisconsin rain showers this morning, but they will resume on September 3rd. should stop before the weekend.
HTMLソースを読み取る画面読み取りは、各セルの構造を認知しますが、古い画面読み取りのために、内容開発者は各セルのテキスト量を制限してワードラップによる危険性を最小にできるかもしれません。また長いテキストは最後の(左から右テーブルの最も右)におくべきです。これでもしワードラップしても、なおはっきりと読めるでしょう。内容開発者は、 "640x480"のブラウザ画面でテーブルを、ワードラップのために、テストすべきです。
テーブルマーク付けは構造的で表現と構造を分離するよう示唆しているので、レイアウト・配置・表現効果を作るにはスタイルシートの使用を推奨します。上の例での二つの列はスタイルシートを使って作成されます。より詳しい情報は、スタイルシートのセクションを参照下さい。
クイックテスト! 画面読み取りがテーブルをどのように読み取るかのいい理解方法はページを保存し行づたいにテーブルをを読んで見ることです。
HTML 3.2ブラウザで、 TFOOT要素の行はテーブル体部の前に現われます。
このセクションの チェックポイントは: 13.1と 13.6
いいリンク文は余りに一般化すべきではありません;「ここをクリック」。この文句は装置依存性で(ポンター装置に適用されます)あるばかりでなく、それを辿ると何が見つかるのかということについては何も言っていません。「ここをクリック」でなく、「鮭についての詳しい情報」とか「このページのテキスト版」と言った、リンク文はリンク目標の内容を指すべきです。後者の例(そして書式や言語特異的な文書)で、内容開発者は代わりに 内容誘導を使うように薦められていて、テキスト版を選ぶ利用者は自動的に保存できることに注意してください。
明確なリンク文に加えて、内容開発者はリンク目標を明確に且つ正確に説明する"title"属性の値を特定します。
ページに複数のリンクが同じリンク文に割り当てられているなら、同じ資源を指すべきです。このような統一性はページ設計を、アクセス性と同じように、助けます。
複数のリンクが異なった目標を参照し同じリンク文が割り当てられていり場合、それぞれの A要素の "title"属性に異なる値を特定して、リンクを区別します。
「音響利用者」−−目が見えないか困難な人・小画面か画面なしの装置を使っている人−−は、目で素早くページを見渡すことができません。ページの概要を得るためもしくはリンクを素早く見付け出すためにこれらの利用者は、しばしば一つのリンクから次のリンクへタブを操作するかページ上で入手できるリストをみわたします。
従って一連の関連リンクには、最初のリンクに導入情報、それからそれに続くリンクには区別できる情報を入れておきます。これは繋がりとしてそれらを読む利用者にとって内容情報を提供します。
例
<A href="my-doc.html">My document is available in HTML</A>, <A href="my-doc.pdf" title="My document in PDF">PDF</A>, <A href="my-doc.txt" title="My document in text">plain text</A>
例終り
画像がリンクの内容として使われている場合画像用に 等価テキストを特定します。
例
<A href="routes.html">
<IMG src="topo.html"
alt="Current routes at Boulders Climbing Gym">
</A>
例終り
リンクが論理的な組にグループ化(例えば、サイトの各ページにある誘導バーで)されているいる場合、一つのユニットとしてマーク付けされなければなりません。誘導バーは、通常ページで最初に出会うものです。音声合成装置の利用者にとって、ページの面白い内容に到達する前に全てのページにある多くのリンクを読まなければなりません。利用者がリンクのグループ化を迂回できる(視力を使っている利用者が各ページの同じ組を見た時するような)幾つかの方法があります:
将来表示代行手段で、利用者が誘導バーのような要素を飛び越えることができるようになるでしょう。
HTMLで、 DIV・ SPAN・ Pもしくは FRAME要素を使ってリンクをグループ化し、そして id"や "class"属性でグループを識別します。
例
この例で、 P要素が人組のリンクをグループ化し、"class"属性がそれが誘導バー(例えば、スタイルシート用の)であると識別し、 "tabindex"をそのグループにつづくアンカーに設定し、そしてそのグループ・リンクの初めにあるリンクをそのグループの後のアンカーにリンクします。
<HEAD>
<TITLE>How to use our site</TITLE>
</HEAD>
<BODY>
<P class="nav">
[<A href="#how">Bypass navigation bar</A>]
[<A href="home.html">Home</A>]
[<A href="search.html">Search</A>]
[<A href="new.html">New and highlighted</A>]
[<A href="sitemap.html">Site map</A>]
</P>
<H1><A name="how" tabindex="1">How to use our site</A></H1>
<!-- content of page -->
</BODY>
例終り
ページの活動要素へのキーボード・アクセスはポイント装置が使えない多くの利用者にとって重要です。表示代行手段は、利用者がキーボード打をある活動と結び付けることができる機能を持っています。HTML 4.0ででも、内容開発者が "accesskey"属性でキーボード・ショートカットを文書に特定できます。
例
この例で利用者が"C"キーを作動すれば、リンクをたどれます。
<A accesskey="C" href="doc.html" hreflang="en"
title="XYZ company home page">
XYZ company home page</A>
例終り
以下のセクションで、画像(GIF動画など簡単なアニメーションを含む)とイメージマップのアクセス性を論じます。
画像として表現される数学については、 画像よりテキストマーク付けとスタイルシートを使うを参照ください。
IMGを使う場合は、 "alt"属性で 等価テキストを特定します。 注意 この属性の値は"alt-text"として表示されます。
例
<IMG src="magnifyingglass.gif" alt="Search">
例終り
OBJECTを 使用する場合、OBJECT要素の体部に 等価テキストを特定します:
例
<OBJECT data="magnifyingglass.gif" type="image/gif">
Search
</OBJECT>
例終り
短い等価テキストでは、画像の機能や役割を十分に伝えられない場合は、 "longdesc"属性で、設計されたファイルに補足情報を提供します:
例
<IMG src="97sales.gif" alt="Sales for 1997"
longdesc="sales97.html">
sales97.htmlに:
1997年の販売状況を示すチャート。このチャートは
販売の月別増加割合を示す棒チャートです。
一月の販売は、1996年12月より10%増加で、
二月の販売は、3%減少でした。
例終り
"longdesc"をサポートしていない表示代行手段用に、 説明リンクを、画像に続けて、提供します:
例
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"> <A href="sales.html" title="Description of 1997 sales figures">[D]</A>
例終り
OBJECTを使う場合は、その要素の内容に長い等価テキストを特定します:
例
<OBJECT data="97sales.gif" type="image/gif">
Sales in 1997 were down subsequent to our
<A href="anticipated.html">anticipated
purchase</A> ...
</OBJECT>
例終り
OBJECT内容は、"alt"テキストと違って、マーク付けを含むことができます。従って内容開発者は、OBJECT要素内から補足情報へのリンクを提供できます:
例
<OBJECT data="97sales.gif" type="image/gif">
Chart of our Sales in 1997.
A <A href="desc.html">textual description</A> is available.
</OBJECT>
例終り
注意 見えないd−リンクは旧式でいずれ廃止になり、"longdesc"属性になります。.
見えないd−リンクとは、小さな(1ピクセル)もしくは透明な画像で、その "alt"属性に"D-link"か"D"を取り、 A要素の内容の一部になっているもののことです。その他のd−リンクのように、協調された画像の等価テキストを参照します。その他のリンクのように、利用者はそこにタブで飛べます。したがって見えないd−リンクは、体裁的な理由で見えるd−リンクを避けたい設計者にとっては一時的な解決策を提供します。
アスキー文字作品をさけ(文字符号によるイラスト)、その代わりに実際の画像を使います。というのも、画像用の 等価テキストが提供しやすくなるからです。しかし、アスキー文字作品を使わなければならないなら、アスキー文字作品を飛び超えるのにリンクを、以下のように、提供します:
例
<P> <a href="#post-art">skip over ASCII art</a> <!-- ASCII art goes here --> <a name="post-art">caption for ASCII art</a>
例終り
アスキー文字作品は、以下のようにもマーク付けされます。 [アスキー図を飛び越すか、もしくは チャートの説明を参照します]:
例
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
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
Flash frequency (Hz)
例終り
小さなアスキー文字作品の 別のやり方としては、 "title"のある ABBR要素を使うことです。
例
<P><ABBR title="smiley in ascii art">:-)</ABBR>
例終り
アスキー文字作品が複雑な場合等価テキストで十分に説明されているかを確認しておきます。
アスキー文字作品を置き換える別の方法は、人の言語代行を使うことです。例えば、 <ウインク>はウインク・スマイル: ;-)で代行できるかもしれません。また、"それ故に"という言葉はダッシュとより大きいという記号からなる矢印で(例、 -->)、"凄い=great"という言葉は普通とは異なった省略"gr8"で代行するかもしれません。
イメージマップは「作動領域」を持った画像です。利用者が領域の一部を選択すると、或る行動がおこり−−リンクをたどるかもしれませんし、情報がサーバーに送信されるなど。イメージマップを入手利用しやすくするには内容開発者は、資格的な領域と協調させられている各活動領域がポイント装置でなくても作動されられるように確認することが望ましい。
イメージマップは the MAP要素で作られます。HTMLでは、二つのタイプのイメージマップができます:クライアント側(利用者のブラウザがURIを処理する)とサーバー側イメージマップ(サーバーがクリック座標を処理する)です。全てのイメージマップで、内容開発者 等価テキストを提供しなければなりません。
内容開発者は、サーバー側イメージマップ( "ismap"で)よりも、クライアント側イメージマップを作成( "usemapで)すべきで 、というのはサーバー側イメージマップは特別な入力装置が必要だからです。サーバー側イメージマップが使われる(領域地図が shapeで表現できないという理由で)場合、製作者は代替の入手利用しやすい書式で同じ機能もしくは情報を提供しなければなりません。これを果たす一つの方法は、各活動領域へテキスト・リンクを張り、そのリンクが キーボードで誘導できるようにすることです。サーバー側イメージマップを使わなければならないなら、 サーバー側イメージマップを参照してください。
このセクションの チェックポイントは: 1.5・ 9.1そして 10.5.
ビジュアルな情報を伝えるものだから、イメージマップ用の 等価テキストを提供すること。
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>
例終り
前の例でMAP要素がOBJECT要素の内容で、したがってイメージマップ(navbar1.gif)がないなら、代替リンクだけが表示されることに注意してください。
また、リンクは括弧([])で区切られていることにも注意して下さい。これは古い画像読み取りが幾つか隣接しているリンクを一つのリンクと読み取ることを防ぎ、目の見える利用者がリンクを視覚的に区別できる助けにもなります。
内容開発者は、印刷できる文字符号(隣接するリンクの間を囲った括弧や垂直棒(|))を必ず挿入します。
サーバー側イメージマップを使わねばならない場合、内容開発者はイメージマップの選択肢用の代替リストを提供します。それには三つの技術があります:
例
<A href="http://myserver.com/cgi-bin/imagemap/my-map">
<IMG src="welcome.gif" alt="Welcome! (Text links follow)" 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">
As temperature increases, the molecules in the balloon...
</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">
As temperature increases, the molecules in the balloon...
</OBJECT>
</OBJECT>
</OBJECT>
例終り
APPLETを使う場合、 "alt"属性とアプレット要素の内容に 等価テキストを提供します。これで、二つの機構("alt"もしくは内容)のうち一つしかサポートしていない古い表示代行手段のために適切に転換することができます。
いずれ廃止される例
<APPLET code="Press.class" width="500" height="500"
alt="Java applet: how temperature affects pressure">
As temperature increases, the molecules in the balloon...
</APPLET>
アプレット( OBJECTや APPLETで作成される)が、代替書式で代行できない利用者との相互交渉(例、医療実践を操作できる能力)が必要な場合、アプレットに直接入手利用できるようにします。
アクセス可能なアプレットの開発についてのより詳しい情報は、 [JAVAACCESS]とを参照ください。 [IBMJAVA]を参照ください。これらの会社はJava Swing classesをアクセス可能にするのと同じように入手利用しやすいAPIを開発しています。
画像と等価のテキスト・ 視覚的な情報の音響的説明・表題を必要な所に提供する。アプレットが動作を起こすなら、開発者はこの動作を停止する機構を提供すべきです(例については、 [TRACE]を参照)。 また音響やビデオ表現を入手利用しやすくする情報についての次のセクションも参照下さい。
音響的な表現には、テキスト写し、音響的な事象の等価テキスト、を伴に置かなければなりません。これらの写しがビデオ表現と同調して表現され時、表題と呼ばれ、ビデオ資料の音響トラックを聞けない人によって使われます。
メディア書式によっては(例、QuickTime 3.0とSMIL)、マルチメディア・クリップに表題やビデオ説明が追加できます。何が進行しているのかを閲覧者が分かる手助けをする状況音と同じく音声も表題に含まれなければならないことを、以下の例で示しています。
例
Captions for a scene from "E.T." The phone rings three times, then is answered.
[phone rings]
[ring]
[ring]
Hello?"
例終り
使用する書式が代替トラックをサポートするまで、ムービーには二つバージョンが入手できるようにし、一つは表題と説明的なビデオがあり、いま一つにはそれがないものの二つです。SMILやSAMIといった技術によっては、表題化された音響とムービーを作成するためにテキスト・ファイルと結合された音響/ビデオのファイルを、分離することができます。
また技術によっては、利用者が読む熟達度にあわせて複数の表題から選択できるものもあります。より詳しい情報は、SMIL 1.0 ( [SMIL]))
音に等価なものを、音のテキスト写しか説明にリンクしているページ上のテキスト句の形式で提供すことができます。このリンクは、ページの先頭といった強調されて見える所に置くべきです。しかしスクリプトが自動的に音を読み込む場合、その音が今演奏されていて、その音の説明的若くは写しを提供している視覚的な表示を自動的に読み込むことができなければなりません。
注意 この技術には、ある種の論争があり、というのはブラウザは、利用者の設定がそうなっていると、音響書式でなく情報の視覚的な書式を読み込まなければならないからです。しかし、戦略もまた今日のブラウザで作動しなければなりません。
より詳しい情報については、 [NCAM]を参照下さい。
視覚的なトラックの音響的な説明は、ムービーの音響やダイアローグと干渉することなく、視覚要素の鍵となるもののナレーションを提供します。視覚要素の鍵とは、アクション・セッティング・体言語・グラフィックや表示されるテキストです。音響的な説明を、ビデオ資料のアクションやその他の非音響的な情報を追うために、目の見えない人が主に使います。
例
"The Lion King"( [DVS]から入手できる)からのクリップの 照合されたテキスト写しの例をここにあげます。
Simba: Yeah!
Describer: Simba races outside, followed by his parents. Sarabi smiles and nudges Simba gently toward his father. The two sit side-by-side, watching the golden sunrise.
Mufasa: Look Simba, everything the light touches is our kingdom.
Simba: Wow.
例終り
注意 重要でない視覚的な情報、例えば(前もって録音されて演説で)このサオトをどのようにして使うのかを説明する動画化されたお喋り、である場合音響的な説明は必要ありません。
ムービーでは、元の音響を同調している音響的な説明を提供します。マルチメディ書式についてのより詳しい情報は、 音響情報のセクションを参照ください。
照合された文字写しは、視覚的と聴覚障害のある人にとっても入手利用しやすくなります。また、音響/ビデオ資料にある情報をインデックス化や検索できる能力を、全ての人に提供します。
照合された文字的な写しにはダイアローグも含まれ、スクリーン上と外の音・音楽・笑い声・拍手など、その他の意義ある音と同じです。すなわち、表題にくるテキスト全部と音響的な説明に提供された説明全部です。
必要な時には、 等価テキストで、ページの理解を可能にするために視覚的な情報を提供しなければなりません。例えば、お天気だよりとして曇りと雨を示す動画の繰り返しを考えみて下さい。その動画はお天気だより(それは自然言語で表現され、テキストです)の一部を補足しているので、動画のだらだらした説明は必要ありません。しかし、学生が大陸との関連で雲形成について学んでいるという教師的な設定で、動画が現われるなら、動画を閲覧できないが学課を学びたい学生に説明する義務があります。
点滅制御についての テキスト様式のセクションも参照。
プラッグインを必要とすると言ったその他の対象も OBJECT要素を使います。しかし、ネットスケープ・ブラウザでの後方互換性のために、以下のようにOBJECT要素内でふさわしいEMBED要素を使います:
いずれ廃止される例
<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
codebase="http://site.com/content.cab" width=100 height=80>
<PARAM name="Movie" value="moviename.swf">
<EMBED src="moviename.swf" width=100 height=80
pluginspage="http://www.macromedia.com/shockwave/download/">
</EMBED>
<NOEMBED>
<IMG alt="Still from Movie"
src="moviename.gif" width=100 height=80>
</NOEMBED>
</OBJECT>
例終り
より詳しい情報は、 [MACROMEDIA]を参照。
見える人にとって、フレーム(枠)はページを異なる地帯に組織化するかもしれません。見えない人には、フレーム内内容間の関連(例、あるフレームは目次で、別のが内容そのものである)を別のやり方で伝えなければなりません。
現在装備されているフレーム( FRAMESET・ FRAMEそして IFRAME要素で)は、幾つかの理由によって、問題があります:
以下のセクションで、フレームをより入手利用しやすくするにはどうするかを論じます。また、HTML 4.0とCSSを使い、現在のフレーム装備の多くの限界に接近する フレーム代替を提供します。
例
"title"属性を使って、フレームに名前をつける。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
<NOFRAMES>
<A href="lib.html" title="Library link">
Select to go to the electronic library</A>
</NOFRAMES>
</FRAMESET>
例終り
例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Today's news</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%">
<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" title="promotions">
<FRAME src="sitenavbar.html" name="navbar"
title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar">
</FRAMESET>
<FRAME src="story.html" name="story" title="Selected story - main content"
longdesc="frameset-desc.html#story">
<FRAMESET rows="*,20%">
<FRAME src="headlines.html" name="index" title="Index of other
national headlines" longdesc="frameset-desc.html#headlines">
<FRAME src="ad.html" name="adspace" title="Advertising">
</FRAMESET>
<NOFRAMES>
<p><a href="noframes.html">No frames version</a></p>
<p><a href="frameset-desc.html">Descriptions of frames.</a></p>
</NOFRAMES>
</FRAMESET>
</HTML>
frameset-desc.htmlは、以下のようなことを言ってます:
#Navbar - this frame provides links to the major
sections of the site: World News, National News,
Local News, Technological News,
and Entertainment News.
#Story - this frame displays the currently selected story.
#Index - this frame provides links to the day's
headline stories within this section.
例終り
フレームの内容が変わると、もはや等価テキストは適用しないことに注意してください。また、フレームの説明へのリンクを、 FRAMESETの NOFRAMES要素で別の代替内容にそって提供すべきです。
例
この例で、利用者が"top.html"を読むなら:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>This is top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Our big document">
<FRAME src="main.html" title="Where the content is displayed">
<FRAME src="table_of_contents.html" title="Table of Contents">
<NOFRAMES>
<A href="table_of_contents.html">Table of Contents.</A>
<!-- other navigational links that are available in main.html
are available here also. -->
</NOFRAMES>
</FRAMESET>
</HTML>
そして表示代行手段はフレームを表示しなく、利用者は同じ情報の非フレーム版を入手利用できます(リンクを経て)。
例終り
内容開発者はフレームの等価テキスト、内容とフレーム間の関係が分かる、を提供しなければなりません。フレーム内容が変わると説明も変わらなければならないことに注意して下さい。IMGがフレームに直接挿入されていると、これは不可能です。したがって内容開発者は必ずフレームのソース("src")をHTMLファイルにしておかなければなりません。画像はHTMLファイルに挿入され、等価テキストは正確に生成します。
例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>A correct frameset document</TITLE> </HEAD> <FRAMESET cols="100%" title="Evolving frameset"> <FRAME name="goodframe" src="apples.html" title="Apples"> </FRAMESET> </HTML>
<!-- In apples.html --> <P><IMG src="apples.gif" alt="Apples">
例終り
以下のいずれ廃止される例は避けるべきで、というのはフレームに直接 IMGを挿入しているからです:
いずれ廃止される例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A bad frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Static frameset">
<FRAME name="badframe"
src="apples.gif" title="Apples">
</FRAMESET>
</HTML>
例えば、リンクが新しい画像をフレーム内に挿入するなら:
<P>Visit a beautiful grove of <A target="badframe" href="oranges.gif" title="Oranges">oranges</A>
フレームの初期タイトル("Apples")は、もはやフレーム("Oranges")の今の内容と一致していません。
内容開発者は、target="_blank"でフレームの目標として新しい画面を特定しることを避けるべきです。
フレームの最も一般的な使われれ方の一つは、利用者のブラウザ画面を二つに分割することです:誘導画面と内容画面。フレームの代替として、以下のことを推奨しています:
例
<P> <OBJECT data="nav.html"> Go to the <A href="nav.html">table of contents</A> </OBJECT>
文書の終りに誘導機構を置くことは、スタイルシートが切られている場合利用者が文書の重要な情報に最初にアクセスすることを意味します。
OBJECT { float: left; width: 25% }
次のCSS規則は、誘導機構をページの下左隅に置き、利用者がページを下へスクロールしてもそこに止まります:
OBJECT { position: fixed; left: 0; bottom: 0 }
注意 誘導機構やその他の内容は、サーバー側手段によって文書に挿入されるかもしれません。
このセクションは、 FORM要素に置ける、フォームやフォーム制御のアクセス性を論じます。
より詳しい情報は、 キーボード・アクセスのセクションを参照
内容開発者は、自然で適切な場合、 情報をグループ化すべきです。フォーム制御は、論理的な単位にグループ化されるなら、 FIELDSET要素を使い、 LEGEND要素でそれらの単位にラベルをつけます:
例
<FORM action="http://somesite.com/adduser" method="post"> <FIELDSET> <LEGEND>Personal information</LEGEND> <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname" tabindex="2"> ...more personal information... </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> ...medical history information... </FIELDSET> </FORM>
例終り
このセクションの チェックポイントは: 12.4と 10.2
HTML 4.0で、 "for"が使われた LABELの例は、前のセクションにあります。
内容開発者は、自然で適切な場合、情報をグループ化すべきです。メニュ選択の長いリスト(追うのがむずかしい)の場合内容開発者は、 SELECT項目( OPTIONで定義された)を、 OPTGROUP要素を使って、階層にグループ化すべきです。OPTGROUPの label属性で、選択グループ用のラベルを特定します。
例
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
例終り
以下の例で、要素間でのタブ順位( "field2", "field1", "submit"順)を "tabindex"で特定しています:
例
<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>
例終り
この例では、アクセスキーとして"U"を指定しています( accesskeyを通して)。 "U"をタイプすると、ラベルに焦点を当て、そのラベルは入力制御に焦点をあて、利用者がテキストを入力できます。
例
<FORM action="submit" method="post">
<P>
<LABEL for="user" accesskey="U">name</LABEL>
<INPUT type="text" id="user">
</FORM>
例終り
ボタンを飾るために画像を使って、開発者はフォームをユニークで分かりやすくできます。ボタン用に画像(例、 INPUT要素か BUTTONで)を使うことが、本来入手利用しにくいというものではありません−等価テキストが画像用に提供されておれば
しかし INPUTで作られる グラフィカルなフォーム送信は、サーバー側イメージマップの一つのタイプを作ります。ボタンがマウスでクリックされると、マウス・クリックのXとY座標がフォーム送信の一部としてサーバーに送られます。
画像とイメージマップのセクションで、何故サーバー側イメージを回避すべきか、代わりにクライアント側イメージマップを使うことを示唆するのは何故かを論じています。HTML 4.0では、グラフィックなボタンは今やクライアント側イメージマップです。サーバーが提供する機能を保には、制作者は、HTML 4.0仕様書で述べられていりように( [HTML40]、セクション17.4.1)、以下の選択を持たなければなりません:
サーバーがクリックされた場所によって異なる活動をとる場合、非グラフィカルなブラウザの利用者は不利益をこうむります。このため、制作者は代替で接近することも考慮しておくべきです:
- 単一グラフィカル送信ボタンの場所に、多元送信ボタン(各々が固有の画像を持ち)を使う。制作者はこれらのボタンの位置をスタイルシートで制御するかもしれません。
- クライアント側イメージマップをスクリプトで使う。
例
古い支援技術のなかには、適切に機能するために、フォーム制御で TEXTAREAといった初期テキストを必要とします。
<FORM action="http://somesite.com/prog/text-read" method="post">
<P>
<TEXTAREA name=yourname rows="20" cols="80">
Please enter your name here.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
例終り
"submit"ボタンとして使われる画像用の 等価テキストを 提供する:
例
<FORM action="http://somesite.com/prog/text-read" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="Submit"> </FORM>
例終り
キーボード・アクセスのセクションも参照してください、というのもこれはフォーム制御にも適用されるからです。
HTML 3.2ブラウザのなかには、
このセクションで、 SCRIPT要素を通して文書に含まれるスクリプトのアクセス性を論じます。
内容開発者は、スクリプトを切った場合やスクリプトをサポートしていない場合でもページを入手利用できるようにしなくてはなりません。
いずれ廃止される例 表示代行手段がスクリプトをサポートしていないか切っている場合、これは行き止りリンクです。
<A href="javascript:">...</A>
事象処理系が、ある事象(例、マウスが動く、キーが押される、文書が読み込まれるなどの)が起こった場合、実施されるスクリプトです。HTML 4.0で、事象処理系は 事象処理属性( "on"や"onkeyup"ではじまる属性)を経て要素に結び付きます。
事象処理のなかには、実施された場合、画像を強調することや要素のテキストの色を変えることと言った純粋に修飾的な効果を生みます。別の事象処理は計算を実行したり、重要な情報を利用者に提供するといった実際的な効果を生じます。単に要素の表現を変える以上のことをする事象処理には、内容開発者以下のことをするべきです:
HTML 4.0でダブルクリック(ondblclick")することに相当するキーボードはないことに注意して下さい。
これを成し遂げる一つやり方は、 NOSCRIPT要素です。この要素の内容は、スクリプトが不可能な場合、表示されます。
例
<SCRIPT type="text/tcl">
...some Tcl script to show a billboard of sports scores...
</SCRIPT>
<NOSCRIPT>
<P>Results from yesterday's games:</P>
<DL>
<DT>Bulls 91, Sonics 80.
<DD><A href="bullsonic.html">Bulls vs. Sonics game highlights</A>
...more scores...
</DL>
</NOSCRIPT>
例終り
以下のセクションは、入手利用しやすい文書を設計でCSSを使うための幾つかの技術とスタイル・シートを効果的に書く幾つかの技術の一覧です。HTMLで、スタイル・シートは LINK要素を経て外部的に、文書頭部の STYLE要素を経て、また style属性を経て特別な要素が特定されます。
CSS1([CSS1])とCSS2 ([CSS2]) では、内容開発者は殆どのHTML 4.0表現能力を写すことができ、少ない労力でより大きな力を提供しています。しかし殆どの利用者がスタイル・シートをサポートするブラウザを持つまでは、全ての表現慣用句がスタイル・シートで満足に表現されないかもしれません。HTML 4.0機能(例、テーブル・ビットマップ・テキストなど)をより入手利用しやすくする方法の例も提供しまう。
テキストマーク付けのセクションも参照ください。
ここにアクセス性を促進するスタイル・シートの作成指針をあげます:
以下幾つかの例です
例
文字サイズは、以下のようにし:
H1 { font-size: 2em }
以下のようようにするよりも:
H1 { font-size: 12pt }
例終り
例
相対的な長さの単位と百分率を使います。
BODY { margin-left: 15%; margin-right: 10%}
例終り
例
出力媒体の物理的な性質が分かっている場合にだけ絶対的な長さの単位を使う:
.businesscard { font-size: 8pt }
例終り
例
必ず、一般的な文字に戻れるよう特定する:
BODY { font-family: "Gill Sans", sans-serif }
例終りEnd example.
例
色は番号を使い、名前を使わない:
H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}
例終り
いずれ廃止される表現要素を使うのではなく、文字特徴を制御する多くのCSS特有値を使います: 'font-family'・'font-size'・'font-size-adjust'・'font-stretch'・ 'font-style'・'font-variant'そして'font-weight'。
以下のCSS2特有値は文字情報を制御するのに使われます: 'font'・'font-family'・'font-size'・'font-size-adjust'・'font-stretch'・'font-style'・'font-variant'そして'font-weight'。
以下のいずれ廃止されるHTMLのfont要素や属性、 FONT・ BASEFONT・ "face"そして"size"、でなくてこれら特有値を使います。
文字情報を制御するのにHTML要素を使わなければならない場合、 BIGと SMALL、これは廃止されません、を使います。
例
<STYLE type="text/css">
P.important { font-weight: bold }
P.less-important { font-weight: lighter; font-size: smaller }
H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>
例終り
以下のCSS特有値は、テキストを様式化するのに使えます:
内容開発者は画像でテキストを表現するのではなく文字を様式化するにはスタイルシートを使うべきです。画像でなくテキストを使うという意味は、情報が非常に多くの利用者(音声合成装置使用者・点字表示使用者・グラフィック表示使用者)に入手できると言うことです。スタイルシートを使うと、利用者は制作者の様式(スタイル)を書き換え、色や文字サイズを容易に変更することができます。
テキスト効果を作り出すビットマップ (特別な文字・変形・陰影など)を使わなければならないなら、ビットマップ(ビット絵)を入手利用しやすくなければなりません( 等価テキストと 代替ページ)。
例
この例で、挿入された画像は大きな赤い文字"Example"を示し、"alt"属性の値で把握されます。
<P>This is an <IMG src="BigRedExample.gif" alt="example"> of what we mean. </P>
例終り
以下のCSS特有値で、テキストの書式や配置を制御できます:
以下の例は、ドロップ−キャップ効果を作るのに、スタイルシートをどのように使うのかを示しています。
Example.
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>
注意 CSS擬似要素':first-letter'は、この擬似要素で内容開発者がテキストの最初の文字を照合でき、この文書を書いている時点では広くサポートされていません。
色を特定するには以下のCSS特有値を使います:
色彩のみを通して情報は伝えられていないことを確認しておきます。例えば利用者からの入力を頼む場合、「グリーンでリストされたものから項目を選んでください。」とは書かないように。そうでなくて、別の様式効果(例、文字効果)と文脈(例、把握できるテキスト・リンク)を通して、情報が入手できるようします。
例えばこの文書で、例は以下のように初期値で様式化(スタイルシートで)されています:
簡易なテスト! 文書が色なしてもなお機能しているかどうかをテストするには、モノクロ画面や色を切ったブラウザで調べることです。また、黒・白そして四つのブラウザ保護灰色だけを使った色型をブラウザに設定してみて、ページがどのように維持されているかを見ます。
簡易テスト! 色のコントラストが、色欠損者・低解像モニターの利用者にも十分かのテストには、黒白プリンター(グレイスケールで見える背景と色)でページを印刷してみます。またどのように質が落ちてるかをみるために、二ないし三世代コンピュータ用にプリントアウトとコピーします。これで、何処で別の合図(例:ハイパーリンクは通常ウェブ・ページで下線が光れています)を加える必要があるのか、またその合図は余にも小さいか判別しにくくてうまく機能していないかどうかがわかります。
色とコントラストについてより詳しい情報は、 [LIGHTHOUSE]を見てください。
レイアウト・位置取り・層そして配置は、スタイルシートでなされるべきです(注目に値するのは、CSS回避や絶対的な位置取りによる):
画像、見えないまた透明な画像も含めて、全てに等価テキストを提供します。
ページで画像をレイアウトするのに、内容開発者がスタイルシートを使えなくて見えない画像や透明な画像(例、 IMGで)を使わなければならない場合、画像用に alt=""を特定すべきです。
いずれ廃止される例
制作者は、画像が読み込まれない場合言葉が現われないように、 "alt"の値にスペーサー(空白)を使わないこと:
my poem requires a big space<IMG src="10pttab.gif" alt=" ">here
次の例で画像が、グラフィックなものがある場所に現われるようにするために、使われています:
<IMG src="spacer.gif" alt="spacer"> <IMG src="colorfulwheel.gif" alt="The wheel of fortune">
例終り
定規(罫線)と境界は、視覚可能な利用者に「分離」と言う漠然とした意味を伝えるかもしれませんが、視覚的な文脈(状況)以外ではその意味を推論することはできません。
境界様式を特定するには、以下のCSS特有値を使います:
制作者は定規(罫線)と境界を作るのに、スタイルシートを使用すべきです。
例
この例で、 H1要素は先端に境界があり、厚さ2px・赤で内容と1em:離れています。
<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>
例終り
定規=罫線(例、 HR要素)が構造を指すのに使われる場合、非視覚的な方法で同じようにその構造を指すようにしておく(例、構造的なマーク付けを使って)。
例
この例で、DIV要素が誘導バー、水平方向の分離を含み、を作るのに使われています。
<DIV class="navigation-bar">
<HR>
<A rel="Next" href="next.html">[Next page]</A>
<A rel="Previous" href="previous.html">[Prevous page]</A>
<A rel="First" href="first.html">[First page]</A>
</DIV>
例終り
この索引は、この文書で論じられた、各チェックポイントとセクションの一覧です。さらに、各指針番号は指針文書の定義にリンクしています。各チェックポイントも指針文書の定義にリンクしています。
この索引はHTML 4.0要素全てをリストしてあります。この表の最初の列はHTML 4.0仕様書( [HTML40]、日本語版)の要素の定義にリンクしています。HTML 4.0では旧式になりいずれ廃止になる要素はアスタリック(*)が付いています。HTML 4.0では廃止になるもしくはHTML(2.0, 3.2, 4.0)W3C仕様書にない要素は、この表にあらわれません。
二番目の列は各要素のあるHTMLW3C仕様書をさしています。三番目の列は要素の役割をさしています。
最後の列は要素が議論されている当該文書でのセクションをあげています。"N/A"は要素がこの文書で議論されていないことを意味します。
HTML 4.0の属性の中で、アクセス性に関わりどの要素に適用しているかを一覧にしたものです。表の最初の列はHTML 4.0仕様書の定義にリンクしています{ [HTML40])。 HTML 4.0 ([HTML40])で旧式になりいずれ破棄される属性と要素には、アスタリック(*)が後ろに付いています。HTML 4.0で廃止されたもしくはHTML (2.0, 3.2, 4.0)にはない属性と要素は、この表にありません。殆どのHTML 4.0要素に適用される属性は、そうであると示唆されています;この属性をとる要素の正確なリストはHTML 4.0仕様書をみてください。
二番目の列は、各々の属性を取る要素を指しています。 三番目の列は、属性の役割を指しています。
最後の列は、属性が論じられている当該文書のセクションをあげています。
| 属性名 | 適用要素 | 役 割 | 技 術 |
|---|---|---|---|
| abbr | TD, TH | 代替 | 4.5.1デタ表 |
| accesskey | A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA | ユーザー インターフェース |
4.11.5フォームへのキーボード・アクセス |
| alt | APPLET, AREA, IMG, INPUT | 代替 | 3.2.1技術概要・ 4.7.1画像用等価テキスト・ 4.7.2見えないd−リンク・ 4.7.5クライアント側イメージマップ・ 4.7.6サーバー側イメージマップ・ 4.8.1アプレットその他のプログラム的なオブジェクト用等価テキスト・ 5.6.1空白として画像を使わなければならないなら |
| axis | TD, TH | 構造 | 4.5.1データ表 |
| class | 殆どの要素 | 構造 | 4.6.1グループ化と迂回リンク |
| dir | 殆どの要素 | 処理 | 4.5.1データ表 |
| for | LABEL | 構造 | 4.11.3フォーム制御を明確にラベルする |
| headers | TD, TH | 構造 | 4.5.1データ表・ 4.5.1データ表 |
| hreflang | A, LINK | メタデーター | 3.7内容誘導 |
| id | 殆どの要素 | 構造 | 4.6.1グループ化と迂回リンク |
| label | OPTION | 代替 | 4.11.4グループメニュー選択 |
| lang | 殆どの要素 | メタデータ | 4.2言語情報 |
| longdesc | IMG, FRAME, IFRAME | 代替 | 3.2.1技術概要・ 4.7.1画像用等価テキスト |
| scope | TD, TH | 構造 | 4.5.1データ表 |
| style | 殆どの要素 | 処理 | 5 CSS技術 |
| summary | TABLE | 代替 | 4.5.1データ表 |
| tabindex | A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA | ユーザー インターフェース |
4.6.1グループ化と迂回リンク・ 4.6.2キーボード・アクセス・ 4.11.5フォームへのキーボード・アクセス |
| title | 殆どの要素 | メタデーター | 3.2.2後方互換性・ 4.1.1メタデータ・ 4.3.2頭文字語と省略語・ 4.6リンク・ 4.7.3 アスキー文字作品 |
| usemap | IMG, INPUT, OBJECT | 処理 | 4.7.4画像マップ |
以下は、アクセス性に直接関係しないHTML 4.0属性のリストです。内容開発者は表現属性でなくスタイルシートを使用すべきです。事象処理属性については、より詳しい 装置非依存性事象処理のセクションを参照下さい。
この文書のオリジナル候補は、"The Unified Web Site Accessibility Guidelines" ([UWSAG])で、Trace R & D Center at the University of Wisconsinが変換したもので。その文書には寄与者のリストがあります。
W3C仕様書の最新版については、 W3C Technical Reportsのリストを見てください。
Note. W3C cannot maintain stability for any of the following references outside of its control. These references are included for convenience.
[ホーム]