2004年6月制定のJISX 8341-3が求める個別要件を下にまとめました。
*ウェブアクセシビリティのページ
5大要件
-
ウェブコンテンツを構造化する：CSSとHTMLの分離、見出し要素リスト要素の使用、表組みをレイアウトのために使用しない。
-
文字は拡大できるようにする。
-
読み飛ばし機能を入れる。
-
キーボードだけでもすべての操作ができるようにする。
-
画像には適切な代替テキストを入れる。
個別要件
5.1 企画、仕様
キーワード：marquee、blink、機種依存文字、日付
a) ウェブコンテンツは規格、仕様に則り文法に従って作成しなければならない。（5-1-a）
- marquee要素やblink要素は使用しない。正式な仕様にない要素である。
- 機種依存文字は使用しない。Ⅰ、Ⅱ、…、①、②、…は、不可。行政機関に多い。
- 日付は、2005年5月16日などとする。「2005/5/16」は音声読みブラウザでは分数として認識されてしまう。
5.2 構造、表示スタイル
キーワード：見出し、リスト、スタイルシート、表、ページタイトル、フレーム、現在位置
a) 見出し、リストなどで文書の構造を規定する。
- 見出しには見出し要素を用いる。（5-2-a）
注）見出しをフォントサイズの違いで表現すると、音声ブラウザでは認識されない。
- リストにはリスト要素を用いる。
注）リストにはリスト要素を用いないと、音声ブラウザでは認識されない。
b) 表示スタイルは、文書の構造と分離して、書体、サイズ、色、行間、背景色などをスタイルシートを用いて記述するのがのぞましい。（5-2-b）
- これにより、ユーザーは印刷、色、音声、点字などの表現方法を変更することができる。
c) 表は適切なマークアップにより構造化する。（5-2-c）
- リストで代用できないか検討する。
- できる限り単純な構造にする。
- 表にはcaption（表題）要素、th要素を用い、scope属性、id属性、headers属性を用いて見出しとデータの関係を示す。
d） 表組みの要素をレイアウトのために使わないのがのぞましい。（5-2-d）
- 音声ブラウザが意図しない順序で読みあげる可能性がある。e) ページタイトルは、内容がわかる一意の名称をつける。（5-2-e）
- 音声ブラウザでは、最初にページのタイトルを読みあげるのでタイトル情報は重要である。
- タイトル要素に何も入っていないと、アドレスが表示され、何のページが理解できない。
- 同じ名称のページには補足情報を入れてわかりやすくする。
f) フレームはバリアになりやすいので、必要以上に使わない。（5-2-f）
- 音声ブラウザ利用者は、各フレームの役割を理解しづらい。
- キーボード操作では、フレームの切り替えが煩雑になる。
- タイトル、広告のためだけにフレームを使用すると、理解しづらい。
- frame要素を使うときは、noframes要素内に代替情報を付与する。
g) ウェブの現在位置を提供することがのぞましい。（5-2-g）
- 順路と現在位置をパンくずリストなどで表現する。例：トップページ＞製品一覧＞加工食品＞ハム＞ボンレスハム
- headセクション内のlink要素にindex, prev, nextなどのリンク型を用いて対象となるページとの関係を明示する。
5.3 操作、入力
キーワード：キーボード、プルダウンメニュー、入力欄、時間制限、ページの自動更新・自動移動、ハイパリンク、ナビゲーションスキップ
a) キーボードだけですべての操作を可能にする。（5-3-a）
- プルダウンメニューには実行ボタンをつける。
- onDblClickは使用しない。
b) 入力欄は理解、操作ができやすくする。（5-3-b）
- 仮名入力の時は、ひらがなかカタカナかを入力欄の前に明示する。
- 文字種が全角か半角かを入力欄の前に明示する。
- 電話番号、郵便番号はハイフンなどの入力例を明示する。
- 選択肢が多い場合は、構造化する。
- ラベル部分をクリックしてもコントロールを選択できるようにする。
c) 入力フォームにおいては、時間制限を設けないことがのぞましい。（5-3-c）
- 制限時間があるときは時間を明示する。
- 入力制限時間があるときは延長、解除できるようにし、できない場合は代替手段を用意することがのぞましい。（5-3-d）
d) ページの一部の自動更新、ページの別ウインドウへの自動移動はさける。（5-3-e）
- 別ウインドウへの自動移動では、戻るボタンが使えなくなるのでさけたほうがよい。
- 移動する時は事前に知らせる。「ニューズのページへ （別ウインドウ）」
d) 位置、表示スタイル、表記に一貫性のある基本部分を提供することがのぞましい。（5-3-f）
- ページの上部、左端、右端にナビゲーションのための一貫性のある基本操作部分をおく。
- 「トップページ」「問い合わせ」「サイトマップ」などのハイパリンクは、形状、色、配置に一貫性をもたせる。e) ハイパリンクおよびボタンは、識別しやすく、操作しやすくすることがのぞましい。
（5-3-g）
- リンクの下線を消さない。
- マウスの細かい操作や小さいボタンは避ける。
- 音声ブラウザにはハイパリンクだけを取り出す機能がある。ハイパリンクテキストに十分な情報がないと、混乱を招く。
- 「価格情報はこちら」は「価格情報」とする。
- ハイパリンクおよびボタンは操作しやすい大きさにする。
- ハイパリンクおよびボタンは隣り合うものとの上下左右の間隔をとる。f) ナビゲーションスキップを提供して読み飛ばせるようにすることがのぞましい。（5-3-h）
- ナビゲーションバーのようにページ上部にあるものは、「本文へ」などのページ内ハイパリンクを設けスキップできるようにする。
注）ナビゲーションスキップがないと、音声ブラウザ利用者は本文へたどり着くのに時間がかかりいらいらします。ナビゲーションスキップを用意しているサイトはまだ皆無に近いです。
5.4 非テキスト情報
キーワード：画像、代替テキスト、
a) 非テキスト情報：画像には適切な代替テキストを提供する。（5-4-a）
- 画像にはalt属性をつける。
- 画像の内容をあらわすテキスト情報を画像の近くに表示する。
- 画像のそばにテキスト情報がある時、代替テキストは<img src="(ソース名）"
alt="">として空が好ましい場合もある。b) リンク画像には、リンク先の内容が予測できるテキストなどの代替情報を提供する。（5-4-b）
- 音声ブラウザ利用者は代替情報がないとリンク先を識別、理解することができない。c) 音声情報には、聴覚を用いなくても理解できるテキストなどの代替情報を提供する。（5-4-c）
- 警告音などの場合、警告をあらわす「ピンポン！」などのテキスト情報を併用する。d) 動画など時間によって変化する非テキスト情報には、字幕、状況説明などの手段によって同期した代替情報を提供することがのぞましい。同期して代替情報が提供できない場合には、内容についての説明を提供する。（5-4-d）
- SMILなどで字幕をつける。
- 副音声で状況説明をする。e) アクセス可能でないオブジェクト、プログラムなどにはテキストなどの代替情報を提供する。（5-4-e）
- アクセス可能であっても、内容を説明するテキストなどを提供することがのぞましい。
- 特定のプラグインを用いる場合、プラグイン最新版へのリンクを提供する。
- メニューなどの重要な情報を、アクセス可能でないオブジェクトを用いて提供する場合は、代替テキストリンクを用意する。
- PDF、FLASH、JavaScriptにはHTML版などの適切な代替手段を提供する。JavaScriptなどのスクリプト言語には、script要素を用いる。
5.5 色、形
キーワード：色、形、背景色、前景色
a) 色だけに依存したウェブコンテンツは提供しない。（5-5）
- 視覚障害者は認識できない。
- 円グラフの内容は理解できるよう引き出し線を付け、領域の違いを表す。「赤字は特急をあらわします」では認識できない。b) 形や位置だけに依存した情報を提供しない。（5-5-b）
- 雪を雪だるまの絵だけであらわしても視覚障害者は認識できない。c) 画像の背景色と前景色は十分なコントラストをとり、識別しやすい配色にすることがのぞましい。（5-5-c）
- 写真の上に文字を配置するときは背景が単色のところに配置する。または背景色にタイしてコントラストのある文字色を用いる。
- 背景画像を使うときは、テキストの範囲の背景を単色にする。
- 文字に縁取り線を入れることで視認性が確保できる場合もある。
- 画面を反転表示させても、画像が見やすく表示されることを確認する。特に透過画像には注意が必要である。
5.6 文字
キーワード：文字のサイズ、フォント、フォントの色
a) 文字のサイズ、フォントは利用者が変更できるようにする。（5-6-a）
注）これにより、文字サイズを拡大することができるようになります。
- 文字サイズは、"em" 、"%"を使用して、スタイルシートで指定する。
- 太字にはem要素、strong要素を用いる。font要素で強調をおこなわない。
b) フォントを指定するとき、サイズ、書体を考慮し読みやすいフォントを指定することがのぞましい。（5-6-b）
- 線幅が一定のゴシック体の方が読みやすい。c) フォントの色は背景色を考慮し見やすい色を指定する。（5-6-c）
5.7 音
キーワード：音、バックグラウンド、音量調整
a) 音：音を自動再生はしないことがのぞましい。（5-7-a）
- bgsound要素を使って音を再生すると、利用者は音が再生されていることもわからない。
- 音の再生を事前に知らせる。音の再生操作のためのボタンを設け、利用者が選択できるようにする。b) 音は、利用者が出力を制御できるようにすることがのぞましい。（5-7-b）
- 再生、停止、音量調整などの制御方法コントロールを提供する。
5.8 速度
キーワード：速度、バナー広告、光感受性発作
a) 変化、移動する画像、テキストは、その速度、色彩、輝度の変化などに注意して作成することがのぞましい。 （5-8-a）
- バナー広告などの背景の変化は、なるべくゆるやかにして、極端な色の変化を避ける。
- 複数の画像を順番にくりかえし表示するときは、明度、色彩、色相が大きく変わる画面を交互に点滅させくり返さないことがのぞましい。b)
速い周期での画面の点滅を避ける。（5-8-b）
- 光感受性発作を誘発することがある。赤と青を交互に点滅すると、光感受性発作を誘発しやすい。
- 画面全体は1秒間に2回以上明滅する表現はおこなわない。
- 画面全体を占めるような、しま、渦巻き、同心円などの規則的なパターン模様の仕様は、避ける。
5.9 言語
キーワード：言語コード、外国語、専門用語、俗語、
a) 言語が指定できるときは、言語コードを記述する。 （5-9-a）
- 音声ブラウザは、使用言語が適切に明示されていないと、正しく表示できないことがある。
- lang属性で第一言語"ja"を指定し、文字コードをMETA要素によって指定する。
- 文書中で異なる言語を使用するページを作成するとき、p要素、q要素、span要素などのlang属性で明示する。b) 利用者が理解しづらい外国語は用いない。使用するときは解説する。
（5-9-b）
- "Top page"は、"トップページへ"のように日本語で表現する。
- title要素に"About us" "Contact" "Submit"などの英単語を使用せず、"お問い合わせ"などと記載する。c)
省略語、専門用語、流行語、俗語など理解しにくいと考えられる用語は多用しない。（5-9-c）
- 略語をはじめて記載するときは、WHO（世界保険機構）などと正式名称をカッコで付け加える。
d) 固有名詞などの読みのむずかしい言葉は多用しないことばのぞましい。（5-9-d）
e) 単語の途中にスペース、改行を入れない。（5-9-e）
- 「経 済」を「けい」「すみ」と一文字ずつ読みあげることがある。
f) ウェブコンテンツは、わかりやすい図記号、イラスト、音声などをあわせて用いることがのぞましい。（5-9-f）
6
- 情報アクセシビリティの確保、向上に関する全般的要件：ウェブアクセシビリティが容易に維持できるよう企画、制作はしなければならない。（6-1）
- 企画段階から情報アクセシビリティを考慮しておく。
- 設計仕様、変更履歴を文書化する。
- 情報アクセシビリティに関する方針、設計指針を文書化する。
- 保守および運用に関する要件：ウェブコンテンツを保守、運用するときは、情報アクセシビリティの品質を確保し、向上させなければならない。
- オーサリングツール、チェックツールを用いると、維持管理が容易になる。
- 情報の追加、更新のときは、情報アクセシビリティの品質を確保向上させる。
- 検証に関する要件：ウェブコンテンツが企画要件を満たしていることを検証する。
- チェックリストを作成し、検証をおこなう。
- 複数の検証方法を用いる。
- 複数の高齢者、障害者、有識者を交えて、情報アクセシビリティの検証をおこなう。
- フィードバックに関する要件：利用者の意見を収集する窓口を用意する。
- サポートに関する要件：問い合わせ先をわかりやすい位置に明示する。
- メールアドレス、電話番号など複数の問い合わせ手段を提供することがのぞましい。
アクセシビリティ確保のためのオペレーション
：トップの理解と組織全体への周知がカギ
1. JISX 8341-3の理解
2. 自組織のウェブ診断
3. 運営方針：担当、アウトソーシング、ガイドライン、長期計画
4. 技術の習得
5. テンプレートの構築
6. 制作、運用、検証