すべての人にアクセス可能なHTML文書を書く

ポール・フォンテーン
情報技術調整センター
連邦政府調達庁
ワシントン, DC. USA

1995/6/5 原稿

HTMLは構造がきっちりしているので、WWWが、多種多様なフォーマット(テキスト、オーディオ、ビデオ、画像など)の情報を表示する能力は、非常に高く、かつフレキシブルである。しかし、あるユーザにとってエレガントで強力なHTMLの特徴も、別のユーザにとっては、潜在的なバリアになりうるものである。たとえば、画像イメージが見えることを想定したWWW サーバは、盲人ユーザには、アクセスできないものになる。以下のガイドラインは、すべての人にアクセス可能なHTML文書をデザインし、コーディングするために守られるべきものである。

重要なことは、これらのガイドラインに書かれたことを実現しても、サーバの機能や美観を犠牲にすることはないということである。

ガイドライン一覧

  1. 画像部分には、それに関連したテキストを付記するべき
  2. クリッカブル・マップ部分では、それ以外の方法を選択できる
  3. JPEG画像には内容を記述したコメントを付加する
  4. オーディオ・クリップに文書に起こしたものを付ける
  5. リンク部分のテキストは中身が分かるが冗長にならないよう
  6. HTML以外のフォーマットを使う場合にHTMLも用意する
  7. FORMを使う場合、それ以外の機構も提供する
  8. すべてのページをいくつかのブラウザでテストする
  9. 特定の製品に限定されたタグを使わない
  10. 中点などのような単純な画像については単純な ALT を使う
関連情報


ガイドライン:画像部分には、それに関連したテキストを付記するべきである。

考え方: 情報を見ている人がテキストベースのブラウザ(Lynxなど)を使っているか、ないしは、グラフィック部分がブラウザでは消えている場合、リンクそのものがなくなってしまうことがある。

解決策: 画像を引用するタグにALT属性を付けると共に、アンカーの中にテキストを含めるようにする。

アクセス不可能な例:

On January 20, 1993, William Jefferson Clinton
<A HREF="/images/raw/bill-portrait.gif">
<IMG SRC="/images/small/bill-portrait.gif"></A>
was sworn in as the 42nd President of the United States, and movedinto the
White House with his wife.
<A HREF="/images/raw/hillary-portrait.gif"><IMG
SRC="/images/small/hillary-portrait.gif"></A>
Hillary Rodham Clinton and their daughter Chelsea.

この例では、画像部分はそれがリンクしている先に関する情報を何も伝えていない。テキストベースのソフトを使っているユーザは、このリンクがどのような性格のものかを知るよしもない。

アクセス可能な書き方は、以下のようになるだろう:

アクセス可能な例:

On January 20, 1993,
<A HREF="/images/raw/bill-portrait.gif">
<IMG SRC="/images/small/bill-portrait.gif" alt="Pictureof President
Clinton...">
William Jefferson Clinton </A>was sworn in as the 42ndPresident of the
United States, and moved into the White Housewith his wife, <A
HREF="/images/raw/hillary-portrait.gif"><IMG
SRC="/images/small/hillary-portrait.gif"Alt="Picture of Hillary Rodham
Clinton and their daughterChelsea.">Hillary Rodham Clinton and their
daughterChelsea. </A>

この例では、alt タグによる画像の説明と、テキスト・アンカーの両方を追加している。

↑最初に戻る


ガイドライン:画像によるクリッカブル・マップを使う場合、それ以外の方法を選択できるようにするべきである。

考え方:
テキストベースのブラウザ(Lynxなど)や画像を表示する機能のないコンピュータを利用しているユーザには、画像マップは全く表示されないので、マップからたどるリンクを選択する方法が提供されない。

アクセス不可能な例:

<TITLE>Map of Washington, DC. </TITLE>
<H1>Click on a building below</H1>
<A HREF="http://www.whitehouse.gov/img/dcmap">
<IMG SRC="http://www.whitehouse.gov/images/large/DC_map.gif"ISMAP>
</A>

この例では、ページ全体がテキストベースのブラウザでは見られない。この情報を別のやり方で扱うとしたら、建物のリストを提示することであろう。そうすれば、すべてのユーザにこのページで紹介している情報をより良く理解してもらうことができるであろう。

アクセス可能な例:

<TITLE>Map of Washington, DC. </TITLE>
<H1>Click on a building in the map below or select from
<A HREF="http://www.whitehouse.gov/dcmap_list.html">list of buildings </A>
</H1>
<A HREF="http://www.whitehouse.gov/img/dcmap">
<IMG SRC="http://www.whitehouse.gov/images/large/DC_map.gif"ISMAP alt=map of Washington">
</A>

この例では、dcmap_list.htmlという名前の別のページを選ぶことができるようになっている。dcmap_list.html の中身は、以下のようになるだろう:

<TITLE>Buildings in Washington, DC. </TITLE>
<H1>Select from the list of buildings below </H1>
<UL>
<LI><A HREF="http://www.doc.gov">Department of Commerce </A>16th St. N.W
<LI><A HREF="http://www.DOI.gov/Parks/Washington_Monument.html">Washington Monument </A>Between 15th and 17th south of Constitution Ave.
<LI><A HREF="http://www.doi.gov">Department of Interior </A>14th St. N.W 
<LI>
...
<LI>...
</UL>

このガイドラインを実現するには2つの方法がある。1つは、ISMAP を含むすべてのページを変更して、画像のよるクリッカブルマップか、テキストによるリストかどちらかを選択できるようにする方法である。もう1つの方法は、ホームページに1つだけ画像かテキストを選択するボタンを用意する方法である。この方法の場合、ユーザが、ホームページで1回だけ「画像を使わない」という選択をすると、ISMAP のないページだけを選択していけるようになる(訳注、言い方を変えると、サーバーでは、画像を含んだページの系統と、テキストだけのページの2系統を用意せねばならないということである)。

テキストだけのセカンド・ホームページを作ることもできる。

HTML は以下のようになるだろう:

Select <A HREF="http://www.whitehouse.gov/Welcome-no_graphics.html">no graphics </A>if you would like to browse withoutpictures.

↑最初に戻る


ガイドライン:JPEG画像には、その画像の内容を記述した「コメント」を付加する。

考え方:
JPEGファイルは高解像度の画像を記録するのに使われているが、画像の内容によっては、盲人ユーザに伝達できる有用な情報が含まれる場合がある。たとえば、文献の頁をJPEG画像として記録しているような場合である。この場合、その文献のテキスト部分全体を含めるようにすべきである。

解決策:
JPEG ファイルには、コメントのセクションがあるので、そこに、JPEGファイル・エディタでテキスト情報を書き込む。あるいは、その画像ファイルに説明をつけた別のテキストファイルを作ってそれにリンクをはることもできる。

↑最初に戻る


ガイドライン:オーディオ・クリップ全部に、文書に起こしたものを付ける。

考え方:
聴覚に障害のあるユーザや、オーディオ機能をサポートしないシステムで接続している人にとっては、オーディオクリップを利用することができない。

アクセス不可能な例:

The President asked
<A HREF="http://www.whitehouse.gov/images/raw/al-portrait.gif">
<IMG SRC="http://www.whitehouse.gov/images/small/al-portrait.gif">
Vice President Gore </A>to head up the
<A HREF="http://www.npr.gov/">National PerformanceReview (NPR)
</A>a project to make government work better and costless.
<A HREF="http://www.whitehouse.gov/Sounds/Gore.au">
<IMG SRC="http://www.whitehouse.gov/icons/audio.gif"></A>

このコードには2つの問題がある。まず、オーディオクリップへのリンクを示すアイコンにテキストが付属していないため、テキストブラウザでは見えないといことである。次に、リンク先のオーディオクリップそのものが、聴覚障害者やオーディオ再生機能のないシステムをつかっている人に使えないということである。

アクセス可能な例:

The President asked
<A HREF="http://www.whitehouse.gov/images/raw/al-portrait.gif">
<IMG SRC="http://www.whitehouse.gov/images/small/al-portrait.gif"
alt="Picture of Al Gore">
Vice President Gore </A>to head up the
<A HREF="http://www.npr.gov/">National PerformanceReview (NPR)
</A>a project to make government work better and costless.
<A HREF="http://www.whitehouse.gov/Sounds/Gore.au">You can hear
<IMG SRC="http://www.whitehouse.gov/icons/audio.gif"alt="audio icon">
</A>or <A HREF="http://www.npr.gov/Al_NPR_intro.html">
read </A>Mr. Gore's speech introducing the NPR.

このコードでは、オーディオクリップを聞くか、テキストで読むかという選択肢がユーザに与えられている。テキストで読むという選択をした場合のリンク先は、Al_NPR_intro.html というテキストファイルになっている。

↑最初に戻る


ガイドライン:リンク部分のテキストはできるだけ中身が分かるように、しかし冗長にならないようにする。

考え方:
「これ」「ここ」「クリック」というような単語は、リンクがどんなものであるかについての情報を伝えていない。リンク部分のテキストは、十分中身を表している単語を使って、ユーザがすぐにそのリンクの意味を理解できるようにするべきである。逆に長すぎるリンクは、ブラウジングの効率を著しく損ねることになる。

アクセス不可能な例:
<A HREF="/White_House/html/White_House_Home-plain.html">this</A>for a textual representationof this page.

この例では、「これ(this)」という表現が使われていて、リンク先が何かについて十分な情報を得られない。

アクセス可能な例:
A <A HREF="/White_House/html/White_House_Home-plain.html">text version of this page</A>is also available.

この例では、「このページのテキスト版」という表現が、このリンクがどんなページに移るかを正確に表している。

↑最初に戻る


ガイドライン:HTML以外のファイルフォーマットを使う場合にも、かならずHTMLファイルを用意し、HTML以外のファイルしかないということにならないようにする。

Adobe のPDF(Portable Document Format)のようなフォーマットは、かなりグラフィックの性格が強く、テキストモードで見ているユーザや、専用のブラウザを持っていないユーザには、アクセスできない。マイクロソフトワード(TM)のフォーマットやワードパーフェクト(TM)の文書フォーマットも同様である。

解決策:
PDFなどの特殊なフォーマットで提供せねばならない文書がある場合には、HTML やテキストフォーマットで書いた同じ内容の文書も同時に提供する。

アクセス不可能な例:

Select <A HREF=http://www.gsa.gov/coca/PDDF_RPT.pdf ">"Report to NIST From
the Blue Ribbon Panel on Requirementsand Recommendations for a Final Form
Portable Document DeliveryFormat" to view the report. </A>

この例では、PDFフォーマット以外の文書が提供されていない。

推奨できる例:

The "Report to NIST From the Blue Ribbon Panel on Requirementsand
Recommendations for a Final Form Portable Document DeliveryFormat" is
available in <A HREF=http://www.gsa.gov/coca/PDDF_RPT.pdf">graphics format
</A>or <A HREF=http://www.gsa.gov/coca/PDDF_RPT.HTM">textformat. </A>

この例では、ユーザは、PFDかHTMLかどちらかフォーマットを選択できる。

↑最初に戻る


ガイドライン:オンラインフォーム(FORM)を使う場合、それ以外の機構も提供すること。

考え方:
FORMは、すべてのブラウザがサポートしているわけではない。

解決策:
フォームへの記入と機能的な同等のことができるような別の方法を選択できるようにする。

推奨できる例:

<H2>Click here to <A HREF="net-ordr.htm">placean order</A></H2><P>

Click here to download our <A HREF="ord-form.txt">Text-BasedOrder
Form</A><P>

Or call our Rocky Mountain Outfitters retail location andplace your order!
1-800-35-ROCKY or 1-800-357-6259. Live humansare available 11AM - 6PM
Mountain time, Monday through Saturdayto assist you.

この例では、オンラインで商品をオーダーするのに、1) オンラインフォーム、2) ダウンロードできるテキストベースのフォーム。プリントして記入できるもの、3) 担当者に直接話してオーダーできるように電話番号の3つの選択肢を提供している。

↑最初に戻る


ガイドライン:すべてのページをいくつかのブラウザでテストすること。

最低限、Netscape, Lynx の2つでテストするべきである。理想的には、Netscape や Lynx の複数のバージョンに加えて、他のブラウザでもテストすべきである。ブラウザだけでなく、DOS, Windows, UNIX, Macintosh などの別のプラットフォームでもテストすべきである。 (この部分は現状に併せて、Mosaic を Netscape に変えた。また、プラットフォームとして、Macintosh を加えた)。

↑最初に戻る


ガイドライン:特定の製品に限定されたタグを使わないこと。

考え方:
標準のHTML に特定の企業が追加・拡張したHTMLコードは妥当でない。例えば、点字への変換をかなり困難にするからである。フォントの大きさを相対的に少し大きくしたり、あるいは少し小さくしたりというような(しかも、このタグの効果が累積する!) ものは、文書の構造に関する情報を適切に表現していない。

別の例は、Netscape(TM)の<BLINK>タグがある。このタグは、画面読みや点字ディスプレイでは表示できない。

このような拡張タグを使うなら、少なくとも、別の表現の仕方を用意しておいて、ユーザが選択できるようにするべきである。

アクセス可能な例:

At this point we are going to ask you to choose the presentationformat you
prefer from the three choices below: <P>

Click on your choice and enter the Cyberspace Discount OutdoorShop: </P>

<A HREF="txt-main.htm">Text Only</A>- For Text based browsers or for slow
connections.<P>

<A HREF="main.htm">Graphical</A>-For Mosaic users - Inline GIFs <P>

<A HREF="net-main.htm">Netscape Graphical</A>- For Netscape users - Inline
JPEGs, Centered Text, etc.

↑最初に戻る


ガイドライン:箇条書きの最初に書く中点などのような単純な画像について、テキストで説明するときは、単純な ALT を使うこと。

考え方:
ALT="これは、小さな青い点です"というような、長い記述は、画面を読みにくくします。

解決策:
画像を使うのを避けるか、ないしは、アスタリスクを中点の代わりにつかうか、あるいは、ALT="o" のように書く。

↑最初に戻る


ジュディ・ディクソンの洞察と示唆に謝意を述べる。

このガイドラインの最終版は、以下のURLで入手できる:
http://www.gsa.gov/coca/WWWcode.htm

この件に関する情報は、以下に連絡されたい:
Paul Fontaine,
Center for Information Technology Accommodation,
Paul.Fontaine@GSA.GOV

著者の許可を得て、日本語訳を公開しています。
日本語訳については、以下に連絡して下さい:
小田浩一
東京女子大学・現代文化学部・コミュニケーション学科

	
k-oda@mure.twcu.ac.jp


関連情報:
ウィスコンシン大学のバンダーハイデン教授らによる、もう少し詳細なHTML のアクセシビリティに関する文書 "DESIGN OF HTML PAGES TO INCREASE THEIR ACCESSIBILITY TO USERS WITH DISABILITIES" は、下記のURLから入手できま す:
URL: gopher://trace.wisc.edu:70/0/ftp/PUB/TEXT/CURBCUT/WORKING/HTML_DSN.TXT