ホーム] [翻訳について] [検証:WDG] [ウェブ内容アクセス指針1.0


日本語翻訳版覚書
  1. W3C 文書著作権(知的所有権)覚書 によって要求された通り、
    オリジナルURL・文書の位置付け・原著著作権覚書を記載しています。
  2. この仕様書の正式版は、W3Cサイトの英語版です。
  3. 翻訳版は、翻訳からくる間違いがあり得ます。
accessible:アクセシブル
(・・の手段で)接近[到達・入手・達成・入場・面会・照合・利用]可能な
、分かりやすい

W3C

ウェブ内容アクセス指針1.0用技術

Techniques for Web Content Accessibility Guidelines 1.0

W3C NOTE 5-May-1999

この版:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505
(plain text, postscript, pdf, gzip tar file of HTML, zip archive of HTML)
最新版:
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS
直前版:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990324/wai-pageauth-tech
ウェブ内容アクセス指針1.0最新版:
http://www.w3.org/TR/WAI-WEBCONTENT
編集者:
Wendy Chisholm, Trace R & D Center, University of Wisconsin -- Madison
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison
Ian Jacobs, W3C

要約

この文書は、「ウェブ内容アクセス指針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 優先度

各チェックポイントには優先度合が記載されており、このレベルは作業班がアクセス性へのチェックポイントの影響度合に基づいて割り当てたものです。

[優先度1]
内容開発者はこのチェックポイントを満たさ なければなりませんmust)。そうしないと、文書内の情報に入手利用できないグループが出てきます。グループにとっては、このチェックポイントを満たすことが、ウェブ文書を利用できるためには基本的に必須なものです。
[優先度2]
内容開発者はこのチェックポイントを満たすべきです (should)。そうしないと、文書内の情報を入手利用し難いグループが出てきます。このチェックポイントを満たすことで、ウェブ文書に入手利用する際の意味ある障害を除くでしょう。
[優先度3]
内容開発者はこのチェックポイントに耳をかたむけるように しましょうmay)。そうしないなら、一つ以上のグループが、文書の情報を入手利用するのに多少困難を感じます。このチェックポイントを満たすことで、ウェブ文書の入手利用が改善されるでしょう。

チェックポイントによっては、ある状況の下では優先レベルが変わるように特定されています。

この文書でのチェックポイントは、ウェブ内容アクセス指針1.0と一致した番号付けになっています。


2 この技術の構成

この文書は「ウェブ内容アクセス指針1.0」で定義されたチェックポイントに手段を与える技術一覧です。この文書は次のように組織化されています:

アクセス性の課題
このセクションでは、特別なマーク付けに依存しない入手利用性を促進するための幾つかの一般的な技術を紹介します。
HTML技術
このセクションでは、HTMLで、利用できるチェックポイントにどのように手段を提供するかを説明し( [HTML40][HTML32]を参照)、多くの実用的な例をあげてあります。このセクションを補うために、入手利用性に直接影響するHTML 4.0の全ての要素と属性ついての情報を提供しています。各要素については索引から、要素を参照している技術へのリンクがえられます。
CSS技術
このセクションでは、CSS1とCSS2で、利用できるチェックポイントにどのように手段を提供するかを説明しています( [CSS1][CSS2]を参照)。

チェックポイント図に、技術の使い方が用意されています。各チェックポイント用に、図にその定義(「ウェブ内容アクセス指針1.0」にある)やチェックポイントに技術を適用するリンクがあります。さらに、各セクションのはじめに、そのセクションを入手利用するチェックポイントのリストがあります。

2.1 事例といずれ破棄される例

この文書には、HTMLやCSSなどで入手利用しやすさの解決を示す多数の事例がありますが、内容開発者は何をするべきでないかを示す、いずれ破棄される例もあります。いずれ破棄される例は強調されていて、読み手は注意して近ずくべきです−−表示的目的だけの意味です。

3 アクセス性の課題

以下のセクションでは、ウェブ内容開発者が文書やサイトを設計する際心に留めておくべき入手利用性に言及します。

3.1 構造対表現(体裁)

文書や一連の文書を設計する場合内容開発者は、文書が利用者にどのように表現されるかを考える前に、まず最初に考えている文書構造を決めるよう努力すべきです。文書構造と内容がどのように表現されるかを区別することは、入手利用性の改善・管理のしやすさ・移植性など色々な利点をもたらします。

何が構造で何が表現(体裁)かを決めるのは、同時に挑戦することかもしれません。例えば、多くの内容開発者は水平方向罫線 ( HR要素)は構造上の区域を伝えると考えています。見える利用者にとってこれは正しいのですが、見えない利用者やグラフィックなブラウザを使ってない利用者には水平方向罫線は意味のないものよりもましなものになります(HR要素は構造上の区域に適用されると推測しますが、それ以上の情報はなく、なんら保証はありません)。HTMLでは、新しいセクションを決めるために内容開発者はHTML 4.0 見出し要素( H1〜H6)を使うべきです。これらは、水平方向罫線のような見かけやその他合図で補足されるかもしれませんが、それらで置き換えられるべきではありません。

逆の場合あります:内容開発者は表現効果を達成するために、構造的な要素を使用すべきではありません。例えばHTMLで、 BLOCKQUOTE要素は、ブラウザによってはテキストを字下げするかもしれませんが、引用を識別するためであって表現的な副効果をねらって設計するものではありません。字下げのために使われたBLOCKQUOTE要素は、その要素はブロック引用をマーク付けするのに使われていると思っている利用者や検索エンジンを混乱させます。

XML文書で表現と構造の分離は継承されます。Norman Walshは、「XMLガイド」"A Guide to XML" [WALSH]で言ってます、

HTMLブラウザは大部分固定コード化されています。ブラウザは H1タグを認識するので、第一レベル見出しは表示は同じです。XML文書は固定されたタグ組を持っていないので、このやり方ではうまくいきません。XML文書の表現はスタイルシートに依存していま す。

簡単なテスト! 内容が構造的か表現(体裁)的かを決めるには、自分のアウトラインを作成してみることです。階層構造上での各ポイントが、構造の変わり目を示します。この変化をマーク付けするには構造的なマークアップを使い、これらの変化を視覚上や音響的により明確なものにするのに表現的な(体裁上の)マークアップを使います。水平罫線はアウトラインではっきりしたものではなく、従って構造的なものではなく表現的な(体裁上の)ものです。 注意この簡単なテストで、章・節・パラグラフ構造がわかります。句内の構造を決めるには、省略語・自然言語の変化・定義やリスト項目を探します。

3.2 等価なテキスト

このセクションの チェックポイントは: 1.11.21.513.103.312.112.2

テキストは、画像読み取り・非視覚的なブラウザ・点字読み取りで処理できるので、全ての利用者が入手利用できます。視覚的に・拡大されて・表題を作成するためにビデオと同調してといったように、それは表示されます。非テキスト情報(画像・アプレット・音響・マルチメディア表現など)のある文書を設計するなら、出来る限り等価テキストで情報を補うことを考慮します。

等価テキストには、内容の機能(働き)や目的を記述します。込み入った内容(チャート・グラフなど)には、等価テキストが長くなり、記述的な情報になるかもしれません。

ロゴ・写真・送信ボタン・アプレット・リストの印・アスキー文字作品やイメージマップ内のリ全てのリンクまたページをレイアウトするのに使用された隠された画像にも、等価テキストを用意すべきです。

チェックポイント! 等価テキストが役に立つかどうかを決めるのにいいテストは、電話で声をだして文書を読んでると想像してみることです。ペイージを聞き手が分かるようにするためにこの想像に出会ったら、あなたはなんと言いますか。

3.2.1 技術概要

等価テキストをどのように特定するかは、文書言語によってことなります。

例えば、要素とは独立にHTMLでは、内容開発者が属性( "alt"や "longdesc")や要素内容( OBJECT要素)で等価テキストを特定できます。

クイックタイムといったビデオ形式では、開発者は色々な代替オーディオとビデオ・トラックがかけ、代替オーディオとビデオ・クリップとテキスト・ファイルをお互いに同調させることができます。

XML DTDsを創る場合、説明を要する要素は説明と強調する何らかの手段をもっているようにしておきまよう。

画像書式によっては、画像情報にそってたデーター・ファイルに内部テキストが書けるものがあります。画像書式(Portable Network Graphics、 [PNG]を参照)がこのようなテキストをサポートしているなら、内容開発者もそこに情報を提供できるでしょう。

3.2.2 後方互換性

ページやサイトを設計する場合、内容開発者は後方互換性を考慮しなければなりません。何故ならば:

従って、古い技術のことを考慮して設計する場合、以下の技術を考えておきます:

3.3 代替ページ

このセクションの チェックポイントは: 11.46.5

ほとんどのページを入手利用しやすくできるが、あるページ全体もしくは一部分に入手利用しにくいということも起こりえます。入手利用しやすい代替を作成するためのさらなる技術には以下のものがあります:

  1. 入手利用しやすく、入手利用しにくい元のページと同じ頻度で保守されている別のページに、 利用者が操作できるようにしておく。
  2. 静的な代替ページではなく、入手利用しやすいページを要求応じて生成するサーバー側スクリプトを設定しておく。
  3. FramesScripts用の例を参照してください。
  4. 情報が入手しやすく、入手利用しやすい所にいけるよう電話やファックス番号・電子メール・郵便番号を、24時間一日中が好ましいが、提供しておく。

ここに入手利用しやすい代替ページへのリンクのための二つの技術をあげておきます:

  1. 主ページと代替ページ両者の先頭にリンクを提供して、利用者がその両者間を移動できるようにしておく。例えばグラフィカルなページの先頭にテキストのみのページへのリンクを提供したり、テキストのみのページの先頭に協調されているグラフィカルなページへのリンクを提供します。そのページの先頭にそれらを配置することによって、利用者がその他のリンクの前に最初にこれらのリンク選ぶようにしておきます。
  2. 代替文書を割り当てるのにメタ情報を使います。ブラウザは、利用者のブラウザの方や設定条件に基づいて自動的に、代替ページを読み込むべきです。例えば、HTMLで、 LINK要素を以下のように使います:

    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>
            
    

    例終り

3.4 キーボード・アクセス

このセクションでの チェックポイントは: 9.2.

だれでもが、マウスその他のポイント装置のあるグラフィックな環境であるとはかぎりません。キーボード・代替キーボード・音声入力などによって、リンクをたどりフォーム制御を作動している利用者もいます。内容開発者は、利用者がポイント装置以外のものでページと交信できるように、必ず保証すべきです。キーボード・アクセス(とマウスアクセス)用に設計されたページは、一般的にその他の入力装置の利用者に入手利用しやすいものです。もっと言えば、キーボード・アクセスのためにページを設計することで、たいがい全体的な設計もうまく改善します。

リンクやフォーム制御へのキーボード・アクセスは、幾つかの方法で特定されます:

イメージマップ・リンク
クライアント側イメージマップ領域の等価テキストを提供するか若くはサーバー側イメージマップの別途のテキストを提供します。  例をみるには、イメージマップの章を参照
キボード・ショートカット
利用者がページ上で誘導リンクやフォーム制御にキボード打を結び付けるかもしれないので、キーボード・ショートカットを提供する。 注意 キーボード・ショートカット−−近道を作動させるのによく使われるキー−−は、操作システムが違えば違ったやりかたで操作するかもしれません。ウインドウズ・マシーンでは"alt"と"ctrl"キーが普通使われ、マッキントッシュではリングや"クローバー"や"葉"キーです。例は、 リンク用キーボード・アクセスフォームへのキーボード・アクセスの章を参照。
タブ順位
タブ順位で、リンクからリンクへまたフォーム制御からフォーム制御へ誘導するための(論理的な)順位を記述します(通常はタブ・キーそれから名前を押します)。例は、 フォームへのキーボード・アクセスの章を参照。

3.4.1 組み込まれたインターフェースの装置非依存的な制御

オブジェクト(アプッレトやマルチメディア=プラッグ)を呼び込み、そのインターフェースがマーク付け言語を通して制御できない要素があります。そのような場合、内容開発者は入手利用できるインターフェースのある等価代替を提供すべきです。

3.5 誘導

このセクションでの チェックポイントは: 14.313.413.513.313.713.2

各ページを統一した様式で表現しておけば、利用者は容易に操作機序を決め、またより容易に重要な内容を探す操作機序に飛べます。これによって学習や読むことが困難な人を助け、また全ての利用者も容易に操作できることになります。前もって、サイト上の情報を見つけたりまた望まない場合それを避けられる見込みが、増えます。

ページ間で同じ所に現われる構造例としては:

  1. 操作(誘導)バー
  2. ページの主内容
  3. 広告(忠告)

誘導(操作)機序で、利用者がサイトを通して取る一組の経路を作成します。誘導バー・サイトマップそして検索機能を提供すれば、そのサイトで探したい情報に至る見通しが高くなります。サイトが性質上極めて視覚的なものであるなら、利用者は何処へいこうとしているのかまた何処にはいったのかという地図を形作ることができないかどうかを、構造から誘導操作することはできないかもしれません。これを助けるには、内容開発者はなんらかの誘導操作機序を説明すべきです。説明とサイト案内は、そのサイトで迷いそれに主に頼るので、入手利用しやすいことが大切です。

検索機能を提供する場合、内容開発者は様々な熟達度レベルや設定条件を満たす検索機構を提供すべきです。殆んどの検索機構は検索項目のキーワードを要求します。文字を書くことが難しい利用者やそのサイトの言語に不慣れな利用者は、検索で正確な文字を必要とするなら、必要なものを見つけるのが困難です。検索エンジンはスペル・チェッカーを持ち、代わりになる「一番近いもの」を提出したり、例による質問検索や類似検索など提供できるかもしれません。

3.6 分かりやすさ

このセクションの チェックポイントは: 14.113.814.2

以下、ページやサイトの分かりやすさ(把握)を助ける技術について論じます。

3.6.1 様式

以下の書式様式の示唆によって、そのサイトの内容が全ての人、特に読み方や認識上で困難を感じる人、にとって読み易くなります。幾つかのガイド( [HACKER]をはじめ)で、この問題やその他の書式様式問題も詳しく論じられています。

訳者注: [日本語:分かりやすく、論理的に]に日本語での資料があります。

  1. 明確で正確な見出しとリンク説明を心掛ける。簡潔なリンク文(字)句は、文脈(状況)外や一連のリンクの一つとして読まれる場合も、分かるものを使うこと(リンクからリンクへと飛んだり、リンク文だけを聞くことで閲覧する利用者もいます)。情報を与える見出、利用者が詳しく読まなくてもページで素早く情報を探すことができるようにします。
  2. センテンスやパラグラフのはじめに話題をおきます(これは"front-loading"と言われます:先行読み込み)。これで、目でさっと読んでる(速読)人と音声合成装置を使っている人は助かります。最近音声での「速読」は、利用者が見出しから見出し・パラグラフからパラグラフへと飛んで、その情報片(見出し・パラグラフ・リンクなど)は興味があるかどうかを決めることを意味しています。主要な考えがパラグラフの中程や終にあると、音声利用者は欲しいものを探すのに大部分の文書を聞かなければならなくなるかもしれません。利用者が何を探しているのか、話題についてどの程度知っているかに関わりますが、検索機能も利用者がより早く内容をきめる手助けになるかもしれません。
  3. 一つのパラグラフを一つの考えに限定する。
  4. 文書内で定義していないなら、俗語・専門語や普通の言葉の特殊な意味付けを避ける。
  5. 普通に使われる言葉を選ぶ。例えば、"commence" より"begin"(始める)を使い、"endeavor."より"try"(努める)を使います。
  6. 受動態より能動態を使う。
  7. 込み入ったセンテンス構造を避ける。

文書が読みやすいかどうかを決める手助けに、「Gunning-Fog(もやもやの撃退)判読測定」( [SPOOL]に書かれていて、 [TECHHEAD]で例とアルゴリズム(手順)がオンラインであります)を使ことを考えてみます。このアルゴリズムは一般的に、内容が読みやすい場合、点数は低くなっています。結果の例として、聖書・シェクスピア・マーク=トウェイン・TVガイドは全てFog indexes(霧インデックス)6のあたりです。タイムス・ニューズウィーク・ウォール=ストリート=ジャーナルは平均的な霧インデックス11です。

3.6.2 等価なマルチメディア

満足に読めなかったり全く読めない人にとって、等価なマルチメディアは分かりやすくする手助けになります。マルチメディア表現が必ずしもテキストを理解しやすくするとは限りません。時には、マルチメディア表現でより戸惑わされることもあります。

テキストを補うマルチメディアの例:

  1. 過去の会計年度の営業売り上げ図といった複雑なデーターのチャート
  2. テキストの手話動作クリップへの翻訳。手話は話言葉とは非常に異なるものです。例えば、米手話で交流する人で米語を読めない人もいます。
  3. 音楽・話された言葉・音響効果を前もって録音したオーディオも、読めないが音響表現をしることができる人の手助けとなります。テキストは、発声合成装置で話されるように生成されますが、録音された話し手の声の変化は合成中に失われます。

3.7 内容取扱(処理)

このセクションの チェックポイントは: 11.3

  1. フランス語版は文書のフランス語版を必要とするクライアントに提供するのだから、「ここがこの文書のフランス語版です。」といったリンクを書くのではなく、内容取扱(処理)を使います。
  2. 内容取扱(処理)が不可能なら、マーク付けによって内容タイプや言語を指定します(例えばHTMLで、 "type"や "hreflang"を使います)。

3.8 ページの自動変更

このセクションの チェックポイントは: 7.47.5

時には内容開発者は、利用者がレフレッシュを求めていないのに、リフレッシュや変更をするページを作成します。この自動的なリフレッシュは利用者には方向性を失うことになります。その代わりに、設定条件段階で制作者は以下のようにすべきです:

  1. 適切なHTTP状態コード(301)を使うように、サーバーを設定します。HTTPヘッダーを使うことが好ましく、インターネット接続や保存時間を節約し非HTML文書にも適用されHEAD請求しか応じない表示代行手段(例えば、リンク・チェッカー)でも使えるからです。状態コード30x型は、メタによるリフレッシュではやれない"永久に移動"や "一時的な移動"と言った情報も提供します。
  2. 新しいページへのリンクを持つ普通の静的なページを再方向付けされるページと置き換える。

注意  チェックポイント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>

3.9 画面上の揺れ

このセクションの チェックポイントは: 7.1

画面上でのちらつきや発光は、光感受性てんかんのある利用者の発作の元になるかもしれなく、内容開発者は画面がちらつきのもとになることを避けなければなりません。4〜59/一秒(ヘルツ)で20発光/一秒で感受性が一番高いちらつきや点滅が、暗から明への急速な変化(ストロボライト)も同様に、てんかん発作の引き金になります。

3.10 束になった文書

このセクションの チェックポイントは: 13.9

束にされている文書は、オフラインで読みやすくします。まとまったパッケージを作るには:

3.11 検証

このセクションで、アクセス問題が解決されていて持っていないかを決めるためのウェブ文書のテストの戦略と技術を論じます。これらのテストは、主なアクセス問題に光をあて、多くの入手利用障害を減らす上で価値あるものです。しかし、筋書をテストすることのなかには、ただ障害に起因する状況を写すだけのものもあります;障害がある利用者が経験するもの全てをシミュレート(模擬実験をする)していません。現実の設定で、期待したより有効性が少ないかもしれません。従って戦略の一つとして、障害がある人がページやサイトを利用しようと試みる様子を内容開発者は、観察することを薦めています。

以下のテストとそれに従って設計の調整を完了してしてもなおページが入手利用しやすくないなら、入手利用しやすい 代替ページを作成するべきです。

注意 これらのテストを通過することで、「ウェブ内容アクセス指針1.0」の 適合を保証されたわけではありません。

3.11.1 自動検証

検証サービスでページの構文を照合できます(例えばHTML・CSS・XMLなど)。正しい構文(使い方)によって、ソフトウェアーはよい書式の文書をより容易に処理できるので、多くのアクセス問題が取り除かれます。また検証サービスによっては、構文だけに基づいた(例えば、文書で入手利用上重要な属性や特有値=プロパティーがない)アクセス問題を警告します。しかし正しい構文が、文書が入手利用しやすいという保証にならないことに注意して下さい。例えば、言語仕様書に従って画像に等価テキストを提供していても、そのテキストが不正確であったり不十分であったりするかもしれません。従って検証サービスによっては、あなたに質問し、分析のより本質的な箇所を通してあなたをすすめます。自動検証サービスの幾つかの例として以下のものがあります。:

  1. Bobbyなどの 自動アクセス検証道具[BOBBY]を参照)。
  2. W3C HTML検証サービスなどの HTML検証サービス[HTMLVAL]を参照)
  3. W3C CSS検証サービスなどの スタイルシート検証サービス[CSSVAL]を参照)

3.11.2 修復道具

検証サービスは普通解決すべき問題は何か、どのようにそれらを解決するのかの事例もしばしば与えます。普通、制作者を助けて各問題の手ほどきはできませんが、対話式に文書を調整するのを助けます。WAI評価と修復作業班(WAI Evaluation and Repair Working Group、 [WAI-ER])は、制作者を助け問題の同定だけではなくて対話的に問題を解決する一組の道具を開発すべく作業をすすめています。

3.11.3 利用者の筋書

大部分の表示代行手段(ブラウザ)や操作システムでは、利用者がソフトウェアーが見・音を出し・振る舞う方法を変える設定を修正できます。色々な表示代行手段で、異なる利用者がウェブで全く違った体験をしていることを心に留めておいて下さい。従って:

  1. Lynx ( [LYNX])などのテキスト専用ブラウザや Lynx Viewer( [LYNXVIEW])や Lynx-me ( [LYNXME])などのLynxエミュレーターで、 あなたのページをテストしましょう
  2. 多次元のグラフィックなブラウザを以下の条件で使ってみる
  3. 新旧含めて色々なブラウザを使う 注意 操作システムやブラウザによっては、同じ機械上にブラウザを幾つもインストールできないものもあります。また、古い閲覧ソフトウェアーを置くのが難しいかもしれません。
  4. 自己発声ブラウザ(例、 [PWWEBSPEAK][HOMEPAGEREADER])・画面読み取り(例、 [JAWS][WINVISION])・拡大ソフトウェアー・小画面表示・画面上キーボード・代替キーボードなど 別の道具を使ってみる。

3.11.4 スペルと文法のチェッカー

音声合成装置でページを読む人は、スペル間違いのある単語を合成装置の一番いい推測を判読できないかもしれません。文法チェッカーは、ページのテキスト内容が正しいことを保証する手助けをします。その文書が自国語でかかれていない読み手や文書の言語を習い始めた人を助けます。そしてそのページの分かり方を増す手助けをします。

3.12 ブラウザのサポート

このセクションの チェックポイントは: 11.1

注意  これを書いている時点で、全ての表示代行手段が、ウェブ・ページの入手利用性を有意義に増すかもしれない、(新)HTML 4.0属性や要素をサポートしているとは限りません。

ブラウザやその他の表示代行手段がアクセス性機能をサポートしているかにについての情報は、W3Cウェブ・サイト( [WAI-UA-SUPPORT])を参照してください。

一般的にHTML表示代行手段は、サポートしていない属性を無視し、サポートしていない要素の内容を表示します。


4  HTML技術

以下のセクションで、入手利用しやすいHTML文書設計のための幾つかの技術の一覧を提示します。このセクションは、話題(とHTML仕様書と同じ構成で、 [HTML40])によって組織化されています。

4.1 文書構造とメタデーター

このセクションの チェックポイントは: 3.2

内容開発者は構造的なマーク付けを仕様書に従って使用すべきです。構造的な要素と属性(どれがそうなのかは HTML要素と属性の索引を参照)は、文書の一貫性を促し、その他の道具(例、索引化道具・検索エンジン・表をデーターベースに抽出するプログラム・見出し要素を使う誘導道具・テキストをある言語から別の言語に翻訳する自動翻訳ソフトウェアー)に情報を提供します。

4.1.1 メタデーター

このセクションの チェックポイントは: 13.2

文書自体についての情報を提供する構造的な要素があります。これは、文書に関するメタデーターと言われます−−メタデーターとは、データーについての情報ということです。よくできたメタデーターは、利用者に重要な方向付けを提供することができます。文書についての有益な情報を提供するHTML要素は、以下のものを含んでいます:

4.1.2 セクション見出し

このセクションの チェックポイントは: 3.5.

セクションは、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>

例終り

4.1.3 リンク・メタデータと誘導道具

このセクションの チェックポイントは: 13.2

内容開発者は文書の誘導機構と組織化を記述するのに、 LINK要素やリンク型( [HTML40]を参照)を使うべきです。表示代行手段によっては、誘導道具を合成したりこのマーク付けに基づいた一組の文書を順序付けて印刷できるものもあります。

以下の LINK要素は、本の第二章の頭にあるものです:

   <LINK rel="Next" href="chapter3">
   <LINK rel="Previous" href="chapter1">
   <LINK rel="Start" href="cover">
   <LINK rel="Glossary" href="glossary">

例終り。

リンクについてのセクションも見てください

4.1.4 構造的なグループ化

このセクションの チェックポイントは: 12.3

以下のHTML 4.0機構は内容をグループ化し、理解を助けます:

これらのグループ化機構は、適切で自然な場合、例えば情報そのものが論理的なグループに導く場合、に使用されるべきです。内容開発者はグループを無闇に作成すべきではなく、というのは利用者を困惑させるからです。

4.2 言語情報

このセクションの チェックポイントは: 4.14.3

一つのページに異なった言語を使う場合、"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.

例終り。

言語の変化を同定することは、いくつかの理由から、重要なことです:

  1. 点字で文書を読んでいる利用者は、言語が変わると点字翻訳ソフトウェアーは正しい文字記号(例、アクセント付き文字)を生成するようにし、適切な制御コード(マーク付け)に変えることができます。これらはまた、利用者をさらに戸惑わせる、生成される点字短縮を防ぐようコードを制御します。点字短縮は、通常多元セルに現われる使用文字記号グループを、普通のように単一セルに結合します。例えば、普通三つのセルをとる"ing"(各文字につき一つ)を、単一セルに短縮できま す。
  2. 同じように、多元言語を話す音声合成装置は、固有の発音の適切なアクセントでテキストを生成することができます。変更がマークされていないなら、合成装置は基本言語の言葉を話すよう最善を尽くします。かくて、車(car)というフランス語、 "voiture"、は"voter."と発音されます。
  3. 言語そのものを翻訳できない利用者は、翻訳機械によって翻訳された馴染みのない言語をもつことができます。

文書の基本言語を、マーク付け(以下に示すように)やHTTPヘッダーで、決めておくことも、実践上いいことです。

    <HTML lang="fr">
       ....rest of an HTML document written in French...
    </HTML>

例終り。

4.3 テキスト・マーク付け

以下のセクションで、テキスト部分に構造を補足する方法を論じます。

4.3.1 強調

このセクションの チェックポイントは: 3.3

適切なHTML要素が、強調をマーク付けするのに、使われなければなりません: EMSTRONGBI要素は使うべきではありません:これは視覚的な表現効果を作ります。EMとSTRONG 要素は、色々なやり方で表示されるかもしれませんが(文字スタイルの変化・発声変化など)、構造的な強調を指定します。

4.3.2 頭文字語と省略語

このセクションの チェックポイント は: 4.2

省略語と頭文字語を ABBRACRONYMでマーク付けし、展開するのに "title"を使います:

   <P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!

例終り

4.3.3 引用

このセクションの チェックポイントは: 3.7

QBLOCKQUOTE 要素 は、それぞれインライン引用とブロック引用をマーク付けします。

この例は、 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>

例終り

4.3.4 画像でなく、マーク付けとスタイルシート:数学での例

このセクションの Checkpointsは: 3.1.

できるなら、画像(例、数学方程式)でなくマーク付け(やスタイルシート)の使用が、以下の理由で、アクセス性を促進します:

例として、数学をウェブ上に置く技術を考えます:

TeXは技術的な文章を作成するのによく使われ、その技術書はウェブ出版用にHTMLに変換されます。しかし、画像を生成し、旧式でいずれ破棄されるマーク付けを使い、レイアウトにテーブルを使う傾向があります。そこで、内容提供者は次のようにすべきです:

  1. もとのTeX(もしくはLaTeX)文書がウェブで入手できるようにする。 "AsTeR" ( [ASTER])といわれるシステムがあり、TeXとLaTeX文書の音響的な翻訳を作成することができます。IBMにはネットスケープやインターネット=エクスプローラー用のプラグインがあり、TeX/LaTeX 文書やMathMLを読み取ります( [HYPERMEDIA]を参照)。
  2. 変換処理されてできたHTMLが入手利用しやすいことを確認します。方程式の簡潔な説明を提供する(生成された画像、ビットや式の一部用の小さい画像、全てに"alt"テキスト書くのではでなく)。

4.3.5 稀な構造的なマーク付け

HTML 4.0仕様書は、稀なマーク付け要求のために以下の構造的な要素を定義しています:

CITE
引用や別のソースへの参照を内容とする。
DFN
囲われた用語の定義例を指す。
CODE
コンピュータ・コード断片に割り当てる。
SAMP
プログラム・スクリプトなどからのサンプル出力に割り当てる。
KBD
利用者が登録すべきテキストを指す。
VAR
変数やプログラムの独立変数を指す。
INS
文書内に挿入されたテキストを指す。
DEL
文書から削除されたテキストを指す。

4.4 リスト

このセクションの チェックポイントは: 3.6.

HTMLのリスト要素 DLULOLは、リストを作成するためにだけ使用されるべきで、字下げといった形式効果のために使うべきではありません。

序列番号付リストは、非ビジュアルな利用者の誘導をたすけます。非ビジュアルな利用者は、特に入れ子リストで各リスト項目の特別な入れ子レベルを指定していない場合、リストで方向を見失うかもしれません。表示代行手段がリスト文脈を明確に決める手段(例、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が広くサポートされるか若くは利用者が別の手段でリスト表示を制御できるまでは、制作者は番号がない入れ子リストに文脈上の手掛かりを提供しておくことを考えておくべきです。非ビジュアルな利用者は、リストの始まりと終わりを知るのが困難です。例えばリスト登録が画面上で次の行に折り返していたら、リストに二つの別の項目があるように見えるかもしれません。これは古い画面読み取りに問題があるかもしれません。

4.4.1 リスト印の変更にスタイルシートを使う

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>

例終り

DLDTDDで作成された定義リストで印として画像の使用を避けます。しかしこの方法が使われるなら、画像に 等価テキストを必ず提供しておきます。

旧式でいずれ廃止になる例

<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>

4.5 表(テーブル)

このセクションで、テーブル(表)のアクセス性と TABLE要素に置ける要素について論じまう。二つのタイプのテーブルを論じまう:データーを組織化するのに使われるテーブルとページの視覚的なレイアウトを作るのに使われるテーブルです。

4.5.1 データー表

このセックションの チェックポイントは: 5.55.15.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

ビジュアルな表示代行手段はこのテーブルを次のように表示するでしょう:

Illustration of coffee table rendering [コヒー表の説明]

次の例は前と同じ 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>

例終り

このテーブル(表)は、二箇所での旅行経費をリストしています:サンフランシスコとシアトルで、日付と範疇(食事・ホテルそして移動)。以下の画像は、ビジュアルな表示代行手段での表示をしめしています。[ 旅行表の説明

Travel Expense Report table as rendered by a visual user agent.

4.5.2 レイアウト用のテーブルの回避

このセクションの チェックポイントは: 5.35.4.

制作者は レイアウトと配置にはスタイルシートを使用すべきです。しかしレイアウトにテーブルを使うことが必要な場合、テーブルは読む順位で線形化にならなければなりません。テーブルが線形化されると、テーブルセルの内容は次々とパラグラフのつながり(例、ページ保存)になります。セルは、順に(行もしくは列順に)読み取る場合、理にかなったものでなければなりませんし、構造的な要素(例、パラグラフ・見出し・リストなど)を取りページが線形化した後も道理にかなったになるべきです。

また、レイアウトを作成するのにテーブルを使う際視覚的な効果を作るために構造的なマーク付けを使用しない。例えばTH (テーブル見出し)要素は、通常視覚的に中央化されボールド体(太字体)で表示されます。セルが実際上データー行や列の見出しではないなら、スタイルシートや要素の書式属性を使います。

4.5.3 テーブルでの折り返されたテキスト

このセクションの チェックポイントは: 10.3

ページもしくはセルのテキストがワードラップ(折り返す)する データー表をレイアウトするのに使われたテーブルは、古い画面読み取りでは問題を生じ、個々のテーブル・セルの誘導ができなく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"のブラウザ画面でテーブルを、ワードラップのために、テストすべきです。

テーブルマーク付けは構造的で表現と構造を分離するよう示唆しているので、レイアウト・配置・表現効果を作るにはスタイルシートの使用を推奨します。上の例での二つの列はスタイルシートを使って作成されます。より詳しい情報は、スタイルシートのセクションを参照下さい。

クイックテスト! 画面読み取りがテーブルをどのように読み取るかのいい理解方法はページを保存し行づたいにテーブルをを読んで見ることです。

4.5.4 テーブルの後方互換性の問題

HTML 3.2ブラウザで、 TFOOT要素の行はテーブル体部の前に現われます。

4.6 リンク

このセクションの チェックポイントは: 13.113.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>

例終り

4.6.1 グループ化と迂回リンク

リンクが論理的な組にグループ化(例えば、サイトの各ページにある誘導バーで)されているいる場合、一つのユニットとしてマーク付けされなければなりません。誘導バーは、通常ページで最初に出会うものです。音声合成装置の利用者にとって、ページの面白い内容に到達する前に全てのページにある多くのリンクを読まなければなりません。利用者がリンクのグループ化を迂回できる(視力を使っている利用者が各ページの同じ組を見た時するような)幾つかの方法があります:

将来表示代行手段で、利用者が誘導バーのような要素を飛び越えることができるようになるでしょう。

HTMLで、 DIVSPANPもしくは 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>     

例終り

4.6.2 キーボード・アクセス

ページの活動要素へのキーボード・アクセスはポイント装置が使えない多くの利用者にとって重要です。表示代行手段は、利用者がキーボード打をある活動と結び付けることができる機能を持っています。HTML 4.0ででも、内容開発者が "accesskey"属性でキーボード・ショートカットを文書に特定できます。

この例で利用者が"C"キーを作動すれば、リンクをたどれます。

   <A accesskey="C" href="doc.html" hreflang="en"
      title="XYZ company home page">
         XYZ company home page</A>

例終り

4.7 画像とイメージマップ

以下のセクションで、画像(GIF動画など簡単なアニメーションを含む)とイメージマップのアクセス性を論じます。

画像として表現される数学については、 画像よりテキストマーク付けとスタイルシートを使うを参照ください。

4.7.1 画像用の等価テキスト

このセクションの チェックポイント は: 1.1

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>

例終り

4.7.2 見えないd−リンク

注意 見えないd−リンクは旧式でいずれ廃止になり、"longdesc"属性になります。.

見えないd−リンクとは、小さな(1ピクセル)もしくは透明な画像で、その "alt"属性に"D-link"か"D"を取り、 A要素の内容の一部になっているもののことです。その他のd−リンクのように、協調された画像の等価テキストを参照します。その他のリンクのように、利用者はそこにタブで飛べます。したがって見えないd−リンクは、体裁的な理由で見えるd−リンクを避けたい設計者にとっては一時的な解決策を提供します。

4.7.3 アスキー文字作品

このセクションの チェックポイントは: 13.10

アスキー文字作品をさけ(文字符号によるイラスト)、その代わりに実際の画像を使います。というのも、画像用の 等価テキストが提供しやすくなるからです。しかし、アスキー文字作品を使わなければならないなら、アスキー文字作品を飛び超えるのにリンクを、以下のように、提供します:

<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"で代行するかもしれません。

4.7.4 イメージ・マップ

イメージマップは「作動領域」を持った画像です。利用者が領域の一部を選択すると、或る行動がおこり−−リンクをたどるかもしれませんし、情報がサーバーに送信されるなど。イメージマップを入手利用しやすくするには内容開発者は、資格的な領域と協調させられている各活動領域がポイント装置でなくても作動されられるように確認することが望ましい。

イメージマップは the MAP要素で作られます。HTMLでは、二つのタイプのイメージマップができます:クライアント側(利用者のブラウザがURIを処理する)とサーバー側イメージマップ(サーバーがクリック座標を処理する)です。全てのイメージマップで、内容開発者 等価テキストを提供しなければなりません。

内容開発者は、サーバー側イメージマップ( "ismap"で)よりも、クライアント側イメージマップを作成( "usemapで)すべきで 、というのはサーバー側イメージマップは特別な入力装置が必要だからです。サーバー側イメージマップが使われる(領域地図が shapeで表現できないという理由で)場合、製作者は代替の入手利用しやすい書式で同じ機能もしくは情報を提供しなければなりません。これを果たす一つの方法は、各活動領域へテキスト・リンクを張り、そのリンクが キーボードで誘導できるようにすることです。サーバー側イメージマップを使わなければならないなら、 サーバー側イメージマップを参照してください。

4.7.5 クライアント側イメージマップ

このセクションの チェックポイントは: 1.59.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)がないなら、代替リンクだけが表示されることに注意してください。

また、リンクは括弧([])で区切られていることにも注意して下さい。これは古い画像読み取りが幾つか隣接しているリンクを一つのリンクと読み取ることを防ぎ、目の見える利用者がリンクを視覚的に区別できる助けにもなります。

内容開発者は、印刷できる文字符号(隣接するリンクの間を囲った括弧や垂直棒(|))を必ず挿入します。

4.7.6 サーバー側イメージマップ

このセクションの チェックポイントは: 1.2

サーバー側イメージマップを使わねばならない場合、内容開発者はイメージマップの選択肢用の代替リストを提供します。それには三つの技術があります:

サーバー側とクライアント側イメージマップは、フォームの送信ボタンとしても使われるかもしれません。詳しくは、 グラフィックなボタンを参照。

4.8 アプレットとその他のプログラム対象

アプレットは APPLET若くは OBJECT要素で文書内に組み込まれますが、 OBJECTがより好ましい方法です。

4.8.1 アプレットやプログラム対象用の等価テキスト

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>

4.8.2 直接入手利用できるアプレット

このセクションの チェックポイントは: 8.1

アプレット( OBJECTAPPLETで作成される)が、代替書式で代行できない利用者との相互交渉(例、医療実践を操作できる能力)が必要な場合、アプレットに直接入手利用できるようにします。

アクセス可能なアプレットの開発についてのより詳しい情報は、 [JAVAACCESS]とを参照ください。 [IBMJAVA]を参照ください。これらの会社はJava Swing classesをアクセス可能にするのと同じように入手利用しやすいAPIを開発しています。

4.8.3 ダイナミック対象によって制作される音響とビデオ

このセクションの チェックポイントは: 8.11.4

画像と等価のテキスト・ 視覚的な情報の音響的説明・表題を必要な所に提供する。アプレットが動作を起こすなら、開発者はこの動作を停止する機構を提供すべきです(例については、 [TRACE]を参照)。 また音響やビデオ表現を入手利用しやすくする情報についての次のセクションも参照下さい。

4.9 音響とビデオ

4.9.1 音響情報

音響的な表現には、テキスト写し、音響的な事象の等価テキスト、を伴に置かなければなりません。これらの写しがビデオ表現と同調して表現され時、表題と呼ばれ、ビデオ資料の音響トラックを聞けない人によって使われます。

メディア書式によっては(例、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]を参照下さい。

4.9.2 視覚的な情報と動作

このセクションの チェックポイントは: 1.37.3

視覚的なトラックの音響的な説明は、ムービーの音響やダイアローグと干渉することなく、視覚要素の鍵となるもののナレーションを提供します。視覚要素の鍵とは、アクション・セッティング・体言語・グラフィックや表示されるテキストです。音響的な説明を、ビデオ資料のアクションやその他の非音響的な情報を追うために、目の見えない人が主に使います。

"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.

例終り

注意 重要でない視覚的な情報、例えば(前もって録音されて演説で)このサオトをどのようにして使うのかを説明する動画化されたお喋り、である場合音響的な説明は必要ありません。

ムービーでは、元の音響を同調している音響的な説明を提供します。マルチメディ書式についてのより詳しい情報は、 音響情報のセクションを参照ください。

4.9.3 照合された文字的な写し

照合された文字写しは、視覚的と聴覚障害のある人にとっても入手利用しやすくなります。また、音響/ビデオ資料にある情報をインデックス化や検索できる能力を、全ての人に提供します。

照合された文字的な写しにはダイアローグも含まれ、スクリーン上と外の音・音楽・笑い声・拍手など、その他の意義ある音と同じです。すなわち、表題にくるテキスト全部と音響的な説明に提供された説明全部です。

4.9.4 マルチメディア用等価テキスト

必要な時には、 等価テキストで、ページの理解を可能にするために視覚的な情報を提供しなければなりません。例えば、お天気だよりとして曇りと雨を示す動画の繰り返しを考えみて下さい。その動画はお天気だより(それは自然言語で表現され、テキストです)の一部を補足しているので、動画のだらだらした説明は必要ありません。しかし、学生が大陸との関連で雲形成について学んでいるという教師的な設定で、動画が現われるなら、動画を閲覧できないが学課を学びたい学生に説明する義務があります。

点滅制御についての テキスト様式のセクションも参照。

4.9.5 組み込まれたマルチメディア対象

プラッグインを必要とすると言ったその他の対象も 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]を参照。

4.10 フレーム(枠組)

見える人にとって、フレーム(枠)はページを異なる地帯に組織化するかもしれません。見えない人には、フレーム内内容間の関連(例、あるフレームは目次で、別のが内容そのものである)を別のやり方で伝えなければなりません。

現在装備されているフレーム( FRAMESETFRAMEそして IFRAME要素で)は、幾つかの理由によって、問題があります:

以下のセクションで、フレームをより入手利用しやすくするにはどうするかを論じます。また、HTML 4.0とCSSを使い、現在のフレーム装備の多くの限界に接近する フレーム代替を提供します。

4.10.1 方向性付けしやすさのためのタイトル・フレーム

このセクションの チェックポイントは: 12.1

"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>

例終り

4.10.2 フレーム用等価テキスト

このセクションの チェックポイントは: 12.2

<!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.  

例終り

フレームの内容が変わると、もはや等価テキストは適用しないことに注意してください。また、フレームの説明へのリンクを、 FRAMESETNOFRAMES要素で別の代替内容にそって提供すべきです。

4.10.3 フレームなしでも文書判読可能かを確認

この例で、利用者が"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>

そして表示代行手段はフレームを表示しなく、利用者は同じ情報の非フレーム版を入手利用できます(リンクを経て)。

例終り

4.10.4 フレームのソースを必ずHTML文書化しておく

このセクションの チェックポイントは: 6.2

内容開発者はフレームの等価テキスト、内容とフレーム間の関係が分かる、を提供しなければなりません。フレーム内容が変わると説明も変わらなければならないことに注意して下さい。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")の今の内容と一致していません。

4.10.5 フレームの目標として新画面を開くことを回避

このセクションの チェックポント は: 10.1

内容開発者は、target="_blank"でフレームの目標として新しい画面を特定しることを避けるべきです。

4.10.6 フレームに代わるもの

フレームの最も一般的な使われれ方の一つは、利用者のブラウザ画面を二つに分割することです:誘導画面と内容画面。フレームの代替として、以下のことを推奨しています:

  1. 誘導機構のために一つ文書("nav.html"と言います)を作成します。文書を分けることは、誘導機構が一つ以上の文書に割り当てられることを意味します。
  2. 誘導機構を必要とする文書一つ一つで、以下の(同じ様な) OBJECTマーク付けで文書最後に、それを置きます:

    <P>
    <OBJECT data="nav.html">
    Go to the <A href="nav.html">table of contents</A>
    </OBJECT>
    

    文書の終りに誘導機構を置くことは、スタイルシートが切られている場合利用者が文書の重要な情報に最初にアクセスすることを意味します。

  3. スタイルシートを誘導機構を画面の好きな所に位置付けるのに使います。例えば、次のCSS規則は誘導バーをページの左に移動し、得られる水平方向の空間の25%からはじまるようにします:
       OBJECT { float: left; width: 25% }
    

    次のCSS規則は、誘導機構をページの下左隅に置き、利用者がページを下へスクロールしてもそこに止まります:

       OBJECT { position: fixed; left: 0; bottom: 0 }
    

注意 誘導機構やその他の内容は、サーバー側手段によって文書に挿入されるかもしれません。

4.11 フォーム(書式)

このセクションは、 FORM要素に置ける、フォームやフォーム制御のアクセス性を論じます。

4.11.1 キーボード・アクセスで制御

このセクションの チェックポイント は: 9.49.5

より詳しい情報は、 キーボード・アクセスのセクションを参照

4.11.2 グループ・フォーム制御

内容開発者は、自然で適切な場合、 情報をグループ化すべきです。フォーム制御は、論理的な単位にグループ化されるなら、 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>

例終り

4.11.3 フォーム制御の明確なラベル化

このセクションの チェックポイントは: 12.410.2

HTML 4.0で、 "for"が使われた LABELの例は、前のセクションにあります。

4.11.4 グループ・メニュ選択

内容開発者は、自然で適切な場合、情報をグループ化すべきです。メニュ選択の長いリスト(追うのがむずかしい)の場合内容開発者は、 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>

例終り

4.11.5 フォームへのキーボード・アクセス

以下の例で、要素間でのタブ順位( "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>

例終り

4.11.6 グラフィックなボタン

ボタンを飾るために画像を使って、開発者はフォームをユニークで分かりやすくできます。ボタン用に画像(例、 INPUT要素か BUTTONで)を使うことが、本来入手利用しにくいというものではありません−等価テキストが画像用に提供されておれば

しかし INPUTで作られる グラフィカルなフォーム送信は、サーバー側イメージマップの一つのタイプを作ります。ボタンがマウスでクリックされると、マウス・クリックのXとY座標がフォーム送信の一部としてサーバーに送られます。

画像とイメージマップのセクションで、何故サーバー側イメージを回避すべきか、代わりにクライアント側イメージマップを使うことを示唆するのは何故かを論じています。HTML 4.0では、グラフィックなボタンは今やクライアント側イメージマップです。サーバーが提供する機能を保には、制作者は、HTML 4.0仕様書で述べられていりように( [HTML40]、セクション17.4.1)、以下の選択を持たなければなりません:

サーバーがクリックされた場所によって異なる活動をとる場合、非グラフィカルなブラウザの利用者は不利益をこうむります。このため、制作者は代替で接近することも考慮しておくべきです:

4.11.7 特別な制御のための技術

このセクションの チェックポイントは: 10.4

古い支援技術のなかには、適切に機能するために、フォーム制御で 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>

例終り

キーボード・アクセスのセクションも参照してください、というのもこれはフォーム制御にも適用されるからです。

4.11.8 フォームの後方互換問題

HTML 3.2ブラウザのなかには、

4.12 スクリプト

このセクションで、 SCRIPT要素を通して文書に含まれるスクリプトのアクセス性を論じます。

4.12.1 スクリプトの適切な転換

このセクションの チェックポイントは: 6.3

内容開発者は、スクリプトを切った場合やスクリプトをサポートしていない場合でもページを入手利用できるようにしなくてはなりません。

4.12.2 装置非依存の事象処理系

このセクションの チェックポイントは: 9.36.4

事象処理系が、ある事象(例、マウスが動く、キーが押される、文書が読み込まれるなどの)が起こった場合、実施されるスクリプトです。HTML 4.0で、事象処理系は 事象処理属性( "on"や"onkeyup"ではじまる属性)を経て要素に結び付きます。

事象処理のなかには、実施された場合、画像を強調することや要素のテキストの色を変えることと言った純粋に修飾的な効果を生みます。別の事象処理は計算を実行したり、重要な情報を利用者に提供するといった実際的な効果を生じます。単に要素の表現を変える以上のことをする事象処理には、内容開発者以下のことをするべきです:

  1. ユーザーとの交渉段階の引き金よりアプリケーション段階の引き金を使う。HTML 4.0で、アプリケーション段階事象属性は"onfocus"・"onblur"("onfocus"の反対)・"onselect"です。これらの属性は装置非依存性であるように設計されていますが、現在のブラウザでキーボード特異的事象として装備されていることに注意してきださい。
  2. そうでなく装置依存属性を使う必要がある場合、別の入力機構(いいかえると、同じ要素に二つの処理系を特定)を提供します:

    HTML 4.0でダブルクリック(ondblclick")することに相当するキーボードはないことに注意して下さい。

  3. マウス座標にのみ依存する事象処理を書かない、何故ならこれは装置に依存しない入力を先がけて行うことなのですから。

4.12.3 スクリプトの代替表現

これを成し遂げる一つやり方は、 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>

例終り


5 CSS技術

このセクションの チェックポイントは: 3.3.

以下のセクションは、入手利用しやすい文書を設計でCSSを使うための幾つかの技術とスタイル・シートを効果的に書く幾つかの技術の一覧です。HTMLで、スタイル・シートは LINK要素を経て外部的に、文書頭部の STYLE要素を経て、また style属性を経て特別な要素が特定されます。

CSS1([CSS1])とCSS2 ([CSS2]) では、内容開発者は殆どのHTML 4.0表現能力を写すことができ、少ない労力でより大きな力を提供しています。しかし殆どの利用者がスタイル・シートをサポートするブラウザを持つまでは、全ての表現慣用句がスタイル・シートで満足に表現されないかもしれません。HTML 4.0機能(例、テーブル・ビットマップ・テキストなど)をより入手利用しやすくする方法の例も提供しまう。

テキストマーク付けのセクションも参照ください。

5.1 スタイル・シートの作成指針

このセクションの チェックポイントは: 6.13.4

ここにアクセス性を促進するスタイル・シートの作成指針をあげます:

以下幾つかの例です

文字サイズは、以下のようにし:

   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%)}

例終り

5.2 文字

いずれ廃止される表現要素を使うのではなく、文字特徴を制御する多くの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要素や属性、 FONTBASEFONT・ "face"そして"size"、でなくてこれら特有値を使います。

文字情報を制御するのにHTML要素を使わなければならない場合、 BIGSMALL、これは廃止されません、を使います。

<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>

例終り

5.3 テキスト様式(スタイル)

このセクションの チェックポイントは: 7.2

以下のCSS特有値は、テキストを様式化するのに使えます:

5.3.1 画像でなくテキスト

内容開発者は画像でテキストを表現するのではなく文字を様式化するにはスタイルシートを使うべきです。画像でなくテキストを使うという意味は、情報が非常に多くの利用者(音声合成装置使用者・点字表示使用者・グラフィック表示使用者)に入手できると言うことです。スタイルシートを使うと、利用者は制作者の様式(スタイル)を書き換え、色や文字サイズを容易に変更することができます。

テキスト効果を作り出すビットマップ (特別な文字・変形・陰影など)を使わなければならないなら、ビットマップ(ビット絵)を入手利用しやすくなければなりません( 等価テキスト代替ページ)。

この例で、挿入された画像は大きな赤い文字"Example"を示し、"alt"属性の値で把握されます。

<P>This is an 
   <IMG src="BigRedExample.gif" alt="example"> 
   of what we mean.
</P>

例終り

5.4 テキスト書式

以下の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'は、この擬似要素で内容開発者がテキストの最初の文字を照合でき、この文書を書いている時点では広くサポートされていません。

5.5 

このセクションの チェックポイントは: 2.12.2

色を特定するには以下のCSS特有値を使います:

色彩のみを通して情報は伝えられていないことを確認しておきます。例えば利用者からの入力を頼む場合、「グリーンでリストされたものから項目を選んでください。」とは書かないように。そうでなくて、別の様式効果(例、文字効果)と文脈(例、把握できるテキスト・リンク)を通して、情報が入手できるようします。

例えばこの文書で、例は以下のように初期値で様式化(スタイルシートで)されています:

簡易なテスト! 文書が色なしてもなお機能しているかどうかをテストするには、モノクロ画面や色を切ったブラウザで調べることです。また、黒・白そして四つのブラウザ保護灰色だけを使った色型をブラウザに設定してみて、ページがどのように維持されているかを見ます。

簡易テスト! 色のコントラストが、色欠損者・低解像モニターの利用者にも十分かのテストには、黒白プリンター(グレイスケールで見える背景と色)でページを印刷してみます。またどのように質が落ちてるかをみるために、二ないし三世代コンピュータ用にプリントアウトとコピーします。これで、何処で別の合図(例:ハイパーリンクは通常ウェブ・ページで下線が光れています)を加える必要があるのか、またその合図は余にも小さいか判別しにくくてうまく機能していないかどうかがわかります。

色とコントラストについてより詳しい情報は、 [LIGHTHOUSE]を見てください。

5.6 レイアウト・位置取り・層そして配置

レイアウト・位置取り・層そして配置は、スタイルシートでなされるべきです(注目に値するのは、CSS回避や絶対的な位置取りによる):

5.6.1 空白として画像を使う必要がある場合

画像、見えないまた透明な画像も含めて、全てに等価テキストを提供します。

ページで画像をレイアウトするのに、内容開発者がスタイルシートを使えなくて見えない画像や透明な画像(例、 IMGで)を使わなければならない場合、画像用に alt=""を特定すべきです。

いずれ廃止される例

制作者は、画像が読み込まれない場合言葉が現われないように、 "alt"の値にスペーサー(空白)を使わないこと:

   my poem requires a big space<IMG src="10pttab.gif"
alt="&nbsp;&nbsp;&nbsp;">here

次の例で画像が、グラフィックなものがある場所に現われるようにするために、使われています:

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="The wheel of fortune">

例終り

5.7 定規(罫線)と境界

定規(罫線)と境界は、視覚可能な利用者に「分離」と言う漠然とした意味を伝えるかもしれませんが、視覚的な文脈(状況)以外ではその意味を推論することはできません。

境界様式を特定するには、以下の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>

例終り


チェックポイント図

この索引は、この文書で論じられた、各チェックポイントとセクションの一覧です。さらに、各指針番号は指針文書の定義にリンクしています。各チェックポイントも指針文書の定義にリンクしています。

指針1

1.1 非テキスト要素すべてに等価テキストを提供しましよう(例、"alt"・"longdesc"を経たり、要素内容で)。 これには:画像・テキストの画像的な表現(シンボルもふくめて)・イメージ=マップ領域・動画(例、gifアニメーション)・アプレットやプログラム・ アスキー文字作品・フレーム・スクリプト・リストの印としての画像・字間空白・グラフィックなボタン・音響(利用者との相互作動が必要でないまた必要な演奏)・独立音響ファイル・ビデオ音響そしてビデオがあります。[優先度1] (指針のチェックポイント1.1)
3.2 等価テキスト
4.7.1 画像の等価テキストを参照。
1.2 サーバー側イメージ・マップの各作動領域にテキストによる重複するリンクを提供する。[優先度1] (指針のチェックポイント1.2)
3.2 等価テキストとand
4.7.6 サーバー側イメージマップを参照
1.3  表示代行手段が、視覚的なトラックの等価テキストを自動的に音声読み上げができるまでは、マルチメディア表現の視覚的トラックの重要な情報についての音響的な記述を提供しましょう。[優先度1 (指針のチェックポイント1.3)
4.9.2 視覚的な情報と動き参照
1.4 時間ベースのマルチメディア表現(例、映画や動画)には、等価の代替え(例、表題や視覚的なトラックの音響的な記述)を表現と同調させる。[優先度1] (指針のチェックポイント1.4)
4.8.3 ダイナミック=オブジェクトで作られたオーディオとビデオ参照
1.5 表示代行手段が、クライアント側イメージマップ・リンクの等価テキストを表示するまでは、クライアント側イメージ・マップの各活動領域に重複するテキストでのリンクを提供する。[優先度3] (指針のチェックポイント1.5)
3.2 等価テキスト
4.7.5 クライアント側イメージマップ参照

指針2

2.1 色彩を伴う全ての情報は、色彩指定しなくても、例えば文脈やマーク付けから、入手できるよう確保。[優先度1] (指針のチェックポイント2.1)
5.5 色参照
2.2 前景と後景の色の組み合わせが、色彩欠損のある人が閲覧してもまた黒白画面でみても、十分なコントラストを発揮しているかを確認。[優先度2 画像で、優先度3 テキストで] (指針のチェックポイント2.2)
5.5 色参照

指針3

3.1 適切なマーク付け言語が在れば、画像でなくマーク付けを使って情報を伝えます。[優先度2] (指針のチェックポイント3.1)
4.3.4 画像よりマーク付けとスタイルシート:数学の例参照
3.2 公開されている正式な文法で検証する文書を作成する。[優先度2] (指針のチェックポイント3.2)
4.1 文書構造とメタデーター参照
3.3 レイアウトや体裁の制御にはスタイルシートを使います。[優先度2] (指針のチェックポイント3.3)
3.2 等価テキスト
4.3.1 強調
5 CSS技術参照
3.4 マーク付け言語の属性値やスタイルシートの特有値で絶対的な単位でなく相対的なものを使います。[優先度2] (指針のチェックポイント3.4)
5.1 スタイルシート作成指針参照
3.5 文書構造を伝えるには見出し要素を使い、仕様書に従った使い方をします。[優先度2] (指針のチェックポイント3.5)
4.1.2 セクションの見出し参照
3.6 リストとリスト項目を適切にマーク付けします。[優先度2] (指針のチェックポイント3.6)
4.4 リスト参照
3.7 引用のマーク付け。引用マーク付けを字下げといった書式効果のために使わない。[優先度2] (指針のチェックポイント3.7)
4.3.3 引用参照

指針4

4.1 文書のテキストや等価テキスト(例、表題)の自然言語の変化を明確に識別すること。[優先度1] (指針のチェックポイント4.1)
4.2 言語情報参照
4.2 文書で最初に来る省略語や頭文字語の展開を特定しておく。[優先度3] (指針のチェックポイント4.2 )
4.3.2 頭文字語と省略語参照
4.3 文書の基本の自然言語を識別できるようにしておく。優先度3] (指針のチェックポイント4.3)
4.2 言語情報参照

指針5

5.1 テーダー表では、行と見出しを特定します。[優先度1] (指針のチェックポイント5.1)
4.5.1 データー表参照
5.2 二つ以上の論理的レベルの行もしくは列見出しを持っているデーター表では、データ・セル(部分)と見出しセル(部分)を関係づけるようにマーク付けを使います。[優先度1] (指針のチェックポイント5.2)
4.5.1 データー表参照
5.3 テーブルが直線化されても道理に適っていないなら、テーブル(表)をレイアウトに使用しない。そうでなくても、テーブルが道理に適っていないなら、等価の代替えを提供します(直線化版であるかもしれません)。[優先度2] (指針のチェックポイント5.3)
4.5.2 レイアウトのためのテーブルを避ける参照
5.4 テーブルをレイアウト用に利用するなら、視覚的な書式化目的のために如何なる構造的マーク付けも使わない。[優先度2] (指針のチェックポイント5.4)
4.5.2 レイアウトのためのテーブルを避ける参照
5.5 テーブル用の要約を提供する。[優先度3] (指針のチェックポイント5.5)
4.5.1 データー表参照
5.6 見出しラベルの省略語を提供する。[優先度3] (指針のチェックポイント5.6)
4.5.1 データー表参照

指針6

6.1 スタイルシートがなくても読めるように文書を組織化します。例えば、HTML文書が関連するスタイルシートなしで表示される場合、その文書を読むことが可能であるべきです。[優先度1] (指針のチェックポイント6.1)
5.1 スタイルシート指針参照
6.2 ダイナミックな内容と同じものが、ダイナミックな内容が変更されたら、更新できることを保証します。[優先度1] (指針のチェックポイント6.2)
4.10.4 フレームのソースを必ずHTML文書にしておく参照
6.3 スクリプト・アプレットもしくはその他のプログラム的な対象が切ってあってもページは利用できることを保証します。これができない場合は、代替えのアクセスできるページに等価の情報を提供します。  [優先度1] (指針のチェックポイント6.3)
4.12.1 スクリプトの適切な転換参照
6.4 スクリプトやアプレットで、事象処理系は入力装置に依存していないことを保証します。[優先度2] (指針のチェックポイント6.4)
4.12.2 装置非依存性の事象処理参照
6.5 ダイナミックな内容を入手利用できるかもしくは代替えの表現やページを提供していることを確認。[優先度2] (指針のチェックポイント6.5)
Refer to 3.3 代替ページ

指針7

7.1 表示代行手段がちらつきの制御を利用者に可能になるまで、画面をちらつかせる原因となるものを避ける。[優先度1] (指針のチェックポイント7.1)
3.9 画面のちらつき参照
7.2 表示代行手段で点滅の制御を利用者ができるようになるまで、内容を点滅させる結果になるものを避けます(例、切ったり入れたりといった一定の割合で表現を変化する)。[優先度2] (指針のチェックポイント7.2)
5.3 テキスト様式参照
7.3 表示代行手段で、利用者が移動を止めることができるまで、ページ内の動きを避ける。[優先度2] (指針のチェックポイント7.3)
4.9.2 視覚的な情報と動き参照
7.4 表示代行手段がリフレッシュを止める機能を提供するまでは、周期的に自動変更するページを作成しない。[優先度2] (指針のチェックポイント7.4 )
3.8 自動ページ変更参照
7.5 表示代行手段が自動方向変更を停止する機能を提供するまでは、自動的にページを再方向化するマーク付けを使用しない。代わりに、ページを再方向化するようにサーバーを設定します。[優先度2] (指針のチェックポイント7.5)
3.8 自動ページ変更参照

指針8

8.1 スクリプトやアプレットといったプログラム要素を直接入手利用できるようにまた補助的な技術と両立できるようにします。[機能が重要で外では表現できないなら優先度1で、そうでないなら優先度2] (指針のチェックポイント8.1)
4.8.2 直接入手利用できるアプレット)
4.8.3 ダイナミック=オブジェクトで作られた音響とビデオ参照

指針9

9.1 領域が入手できる地理上の形で定義できない場合を除き、サーバー側イメージマップでなくクライアント側イメージマップを提供します。[優先度1] (指針のチェックポイント9.1)
4.7.5 クライアント側イメージマップ参照
9.2 固有のインターフェースを持っている要素は装置に依存しない方法で操作できることを確認します。[優先度2] (指針のチェックポイント9.2)
3.4 キーボード・アクセス参照
9.3 スクリプトでは、装置依存性の事象処理系でなく論理的事象処理系を特定します。[優先度2] (指針のチェックポイント9.3)
4.12.2 装置非依存性事象処理参照
9.4 リンク・フォーム制御そしてオブジェクトを通じて論理的なタブ順位を作成する。[優先度3] (指針のチェックポイント9.4)
4.11.1 キーボードでアクセスできるよう参照
9.5 重要なリンク(クライアント側イメージマップを含んで)・フォーム制御・フォーム制御群にキーボード・ショートカットを提供します。[優先度3] (指針のチェックポイント9.5)
4.11.1 キーボードでアクセスできるよう参照

指針10

10.1 表示代行手段で利用者が起こった窓を切ることができるようになるまで、飛び出しや別の窓を表わしたり、利用者に知らせないで現在の窓を変更しないように。 [優先度2] (指針のチェックポイント10.1)
4.10.5 フレームの目標として新しい窓を避ける参照
10.2 表示代行手段がラベルとフォーム制御の協調が明確になるまで、暗黙に協調されたラベルのある全てのフォーム制御では、そのラベルが適切に位置付けされているかを確認。 [優先度2] (指針のチェックポイント10.2)
4.11.3 フォーム制御を適切にラベル付けする参照
10.3 表示代行手段(支援技術も含めて)が横並びのテキストを正しく表示できるまでは、テキストを平行で単語の折り返しする列でテキストをレイアウトする全てのテーブルに、線状のテキスト代替え(現在のページにか他のページに)を提供する。[優先度3] (指針のチェックポイント10.3)
4.5.3 表で折り返されたテキスト参照
10.4 表示代行手段が空の制御を正しく処理するまでは、編集ボックスとテキスト領域に初期で置き代えられる文字符号を配置します。[優先度3] (指針のチェックポイント10.4)
4.11.7 特別な制御技術参照
10.5 表示代行手段(支援技術も含めて)がリンクにはっきりと合わすようになるまでは、隣接するリンクの間に非リンク・印刷できる文字符号(スペースで囲む)をいれます。[優先度3] (指針のチェックポイント10.5)
4.7.5 クライアント側イメージマップ参照

指針11

11.1 入手できて仕事に適しているならW3Cの技術を使用し、サポートされているなら最新版を使用するように。[優先度2] (指針のチェックポイント11.1)
3.12 ブラウザのサポート参照
11.2 W3C技術のいずれ破棄される(deprecated)機能は避ける。[優先度2] (指針のチェックポイント11.2)
HTM要素と属性索引参照
11.3 利用者は設定条件(プレファレンス)にそって文書を受け取るのでその情報を提供する(例、言語・内容型など)。 (指針のチェックポイント11.3 )
3.7 内容誘導参照
11.4 最大の努力をしても入手利用しやすいページを作成できない場合W3C技術を使い、入手利用しやすく、等価の情報(また機能性)を持ち、入手利用しにくいもとのページと同じ頻度で更新する代替えページへのリンクを提供する。[優先度1] (指針のチェックポイント11.4)
3.3 代替ページ参照

指針12

12.1 各フレームにタイトルを付け、フレーム識別や誘導を容易にする。[優先度1] (指針のチェックポイント12.1)
3.2 等価テキスト
4.10.1 分かりやすい方向性用のフレーム・タイトル参照
12.2 フレームの目的やフレーム・タイトルだけでははっきりしないならフレームの相互関係を説明する。[優先度2] (指針のチェックポイント12.2)
3.2 等価テキスト
4.10.2 フレーム用等価テキスト参照
12.3 自然で適切な所なら、大きな情報をより扱いやすいグループに分ける。[優先度2] (指針のチェックポイント12.3)
4.1.4 構造的なグループ化参照
12.4 ラベルをはっきりとその制御を強調させる。[優先度2] (指針のチェックポイント12.4)
4.11.3 フォーム制御をはっきりとラベルする参照

指針13

13.1 各リンクの目標を明確に識別します。[優先度2] (指針のチェックポイント13.1)
4.6 Links参照
13.2 意味付け情報をページやサイトに加えるためにメタデータを提供します。[優先度2] (指針のチェックポイント13.2)
3.5 誘導
4.1.1 メタデーtsー
4.1.3 リンク・メタデーターと誘導道具参照
13.3 サイトの全体的なレイアウトについての情報を提供します(例、サイト地図や目次)。[優先度2] (指針のチェックポイント13.3)
3.5 誘導参照
13.4 一定の方法で誘導機序を提供する。[優先度2] (指針のチェックポイント13.4)
3.5 誘導参照
13.5 誘導機序へのアクセスを強調し与えるために誘導バーを提供する。優先度3] (指針のチェックポイント13.5 )
3.5 誘導参照
13.6 関連付けられたリンクをグループ化し、そのグループを(表示代行手段のために)を識別し、表示代行手段がそうできるまでは、グループを迂回する方法を提供する。[優先度3] (指針のチェックポイント13.6)
4.6 リンク参照
13.7 検索機能が提供されているなら、異なる熟練度と設定条件で検索タイプを違えることができるように。[優先度3] (指針のチェックポイント13.7)
3.5 誘導参照
13.8 見出し・パラグラフ・リストなどのはじめに区別する情報を置く。[優先度3] (指針のチェックポイント13.8)
3.6 分かりやすさ参照
13.9 文書の集まりについての情報を提供する(例、多数のページを含む文書)。[優先度3] (指針のチェックポイント13.9)
3.10 纏まった文書参照
13.10 多行のASCIIアートを飛び超える手段を提供する。[優先度3] (指針のチェックポイント13.10)
3.2 等価テキスト
4.7.3 アスキー文字作品参照

指針14

14.1 サイト内容には明晰で簡潔な言葉を使う。[優先度1] (指針のチェックポイント14.1)
3.6 分かりやすさ参照
14.2 画像や音響表現にテキストを補足し、ページの把握を容易にする。[優先度3] (指針のチェックポイント14.2)
3.6 分かりやすさ参照
14.3 ページ間で一定の表現様式にする。[優先度3] (指針のチェックポイント14.3)
3.5 誘導参照

HTML要素と属性の索引

このセクションでの チェックポイントは: 11.2

要素

HTML 4.0要素索引の線形版

この索引はHTML 4.0要素全てをリストしてあります。この表の最初の列はHTML 4.0仕様書( [HTML40]、日本語版)の要素の定義にリンクしています。HTML 4.0では旧式になりいずれ廃止になる要素はアスタリック(*)が付いています。HTML 4.0では廃止になるもしくはHTML(2.0, 3.2, 4.0)W3C仕様書にない要素は、この表にあらわれません。

二番目の列は各要素のあるHTMLW3C仕様書をさしています。三番目の列は要素の役割をさしています。

最後の列は要素が議論されている当該文書でのセクションをあげています。"N/A"は要素がこの文書で議論されていないことを意味します。

要素名 定義有 役 割 技 術
A 2.0, 3.2 構造 4.6リンク4.7.2見えないD−リンク4.7.5クライアント側イメージマップ
ABBR   構造 4.3.2頭文字語と省略語4.7.3アスキー文字作品
ACRONYM   構造 4.3.2頭文字語と省略語
ADDRESS 2.0, 3.2 メタデータ 4.1.1メタデータ
APPLET* 3.2 置換 4.8アプレットとその他のプログラム・オブジェクト4.8.1アプレットとその他のプログラム・オブジェクト用等価テキスト4.8.2直接にアクセスできるアプレット
AREA 3.2 構造 4.7.5クライアント側イメージマップ
B 2.0, 3.2 表現 4.3.1強調
BASE 2.0, 3.2 処理 N/A
BASEFONT* 3.2 表現 5.2文字
BDO   処理 N/A
BIG 3.2 表現 5.2文字
BLOCKQUOTE 2.0, 3.2 構造 3.1 構造 vs. 表現(体裁)4.3.3引用5.4テキスト書式
BODY 2.0, 3.2 構造 N/A
BR 2.0, 3.2 表現 N/A
BUTTON   構造 4.11.6グラフィックなボタン4.11.8フォームの後方互換性問題
CAPTION 3.2 構造 4.1.4構造的なグループ化4.5.1データ表
CENTER* 3.2 表現 5.6レイアウト・位置・層・配置
CITE 2.0, 3.2 構造 4.3.5稀な構造的なマーク付け
CODE 2.0, 3.2 構造 4.3.5稀な構造的なマーク付け
COL   構造 4.5.1データ表
COLGROUP   構造 4.1.4構造的なグループ化4.5.1データ表
DD 2.0, 3.2 構造 4.4.1リスト印の変更はスタイルシートで
DEL   メタデータ 4.3.5稀な構造的なマーク付け
DFN 3.2 構造 4.3.5稀な構造的なマーク付け
DIR* 2.0, 3.2 構造 N/A
DIV 3.2 構造 4.6.1グループ化と迂回リンク
DL 2.0, 3.2 構造 4.1.4 構造的なグループ化4.4リンク4.4.1リスト印変更はスタイツシートで
DT 2.0, 3.2 構造 4.4.1リスト印変更はスタイツシートで
EM 2.0, 3.2 構造 4.3.1強調
FIELDSET   構造 4.1.4構造的なグループ化4.11.2フォーム制御のグループ化
FONT* 3.2 表現 5.2文字
FORM 2.0, 3.2 構造 4.11フォーム
FRAME   置換 4.6.1グループ化と迂回リンク4.10フレーム
FRAMESET   表現 4.10フレーム4.10.2フレーム用等価テキスト
H1 2.0, 3.2 構造 3.1 構造 vs. 表現(体裁), 4.1.2セクション見出し4.1.4構造的なグループ化
HEAD 2.0, 3.2 構造 N/A
HR 2.0, 3.2 表現 3.1 構造 vs. 表現(体裁)4.1.2セクション見出し
HTML 2.0, 3.2 構造 N/A
I 2.0, 3.2 表現 4.3.1強調
IFRAME   置換 4.10フレーム
IMG 2.0, 3.2 置換 4.7.1画像用等価テキスト4.7.6サーバー側イメージマップ4.10.4フレーム・ソースをHTML文書に5.6.1空白用に画像を使わねばならないなら、
INPUT 2.0, 3.2 構造 4.11.6グラフィカルなボタン4.11.8フォームの後方互換性問題
INS   メタデータ 4.3.5稀な構造的なマーク付け
ISINDEX* 2.0, 3.2 構造 N/A
KBD 2.0, 3.2 構造 4.3.5稀な構造的なマーク付け
LABEL   構造 4.11.3フォーム制御を明確にラベル付け
LEGEND   構造 4.1.4構造的なグループ化4.11.2フォーム制御のグループ化
LI 2.0, 3.2 構造 4.4.1リスト印変更はスタイルシートで
LINK 2.0, 3.2 メタデータ 3.3代替ページ4.1.1メタデータ4.1.3リンク・メタデータと誘導5 CSS技術
MAP 3.2 構造 4.7.4イメージマップ
MENU* 2.0, 3.2 構造 N/A
META 2.0, 3.2 メタデータ 3.8自動ページ変更4.1.1メタデータ
NOFRAMES   代替 4.10.2フレーム用等価テキスト
NOSCRIPT   代替 4.12.3スクリプトの代替表現
OBJECT   置換 3.2.1技術概要4.7.1画像用等価テキスト4.7.5クライアント側イメージマップ4.7.6サーバー側イメージマップ4.8アプレットとその他のプラクラム・オブジェクト4.8.1プレットとその他のプラクラム・オブジェクト用等価テキスト4.8.2直接アクセスできるアプレット4.9.5マルチメディア対象を組み込む4.10.6フレームの代替的なもの
OL 2.0, 3.2 構造 4.1.4構造的なグループ化4.4リンク
OPTGROUP   構造 4.1.4構造的なグループ化4.11.4グループ・メニュー選択
OPTION 2.0, 3.2 構造 4.11.4グループ・メニュー選択
P 2.0, 3.2 構造 4.1.4構造的なグループ化4.6.1グループ化と迂回リンク
PARAM 3.2 処理 N/A
PRE 2.0, 3.2 表現 4.5.1データ表
Q   構造 4.3.3引用
S*   表現 N/A
SAMP 2.0, 3.2 構造 4.3.5稀な構造的なマーク付け
SCRIPT 3.2 (DTD) 処理 4.12スクリプト
SELECT 2.0, 3.2 構造 4.11.4グループ・メニュー選択
SMALL 3.2 表現 5.2文字
SPAN   構造 4.6.1グループ化と迂回リンク
STRIKE* 3.2 表現 N/A
STRONG 2.0, 3.2 構造 4.3.1強調
STYLE 3.2 (DTD) 処理 5 CSS技術
SUB 3.2 表現 N/A
SUP 3.2 表現 N/A
TABLE 3.2 構造 4.5テーブル(表)
TBODY   構造 4.1.4構造的なグループ化4.5.1データ表
TD 3.2 構造 4.5.1データー表
TEXTAREA 2.0, 3.2 構造 4.11.7特別な制御技術
TFOOT   構造 4.1.4構造的なグループ化4.5.1データ表4.5.4テーブルの後方互換性問題
TH 3.2 構造 4.5.1データ表
THEAD   構造 4.1.4構造的なグループ化4.5.1データ表
TITLE 2.0, 3.2 メタデータ 4.1.1メタデータ
TR 3.2 構造 N/A
TT 2.0, 3.2 表現 N/A
U* 3.2 表現 N/A
UL 2.0, 3.2 構造 4.1.4構造的なグループ化4.4リスト
VAR 2.0, 3.2 構造 4.3.5稀な構想的なマーク付け

属性

HTML 4.0属性索引の線形版.

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属性のリストです。内容開発者は表現属性でなくスタイルシートを使用すべきです。事象処理属性については、より詳しい 装置非依存性事象処理のセクションを参照下さい。

その他の構造的属性:
start*, value*, rowspan, colspan, span
その他の表現的属性:
align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*, cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*, color*, text*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated according to element), marginheight, marginwidth, frame, frameborder, rows, cols
その他の処理命令属性:
ismap, coords, shape
その他のユーザー・インターフェース属性:
target, scrolling, noresize
その他のメタデーター属性:
type, cite, datetime
事象処理属性:
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload

謝辞

Web Content Guidelines Working Group Co-Chairs:
Chuck Letourneau, Starling Access Services
Gregg Vanderheiden, Trace Research and Development
W3C Team contacts:
Judy Brewer and Daniel Dardailler
We wish to thank the following people who have contributed their time and valuable comments to shaping these guidelines:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, Jaap van Lelieveld, and Jason White

この文書のオリジナル候補は、"The Unified Web Site Accessibility Guidelines" ([UWSAG])で、Trace R & D Center at the University of Wisconsinが変換したもので。その文書には寄与者のリストがあります。

参考仕様書

W3C仕様書の最新版については、 W3C Technical Reportsのリストを見てください。

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. The CSS1 Recommendation is: http://www.w3.org/TR/1999/REC-CSS1-19990111.
The latest version of CSS1 is available at: http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. The CSS2 Recommendation is: http://www.w3.org/TR/1998/REC-CSS2-19980512.
The latest version of CSS2 is available at: http://www.w3.org/TR/REC-CSS2.
[DOM1]
"Document Object Model (DOM) Level 1 Specification", V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson, and L. Wood, eds., 1 October 1998. The DOM Level 1 Recommendation is: http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001.
The latest version of DOM Level 1 is available at: http://www.w3.org/TR/REC-DOM-Level-1
[HTML40]
"HTML 4.0 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 17 December 1997, revised 24 April 1998. The HTML 4.0 Recommendation is: http://www.w3.org/TR/1998/REC-html40-19980424.
The latest version of HTML 4.0 is available at: http://www.w3.org/TR/REC-html40.
日本語訳
[HTML32]
"HTML 3.2 Recommendation", D. Raggett, ed., 14 January 1997. The latest version of HTML 3.2 is available at: http://www.w3.org/TR/REC-html32.
[MATHML]
"Mathematical Markup Language", P. Ion and R. Miner, eds., 7 April 1998. The MathML 1.0 Recommendation is: http://www.w3.org/TR/1998/REC-MathML-19980407.
The latest version of MathML 1.0 is available at: http://www.w3.org/TRREC-MathML.
[PNG]
"PNG (Portable Network Graphics) Specification", T. Boutell, ed., T. Lane, contributing ed., 1 October 1996. The latest version of PNG 1.0 is: http://www.w3.org/TR/REC-png.
[RDF]
"Resource Description Framework (RDF) Model and Syntax Specification", O. Lassila, R. Swick, eds., 22 February 1999. The RDF Recommendation is: http://www.w3.org/TR/1999/REC-rdf-syntax-19990222.
The latest version of RDF 1.0 is available at: http://www.w3.org/TR/REC-rdf-syntax
[RFC2068]
"HTTP Version 1.1", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, and T. Berners-Lee, January 1997.
[SMIL]
"Synchronized Multimedia Integration Language (SMIL) 1.0 Specification", P. Hoschka, ed., 15 June 1998. The SMIL 1.0 Recommendation is: http://www.w3.org/TR/1998/REC-smil-19980615
The latest version of SMIL 1.0 is available at: http://www.w3.org/TR/REC-smil
[TECHNIQUES]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. This document explains how to implement the checkpoints defined in "Web Content Accessibility Guidelines 1.0". The latest draft of the techniques is available at: http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
[WAI-AUTOOLS]
"Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds. The latest Working Draft of these guidelines for designing accessible authoring tools is available at: http://www.w3.org/TR/WAI-AUTOOLS/
[WAI-UA-SUPPORT]
This page documents known support by user agents (including assistive technologies) of some accessibility features listed in this document. The page is available at: http://www.w3.org/WAI/Resources/WAI-UA-Support
[WAI-USERAGENT]
"User Agent Accessibility Guidelines", J. Gunderson and I. Jacobs, eds. The latest Working Draft of these guidelines for designing accessible user agents is available at: http://www.w3.org/TR/WAI-USERAGENT/
[WCAG-ICONS]
Information about conformance icons for this document and how to use them is available at http://www.w3.org/WAI/WCAG1-Conformance.html
[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines were compiled by the Trace R & D Center at the University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education. This document is available at: http://www.tracecenter.org/docs/html_guidelines/version8.htm
[XML]
"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 February 1998. The XML 1.0 Recommendation is: http://www.w3.org/TR/1998/REC-xml-19980210.
The latest version of XML 1.0 is available at: http://www.w3.org/TR/REC-xml

サーバー

Note. W3C cannot maintain stability for any of the following references outside of its control. These references are included for convenience.

[ASTER]
For information about ASTER, an "Audio System For Technical Readings", consult T. V. Raman's home page.
[BOBBY]
Bobby is an automatic accessibility validation tool developed by Cast.
[BROWSERCAPS]
BrowserCaps.
[CSSVAL]
The W3C CSS Validation Service.
[DVS]
DVS Descriptive Video Services.
[HACKER]
Hacker, Diana. (1993). A Pocket Style Manual. St. Martin's Press, Inc. 175 Fifth Avenue, New York, NY 10010.
[HOMEPAGEREADER]
IBM's Home Page Reader.
[HTMLVAL]
The W3C HTML Validation Service.
[HYPERMEDIA]
IBM's techexplorer Hypermedia Browser.
[IBMJAVA]
IBM Guidelines for Writing Accessible Applications Using 100% Pure Java are available from IBM Special Needs Systems.
[JAVAACCESS]
Information about Java Accessibility and Usability is available from the Trace R&D Center.
[JAWS]
Henter-Joyce's Jaws screen reader.
[LIGHTHOUSE]
The Lighthouse provides information about accessible colors and contrasts.
[LYNX]
Lynx is a text-only browser.
[LYNXME]
Lynx-me is a Lynx emulator.
[LYNXVIEW]
Lynx Viewer is a Lynx emulator.
[MACROMEDIA]
Flash OBJECT and EMBED Tag Syntax from Macromedia.
[NCAM]
The National Center for Accessible Media includes information about captioning and audio description on the Web.
[PWWEBSPEAK]
The Productivity Works' pwWebSpeak.
[SPOOL]
Spool, J.M., Sconlong, T., Schroeder, W., Snyder, C., DeAngelo, T. (1997). Web Site Usability: A Designer's Guide User Interface Engineering, 800 Turnpike St, Suite 101, North Andover, MA 01845.
[TECHHEAD]
Tech Head provides some information about the Fog index described in [SPOOL].
[TRACE]
The Trace Research & Development Center. Consult this site for a variet of information about accessibility, including a scrolling Java applet that may be frozen by the user.
[WAI-ER]
The WAI Evaluation and Repair Working Group
[WALSH]
Walsh, Norman. (1997). "A Guide to XML." In "XML: Principles, Tools, and Techniques." Dan Connolly, Ed. O'Reilly & Associates, 101 Morris St, Sebastopol, CA 95472. pp 97-107.
[WEBREVIEW]
webreview.com style sheet browser compatibility charts.
[WINVISION]
Artic's WinVision.

iso-2022-jp LF 版
URL: http://www.asahi-net.or.jp/‾bd9y-ktu/WEBct_f/wai-pageauth-tech.html
Yasutaka Kato 加藤泰孝
<email:y.kato@personal.email.ne.jp>
<email:ykato-ind@umin.ac.jp>

ホーム