Webコンテンツ・アクセシビリティ・ガイドライン 1.0の解説　石川准

Webコンテンツ・アクセシビリティ・ガイドライン 1.0の概要と、その具体的なテクニックについて説明する。

ガイドライン1. 聞いたり見たりする内容には、それと同等の役割を持つ代替物を提供する

1.1 テキスト以外のすべての要素には、それと同等の役割を持つテキストを付ける。

テキストはalt、longdescで指定したり、要素の内容内に記述する。テキスト以外の要素には、画像、記号などテキストをグラフィックで表現したもの、イメージマップ領域、アニメーションGIFなどのアニメーション、アプレット、プログラムによるオブジェクト、ASCIIアート、フレーム、スクリプト、リスト項目の先頭に付ける画像、スペーサー、画像のボタン、サウンド（ユーザーが制御可能であるかどうかにかかわらず）、単独のオーディオ・ファイル、映像のオーディオ・トラック、映像などがある。[優先度 1]

■解説
alt属性とlongdesc属性
alt属性とlongdesc属性では、画像に代わる説明を指定する。altには代替テキストを直接入力し、longdescには長文説明の文書へのリンクを指定する。

例：
<IMG src="97sales.gif" alt="1997年の売上" longdesc="sales97.html">

イメージマップ
クライアント・サイド・イメージ・マップでは、AREA要素ごとにaltでその領域の説明を付けることができる。

例：
<IMG src="welcome.gif" alt="図書館案内図" usemap="#map1">
　<MAP name="map1">
　<AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="参考図書">
　<AREA shape="rect" coords="34,34,100,100" href="media.html" alt="視聴覚室">
</MAP>

また、IMGの代わりにOBJECT要素を使用すると、要素内に説明を入れることができる。上の例をOBJECT要素で表すと、以下のようになる。
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
図書館には、<A href="reference.html">参考図書</A>セクションや
<A href="media.html">視聴覚室</A>など
いくつかのセクションがあります。
</OBJECT>
<MAP name="map1">
　<AREA shape="rect" coords="0,0,30,30"
　href="reference.html" alt="参考図書">
　<AREA shape="rect" coords="34,34,100,100"
　href="media.html" alt="視聴覚室">
</MAP>

アプレットやオブジェクト
アプレットを使用する場合は、alt属性と、APPLET要素の内容に、アプレットと同等の役割を果たすテキストを入れる。

例：
<APPLET code="Press.class" width="500" height="500"
　alt="Javaアプレット: 気温の気圧への影響">
　気温が上昇するにつれて、風船の中の分子は・・・
</APPLET>
注）APPLET要素は、HTML 4.01では非推奨になっている。

OBJECTを使用する場合は、要素の内容に代替テキストを記述する。

例：
<OBJECT classid="java:Press.class" width="500" height="500">
気温が上昇するにつれて、風船の中の分子は・・・
</OBJECT>

ASCIIアート
文字や記号によって絵や図表を表したもの。顔文字（(^_^)など）もASCIIアートの一種になる。ASCIIアートはスクリーン・リーダーなどでは判読できないため、説明を入れた別の文書へのリンクを用意する。

ASCIIアートの例： 

 %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
	  点滅の頻度 (Hz)

あるいは、小さなASCIIアートの場合は、以下のようにABBR要素のtitle属性で代替テキストを指定する。
<ABBR title="笑顔のマーク">(^_^)</ABBR>

1.2 サーバーサイド・イメージマップの各領域に対応するような、説明のテキスト・リンクを提供する。[優先度 1]

■解説
サーバーサイド・イメージマップでは、各マップ領域のリンク先の情報がサーバー側にしかないため、スクリーン・リーダーなどで各領域のリンク先を示すことができず、リンク先にジャンプできない。このため、以下のような方法で各領域のリンクに対応するようなテキスト・リンクを別に付ける。

<A href="http://www.example.com/cgi-bin/imagemap/my-map">
<IMG src="welcome.gif" alt="ようこそ! (以下にテキストのリンクがあります。)" ismap>
</A>
<P>[<A href="reference.html">参考図書</A>]
[<A href="media.html">視聴覚室</A>]

1.3 ユーザー・エージェントが映像に代わるテキストを自動的に読み上げることができるようになるまでは、マルチメディアの映像トラックの重要な情報に対して、音声による説明を付ける。[優先度 1]

■解説
映像トラックの音声による説明は、マルチメディアの音声やビデオ中の会話を邪魔することのないような形で、動作、背景、身振り、画面上の文字などの重要な視覚的な要素をナレーションとして提供するようにする。

1.4 ムービーやアニメーションなどのように時間の流れを伴うマルチメディアを使用する場合、その代わりとなるキャプションや映像トラックの音声による説明などが、マルチメディアと同期するようにする。[優先度 1]

■解説
Synchronized Multimedia Integrated Language（SMIL）やMicrosoft Synchronized Accessible Media Interchange（SAMI）のような技術を利用すると、映像・音声のファイルと、字幕のテキストファイルを用意し、これらを同期して再生することができる。

1.5 ユーザー・エージェントが、クライアントサイド・イメージマップのリンクと同等の役割を果たすテキストをレンダリングできるようになるまでは、クライアントサイド・イメージマップの各領域に対応するような、説明のテキスト・リンクを提供する。[優先度 3]

■解説
クライアントサイド・イメージマップではAREA要素のalt属性で代替テキストを指定できるが、AREA要素の代りにA要素を使用すると、アクティブな領域とテキスト・リンクを同時に指定できる。

例：
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
　<P>このサイトの操作
　[<A href="guide.html" shape="rect" coords="0,0,118,28">アクセスガイド</A>]
　[<A href="shortcut.html" shape="rect" coords="118,0,184,28">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>

ガイドライン2. 色だけに依存しない

2.1 色によって表現される全ての情報が、色なしでも（前後の文脈やマークアップなどで）入手できるようにする。[優先度 1]

■解説
ユーザーがスクリーン・リーダー、点字リーダー、テキストベースのブラウザなどを使用している場合や、低解像度のモニタを使用している場合、色覚障害がある場合など、「以下の緑の項目が推奨例」といった色のみによって表現される情報を利用できないことがある。
このため、たとえば項目の範囲全体をボーダーで囲み、先頭に「推奨例」最後に「例終了」という言葉を追加するなど、色に依存しないでも情報を入手できるようにする。

2.2 前景色と背景色の組み合せが、色覚障害を持つ人が見たり、白黒画面で見た場合に十分なコントラストを提供するようにする。[イメージについては優先度 2、テキストについては優先度 3]

■解説
前景色（文字色）と背景色のコントラストが低いと、十分に見えない場合がある。

ガイドライン3. マークアップとスタイルシートを適切に使用する

3.1 情報を伝えるために適切なマークアップ言語が存在する場合は、画像でなく、マークアップを使用する。[優先度 2]

■解説
テキストを画像で表現すると、拡大したり、音声や点字に出力することができないので、画像の代わりにマークアップ言語を使用する。たとえば数式を表現する場合は、数式用のマークアップ言語MathMLを使用する。テキストの書式やレイアウトにはスタイルシートを使用する。また、通常のテキストを画像で表現することは避ける。

3.2 公開されている正式な文法に従った文書を作成する。[優先度 2]

■解説
公開されているDTD（Document Type Definition）に基づく文書の先頭には文書型宣言を入れ、その文書がDTDによって定義された規則にしたがっていることを宣言する。

例：
HTML 4.01 Transitional DTDを使用する場合は、HTML文書の先頭に次のように記述する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

3.3 レイアウトや表現を制御するには、スタイルシートを使用する。[優先度 2]

■解説
文書の内容と表現を分離することで、ユーザーが必要に応じて内容のみを取り出し、自分に適した環境で情報を得ることができる。
たとえばHTMLのFONT要素を使用して以下のように文字の色を指定すると、文字の色が見えにくくてもユーザーが色を変更することができない。
<H1><FONT color="#FF0000">赤色のフォント</FONT></H1>
CSSのfontプロパティを使用して次のように文字の色を指定すると、ユーザーが独自のスタイルシートに変えたり、スタイルシートを外したりできる。
H1 {color: #FF0000}

3.4 マークアップ言語の属性値とスタイルシートのプロパティ値には、絶対単位ではなく、相対単位を使用する。[優先度 2]

■解説
絶対単位で指定すると、ユーザーの環境に合わせて表現を変えることができない。たとえばCSSの場合、フォントの単位を10ptのように絶対単位で指定すると、ユーザーがブラウザので文字サイズを拡大しても、そのスタイルシートを適用した文書の文字は10ptのままで拡大されない。80%のような相対単位で指定すると、ブラウザの設定で文字サイズを拡大したときに、スタイルシートを適用した文書の文字サイズも大きくなる。

3.5 見出し要素は、文書構造を表すために、仕様に従って使用する。[優先度 2]

■解説
見出し要素（HTMLではH1からH6）は、文書の大区分から小区分までを論理的に示すものである。また、ユーザーによっては見出しのみを拾い読みして文書を判断する場合もある。見出し要素を文字の拡大などの見栄えのみの設定に利用したり、H3の後にH2を置くなど見出しの階層に反して使用すると、文書構造をユーザーが正しく把握できない。

3.6 リストおよびリストの項目は適切にマークアップする。[優先度 2]

■解説

例：
以下の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>

3.7 引用文には引用のマークアップを行う。引用のマークアップを、インデントなどのレイアウト目的で使用しない。[優先度2]

■解説
たとえば、HTMLでは、短い引用にはQ要素、長い引用にはBLOCKQUOTE要素を使用する。

ガイドライン4. 自然言語の使用を明確にする

4.1 文書中の文章と、キャプションなどの代替テキストの自然言語が変わる部分では、言語が変わることを明確に示す。

■解説
ユーザーが点字リーダーを使用している場合に、言語ごとに正しい点字に変更したり、音声合成ソフトで適切な言語で読み上げるために、言語の変化を明確にしておく必要がある。また、言語を明確にしておくことは、他言語を理解できないユーザーが機械翻訳ソフトで翻訳する場合などにも役立つ。
言語は、HTMLではlang属性で指定する。XMLではxml:langで指定する。

4.2 文書中に省略語または頭字語がある場合、それらが最初に出てくるときに省略していない語を示す。[優先度 3]

■解説
省略語は単語を省略した語（たとえばExtensible Markup LanguageをXMLと表す場合）、頭字語は頭文字のみをとって略した語（たとえばCascading Style SheetsをCSSと表す場合）の意味。
最初に出てくる箇所では省略語はABBR要素、頭字語はACRONYM要素で表し、それぞれのtitle属性に省略していない語を指定する。

例：
<ABBR titile="Extensible Markup Language">XML</ABBR>

4.3 文書の主となる自然言語を明示する。[優先度 3]

例：
<HTML lang="ja">
日本語で書かれたHTMLの内容
</HTML>

ガイドライン5. スムーズに変換されるようなテーブルを作成する

5.1 データ・テーブルの場合、行と列のヘッダが識別できるようにする。[優先度 1]

■解説
データ・テーブルは、行と列に分けて表形式でデータを表すためのテーブルを指す。HTMLでは、データ・テーブルのヘッダにはTH要素、データを入れるセルにはTD要素を使用する。
注）テーブルの本来の目的をはずれ、ページのレイアウトにテーブルを使用しているものをレイアウト・テーブルと呼ぶ。

5.2 行と列のヘッダが論理的に2階層以上に分かれるデータ・テーブルの場合、マークアップを使用して、データ・セルとヘッダ・セルを関連付ける。[優先度 2]

■解説
HTMLでは、行のグループ化にはTHEAD、TFOOT、TBODY要素、列のグループ化にはCOLとCOLGROUP要素、データ間のより複雑な関係の記述には、axis、scope、headers属性を使用する。

例：
<TABLE>
　<COLGROUP SPAN=1>
　<COLGROUP SPAN=3>
　<THEAD>
　　<TR>
　　　<TH>品名</TH><TH>単価</TH><TH>個数</TH><TH>金額</TH>
　　</TR>
　</THEAD>
　<TFOOT>
　　<TR>
　　　<TH>合計</TH><TD><BR></TD><TD><BR></TD><TD>2,000円</TD>
　　</TR>
　</TFOOT>
　<TBODY>
　　<TR>
　　　<TD>りんご</TD><TD>100円</TD><TD>15</TD><TD>1,500円</TD>
　　</TR>
　<TR>
　　　<TD>みかん</TD><TD>50円</TD><TD>10</TD><TD>500円</TD>
　</TR>
　</TBODY>
</TABLE>
注）行数の多い表で1画面分の表をフッタとともに表示するために、TFOOTはTBODYよりも前に記述する。ただし、現時点ではブラウザによってはこれを正しく解釈せず、TFOOTの下にTBODYの内容を表示する場合がある。

5.3 テーブル内のデータを一直線に横に並べて順に読んでも意味が通るような場合を除き、テーブルをレイアウト目的で使用しない。横に読んで意味が通らない場合は、それに代わるものを提供する。[優先度 2]

■解説
HTMLのTABLE要素をページの段組に使用しているような場合、スクリーン・リーダーなど視覚以外でアクセスすると、データが正しい並び順で読み取られないことがある。
レイアウトにはテーブルではなく、スタイルシートを使用するようにする。

5.4 レイアウト目的でテーブルを使用する場合、表示を制御するために構造を表すマークアップを使用しない。[優先度2]

■解説
たとえばTH要素の内容を太字で中央揃えして表示するブラウザが多いからといって、行列のヘッダ以外のデータを太字・中央揃えにする目的のみでTH要素内に入れない。

5.5 テーブルに要約を付ける。[優先度3]

■解説
要約は、スクリーン・リーダーなど視覚以外でアクセスする場合などに、テーブルの内容をすばやく理解するために役立つ。

<TABLE summary="2001年度の3年A組の1学期期末テスト成績表です。国語、数学、英語、社会、科学の成績を氏名順に記載しています。">
　<CAPTION>
　1学期期末テスト成績表
　</CAPTION>
　<TR>
　....
　</TR>
</TABLE>

5.6 行列のヘッダの省略語を付ける。[優先度 3]

■解説
将来セルごとに行と列のヘッダを読み上げることが可能となった場合などに、見出しが繰り返し読み上げられる時間を短縮できるように、TH要素のabbr属性でヘッダの省略語を指定できる。

ガイドライン6. 新技術を使用したページがスムーズに変換されるようにする

新技術を使用したページが、古いブラウザや新技術をオフに設定しているブラウザでも使用できるようにする。

6.1 スタイルシートなしでも読めるような構造の文書を作成する。たとえば、HTML文書は関連するスタイルシートがなくても、読むことができるようにする。[優先度 1]

■解説

6.2 動的な内容の代替物は、内容が変化すれば、それに応じて更新されるようにする。[優先度 1]

■解説

例：
<SCRIPT type="text/tcl">
スポーツのスコアを表示するTclスクリプト
</SCRIPT>
<NOSCRIPT>
　<P>昨日の試合結果：</P>
　<DL>
　<DT>ブルズ 91, ソニックス 80.
　<DD><A href="bullsonic.html">ブルズ対ソニックス戦のハイライト</A>
　・・・他のスコア・・・
　</DL>
</NOSCRIPT>

6.3 スクリプト、アプレット、その他のプログラムによるオブジェクトがオフになっていたり、サポートされていない場合でも、ページを使用できるようにする。使用できない場合は、代替ページで同等の情報を提供する。[優先度 1]

■解説
たとえば、リンク先を「javascript:〜」に設定したリンクなどは、スクリプトをオフにすると機能しないので、使用しない。
1.1の解説も参照。

6.4 スクリプトやアプレットを使用する場合、イベント・ハンドラが入力装置に依存しないようにする。[優先度 2]

イベント・ハンドラとは、特定のイベント（マウス移動やキーの押下など）が発生したときに呼び出されるスクリプトを指す。HTML4.01では、イベント・ハンドラはイベント・ハンドラ属性によって要素と関連付けられている。このイベント・ハンドラ属性のうち、onmousedown（マウスボタンが押されたとき）やonkeydown（キーが押されたとき）のような属性は入力装置に依存するので、このような属性を使用する場合は、同一の要素に対してonmousedownとonkeydownの両方を使用するようにする。HTML4.01ではonfocus（フォーカスが移ったとき）、onselect（テキストエリアを選択したとき）のような装置に依存しない属性が追加されているが、今のところブラウザではキーボードのイベントとして実装されており、他の入力装置で使用できない。

6.5 動的な内容はそれ自体をアクセシブルにするか、代わりの表現またはページを提供する。[優先度 2]

■解説

ガイドライン7. 時間によって変化する内容を、ユーザーが制御できるようにする

7.1 ユーザー・エージェントでユーザーが画面の明滅（フリッカー）を設定できるようになるまで、画面の明滅を避ける。[優先度 1]

■解説
画面を明滅させると光過敏性てんかんのユーザーの発作につながる可能性がある。1秒間に4〜59回の範囲の明滅や閃光を避ける。

7.2 ユーザー・エージェントでユーザーが点滅（ブリンク）を制御できるようになるまで、内容の点滅（定期的に表示がオン/オフされるような表現）は避ける。[優先度 2]

■解説
BLINK要素やMARQUEE要素のようなブラウザ独自の拡張機能を使用しない。

7.3 ユーザー・エージェントでユーザーが内容の移動を止めることができるようになるまで、ページ内の内容の移動を避ける。[優先度 2]

■解説
内容が移動するようなスクリプトやアプレットは、内容を止めることができるように記述する。

7.4 ユーザー・エージェントでページの更新を止めることができるようになるまで、定期的にページが自動更新されるページを作らない。[優先度 2]

■解説
HTMLのMETA要素を使用して、定期的に更新させるような手法では、ユーザーがページを読み終わらないうちに更新されたりして、ユーザーを混乱させる。

非推奨例：
<META http-equiv="refresh" content="60">
<BODY>
　<P>60秒間隔でページが自動更新される非推奨例</P>
</BODY>

7.5 ユーザー・エージェントがページの自動的な移動を止めることができるようになるまで、自動的に他のページに移動するようなマークアップを行わない。代わりに、サーバー側で自動的に移動するようにする。[優先度 2]

■解説
HTMLのMETA要素を使用して、一定の時間が経過した後に他のページへ移動するような手法は、ユーザーを混乱させる。

非推奨例：
<HEAD>
　<TITLE>5秒後にページを移動</TITLE>
　<META http-equiv="refresh" content="5; http://www.example.com/newpage">
</HEAD>

サーバーがHTTPステータス・コード 301（Moved Permanently）を使用するように設定する。または、通常のリンクで新しいページに移動するようにする。

ガイドライン8. ページに埋め込まれたユーザー・インターフェース自体をアクセシブルにする

8.1 スクリプトやアプレットなどのプログラムによる要素は、それ自体をアクセシブルにするか、アシスティブ・テクノロジーで利用可能にする。[その機能が重要で、ほかで提供されていない場合は優先度 1 それ以外の場合は優先度 2]

■解説
ほかで代用できないような対話型のアプレットの場合は、Javaアクセシビリティを使用してアプレット自体をアクセシブルにする。

ガイドライン9. 装置に依存しないように設計する

9.1 利用可能な幾何学形で領域を定義することが不可能な場合を除き、サーバーサイド・イメージマップの代わりにクライアントサイド・イメージマップを提供する。[優先度 1]

■解説
サーバーサイド・イメージマップでは、各マップ領域のリンク先の情報がサーバー側にしかないため、スクリーン・リーダーなどで各領域のリンク先を示すことができず、リンク先にジャンプできない。このため、クライアントサイド・イメージマップを使用する。

9.2 それ自体がインターフェースを持つ要素は、装置に依存しないで動作できるようにする。[優先度 2]

■解説
ユーザーが使用する入力装置には、マウスなどのポインティングデバイス、キーボード、点字装置、音声入力装置などがあり、出力装置には、モニタ、音声合成装置、点字装置などがある。ユーザーが自分の必要に応じて入出力装置を使い分けることができるようにする。

9.3 スクリプトを使用する場合、装置に依存するイベント・ハンドラではなく、論理イベント・ハンドラを指定する。[優先度 2]

■解説
6.4を参照。

9.4 リンク、フォーム・コントロール、オブジェクトを通じて論理的なタブの移動順序を設定する。[優先度 3]

■解説
キーボードによって操作できるように設定しておくと、ポインティングデバイスを使用できないユーザーの多くにとってアクセシブルなページになる。また、キーボードに対応したページは、他の多くの入力装置でも使用可能である。キーボードのTabキーを押したときにフォーカスが移動する順番が、ページの構造に従った意味のある順番になるようにする。
HTMLでは、タブの移動順序を各要素のtabindex属性で指定できる。

9.5 クライアント・サイド・イメージ・マップ内のリンクなどの重要なリンク、フォーム・コントロール、フォーム・コントロールのグループには、キーボード・ショートカットを付ける。[優先度 3]

■解説
HTML 4.01では、キーボード・ショートカットを各要素のaccesskey属性で指定できる。
たとえば、以下のように指定されているページで「C」キーを押すと、株式会社XYZのホームページが表示される。
<A accesskey="C" href="doc.html"
　title="株式会社XYZのホームページ">
　株式会社XYZのホームページ</A>

ガイドライン10. 暫定的な解決策をとる

古いブラウザやアシスティブ・テクノロジーを使用した場合も正しく動作するように、暫定的な解決策をとる。

10.1 ユーザー・エージェントで新しいウィンドウを開かないように設定できるようになるまでは、ユーザーに知らせずにポップアップウィンドウやその他の新しいウィンドウを表示したり、現在のウィンドウを変更しない。[優先度 2]

■解説
HTMLの場合、フレームの表示先を「target="_blank"」にして新しいウィンドウに表示するのを避ける。

10.2 ユーザー・エージェントがラベルとフォーム・コントロールを明確に関連付けることができるようになるまでは、フォームのラベルは適切な位置に配置する。[優先度 2]

■解説
HTMLのフォームには、ボタン、テキスト・フィールド、チェックボックス、ラジオボタンなどのフォーム・コントロールが含まれる。これらのコントロールの中には、ボタンとラベルが自動的に関連付けられるものもあるが（たとえば、送信ボタン上には「送信」というラベルを表示できる）、テキスト・フィールド、チェックボックス、ラジオボタンのように、制作者が別にラベルを指定してコントロールと関連付ける必要のあるものもある。別にラベルを指定する場合、HTML4.01ではLABEL要素とそのfor属性を使用する。for属性の値は、関連付けたコントロールのid属性の値と同じでなければならない。

例：
<FORM action="mailto:ishikawa@u-shizuoka-ken.ac.jp">
　<LABEL for="Name1">
　氏名
　</LABEL>
　<BR>
　<INPUT name="name" id="Name1" size=20>
　<BR>
　<LABEL for="Address">
　住所
　</LABEL>
　<BR>
　<INPUT name="Address" id="Address" size=40>
　<BR>
　<INPUT type="submit" value="送信">
　<INPUT type="reset" value="リセット">
　<BR>
</FORM>

10.3 アシスティブ・テクノロジーも含めてユーザー・エージェントが段組のようなテキストを正しく表現できるようになるまでは、テキストを段組でレイアウトするすべてのテーブルに対して、段組していない代替テキストを提供する。代替テキストは同一ページに配置しても、他のページに配置してもよい。[優先度 3]

■解説
5.3を参照。

10.4 ユーザー・エージェントが空のコントロールを処理できるようになるまでは、編集ボックスとテキスト・フィールドには、デフォルトの文字を入れておく。[優先度 3]

■解説
一部の古いアシスティブ・テクノロジーでは、TEXTAREA要素のようなフォーム・コントロールにデフォルトの文字が入っていないと正しく動作しない。このため、TEXTAREA要素やINPUT要素にはデフォルトの文字を入れておく。

例：
<FORM action="http://example.com/prog/text-read" method="post">
　<P>
　<TEXTAREA name=yourname rows="20" cols="80">
　ここに、氏名を入力します。
　</TEXTAREA>
　<INPUT type="submit" value="Send">
　<INPUT type="reset">
　</P>
</FORM>

10.5 アシスティブ・テクノロジーも含めてユーザー・エージェントが隣り合うリンクを明確に区別して表現できるようになるまで、隣り合うリンクの間に、前後をスペースで囲んだリンクされていない印刷可能な文字を入れる。[優先度 3]

■解説
古いスクリーン・リーダーなどが隣り合うリンクを1つのリンクとして読み上げてしまうのを防ぐ。大カッコや縦棒「|」などの印刷可能な文字でリンクを区切ると、視覚的なブラウザを使用しているユーザーにとってもリンクを区別しやすくなる。

ガイドライン11. W3Cの技術とガイドラインを使用する

11.1 W3C技術が利用可能で、かつその目的に適している場合は、W3C技術を使用する。W3C技術の最新版がサポートされている場合は、最新版を使用する。[優先度 2]

11.2 非推奨のW3C技術を使用しない。[優先度 2]

■解説
たとえば、HTMLでは、FONT要素を使用しないで、代わりにスタイルシートのfontプロパティを使用する。

11.3 ユーザーが自分の設定（言語やコンテント・タイプなど）に従って文書を受け取れるように情報を提供する。[優先度 3]

■解説
HTMLの場合は、hreflang属性やtype属性を使用して言語やMIMEタイプを示す。

例）
<LINK title="Japanese" href="http://foo.com/japanese.html" type="text/html" rel="alternate" hreflang="ja">

可能な場合はサーバー側でコンテント・ネゴシエーションを設定し、クライアントの要求に応じた内容を配信できるようにする。たとえば、言語を英語に設定したブラウザから英語のページを送るように要求されるとサーバーから英語のページが送られるようにする。

11.4 最大限に努力してもアクセシブルなページを作成できない場合、W3C技術を使用し、アクセシブルで、同等の情報（または機能）を持つ代替ページを作成し、そのページにリンクする。代替ページは、アクセシブルでないページ（もとのページ）と同じ頻度で更新されるようにする。[優先度 1]

ガイドライン12. 前後の文脈や方向を示す情報を提供する

12.1 フレームを識別し、ナビゲーションを容易にするために、各フレームにタイトルを付ける。[優先度 1]

■解説
視覚以外でアクセスするユーザーなどにも、フレームの相互関係が分かるようにする。
たとえば、HTMLでは、FRAME要素のtitle属性を使用する。

例：
<FRAMESET cols="10%, 90%"
　title="電子文書のライブラリ">
　<FRAME src="nav.html" title="ナビゲーション・バー">
　<FRAME src="doc.html" title="文書">
　<NOFRAMES>
　　<A href="lib.html" title="ライブラリへのリンク">
　　電子ライブラリに移動</A>
　</NOFRAMES>
</FRAMESET>

12.2 フレームの目的とフレーム間の関係が、フレームのタイトルだけでは分かりにくい場合、それらの説明を付ける。[優先度 2]

■解説
HTMLでは、longdesc属性を使用するか、または説明へのリンクを付ける。

例）
<FRAMESET cols="10%,*,10%">
　<FRAMESET rows="20%,*">
　　<FRAME src="promo.html" name="promo" title="プロモーション">
　　<FRAME src="sitenavbar.html" name="navbar"
　　　title="サイト全体のナビゲーション・バー" longdesc="frameset-desc.html#navbar">
　</FRAMESET>
　<FRAME src="story.html" name="story" title="選択されている記事 ? メイン・コンテンツ" longdesc="frameset-desc.html#story">
　<FRAMESET rows="*,20%">
　　　<FRAME src="headlines.html" name="index" title="他の国内ニュースの索引" longdesc="frameset-desc.html#headlines">
　　<FRAME src="ad.html" name="adspace" title="広告">
　</FRAMESET>
　<NOFRAMES>
　　<p><a href="noframes.html">フレームなしのバージョン</a></p>
　　<p><a href="frameset-desc.html">各フレームの説明</a></p>
　</NOFRAMES>
　</FRAMESET>

12.3 大きな情報ブロックは、より取り扱いやすくなるように自然で適切なグループに分割する。[優先度 2]

■解説
HTMLでは、情報を小さく分けるには、以下のような方法がある。

12.4フォームのラベルをコントロールに明確に関連付ける。[優先度 2]

たとえば、HTMLでは、LABELおよびその"for"属性を使用する。

■解説
10.2を参照。

ガイドライン13. 分かりやすいナビゲーション機構を提供する

13.1 各リンクのリンク先を明確に示す。[優先度 2]

■解説

13.2 ページやサイトに意味情報を追加するメタデータを提供する。[優先度 2]

■解説
メタデータとは、データ自体に関する情報を指す。HTMLの場合は、TITLE要素（文書のタイトル）、ADDRESS要素（文書の制作者の連絡先、作成日や修正日、著作権情報など）、META要素（文書の制作者、有効期限、キーワード）などで指定する。

13.3 サイトマップや目次など、サイトの一般的なレイアウトに関する情報を提供する。[優先度 2]

13.4 ナビゲーション機構は一貫性のあるものを提供する。[優先度 2]

■解説
各ページのナビゲーション・バーなどを統一することで、サイト全体のナビゲーションが容易になり、目的の情報にすばやくたどりつける。また、サイト内でどの位置に自分がいるのか分かりやすくなり、サイト内で迷うことが少なくなる。これは障害を持たないユーザーのユーザビリティを高めるためにも有効である。

13.5 ナビゲーション機構を強調し、アクセスしやすくするために、ナビゲーション・バーを提供する。[優先度 3]

13.6 関連したリンクをグループ化し、グループをユーザー・エージェントが識別できるようにする。ユーザー・エージェントがグループを読み飛ばすことができるようになるまでは、グループを読み飛ばす方法を提供する。[優先度 3]

■解説
スクリーン・リーダーなどをユーザーが使用している場合、各ページの先頭に付けられたナビゲーション・バーのリンク全体が毎回全て読み上げられるような場合に対する配慮。ナビゲーション・バーをグループ化し、不要であればそのグループを読み飛ばすことができるようにする。これには、以下のような方法がある。

例：
<MAP title="ナビゲーション・バー">
　<P>
　　[<A href="#how">ナビゲーション・バーを読み飛ばす</A>]
　　[<A href="home.html">ホーム</A>]
　　[<A href="search.html">検索</A>]
　　[<A href="new.html">ニュース</A>]
　　[<A href="sitemap.html">サイトマップ</A>]
　</P>
</MAP>
<H1><A name="how">このサイトの使用方法</A></H1>

13.7 検索機能を提供する場合、ユーザーのレベルや好みに合わせた異なる種類の検索が可能になるようにする。[優先度 3]

■解説
検索のキーワードの文字全体を正しく入力するのが困難なユーザー（学習障害者や、その言葉が母国語でない人など）でも検索できるように、スペル・チェッカーや、類似する単語による検索、検索例による検索などの機能も含めた方が良い。

13.8 見出し、段落、リストなどの最初の言葉は、他の部分と区別できるようにする。[優先度 3]

■解説
音声合成装置などを使用しているユーザーが、全体を読み上げなくても、最初だけを読んで必要な情報が探せるようにする。

13.9 文書コレクション（複数ページから構成される文書）に関する情報を提供する。[優先度 3]

■解説
HTMLの場合、LINK要素で、文書コレクションのトップページ、目次ページ、次のページ、前のページなどを指定できる。
また、圧縮ツールで文書をひとまとめにしてオフラインで読むことができるようにする。

13.10 複数行のASCIIアートは、読み飛ばすことができるようにする。[優先度3]

■解説
1.1を参照。

ガイドライン14. 文書は分かりやすく簡潔にする

14.1 そのサイトの内容にとって最も分かりやすく、簡潔な言葉にする。[優先度 1]

■解説
認知障害や学習障害のあるユーザーの理解を助ける。他のユーザーにとっても、分かりやすく簡潔な言葉はすばやく情報を得るのに役立つ。
一般的な注意として、1つの段落では1つの主題のみを扱う、スラングや一般に知られていない言葉を避ける、受動態でなく能動態を使う、複雑な文章構造にしないといったことが挙げられる。

14.2 ページの理解に役立つ場合は、テキストにグラフィックスや音声を補足的に付ける。[優先度 3]

■解説
認知障害や学習障害のあるユーザーや、その言語が母国語でないユーザーなどのために、グラフィックスや音声でテキストを補ったほうが分かりやすい場合がある。
たとえば、複雑なデータを図表で表すと分かりやすくなる。

14.3 ページ間で一貫性のあるスタイルで表現する。[優先度 3]

■解説
各ページのスタイルを統一することで、ナビゲーションの仕組みや文書構造が理解しやすくなり、障害のある人だけでなく全てのユーザーの操作が容易になる。

参考URL
Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WAI-WEBCONTENT/
Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
Techniques for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/