\documentclass[a4j,12pt]{jarticle}
\usepackage{tascmac}
\addtolength\textwidth{2cm}
\title{Internet Week 2000 チュートリアル\\
World Wide Webのアクセシビリティ \\
--- より多くの人が利用可能な情報提供 ---}
\date{2000年 12月 18日}
\author{World Wide Web Consortium (W3C)\\
中根 雅文}
\begin{document}
\maketitle
\begin{abstract}
インターネットの利用者の増加にともない、 World Wide Web (WWW) を用いて提
供される情報やサービスは増加し、多様化が進んでいる。また、 WWW利用のた
めの環境も、従来は PC環境を用いるのが一般的だったが、モバイルユーザの増
加や、家電製品とインターネットの融合の促進などによって多様化している。
さらに、高齢者や障害者にもインターネットが普及しつつある今、これまでの
ように PC環境のみを想定した WWWコンテンツの作成では、必ずしも全ての利用
者に対する情報やサービスの提供ができない。しかし、日常生活に密着したサー
ビスの提供も増加しており、インターネットがこれまでのテレビ・ラジオ・新
聞や電話などと同等、あるいはそれ以上の役割を果たすようになってきている。
本チュートリアルでは、 World Wide Web Consortium (W3C) が、障害を持つ人
を含む全ての利用者にとって WWWが利用しやすいものにするために必要な事項
をまとめたWeb Content Accessibility Guidelines 1.0 (WCAG 1.0) に基づい
て、より多くのユーザが利用可能な WWWページ構築のために必要な事項につい
て解説する。
\end{abstract}
\pagebreak
\tableofcontents
\pagebreak
\listoffigures
\pagebreak
\section*{この資料について}
この資料は、 Internet Week 2000のチュートリアル・セッション、「WWWのアク
セシビリティ」での配布を目的として、中根雅文が作成したものです。本資料に
関する一切の権利は、中根雅文に帰属します。
また、本資料の作成に当たっては、 W3C Web Content Accessibility
Guidelines 1.0 を参考にしています。この仕様の著作権は World Wide Web
Consortium に帰属します。
なお、本資料は、上記仕様の翻訳版ではありません。
Copyright \copyright 2000 NAKANE, Masafumi, all rights reserved.
\pagebreak
\section{アクセシビリティ}
まず最初に、アクセシビリティについて論じ、現在の WWWが持つアクセシビリティ
に関する問題を指摘する。
\subsection{アクセシビリティとは}
アクセシビリティ (accessibility) という言葉は、製品のデザイン、都市設計、
建築など、様々な分野で用いられる言葉である。コンピュータやネットワーク上
で提供される情報についても、多くの人がいくつかの異なる定義でこの言葉を使っ
ているが、本チュートリアルでは以下のように定義する。
\footnote{WCAG 1.0 では、障害を持つ人にも利用可能なコンテンツをアクセシ
ブルなコンテンツとして定義している。}
\begin{quotation}
全ての人が、ほぼ同じコストでほぼ同じ情報量を得られる情報が、アクセシビリ
ティの高い情報である。
\end{quotation}
\subsubsection{コスト}
上の定義の中のコストには、情報やサービスを利用するために必要なあらゆる事
項が含まれる。例として、以下のようなものが挙げられる。
\begin{itemize}
\item 情報アクセスに必要な機器の確保
\item 情報アクセスのために必要な機器の操作に要する時間
\item 情報アクセスのために必要な機器の操作に要する労力
\end{itemize}
ここに挙げたものが「コスト」の全てではないが、この中で、情報アクセスに要
する時間や労力といった点については、情報提供者の配慮や工夫によって大きく
改善できる点である。
\subsection{現状の問題点}
ユーザの利用環境や身体的能力によって、同じ情報を得るために必要なコストに
差が生じたり、コストをかけても同じ情報が得られない場合があるのは、多くの
場合 WWWページが特定の環境のみを想定して作成されているためである。具体的
には、以下のような状況が挙げられる。
\begin{itemize}
\item 特定のブラウザの機能を前提としてページが作成されている。
\item 特定のメディアのみを用いた情報提供を行っている。
\item 一定以上の機能を持った利用環境や、それらの機能の全てを利用できる
ユーザを前提としている。
\end{itemize}
このような WWWページは、以下のような環境にあるユーザの利用が困難な場合が
多い。
\begin{itemize}
\item PDAや携帯電話など、 PC以外の環境の利用者
\item モバイル環境で回線速度が確保できなかったり、普段とは異なる方法で
利用する必要があるユーザ
\item 視覚や聴覚に障害を持つユーザ
\item マウスなどのポインティングディバイスの操作が困難なユーザ。
\item 視覚や聴覚が衰えていたり、コンピュータの操作に慣れない高齢者
\end{itemize}
\subsection{アクセシビリティの高い情報提供の意義}
情報やサービスの提供対象に応じて、必ずしも全ての人にとってアクセシビリティ
が確保された情報提供をする必要がないこともある。しかし、公共性が高かった
り、日常生活に密着している情報やサービスなどについては、可能なかぎりこれ
らの情報やサービスを利用できない人の数を少なくする努力が必要である。この
ような情報に対するアクセシビリティを高いものにすることは、以下のような場
合に特に有効である。
\begin{itemize}
\item 外出が困難な高齢者や障害者などがアクセスすることが考えられる場合
\item 一般的な PC環境以外の環境のユーザがアクセスすることが考えら
れる場合
\item 放送媒体・出版物や電話などを利用した情報入手やコミュニケーション
に何らかの困難があったり不可能である視聴覚障害者のアクセスが考え
られる場合
\end{itemize}
\section{W3C Web Content Accessibility Guidelines 1.0}
WWWの発展と相互運用性を確保するために必要な共通の技術の開発を行っている
国際産業コンソーシアムである World Wide Web Consortium (W3C) は、 1997年
4月、 WWWが障害者を含む全ての人にとって利用しやすいものにするための取り
組みを行う Web Accessibility Initiative (WAI) を開始した。 WAIが行う活動
の中で最も活発なものの一つが、 WWWのアクセシビリティを向上させるために必
要な事項をまとめたガイドラインの策定である。その中でも、コンテンツ作成者
向けにまとめられ、 1999年 5月に W3C勧告となった Web Content
Accessibility Guidelines 1.0 (WCAG 1.0) は、現在 WWWのアクセシビリティに
関して最も広範に用いられている文書である。ここでは、 WCAG 1.0の仕様の概
要を紹
介する。
\subsection{アクセシビリティの高いデザインの目的}
WCAG 1.0で提供されているガイドラインに従うことで、以下の目的を達成できる
とされている。
\begin{enumerate}
\item 異なる利用環境に適した形態にスムースに変換することができる情報提
供の実現
\item 内容の理解や利用が容易なコンテンツの実現
\end{enumerate}
\subsubsection{スムースな変換}
異なる利用環境に適した形態へのスムースな変換が可能な情報は、以下の点に留
意して製作する。
\begin{itemize}
\item 情報の持つ文書構造とプレゼンテーションの制御は分離して記述する。
\item テキストによる情報の提供を行う。
\item ユーザが視覚的な情報の処理ができなかったり、音声情報の処理ができ
ない場合でも内容が伝達できる形で情報を提供する。
\item 特定のハードウェアがなければ情報取得ができないようなコンテンツ
は作らない。
\end{itemize}
\subsubsection{理解や利用が容易なコンテンツ}
理解することや利用することが容易なコンテンツの作成には、以下のような事項
が必要だとされている。
\begin{itemize}
\item 分かりやすい表現を用いる。
\item ページ内やページ間の移動のための機能に、理解しやすい構造を持たせ
る。
\item ページ内部での現在位置が分かるようにする。
\end{itemize}
\subsection{各ガイドラインの構成}
アクセシビリティの高いデザインを実現するための基本的な考え方として、 WCAG
1.0には 14のガイドラインが定義されている。各ガイドラインは、ガイドライン
の本文、そのガイドラインに関する解説に加えて、より具体的な事項を記述した
チェックポイントから構成されている。チェックポイントにはそれぞれ 3段階の
重要度が付与されており、 Webページの製作者はこれらのチェックポイントを満
たすページを作成することで、アクセシビリティの高い情報提供を行うことが可
能となる。
また、 WCAG 1.0とは別に ``Techniques for the Web Content Accessibility
Guidelines'' という文書が公開されており、この中には各チェックポイントを
満たすためのより具体的な例が示されている。 WCAG 1.0の各チェックポイント
には、対応するこの文書中の項目へのリンクも含まれている。
\subsection{3段階の重要度と準拠のレベル}
各チェックポイントに付与されている3段階の重要度は、それぞれ表
\ref{tbl:priority} のような意味を持っている。また、 Webページが WCAG 1.0
に準拠しているかどうかの判断および準拠のレベルについては、表
\ref{tbl:conform} のように規定されている。
\begin{table}[hbtp]
\caption{3段階の重要度}\label{tbl:priority}
\begin{tabular}{|c|p{0.7\textwidth}|}
\hline
重要度 1 & Webページがこの条件を満たしていない場合、この情報へのアクセス
が不可能なユーザが存在する \\
\hline
重要度 2 & Webページがこの条件を満たしていない場合、このページの情報への
アクセスが困難なユーザが存在する \\
\hline
重要度 3 & Webページがこの条件を満たしていない場合、このページの情報への
アクセスが多少困難となるユーザが存在する \\
\hline
\end{tabular}
\end{table}
\begin{table}[hbtp]
\caption{WCAG 1.0への準拠のレベル}\label{tbl:conform}
\begin{tabular}{|c|p{0.7\textwidth}|}
\hline
レベル & 条件 \\
\hline
Level A & 重要度 1の全てのチェックポイントを満たしている \\
\hline
Level Double-A & 重要度 1および重要度 2の全てのチェックポイントを満たし
ている \\
\hline
Level Tripple-A & 全てのチェックポイントを満たしている \\
\hline
\end{tabular}
\end{table}
\section{ガイドライン}
次に、各ガイドラインと対応するチェックポイントについて解説する。各ガイド
ラインおよびチェックポイントの要点、各チェックポイントの重要度を以下に示
す。
\begin{emph}
注意: 以下の各項は、本チュートリアルの内容を考慮して WCAG 1.0 に基づいて
作成したものであるが、 WCAG 1.0を翻訳したものではない。
\end{emph}
\subsection{同等の代替情報の提供}
視覚的な形で提供される情報や音声情報には、同等の情報や機能を提供する代替
情報を付加する。
提供される音声情報や視覚的情報を直接利用することができないユーザも、同等
の意味や機能を伝える代替情報を利用することでその WWWページの利用が可能に
なる場合が多い。特に画像や音声情報について、同等の意味を表すテキストの情
報を付加することが重要である。
テキストの情報は、様々な形態への変換が可能で、音声合成による音声化や点字
ディスプレイを用いた点字出力、いろいろなサイズの画面や紙への出力が容易で
ある。音声出力は、視覚障害者に広く用いられているだけでなく、学習障害者の
理解を助けるものでもある。また、点字出力は、視覚障害者や盲聾者によって利
用されている。異なるサイズの画面への出力が容易に行えることによって、携帯
端末の利用者や画面を拡大している利用者にとって理解しやすい形にすることが
可能となる。また、音声情報に付加されたテキスト情報は、聴覚障害者が情報を
理解する上で必須である。
また、テキスト情報にテキスト以外の代替情報を付加することで、テキストを読
むことができない人の理解を助けることができる。
\begin{enumerate}
\item テキスト以外の形式の情報には、同等のテキスト情報を付加する。 (重
要度 1)
画像、画像ファイルを用いて表現されているテキスト、イメージマップのリンク
部分、アニメーション、アプレットやスクリプトなどのオブジェクト、
文字を用いて表現される絵、画像によって表されるボタン、音声情報、
動画などが対象。
例: 図\ref{ex:img_alt}、図\ref{ex:area_alt}
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
....
...
\end{verbatim}
\end{screen}
\caption{IMG要素の alt属性}\label{ex:img_alt}
\end{figure}
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
\end{verbatim}
\end{screen}
\caption{alt属性を用いたクライアント・サイド・イメージマップ}\label{ex:area_alt}
\end{figure}
\item サーバー・サイド・イメージマップのリンク部分に対応したリンクを、マッ
プの外にも提供する。 (重要度 1)
マップ中のリンクを集めた別のページを提供するか、図\ref{ex:imagemap} のよ
うにする。
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
[Reference]
[Audio Visual Lab]
\end{verbatim}
\end{screen}
\caption{サーバー・サイド・イメージマップ}\label{ex:imagemap}
\end{figure}
\item マルチメディアコンテンツの映像トラックについて、提供されている同等
のテキスト情報をユーザエージェントが自動的に読み上げられる機能を
実装するまで、同等の音声情報も付加する。 (重要度 1)
\item 時間にともなって変化するマルチメディアコンテンツには、同期した同等
の代替情報を付加する。 (重要度 1)
たとえば、動画にはその内容を解説する音声トラックを同期させる。
\item ユーザエージェントがクライアント・サイド・イメージマップのリンク部
分のテキスト情報を提示する機能を実装するまで、マップ以外の部分に
同等のテキストによるリンクを提供する。 (重要度 3)
\end{enumerate}
\subsection{色のみを用いた表現は行わない}
テキストや画像は、白黒で表示された場合にも理解できるようにする。情報伝達
において、色のみを用いて特定の内容を表現している場合、色の識別が難しいユー
ザ・白黒の画面を持つ環境のユーザ・非視覚的な形で情報を受信するユーザには、
その情報が適切に伝達されない。また、表示色と背景色が近すぎると、コントラ
ストが不十分で、白黒画面のユーザや色の識別が困難なユーザの情報へのアクセ
スが困難となる場合がある。
\begin{enumerate}
\item 色を用いた表現によって伝達される情報が、色がない状態でも文脈やマー
クアップによって理解できる形にする。 (重要度 1)
\item 表示色と背景色の組み合わせが、十分なコントラストを持つようにする。
(画像については重要度 2、テキストについては重要度 3)
\end{enumerate}
\subsection{マークアップとスタイルシートを適切に用いる}
文書は文書構造を表す適切なマークアップを用いて記述し、表示方法などのプレ
ゼンテーションの制御は、プレゼンテーションを表現するための要素や属性では
なく、スタイルシートを用いて行う。
仕様に従わないマークアップを行うとアクセシビリティを損ねる結果となる。プ
レゼンテーションの制御の目的で誤ったマークアップを行うと、情報の理解やナ
ビゲーションを困難にする。また、プレゼンテーションを制御するためのマーク
アップを用いて文書構造を表現すると、製作者が想定していない利用環境において、
正確な情報取得が困難になる。
古いブラウザでも同じフォーマットで情報が表示されるようにするために用いら
れるマークアップが、アクセシビリティを損なう場合もある。アクセシビリティ
を損なう場合でも、同じフォーマットで情報が表示されることが重要であるか、
製作者はそれぞれの場合において十分考慮する必要がある。その一方で、特定の
ブラウザや支援技術が実装していないことを理由に、適切ではないマークアップ
を用いる必要はない。
\begin{enumerate}
\item 適切なマークアップ言語が利用可能な場合、画像を用いず、それらのマー
クアップ言語を用いて情報を記述する。 (重要度 2)
以下のような例が挙げられる:
\begin{itemize}
\item 数式の表現には画像ではなく MathMLを用いる。
\item テキストを画像ファイルとして表現せず、スタイルシートを用いてテキス
ト形式で記述する。
\end{itemize}
\item 仕様に即したマークアップを行う。 (重要度 2)
\item スタイルシートを用いてレイアウトやその他のプレゼンテーションを制御
する。 (重要度 2)
\item マークアップ言語の属性やスタイルシートのプロパティにおいて、絶対的
な単位ではなく、相対的な単位を用いる。 (重要度 2)
例: CSSにおいては、 pt, cm といった単位ではなく、 em, percent といった単
位を用いる。
\item 見出しを表す要素を適切に用いる。 (重要度 2)
例: HTMLにおいて、 H2要素は H1要素が表す章の中の節の見出しを表す。
\item 箇条書きやその項目は適切にマークアップする。 (重要度 2)
例: HTMLでは OL, UL などを適切に用いる。
\item 引用文は適切にマークアップする。字下げなど、プレゼンテーションの制
御の目的に引用のためのマークアップを用いない。 (重要度 2)
\end{enumerate}
\subsection{利用している自然言語を明示的にマークアップする}
その文書の記述に用いられている自然言語や文書中の使用言語の変化を明示し、
略語などの元となる言葉を記述する。
用いられている自然言語を明示することで、音声や点字による出力がより適切に
行われることに加えて、サーチエンジンなどが情報の適切な分類を行うことがで
きる。
\begin{enumerate}
\item 文書中で用いられている自然言語の変化を明示する。 (重要度 1)
例: 図\ref{ex:lang}中の SPAN 要素
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
....
Web Content Accessibility Guidelines 1.0
は、 1999年 5月に
W3C
勧告になりました。
....
\end{verbatim}
\end{screen}
\caption{HTMLの lang属性と ABBR要素}\label{ex:lang}
\end{figure}
\item 略語の元になっている言葉を記述する。 (重要度 3)
例: 図\ref{ex:lang}中の ABBR要素
\item 文書で用いられている主要な自然言語を明示する。 (重要度 3)
\footnote{WCAG 1.0
では重要度 3となっているが、文書中の使用言語の変化の明示と同等に重要な項
目である。}
例: 図\ref{ex:lang}中の HTML要素
\end{enumerate}
\subsection{スムースに変換可能なテーブル (表) を作成する}
表の記述には適切なマークアップを用い、多様なユーザエージェントでスムース
な処理・提示が可能なようにする。
TABLE要素は、数表の記述にのみ用い、レイアウトのための使用はしない。
TABLE要素が利用されているページは、スクリーンリーダを用いているユーザの
利用が困難な場合がある。
また、画面の一部分しか表示できないような環境などにおいては、明示的に表に
関する情報がマークアップされていると、これらのユーザにも理解できる形で表
中の情報が提示できる可能性がある。
\begin{enumerate}
\item 数表においては、行と列のヘッダ (項目名) を明示的に記述する。 (重要
度 1)
例: HTMLではデータは TD要素を、ヘッダは TH要素を用いて記述する。図
\ref{ex:table}は、\pageref{tbl:conform}ページの表
\ref{tbl:conform}を HTMLで記述したものである。
\item 数表で、行や列に複数の段階の論理的構造がある場合は、データのセルと
ヘッダの対応を明示するマークアップを用いた記述を行う。 (重要度 1)
例: 図\ref{ex:table}中の id属性および headers属性。
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
WCAG 1.0の準拠のレベル
準拠のレベル |
条件 |
Level A |
重要度 1の全てのチェックポイントを満たしている |
Level Double-A |
重要度 1および重要度 2の全てのチェックポイントを満たしている |
Level Tripple-A |
全てのチェックポイントを満たしている
\end{verbatim}
\end{screen}
\caption{TABLE要素を用いた表の記述}\label{ex:table}
\end{figure}
\item 単純に読み上げられた場合に理解することが可能でないかぎり、 TABLE要
素をレイアウトには用いない。理解することが困難な場合には、代替版を提
供する。 (重要度 2)
\item TABLE要素を用いてレイアウトを制御する場合、プレゼンテーションの制
御の目的で表の構造を表すマークアップを用いない。 (重要度 2)
例: TH要素を用いたフォントの変更などは行わない。
\item 表の概要を示す。 (重要度 3)
例: 図\ref{ex:table}中の、 TABLE要素の summary 属性。
\item ヘッダの略称を記述する。 (重要度 3)
HTMLでは TH要素の abbr 属性を用いる。
\end{enumerate}
\subsection{古いブラウザでも利用可能なページ作成を行う}
新しい技術を用いて既存の問題を解決することは強く推奨されているが、その
技術がサポートされていない環境や、その機能を利用しない設定をしているユー
ザも利用できるような形でページを作成する。
\begin{enumerate}
\item スタイルシートを利用しない環境でも、文書の内容を理解することができ
るようなページを作成する。 (重要度 1)
論理的な意味に即した順序で情報を記述する。
\item 動的に変化するコンテンツの代替情報が、対応するコンテンツの変化に合
わせて変化するようにする。 (重要度 1)
\item クライアント・サイドのスクリプトやアプレットなどのオブジェクトが利
用できない環境や、これらの機能を利用しない設定になっていてもページ
の利用を可能にする。これが不可能な場合は、同等の内容をアクセシビリ
ティの高い形で代替のページとして提供する。 (重要度 1)
リンクをたどるとクライアント・サイドのスクリプトが実行されるような場合に
は特に注意が必要。 (``javascript:'' といったリンクは用いないように
する。) また、なるべくサーバー・サイドでの処理を行うようにする。
\item スクリプトやアプレットのイベント・ハンドラーは、特定の入力装置のみ
を想定したものにはしない。 (重要度 2)
\item 動的なコンテンツについて、アクセシビリティの高いものにするか、代替
のページで同等の情報を提供する。 (重要度 2)
NOFRAME, NOSCRIPTなどの要素を用いる。
\end{enumerate}
\subsection{動的に変化するコンテンツの制御を可能にする}
移動、点滅、スクロールをしたり、自動的に更新されるページについては、これ
らの変化を一時的に停止したり、完全に停止することを可能にする。
画面上を移動するテキストは、視覚障害や認識障害を持つユーザには判読が困難
または不可能である。また、一部のテキストの移動が画面の他の部分の判読をも
困難にする場合が考えられる。さらに、肢体障害者の場合には、これらのコンテ
ンツによって操作が難しくなる場合がある。
注: このガイドラインに含まれるチェックポイントは、基本的にブラウザによっ
て実現されることが望ましいものであるが、コンテンツ製作者はこれらの機能を
持たないブラウザの存在を意識し、そういったユーザに配慮してこれらのチェッ
クポイントを満たすページを作成する必要がある。
\begin{enumerate}
\item 画面がちらつくようなコンテンツは作成しない。 (重要度 1)
1秒間に 4から 59回のちらつきや点滅 (20回/秒が最も可能性が高い) は、感光
性癲癇の発作を起こす可能性がある。また、急激に暗い画面が明るくな
るような場合にも、同様の可能性がある。
\item 点滅するようなコンテンツは作成しない。 (重要度 2)
\item ページ中で移動するオブジェクトは作らない。 (重要度 2)
アプレットやスクリプトを用いている場合には、移動を停止する機能を提供する
とよい。
\item 定期的に自動更新されるようなページは作成しない。 (重要度 2)
HTMLの場合、 ``http-equiv=refresh'' のような機能は用いない。
\item 自動的なリダイレクトはマークアップではなく、サーバの機能を用いて実
現する。 (重要度 2)
\end{enumerate}
\subsection{アプレットやスクリプトにはアクセシビリティの高いユーザ・イン
タフェースを実装する}
ページ中に埋め込まれているアプレットやスクリプト自身が何らかのユーザ・イ
ンタフェースを提供している場合、これらのインタフェースがアクセシビリティ
の高いものである必要がある。これが不可能な場合は、同等の代替情報を提供す
る。
\begin{enumerate}
\item アプレットやスクリプトのインタフェースは、アクセシビリティの高いも
のにする。 (提供されている機能が重要な場合は重要度 1。そうでない場
合は重要度 2)
\end{enumerate}
\subsection{利用機器に依存しないデザインを行う}
ページ中の要素の選択・実行を、あらゆる種類の機器で可能なものにする。
多様な入出力装置の利用を考慮したデザインを行う。たとえば、入力フォーム中
の要素がマウスなどのポインティング・ディバイスのみで利用可能になっている
場合、キーボードのみで WWWを利用している人や音声入力を利用している人はこ
のページを利用できないことになる。イメージマップの場合は、マップの外にテ
キストによるリンクを提供したり、クライアント・サイド・イメージマップの場
合では、代替テキストによるリンクの情報を提供することで、ポインティング・
ディバイス以外の機器を用いたアクセスを可能にすることができる。
一般的に、キーボードのみで利用可能なページは、音声入力やコマンドラインに
よるインタフェースを用いたアクセスが可能である。
\begin{enumerate}
\item リンク部分の形の表現が困難でないかぎり、サーバー・サイド・ではなく、
クライアント・サイドのイメージマップを用いる。 (重要度 1)
\item 何らかのインタフェースを提供する要素は、使用機器にかかわらず利用可
能であるようにする。 (重要度 2)
\item スクリプトを用いる場合、使用機器を特定した形でなく、論理的なイベン
ト・ハンドラーを用いる。 (重要度 2)
% アプリケーションレベルのハンドラー (onfocus, onblur, onselect)
% 同じ要素に二つのハンドラー、 on onmousedown onkeydown, onmouseup
% onkeyup, onclick onkeypress, (no ondblclick)
\item リンク・フォーム中のコントロールやその他のオブジェクトの論理的な順
序を明示する。 (重要度 3)
論理的な順序が明確になるページのデザインを行う。あるいは、 tabindex属性
を用いる。
\item 重要な要素やフォームのコントロールなどへのキーボード・ショートカッ
トを提供する。 (重要度 3)
accesskey 属性を用いる。
\end{enumerate}
\subsection{古いブラウザや支援技術に対応するための手法を用いる}
これらのチェックポイントで挙げられている事項は、本来ユーザエージェントの
機能によって実現されるべきものであるが、現状ではここに挙げられている条件
を満たさなければ、アクセシビリティを低下させることになる。
\begin{enumerate}
\item 新規のウィンドウを開いたり、ユーザに通知することなくカレント・ウィ
ンドウを変更したりしない。 (重要度 2)
\item フォーム中のコントロールと対応するラベル (項目名) の関係が明確にな
るようなレイアウトを行う。 (重要度 2)
1行に複数のコントロールのラベルの組を配置する場合は、対応するラベルをコ
ントロールの直前に配置する。また、ラベルとコントロールを別の行に配
置する場合は、対応するラベルをコントロールの直前の行に配置し、 1行
には一つのコントロールのみを配置する。 (図\ref{ex:form}、図
\ref{ex:dep_form}) 本来は、 LABEL要素を用いて明示的にラベルとコン
トロールの対応を記述し、ユーザエージェントが出力機器に適した形のプ
レゼンテーションを行うことが望ましい。
\begin{figure}[hbtp]
\begin{screen}
\large{個人情報の入力}\\
氏名(漢字):\\
姓: \underline{\hspace{5cm}} 名: \underline{\hspace{5cm}}\\
氏名(振り仮名、全角片仮名):\\
姓: \underline{\hspace{5cm}} 名: \underline{\hspace{5cm}}\\
住所:\\
\underline{\hspace{12cm}}
\end{screen}
\caption{フォームコントロールとラベルの配置}\label{ex:form}
\end{figure}
\begin{figure}[hbtp]
\begin{screen}
\large{個人情報の入力}\\
\begin{tabular}{ll}
\multicolumn{2}{c}{氏名(漢字)} \\
姓 & 名 \\
\underline{\hspace{5cm}} & \underline{\hspace{5cm}} \\
\multicolumn{2}{c}{氏名(カナ)}\\
姓 & 名 \\
\underline{\hspace{5cm}} & \underline{\hspace{5cm}}
\end{tabular}
\end{screen}
\caption{望ましくないフォームコントロールとラベルの配置} \label{ex:dep_form}
\end{figure}
\item TABLE要素などを用いて段組みしたテキストを表示する場合、段組みされ
ていない形のテキストも同時に提供する。 (重要度 3)
\item テキスト入力フィールドには、デフォルトの文字列を表示する。 (重要度
3)
\item 同じ行に隣り合って配置されるリンクには、リンク部分には含まれない区切り文
字を挿入する。 (重要度 3)
\end{enumerate}
\subsection{W3Cの仕様やガイドラインを用いる}
可能な範囲で W3Cの仕様を用い、その仕様に準拠したページの作成を行うことで、
アクセシビリティの向上が期待できる。
\begin{enumerate}
\item 可能な範囲で W3Cで定められた技術標準を用い、その仕様の最新版に準拠
する。 (重要度 2)
\item W3Cの仕様の中で使用しないことが推奨されている要素 (``deprecated''
という記載があるもの) は用いない。 (重要度 2)
例: HTMLの FONT要素は用いず、 CSSの font プロパティを用いる。
\item アクセスされた文書に関する情報を提供し、ユーザが必要としている情報
にアクセスすることを容易にする。 (重要度 3)
例: リンクされているページのファイル形式や記述言語など
\item あらゆる工夫をしてもアクセシビリティの高いページが作成できない場合
には、アクセシビリティが高く、 W3Cで開発された技術を用いて作成され、
オリジナルのページと同様の頻度で更新され、同等の情報や機能を提供す
る代替ページへのリンクを提供する。 (重要度 1)
\end{enumerate}
\subsection{ページの内容やその位置関係などの理解を容易にする情報を提供する}
複雑な構造を持つページや要素については、ページ中の要素の間の関係を示す情
報を提供したり、関連のある要素をグループ化することで、視覚障害や認識障害
を持つユーザの理解を容易にすることができる。
\begin{enumerate}
\item フレームにはタイトルをつけて、フレームの識別やナビゲーションを容易
にする。 (重要度 1)
FRAME要素の title属性を用いる。
\item フレームのタイトルから、そのフレームの目的や他のフレームとの関連の理
解が困難な場合には、より詳細な情報を提供する。 (重要度 2)
longdesc属性を用いるか、このような情報を提供しているページへのリンクを提
供する。
\item 多くの要素から構成される情報は、適切なグループ化を行う。 (重要度
2)
\item 入力フォーム中のコントロールと、対応するラベルを明示的に記述する。
(重要度 2)
\end{enumerate}
\subsection{明確なナビゲーションを提供する}
サイトマップ、メニュー、ナビゲーションバーなどを提供する場合は、一貫性が
あり、分かりやすいナビゲーションの仕組みを提供する。
\begin{enumerate}
\item リンクを記述する際は、リンク先の内容が分かるようなテキストを記述す
る。 (重要度 2)
例: 「新着情報は\emph{こちら}」という記述ではなく、リンク先に新着情報
があることが明らかになるように、「新着情報」という言葉がリンク部分
に含まれるような記述をする。
\item ページに関する情報をメタデータとして提供する。 (重要度 2)
HTML では、 LINK要素を用いてそのページと他のページの関係を示すことなどが
できる。
\item サイト全体の構造に関する情報を提供する。 (重要度 2)
例: 目次、サイトマップなどの提供。アクセシビリティの向上の目的で提供して
いる機能などに関する解説も加えるとよい。
\item 一貫性のあるナビゲーションの仕組みを提供する。 (重要度 2)
\item ナビゲーションバーを提供し、容易なナビゲーションを可能にする。 (重
要度 3)
\item 関連のあるリンクをグループ化し、これらのグループをユーザエージェン
トが識別できるようにする。また、グループを読み飛ばす機能を提供する。
(重要度 3)
\item 検索機能を提供する場合、ユーザの習熟度の多様性に配慮して、複数の検索
方法を提供する。 (重要度 3)
\item 見出し・段落・箇条書きの冒頭には、他と区別しやすい内容を記述する。
(重要度 3)
\item 複数のページに渡る文書などについては、関連するページに関する情報を
提供する。 (重要度 3)
LINK要素の利用や書庫ファイルの提供。
\item 複数行に渡って表示されるアスキー文字による絵を読み飛ばす機能を提供
する。
(重要度 3)
\end{enumerate}
\subsection{明快な文書の提供}
明快な言葉遣いや一貫性のあるレイアウトなどは、全てのユーザにとって有益なもので
あるが、特に認識障害を持つ人々には有効である。
\begin{enumerate}
\item 可能な限り単純で明快な表現を用いる。 (重要度 1)
\item ページの理解を容易にすることが考えられる場合は、テキスト情報に対応
した画像情報や音声情報も提供する。 (重要度 3)
\item 複数のページで一貫したレイアウトを行う。 (重要度 3)
\end{enumerate}
\section{その他の事項}
ここでは、 WCAG 1.0では触れられていないものの、重要と考えられる事項につ
いて触れる。これらの事項は、前節の重要度 1の項目と同様に重要である。
\begin{enumerate}
\item ユーザからの情報入力を求める場合は、対応している言語で一般的に用い
られる全ての文字セットが受信できる設計を行う。
CGIなどの内部処理には、 1種類の文字セットが用いられている場合が多いが、
受け取った文字列をその文字セットに変換するルーチンを CGIに組み込
み、たとえば日本語においては ISO-2022-JP、 SHIFT\_JIS
\footnote{x-sjis という記述がしばしば見られるが、正式にはshift\_jis が Content-type の charset の指定で用いることのできる名前である。}
、 EUC-JP の受信が可能な設計にする必要がある。
\item HTTPのヘッダまたはページ中のメタデータで、用いている言語と文字セッ
トを明示する。
アクセスされたページで用いられている言語および文字セットを、 HTTPの
Content-type ヘッダによって提供できるようにサーバを設定するか、図
\ref{ex:equiv} のような記述をして、言語と文字セットの情報を明示す
る。
\begin{figure}[hbtp]
\begin{screen}
\begin{verbatim}
....
....
...
....
\end{verbatim}
\end{screen}
\caption{言語・文字セット情報の記述}\label{ex:equiv}
\end{figure}
\end{enumerate}
\section{関連情報}
\begin{itemize}
\item 本チュートリアルの資料 \\
\verb+http://www.accessibility.org/~max/talks/200012-iw/+
\item Web Content Accessibility Guidelines 1.0 \\
\texttt{http://www.w3.org/TR/WCAG10}
\item Web Accessibility Initiative \\
\texttt{http://www.w3.org/WAI/}
\item WAI WCAG Working Group\\
\texttt{http://www.w3.org/WAI/GL}
\item W3C関連文書、日本語翻訳集\\
\texttt{http://www.w3.org/Consortium/Translation/Japanese}
\end{itemize}
\appendix
\section{重要度別チェックポイント一覧}
以下は WCAG 1.0のチェックポイントを重要度別に分類したものである。 WWWサ
イト構築の際の参考にしていただきたい。
\subsection{重要度 1}
\begin{enumerate}
\item テキスト以外の形式の情報には、同等のテキスト情報を付加する。
\item サーバー・サイド・イメージマップのリンク部分に対応したリンクを、マッ
プの外にも提供する。
\item マルチメディアコンテンツの映像トラックについて、提供されている同等
のテキスト情報をユーザエージェントが自動的に読み上げられる機能を
実装するまで、同等の音声情報も付加する。
\item 時間にともなって変化するマルチメディアコンテンツには、同期した同等
の代替情報を付加する。
\item 色を用いた表現によって伝達される情報が、色がない状態でも文脈やマー
クアップによって理解できる形にする。
\item 文書中で用いられている自然言語の変化を明示する。
\item 文書で用いられている主要な自然言語を明示する。 \footnote{WCAG 1.0
では重要度 3となっているが、文書中の使用言語の変化の明示と同等に重要な項
目である。}
\item 数表においては、行と列のヘッダ (項目名) を明示的に記述する。
\item 数表で、行や列に複数の段階の論理的構造がある場合は、データのセルと
ヘッダの対応を明示するマークアップを用いた記述を行う。
\item スタイルシートを利用しない環境でも、文書の内容を理解することができ
るようなページを作成する。
\item 動的に変化するコンテンツの代替情報が、対応するコンテンツの変化に合
わせて変化するようにする。
\item クライアント・サイドのスクリプトやアプレットなどのオブジェクトが利
用できない環境や、これらの機能を利用しない設定になっていてもページ
の利用を可能にする。これが不可能な場合は、同等の内容をアクセシビリ
ティの高い形で代替のページとして提供する。
\item 画面がちらつくようなコンテンツは作成しない。
\item アプレットやスクリプトのインタフェースは、アクセシビリティの高いも
のにする。 (提供されている機能が重要な場合は重要度 1。そうでない場
合は重要度 2)
\item リンク部分の形の表現が困難でないかぎり、サーバー・サイド・ではなく、
クライアント・サイドのイメージマップを用いる。
\item あらゆる工夫をしてもアクセシビリティの高いページが作成できない場合
には、アクセシビリティが高く、 W3Cで開発された技術を用いて作成され、
オリジナルのページと同様の頻度で更新され、同等の情報や機能を提供す
る代替ページへのリンクを提供する。
\item フレームにはタイトルをつけて、フレームの識別やナビゲーションを容易
にする。
\item 可能な限り単純で明快な表現を用いる。
\end{enumerate}
\subsection{重要度 2}
\begin{enumerate}
\item 表示色と背景色の組み合わせが、十分なコントラストを持つようにする。
(画像については重要度 2、テキストについては重要度 3)
\item 適切なマークアップ言語が利用可能な場合、画像を用いず、それらのマー
クアップ言語を用いて情報を記述する。
\item 仕様に即したマークアップを行う。
\item スタイルシートを用いてレイアウトやその他のプレゼンテーションを制御
する。
\item マークアップ言語の属性やスタイルシートのプロパティにおいて、絶対的
な単位ではなく、総体的な単位を用いる。
\item 見出しを表す要素を適切に用いる。
\item 箇条書きやその項目は適切にマークアップする。
\item 引用文は適切にマークアップする。字下げなど、プレゼンテーションの制
御の目的に引用のためのマークアップを用いない。
\item 単純に読み上げられた場合に理解することが可能でないかぎり、 TABLE要
素をレイアウトには用いない。理解することが困難場合には、代替版を提
供する。
\item TABLE要素を用いてレイアウトを制御する場合、プレゼンテーションの制
御の目的で表の構造を表すマークアップを用いない。
\item スクリプトやアプレットのイベント・ハンドラーは、特定の入力装置のみ
を想定したものにはしない。
\item 動的なコンテンツについて、アクセシビリティの高いものにするか、代替
のページで同等の情報を提供する。
\item 点滅するようなコンテンツは作成しない。
\item ページ中で移動するオブジェクトは作らない。
\item 定期的に自動更新されるようなページは作成しない。
\item 自動的なリダイレクトはマークアップではなく、サーバの機能を用いて実
現する。
\item 何らかのインタフェースを提供する要素は、使用機器にかかわらず利用可
能であるようにする。
\item スクリプトを用いる場合、使用機器を特定した形でなく、論理的なイベン
ト・ハンドラーを用いる。
\item 新規のウィンドウを開いたり、ユーザに通知することなくカレント・ウィ
ンドウを変更したりしない。
\item フォーム中のコントロールと対応するラベル (項目名) の関係が明確にな
るようなレイアウトを行う。
\item 可能な範囲で W3Cで定められた技術標準を用い、その仕様の最新版に準拠
する。
\item W3Cの仕様の中で使用しないことが推奨されている要素 (``deprecated''
という記載があるもの) は用いない。
\item フレームのタイトルから、そのフレームの目的や他のフレームとの関連の理
解が困難な場合には、より詳細な情報を提供する。
\item 多くの要素から構成される情報は、適切なグループ化を行う。
\item 入力フォーム中のコントロールと、対応するラベルを明示的に記述する。
\item リンクを記述する際は、リンク先の内容が分かるようなテキストを記述す
る。
\item ページに関する情報をメタデータとして提供する。
\item サイト全体の構造に関する情報を提供する。
\item 一貫性のあるナビゲーションの仕組みを提供する。
\end{enumerate}
\subsection{重要度 3}
\begin{enumerate}
\item ユーザエージェントがクライアント・サイド・イメージマップのリンク部
分のテキスト情報を提示する機能を実装するまで、マップ以外の部分に
同等のテキストによるリンクを提供する。
\item 略語の元になっている言葉を記述する。
\item 表の概要を示す。
\item ヘッダの略称を記述する。
\item リンク・フォーム中のコントロールやその他のオブジェクトの論理的な順
序を明示する。
\item 重要な要素やフォームのコントロールなどへのキーボード・ショートカッ
トを提供する。
\item TABLE要素などを用いて段組みしたテキストを表示する場合、段組みされ
ていない形のテキストも同時に提供する。
\item テキスト入力フィールドには、デフォルトの文字列を表示する。
\item 同じ行に隣り合って配置されるリンクには、リンク部分には含まれない区切り文
字を挿入する。
\item アクセスされた文書に関する情報を提供し、ユーザが必要としている情報
にアクセスすることを容易にする。
\item ナビゲーションバーを提供し、容易なナビゲーションを可能にする。
\item 関連のあるリンクをグループ化し、これらのグループをユーザエージェン
トが識別できるようにする。また、グループを読み飛ばす機能を提供する。
\item 検索機能を提供する場合、ユーザの多様な習熟度に配慮して、複数の検索
方法を提供する。
\item 見出し・段落・箇条書きの冒頭には、他と区別しやすい内容を記述する。
\item 複数のページに渡る文書などについては、関連するページに関する情報を
提供する。
\item 複数行に渡って表示されるアスキー文字による絵を読み飛ばす機能の提供。
\item ページの理解を容易にすることが考えられる場合は、テキスト情報に対応
した画像情報や音声情報も提供する。
\item 複数のページで一貫したレイアウトを行う。
\end{enumerate}
\end{document}