財団法人 日本規格協会 (JSA)

情報技術標準化研究センター (INSTAC)

JIS X 8341-3:2004
「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第３部：ウェブコンテンツ」
技術解説　第1.1版　
委員会ワーキングドラフト（7月22日版）

2005年7月22日作成

この文書は，財団法人 日本規格協会　情報技術標準化研究センター　情報アクセシビリティ国際標準化委員会　ウェブ部会によって作成されました。この技術解説書は，ウェブ開発者が，JIS X 8341-3:2004 「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第３部：ウェブコンテンツ」（ウェブコンテンツアクセシビリティガイドライン）を理解するための参考書です。

この文書についての皆様のコメントを求めています。コメントには，「指摘対象箇所」と「指摘内容」と「指摘の理由」と「修正案」をお書きください。コメントの提出先は，bf_open@jsa.or.jpです。

---

このページの目次

1. はじめに
2. 目的
3. 記述方針
4. 技術解説の使い方
5. JIS X8341-3 第5章 "開発・制作に関する個別要件" に関する解説
   • 5.1 規格や仕様への準拠
     • 5.1.a 規格・仕様・文法への準拠
     • 5.1.b アクセシブルなオブジェクトの使用
   • 5.2 構造及び表示スタイル
     • 5.2.a 文書構造のマークアップ
     • 5.2.b 構造と表示スタイルの分離
     • 5.2.c データテーブルの適切なマークアップ
     • 5.2.d レイアウトテーブルの禁止
     • 5.2.e 識別可能なページタイトル
     • 5.2.f フレームの多様の禁止
     • 5.2.g 階層構造とサイトマップの提示
   • 5.3 操作及び入力
     • 5.3 a 非デバイス依存
     • 5.3 b 入力欄のわかりやすさ
     • 5.3 c 入力時間制限
     • 5.3 d 制限時間の延長・解除
     • 5.3 e ページの自動更新，移動の禁止
     • 5.3 f 一貫性のある基本操作部の提供
     • 5.3 g リンクの識別と操作
     • 5.3 h ナビゲーションスキップ
     • 5.3 i 誤操作の復帰
   • 5.4 非テキスト情報
     • 5.4 a 画像の代替テキスト
     • 5.4 b ハイパリンク画像の代替テキスト
     • 5.4 c 音声の代替
     • 5.4 d 動画の字幕と状況解説
     • 5.4 e オブジェクトの代替形式
   • 5.5 色及び形
     • 5.5 a 色のみに依存する情報提示
     • 5.5 b 形・位置のみに依存する情報提示
     • 5.5.c 背景色と前景色のコントラストと配色
   • 5.6 文字
     • 5.6.a 文字サイズの変更
     • 5.6.b フォントの読みやすさ
     • 5.6.c フォント色
   • 5.7 音
     • 5.7.a 音の自動再生の禁止
     • 5.7.b 利用者による音量調整
   • 5.8 速度
     • 5.8 a 変化する画像・テキスト
     • 5.8 b 早い周期の点滅禁止
   • 5.9 言語
     • 5.9.a 自然言語の指定
     • 5.9.b 外国語の多用禁止
     • 5.9 c 省略語，専門用語，流行語，俗語の多用禁止
     • 5.9 d 読みの難しいと考えられる言葉の多用禁止
     • 5.9 e 単語途中のホワイトスペースの禁止
     • 5.9.f 図記号とイラストレーション
6. 情報アクセシビリティの確保・向上に関する全般的要件
   • 6.1 企画・制作に関する要件
   • 6.2 保守及び運用に関する要件
   • 6.3 検証に関する要件
   • 6.4 フィードバックに関する要件
   • 6.5 サポートに関する要件
7. 参考資料：HTML 4.01 elements list

目次へ [1]

---

1. はじめに

「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第３部：ウェブコンテンツ - JIS X8341-3:2004」は2004年6月に公示，出版されたウェブコンテンツのアクセシビリティガイドラインである。このJISは，ウェブコンテンツをどのように制作すればよりアクセシブルなものにすることができるかをウェブの開発・制作者の立場でまとめたもので，多くの例示によってその具体的な実現方法の例を示し，使いやすいガイドラインを目指して作成されたものである。しかし，JISは頻繁に改定されるべきでないとの考え方から，規定はできるだけ技術に依存しないように記述されている。また，規格発効後，日本規格協会を通じていくつかの質問や意見が寄せられた。それらの疑問に答えることもこの技術解説の目的のひとつである。そこで，本体規格を技術に即した視点からよりわかりやすくし，JIS X8341-3:2004の正しい理解を促進するために技術解説を策定することとなった。この文書は，日本規格協会情報技術標準化研究センター（INSTAC）に平成16年度に設置された，情報アクセシビリティの国際標準化委員会ウェブアクセシビリティ国際規格調査研究部会（WG2）において作成された。

なお，この技術解説はJIS X8341-3:2004を補足するものであり，規格ではないことに注意されたい。

目次へ [1]

2. 目的

本体規格を技術に即した視点からよりわかりやすくし，JIS X8341-3:2004の理解を促進するために，この技術解説は，JIS X8341-3:2004の第5章及び第6章を対象に，その内容の技術的背景を明らかにする。その実現方法の例を技術に即して具体的に示すことを目的としている。

目次へ [1]

3. 記述方針

次の点を明確にして記述した。

1. ハイパテキストマーク付け言語(HTML 4.01，XHTML)，及び段階的スタイルシート(CSS)のバージョンを明確にして，ウェブコンテンツの製作現場でJIS X8341-3:2004を用いようとしたときに，どのようなテクニックが利用可能かを示す。
2. 規格票を理解するうえで誤解なく，正しく理解できるようにするための情報を提供する。
3. 可能な場合には，チェック方法を示す。
4. 可能な限り具体的な例示をおこなう。

なお，この技術解説は規格票を理解し運用するための参考であって，規格ではない。また，本書の各々の技術解説は規格票の示す基準を満たそうとするときに用いることができる技術を例示的に列挙したものであって，それらを用いて開発されたウェブコンテンツがJIS X8341-3:2004に準拠していることを保証するものではない。

目次へ [1]

4. 技術解説の使い方

　この技術解説では，JIS X-8341-3の第5章，第6章の要件を「背景と問題点」「関連する要素」「関連項目」「技術解説」「ソリューション」「注意事項」に分けて解説している。

• 背景と問題点

  その要件に関連して高齢者や障害のある人々がどのような問題に遭遇する可能性があるか，またその背景となる技術について解説する。

• 関連する要素

  HTML，XHTMLの関連する要素またはその属性で関連するものを列挙している。

• 関連項目

  同時に参照して欲しい要件を列挙してある。

• 技術解説

  要件を理解するための補足的な解説を記述している。JIS本文には書かれていない技術的な背景や数値などを含む。

• ソリューション

  この要件を満たすための技術的な方法を示している。この中から一つ，あるいは複数の手法を選択する。

• 注意事項

  関連する注意事項が記載してある。

目次へ [1]

5. JIS X8341-3 第5章 "開発・制作に関する個別要件" に関する解説

5.1 規格や仕様への準拠

5.1.a 規格・仕様・文法への準拠

ウェブコンテンツは，関連する技術の規格や仕様，および文法に準拠して作成しなければならない。

(対応：JIS X8341-3:5.1 a)

背景と問題点

　一般によく使われているブラウザでは，HTMLなどの文法に厳密に準拠していなくても，文法のエラーを自動的に回避して表示する機能を持っている場合がある。しかし，このような文法解釈の自動的な修正機能はウェブブラウザに依存した機能であり，あらゆる環境で有効である保証はない。音声ブラウザやスクリーンリーダーなどの高齢者障害者支援技術は，これらの問題のあるHTMLを一般的なブラウザと同等に解釈できるとは限らない。また，アクセシビリティチェックツールは文法が正しくないと，判断を誤ってしまう可能性がある。したがって，アクセシビリティの改善を行う前提条件として仕様や文法に正しく則ってコンテンツが作成されている必要がある。

関連する要素・宣言

• meta
• DOCTYPE宣言

関連項目

なし

技術解説

HTML，CSSなどのウェブコンテンツを記述するための言語やソースコード，技術は，W3C，ISO，又はJISが定めた規格，あるいは勧告に準拠することを求める。ただし，このガイドラインはW3CのWCAGに準拠することを求めているわけではなく，一般的な文法等の仕様に準拠することをもとめている点に注意が必要である。あくまでも，一般的な技術の仕様や文法についてであって，アクセシビリティに関する基準については，X8341-3:2004を用いる。準拠すべき規格，勧告の代表的なものを以下に示す。この中から，利用している技術だけを選択して，準拠しているかどうかを確認すべきである。

• HTML 4.01 Specification

  W3C Recommendation 24 December 1999
  http://www.w3.org/TR/html4

  • JIS TR X0033: ハイパテキストマーク付け言語（HTML）4.0

    この標準情報（TR）は，HTML 4.0 Specification W3C Recommendation, revised on 24-Apr-1998を翻訳し，技術的内容を変更することなく作成されたTR X0033:2000に，HTML 4.01 Specification W3C Recommendation 24-December-1999との差分が，技術的内容を変更することなく附属書1として追加されている。

• XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - A Reformulation of HTML 4 in XML 1.0

  W3C Recommendation 26 January 2000, revised 1 August 2002
  http://www.w3.org/TR/xhtml1

• XHTML™ 1.1 - Module-based XHTML

  W3C Recommendation 31 May 2001
  http://www.w3.org/TR/xhtml11

• Modularization of XHTML™

  W3C Recommendation 10 April 2001
  http://www.w3.org/TR/xhtml-modularization

  • JIS TR X0080:2003 XHTML 1.1−モジュールに基づくXHTML

    XHTML™ 1.1 - Module-based XHTML W3C Recommendation 31 May 2001が，この標準情報(TR)と一致している。

• Cascading Style Sheets, level 2 revision 1

  CSS 2.1 Specification
  W3C Candidate Recommendation 25 February 2004
  http://www.w3.org/TR/CSS21/

  • JIS TR X 0032:2000 段階スタイルシート水準2（CSS2）

    Cascading Style Sheets, level 2 CSS2 Specification W3C Recommendation 12-May-1998が，この標準情報(TR)と一致している。

• JIS TR X0093:2003 同期化マルチメディア統合言語（SMIL 2.0）

  Synchronized Multimedia Integration Language (SMIL 2.0) W3C Recommendation 07-August-2001が，この標準情報(TR)と一致している。

  • Synchronized Multimedia Integration Language (SMIL 2.0)

    http://www.w3.org/TR/2001/REC-smil20-20010807/

• Scalable Vector Graphics (SVG) 1.1 Specification

  W3C Recommendation 14 January 2003
  http://www.w3.org/TR/SVG11/

  • JIS TR X0095:2003 変倍ベクタ図形（SVG）1.0

    Scalable Vector Graphics (SVG) 1.0 Specification W3C Recommendation 04-September-2001が，この標準情報(TR)と一致している

　これら以外の規格，勧告，技術を用いる場合にもできる限りそれらの仕様に合致するよう開発するとよい。

　XHTMLなどXMLを基本にした仕様の場合，その文法はDOCTYPE宣言によって示されたDTDで指定されるが，その場合ローカルなDTDを指定することは好ましくない。ウェブブラウザや高齢者障害者支援技術がDTDを正しく解釈する能力を持っているとは限らず，プログラムによって固定的な解釈をおこなう可能性があるからである。したがって，やむをえない事情がある場合を除いて，上記のマーク付け言語などで定義されたDTDをそのまま使うほうが良い。

　本ガイドラインは，必ずしも最新の仕様を用いることを要求してはいない。例えば，段階的スタイルシートに現時点で最新のCSS 2.1を使うことを要求しているわけではない。最新の規格，勧告，または仕様を用いることは好ましいが，それらをウェブブラウザや高齢者障害者支援技術が正しく解釈，処理できない場合には，かえって混乱を招くこともあるからである。

　また，マーク付け言語の仕様においてX8341-3を用いる場合に，Strictな要素だけを用いるべきか，あるいはTransitionalな要素を用いても良いと考えるべきかと迷う場合があるかもしれない。本ガイドラインでは，仕様に準拠することだけを求めていると考えることができるので，StrictでもTransitionalでも許容するというのが原則である。しかし，一般的にTransitionalな要素の中には，アクセシビリティの観点から見て好ましくない要素が残されており，Strictな要素だけを用いたほうがアクセシブルなページを容易に開発できることが分かっている。したがって，Transitionalを用いる場合にも，Strictを基準として用いて，やむをえない場合だけTransitionalな要素を使うようにするとよい。

　文字コードの指定を正しくおこなうことも重要である。HTML文書でマーク付けされた文字コードの指定と，実際に用いた文字コードが一致しないと，利用者の環境によっては文字化けをおこしてしまう。この問題も，高齢者・障害者だけでなく，広く一般の利用者が混乱する原因となるので，注意が必要である。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 使用する言語の明確化

制作，開発に当たっては，使用するHTML等のバージョンをあらかじめ決定しておき，それらを用いることを制作担当者，開発担当者に徹底するとともに，正しい文法や仕様で記述できるよう教育する。また，このことがアクセシビリティの確保・向上に役立つことを理解させる。

2) DTDの定義

HTML，XHTML，XMLにおいてはDOCTYPE宣言を用いてDTDを定義する。

例1 HTML 4.01 Strictを用いる場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

例2 HTML 4.01 Transitionalを用いる場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

例3 XHTML 1.0 Strictを用いる場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

この例にないローカルなDTDを用いる場合は，代表的な高齢者障害者支援技術によって利用可能なことを確認する必要がある。

3) 文法の妥当性

DTD宣言の内容にしたがって文法が妥当(valid)であるかどうかを確認する。確認の方法には，文法チェッカーを用いる方法とオーサリングツールに内蔵されたチェッカーを用いる方法とがある。オーサリングツールのチェッカーを用いる場合には，そのチェッカーがチェック可能な言語や仕様を確認しておく必要がある。

例1 W3CのMarkup Validation Serviceを用いる。

http://validator.w3.org/

例2 W3C CSS検証サービスを用いる。

http://jigsaw.w3.org/css-validator/

例3 市販のオーサリングツールを用いて文法を点検する。

Macromedia Dreamweaver の「ファイル」メニューの「ページのチェック」の「マークアップのバリデート」を実行する。

例4 インターネット上の文法検証サービスを用いる。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

4) 文字コード

文字コードの宣言と実際に記述した文字コードが一致することを確認する。

例1 言語コードは，meta要素を用いて head内で次のように定義する。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

例2 コンテンツを，文書作成アプリケーションの独自ファイルから，HTML形式などに変換して持ってくる場合，文字コードが一致しているかどうかを確かめる。

独自のファイル形式ではサポートされている文字でも，シフトJISやUTF-8などのHTMLの文字コードに含まれない文字は化けてしまうことがある。文字実態参照や数値文字参照を使うことも検討すべきである。また，対象とする音声読み上げアプリケーションで，どう読み上げられるかも確認しておく必要がある。

5) 機種依存文字

機種依存文字や携帯電話で用いられる絵文字（携帯端末用コードでよく使われるもの）が用いられていると，音声ブラウザ等で正しく読み上げられないばかりでなく，一般的なウェブブラウザでも正しく表示されないことがある。これらは，アクセシビリティというよりはむしろユーザビリティにおける問題と考えられるが，高齢者などが混乱することが考えられるため，配慮が必要である。機種依存文字は“丸付き文字”，“ローマ数字”，“単位記号”及び“外字”などがある。図1に機種依存しない文字の例を示す。

例1 機種依存しない文字の例(ISO-2022-JP)

機種依存しない文字の例(ISO-2022-JP)

JISコード	文字	名称
2122	、	読点
2123	。	句点
2124	，	コンマ
2125	．	ピリオド
2126	・	中点
215C	＋	正符号，加算記号
215D	−	負符号，減算記号
216B	°	度
2174	＃	番号記号，井げた
2175	＆	アンパサンド
2176	＊	星印，アステリスク
2177	＠	単価記号
2178	§	節記号
2179	☆	白星
217A	★	黒星
217B	○	丸印，白丸
217C	●	黒丸
217D	◎	二重丸
2821	─	細線素片
2822	│	細線素片
2823	┌	細線素片

注意事項

規格，または勧告等にウェブブラウザが対応できていない場合がある。また，一般的なウェブブラウザは対応していても，高齢者障害者支援技術が未対応の場合もある。例えば，XForms，SVGはアクセシビリティの確保・向上には有効な技術だが，対応が進んでいない。したがって，これらの技術を使う場合には，それがたとえ標準規格や勧告であっても，一般的なウェブブラウザで正しく表示され，代表的な高齢者障害者支援技術を用いて利用可能であることを確認しておく必要がある。

目次へ [1]

5.1.b アクセシブルなオブジェクトの使用

ウェブコンテンツには，アクセス可能なオブジェクトなどの技術を使うことが望ましい。

(対応：JIS X8341-3:5.1 b)

背景と問題点

(X)HTMLやスタイルシート以外に，動画，音声，アニメーションのためのプラグインなど，多様なオブジェクトがウェブコンテンツの一部に用いられつつある。特に，サイトの重要な情報や基本的な操作のためのメニューなどが，非(X)HTMLな技術を用いていてアクセシブルでないと，そのサイト全体が利用できず致命的な問題となることがある。

関連する要素　関連する要素を以下に示す。

object, applet, script, noscript, embed, noembed

関連項目

5.4.c 5.4.d 5.4.e 5.3d

技術解説

オブジェクトなどの技術とは，主としてプログラムを用いて作成されたものを指す。X8341-3では，これらの技術が高齢者障害者支援技術で利用できることを保障することを求めている。オブジェクトなどの技術は，object，applet要素を用いて HTMLページに埋め込まれるものと，アンカーを使って直接リンクされたファイルを含む。たとえば，Java™，JavaScript，VBScriptのようにプログラムによって制御されウェブブラウザ上に(X)HTMLとともに表示されるもの，ActiveX技術などを使った専用のプラグインを用いるMacromedia Flashなど，外部のプログラムを起動して表示されるAdobe Acrobatなどを含む。マイクロソフトワード，エクセル，アクセスなどの文書ファイルがコンテンツとして提供される場合には，それらのファイルが高齢者障害者支援技術を用いてアクセス可能であることを確認しておく必要がある。なお，X8341-3はオブジェクトを積極的に用いることを推奨しているわけではなく，単に用いる際にアクセス可能であることを求めているだけである。

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

1) object要素のオブジェクトをアクセシブルにする

applet要素はHTML 4.0以降の使用では非推奨要素であるため，object要素を使用することが推奨されている。これらの要素を用いているときは，その技術がアクセシブルであることを確認する。確認の方法としては，次の方法が考えられる。

オブジェクトの開発，実行環境等を提供している企業がアクセシビリティのガイドラインを持っている場合には，それらがJIS X8341-3:2004を満たしていることを確認したうえで，そのガイドラインを使用する。

例1 マクロメディア社のFlashを使う場合には，同社のアクセシビリティ基準を用いて，作成する。

http://www.macromedia.com/jp/macromedia/accessibility/ を参照する。

例2 アドビ社のAdobe PDFを使用する場合には，同社のアクセシビリティ基準を用いる。

http://www.adobe.co.jp/enterprise/accessibility/ を参照する。

例3 ActiveXを用いる場合には，MSAA(Microsoft Active Accessibility)に対応していることを確認する。

http://www.microsoft.com/japan/enable/（ユーザ向け情報），
http://www.microsoft.com/japan/msdn/accessibility/（開発者向け情報）
を参照する。

例4 Java™を用いる場合には，Java Foundation Classes (JFC)に含まれているJava Accessibility APIを用いる。また，ウィンドウズにおいては，Java Access Bridge For Windows Operating Systemを用いる。

ただし，日本における主要なスクリーンリーダーは現状ではこれらの対策によっても，Javaプログラムにアクセスすることができない点に注意が必要である。

例5 アップル社Mac OS Xで動作するCarbonプログラムは同社のアクセシビリティガイドラインを用いること。

http://developer.apple.com/documentation/Carbon/Accessibility-date.html を参照する。ただし，現在のところ，Mac OSに対応した日本語のスクリーンリーダーは発売されていない。

例6 ここに示す当該ガイドラインを満たすだけでは，まだ達成できないアクセシビリティ要件があることに留意し，より高いアクセシビリティを目指す必要がある。

ガイドラインでは対応できない事項，触れられていない事項がある。ガイドラインを満たすことで満足せず，ユーザの使用実態において配慮すべき事を確かめ評価すべきである。例えば，拡大する機能がついていたとしても，スクロール距離が大きく使用が非常に困難であったりする。また，始めに，ユーザがフォーカスを移動させなければ使用を開始できないなど，ユーザが明示的に使用条件を得られず，使用が困難な場合がある。

他に参考にできるガイドラインがない場合には，JIS X8341-2及び3を用いてアクセシブルかどうかを確認する。特に，高齢者障害者支援技術を用いた評価，利用者を交えた評価が有効である。

2) object要素の代替テキストを提供する

object要素には代替テキストを提供する。オブジェクトを利用できないときでも当該ページを利用できるようすることが求められる。代替テキストは，オブジェクトのもつ情報と同等の内容を提供するか，もしくはそのオブジェクトを用いることができない場合の代替手段に関する情報を提供する。

例1 代替テキストを記述した例

<object data="logo.mpg" type="application/mpeg">やさしい工業株式会社のロゴ</object>

3) プラグインに関する情報提供

高齢者や初心者などはオブジェクトの表示に必要なプラグインの入手に手間取る可能性がある。したがって，プラグインの入手とインストールに関する情報を提供するとわかりやすい。

例1 プラグインが入手できるWebページへのリンクを提供する。また，インストールなどに必要な要件があれば，前もって案内をしておくとよい。

プラグインが使用される前に，または使用されている場所に，プラグインが入手できるWebページへのテキストリンクやリンクバナー画像を配置する。

4) script要素があるとき，そのスクリプトはアクセシブルであること。

スクリプトに関する具体的なソリューションは，5.3a 非デバイス依存の項を参照すること。

5) script要素があるとき，noscript要素を使ってscriptが使えないときにも，アクセスできること

例1 noscript要素の記述例

<script type="text/javascript"> メニューのためのスクリプトが書いてある </script>
<noscript><a href="altmenu.html">メニューのページを開く</a></noscript>

6) embedおよびnoembed要素は非標準の要素であり用いない

オブジェクトは object要素を用いるべきであるが，現時点ではブラウザの対応状況が不完全であり，非対応のブラウザや高齢者障害者支援技術でも利用できるように，代替手段としてembedなどの他の要素を併用することも考慮する。

注意事項

なし

目次へ [1]

5.2 構造及び表示スタイル

5.2.a 文書構造のマーク付け

ウェブコンテンツは，見出し，段落，リストなどの要素を用いて文書の構造を規定しなければならない。

(JIS X8341-3: 5.2 a)

背景と問題点

グラフではデータ構造を(X)HTMLでマーク付けし，表示スタイルはスタイルシートなどで指定することで，データ及びデータ構造と表示スタイルを分離できる。これにより，情報を失うことなく，利用者の環境や属性に合わせたデータ表示が可能になる。言い換えれば，情報，機能，構造を表現から分離することが重要である。

紙の文書を作成する際，太字にしたり，大きい文字にしたり，あるいは，先頭に点や丸などの記号置くなどして，目立たせることで，見出しを示すことがある。また，箇条書きも同様に，先頭に点や丸などの記号を置くなどして表すことがある。これは，文書の構造をわかりやすく（明確に）するための工夫である。つまり，文書構造を明確にすることで，文書の概要や必要な情報を探すのに役に立つからである。

同様に，Webページでも，視覚的に文書構造をわかりやすくするために，見出しや箇条書きを点や丸などの記号，あるいは字体に変化をつけて作成されている場合が多い。しかし，紙の文書と同じように，文字種や文字の大きさ，あるいは，行頭に記号を置くなどの方法で，視覚表現に依存した方法で文書構造を表してしまうと，音声ブラウザやスクリーンリーダーなどの支援技術は，文書のナビゲーションに文書構造を用いることができず，ユーザーに適切な形で情報を伝えたり適切なナビゲーションの手段を提供したりできなくなる。

関連する要素

h1, h2, h3, h4, h5, h6, p, div, span, dl, ol, ul, li, big, small, em, strong, blockquote, q, font, style

関連項目

5.2 b 構造と表示スタイルの分離(CSS)

技術解説

HTMLでは，文書構造をあらわすための要素が準備されている。たとえば，見出し(h1～h6),や箇条書き(ul, ol, dl)など。これらの要素を利用することで，見た目だけでなく，HTML的に文書構造を明確に表すことができる。

HTMLの要素を利用して文書構造をあらわすことで，統一された形で視覚的に文書構造を示すことができる。また，視覚に頼らないで文書を利用する場合，たとえば，音声ブラウザなどで文章を読み上げる場合や点字ディスプレイで文章を表示する場合，見出しや箇条書きであることを知らせることができるなど，支援技術が適切に情報を提供したり，適切な形に変換したりしてユーザーに提供することが可能となる。 また，検索エンジンなどのコンピュータが文書を理解し処理するためにも役立つ情報である。なお，視覚的にどのように表現するかの指定は，CSS（段階的スタイルシート）で表現することができる。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 見出し要素h1 ～ h6を利用する

文書の構造を示すために，見出しをつける場合は，太文字などのフォントの見映えの変更としてではなく，見出し要素h1からh6を利用して記述する。そうすることで， h1からh6までに対応した文書の階層構造を表現できる。

見出しはできるだけ簡潔に記述し，文書構造や内容が理解できるようにする。

見出し要素を書式の変更や見出しを表現すること以外に利用するべきでない。

2) 見出し要素は可能な限り正しい階層構造で記述する

h1は大見出し，h2は中見出し，h3は小見出し，といった文書の章節構造などの階層構造を正しく表現できるように見出し要素を利用する。文字の書式（字体，大きさ）の違いによって，h1からh6を選択するべきではない。

例1 title要素とh1要素の内容を一致させる

ページのtitle要素とh1要素の内容を一致させ，h1要素は一つだけにし，ページの始めの方に配置することができる。

例2 見出しの階層構造を工夫する

見出しには，6階層しかないため，文書の階層がもっと深い場合は，dl要素のdt要素を7階層目の見出しにしたり，構成を検討するなどの工夫をする必要がある。

3) リスト要素を利用する

箇条書きは，順序付きリスト(ol)，順序なしリスト(ul)，定義リスト(dl) をそれぞれ用途にあった形で利用する。

テーブル要素を用いて箇条書きを記述すると視覚的に同様な効果が得られる場合があるが，文書構造を正しく示しているとはいえないため，避けるべきである。

リスト要素を字下げ等を目的に，見映えのためだけに利用すべきでない。

例1 ナビゲーションをリスト要素で作成する

ナビゲーションなどのリンクのグループは，リスト要素にすることができる。

　

（HTML）
<div id="NAVI">
<ul>
<li><a href="dummy1.html">トップページ</a></li>
<li><a href="dummy2.html">商品</a></li>
<li><a href="dummy3.html">サービス</a></li>
<li><a href="dummy4.html">会社概要</a></li>
<li><a href="dummy5.html">サイトマップ</a></li>
</ul>
</div>
（スタイルシート）
#NAVI li {
    background: #3333CC;
    display: block;
    margin: 0px;
    padding: 0.3em;
    list-style: none;
    color: #FFFFFF;
    float: left;
    border: 1px solid #000066;
}

4) 段落要素<p>や汎用ブロックレベル要素<div>，汎用インライン要素<span>を利用する

段落を表現する場合は，段落要素<p>を利用する。また，字下げしたり，右寄せ左寄せなど本文の一部の書式をブロックレベル要素として変更する場合は，div要素を利用することができる。文中の言葉などのインライン要素の見映えを変える場合には，span要素を利用することができる。

字下げをするなど表示スタイルをかえる目的のためだけに，リスト要素や引用のための要素（<blockquote>，<q>）等を利用するべきでない。

なお，divとspanはともに文書に構造を与える要素だが，spanはインライン要素であり，divはブロック要素である。文中の一時的な表示スタイルの変更にはspanを，それより大きな分のまとまりに対してはdivを用いるのが一般的である。

例1. W3Cでの，div要素とh1～h6要素を関連づける方法の例示

<div class="section" id="human_nature">
  <h1>人間の本性</h1>
  <p>この章では，人間の本姓とは何かについて論じていくことにする。</p>
　　　　　...つづく...　
  <div class="subsection" id="innateness" >
    <h2>心の生得性 </h2>
    <p>本性を考える上で，まず問題になるのは「心はどこまでが生得的か」という議論だろう。</p>
　　　　...この節つづく...
  </div>
</div>

例2) span要素

<p class="lead-paragragh">このページでは<span class="corporation-name">株式会社ABCDEFG</span>の会社概要を説明します。</p>

5) 論理的な強調を現す要素<em>, <strong>等を用いる

段落の中で特定の箇所を強調する場合は，論理的な字種や書体を現す要素<em>, <strong>等を用いることができる。強調する場合には，b，i，ではなくem，strongなどの論理的強調要素を用いる。

字体を直接変更するような<font>などは用いるべきでない。

字体や書式変更を行う場合はCSSを用いて行う。

6) ソースコードを現す要素<code>を用いることができる

HTMLやCSS，JavaScriptなどコードを示す場合は，code要素を用いる。字下げや改行，空白などテキストで整形された通りに見せたい時は，pre要素を用いることができる。

7) 変数や引数であることを現す要素<var>を用いることができる

変数や引数であることを現す要素<var>等を用いることができる。

8) 引用に関わる要素<blockquote>, <q>, <cite>を用いる

blockquote要素は，引用された段落・文章であることを示すブロックレベル要素である。q要素は，引用された文章であることを示すインライン要素である。cite要素は，出典や参照先を現し，文書名や規格名，著者名を示す要素である。

9) 略語などを現す要素 <abbr>, <acronym>を用いる

abbr要素は，略語を示すために利用する。acronym要素は，数語からなる語句の各単語の始めの文字を組み合わせて作り，一つの単語として発音するものである頭字語を示す。この時，省略していない元の名称は，title属性に入れる。

10) 定義されている用語を現す要素<dfn>を用いる

文章の中で，ある用語が定義・説明されている場合に，その用語を示す要素<dfn>を用いる。

目次へ [1]

5.2.b 構造と表示スタイルの分離

ウェブコンテンツの表示スタイルは，文書と分離して，書体，サイズ，色，行間，背景色などをスタイルシートを用いて記述することが望ましい。ただし，利用者がスタイルシートを使用できない場合，又は意図的に使用しないときにおいても，ウェブコンテンツの閲覧及び理解に支障が生じてはならない。

(JIS X8341-3: 5.2 b)

背景と問題点

前項と同様に，視覚的な方法で文書構造を表してしまうと，音声ブラウザやスクリーンリーダーなどの支援技術は適切な文書構造を理解することができず，ユーザーに適切に情報を伝えられなくなる可能性がある。ウェブブラウザの標準の表示スタイルを変更したいときには，HTML文書に記述せず，外部スタイルシートを用いて指定することができる。

関連する要素

h1, h2, h3, h4, h5, h6, p, div, span, dl, ol, ul, li, big, small, em, del, th, strong, blockquote, q, font, style

font-size, font-weight, text-align, color, background-color, margin-top, margin-bottom, margin-left, margin-right, list-style-type, list-style-image, line-height, font-size, position, top, left

関連項目

なし

技術解説

文書構造を視覚的に示すために，書体，サイズ，色，行間，背景色などの表示上の表現は CSS（段階的スタイルシート）で記述する。CSSでは，スタイルシートで設定されているプロパティは，「誰が設定したか」「限定の度合いが高いか低いか」「読み込みの順番が前か後か」により，優先度が決められ，対象の要素に反映される。

スタイルシートが利用できないブラウザや，利用者が意図的にスタイルシートを無効にしたり，利用者独自のスタイルシートを設定したりしている場合でも，文書構造が最低限の内容が正しく伝わり，理解できるようにしておく必要がある。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 見出し要素<h?>の書式変更にスタイルシートを用いる

見出し要素は，ブラウザによって異なるが，何のスタイルも与えられてない場合，<h1>が大きい文字で，<h6>に行くにしたがって，小さい文字になって行き，また，少し広めの改行幅で改行される表現がされる。

しかし，ページの構成のためや読みやすさの向上のために，文字書式（字体・大きさ）や改行幅などを変更したい場合がある。その場合はCSSを利用して書式設定を行うことができる。

例1) すべての見出しを標準の1.5倍の文字の大きさで太文字にする。

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    font-weight: bold;
}

例2) 見出し1を中央ぞろえで表示し，見出し2から6の文字色と背景色をつける。

h1 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}
h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    font-weight:bold;
    color: #ffffff;
    background-color: #00ff00;
}

例3) どうしても画像を見出しにしなければいけない場合，余白をゼロにして画像と画像の間に余白ができないようにする。

（スタイルシート）
h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
}
（HTML）
<h1><img src="title.gif" alt="私のホームページ"></h1>
<img src="line.gif" alt="">

例4) 箇条書きの記号を画像に変更する。

（スタイルシート）
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square{ list-style-type: square; }
ul.myface { list-style-image: url(myface.jpg) }
（HTML）
<ul class="myface">
…
</ul>

例5) 箇条書き全体のインデント（左余白）を半分にする。

ul {
    margin-left: 0.5em;
    padding-left: 0.5em;
}

例6) 箇条書きの改行幅や箇条書き記号との間隔などを変更する。

li {
    margin-bottom: 1em;
    line-height: 1.5em;
    padding-left: 2em;
}

例7) 箇条書きの文字書式を変更する（li要素またはul要素に設定することができる）。

li {
    font-size: 1.5em;
    font-weight: bold;
    color: #00ff00;
}
ul {
    font-size: 1.5em;
    font-weight: bold;
    color: #00ff00;
}

例8) リスト要素をナビゲーションに使用する。リストのli要素を横に並べて，ナビゲーションにする。ウインドの横幅を狭くすると，自動的に下の段に改行される。自動的に改行できるようにすることは，視野狭窄のユーザが幅の狭い領域でコンテンツを見たい場合に役立つ。また同時に低視力のユーザが幅の広い領域で文字を大きくしてみることができる自由度を得ることができる。

（HTML部分）
<div id="NAVI">
<ul>
<li><a href="dummy1.html">トップページ</a></li>
<li><a href="dummy2.html">商品</a></li>
<li><a href="dummy3.html">サービス</a></li>
<li><a href="dummy4.html">会社概要</a></li>
<li><a href="dummy5.html">サイトマップ</a></li>
</ul>
（スタイルシート部分）
#NAVI li {
    display: block;
    float: left;
    margin: 0px;
    padding: 0.3em;
    border: 1px solid #000066;
    list-style: none;
    color: #FFFFFF;
    background: #3333CC;
}

a:link {
    color: #FFFFFF;
    background: #3333CC;
}
a:visited {
    color: #FFFF00;
    background: #000000;
}
a:hover {
    color: #000000;
    background: #CCFFFF;
}
a:active {
    color: #660000;
    background: #CCCCCC;
}

例9) 段落(p)を字下げする場合

p {
    margin-left:2em;
}

例10) ある特定の範囲を字下げする場合

div {
    margin-left:4pm;
}

例11) ある範囲を右寄せする場合

div {
    text-align:right;
}

例12) 字間や行間を調節する場合

p {
    letter-spacing:0.25em;
    line-height:1.5em;
}

例13) リキッドデザイン，リキッドレイアウト

ページ全体やテキストなどが入ったdiv要素やp要素やtd要素の横幅を固定にしないデザイン（リキッドデザイン，またはリキッドレイアウト）にすると，ユーザが，ブラウザのウインドの横幅を変えたり，文字サイズを変えると，それに応じて内容を自動配置してくれる。

例えば，floatなどにより段組されて，横に数個並んでいる要素は，自動的に改行されて下の段に移動する。このように，ページを閲覧する時にユーザが自分の見やすい表示にできる自由度が向上する。

特に，横幅を固定しないことは，視野狭窄のユーザが幅の狭い領域でコンテンツを見たい場合に役立つ。また低視力のユーザは，幅の広い領域で文字を大きくして見ることができる自由度を得ることができる。

2) リスト要素の書式変更にスタイルシートを用いる

リスト要素は，各項目の先頭に点や丸などの記号，または数字をつけて表示される。

しかし，点や丸などの記号を変更したり，数字の始まりを変更したりしたい場合がある。その場合は，CSSを利用して書式設定を行うことができる。

例1) 箇条書きの記号を画像に変更する。

（スタイルシート）
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type:square; }
ul.myface { list-style-image: url(myface.jpg) }
（HTML）
<ul class="myface">
…
</ul>

例2) 箇条書き全体のインデント（左余白）を半分にする。

ul {
    margin-left: 0.5em;
    padding-left: 0.5em;
}

例3) 箇条書きの改行幅や箇条書き記号との間隔などを変更する。

li {
    margin-bottom: 1em;
    line-height: 1.5em;
    padding-left: 2em;
}

例4) 箇条書きの文字書式を変更する（li要素またはul要素に設定することができる）。

li {
    font-size: 1.5em;
    font-weight: bold;
    color: #00ff00;
}
ul {
    font-size: 1.5em;
    font-weight: bold;
    color: #00ff00;
}

3) 段落やブロックレベルでの書式変更 (p要素，div要素) にスタイルシートを用いる

各段落において，字下げしたり，右寄せをしたりしたい場合がある。その場合は，CSSを利用して書式設定を行うことができる。

例1) 段落(p)を字下げする場合

p {
    margin-left: 2em;
}

例2）ある特定の範囲を字下げする場合

<div style="margin-left: 4pm">
.....
</div>

例3) ある範囲を右寄せする場合

<div style="text-align: right">
.....
</div>

例4) 字間や行間を調節する場合

<p style="letter-spacing: 0.25em; line-height: 1.5em;">
…
</p>

4) 文字書式の書式変更にスタイルシートを用いる

段落の中で特定の箇所を強調する場合がある。その場合は，CSSを利用して書式設定を行うことができる。

例1) ある箇所について論理的強調を視覚的に変化させたい場合（なお，色だけに依存して強調してはならない）

em { color: green }
strong { color: red; font-size: 2em }

例2) ある範囲を中央そろえにしたい場合

div { text-align: center }

例3) フォントサイズを調整する

span { font-size: 1.5em }

例4) 文字間隔を調節する場合

/*  2文字分の文字間隔を設定  */
span { letter-spacing: 2em }
/* 文字間隔等は設定せず  */
集合場所：駅前噴水広場<br>
/*  0.5文字分の字間を設定  */
span { letter-spacing:0.5em}
/*  0.5文字分の字間を設定  */
span { letter-spacing: 0.5em }
/* 字間を-0.3文字分に縮める設定  */
h1 { letter-spacing: -0.3em }

5) JIS X8341-3: 5.2 aを遵守し，文書構造を正しく記述する。

JIS X8341-3: 5.2 aを遵守し，文書構造を正しく記述することで，CSSによって指定している書式や表示スタイルがなくなった場合やユーザーによってCSSが変更された場合でも，最低限の基本的な情報をユーザーに伝えることができるようになっているはずである。

6) CSSによる表示位置の指定を行う場合は，HTMLの記述の順番が理解できる順番で配置するように記述する。

CSSによる表示位置の指定をむやみに多用することは避けるべきである。それは，CSSが有効である場合と無効である場合で表示される順番が異なる可能性があるからである。

もし表示位置の指定をする場合は，CSSが無効になった場合のことを考慮し，HTMLの記述する順番どおりに表示しても，最低限の基本的な情報をユーザーに伝えることができるようになっているようにするべきである。

例1) CSSで直接表示位置を指定している場合の悪い表示例

<html>
<head>
<title>CSSでの位置指定</title>
</head>
<body>
<style type="text/css">
div.1 {
    position: absolute;
    top: 60px;
    left: 100px;
}
div.2 {
    position: absolute;
    top: 78px;
    left: 100px;
}
div.3 {
    position: absolute;
    top: 96px;
    left: 100px;
}
div.4 {
    position: absolute;
    top: 114px;
    left: 100px;
}
p.ranking {
    position: absolute;
    top: 60px;
    left: 20px;
}
</style>
<body>
<h1>今週の血液型ランキング</h1>
<p class="ranking">
第一位:<br>
第二位:<br>
第三位:<br>
第四位:<br>
</p>
<div class="2">Ａ型</div>
<div class="3">Ｂ型</div>
<div class="4">ＡＢ型</div>
<div class="1">Ｏ型</div>
</body>
</html>

例2) CSSが適応されている場合の表示例

例3) CSSが適応されていない場合の表示例

7) テーブルの見出しth要素の書式の変更（自動的に太文字になるのを抑制する）

例1) th要素のフォントの太さを標準にする例

th {
    font-weight: normal;
}

目次へ [1]

5.2.c データテーブルの適切なマーク付け

表は，わかりやすい表題を明示し，できる限り簡単な構造にして，適切なマーク付けによってその構造を明示しなければならない。

(JIS X8341-3: 5.2 c)

背景と問題点

新聞や雑誌などに載っているテレビ番組表やカレンダーのように，行と列の位置関係に情報の意味があるような場合がある。たとえばテレビ番組表の場合は，行と列の位置関係に時間とテレビ局の情報が関連付けられているし，カレンダーの場合は，曜日や第何週目かといった情報が関連付けられている。

このような表のデータは，視覚的に確認する場合非常に便利であるが，音声読み上げで情報を理解しようとすると非常に困難である。音声ブラウザ上から順番に読み上げていくだけだからだ。たとえばカレンダーの場合，曜日を一通り読み上げて，次に1から30まで読み上げるという状態になり，曜日と日付の対応や，第何週目かといった情報を理解することが困難である。

関連する要素

table, td, th, caption, style, scope, headers, id, summary

関連項目

5.2 b 構造と表示スタイルの分離(CSS)

技術解説

音声ブラウザの中には「テーブル読み上げモード」があり，位置情報と一緒に読み上げる機能が用意されている。これを活用するためには，あらかじめ行と列の見出しなど，表の構造を明示しておかなければならない。

「テーブル読み上げモード」は，表全体を眺めることはできず，1つの操作では，現在の読み上げ一にあたるセルの中身だけであるため，表の全体の情報を知るためには，表の中のたくさんのセルを上下左右に，まるで迷路のように動き回る必要がある。このとき，セルが結合されていたりすると，利用者が表の中での位置を見失ってしまい，セルからセルへの移動が非常に困難になる場合がある。そのため，表は必要以上にセル結合せず，単純な構造にする。

どうしても，セル結合などで，表の構造が複雑になってしまう場合は，id属性, headers属性, scope属性などで，セルの関係性を示しておく。

また，その表に対する表題や概要を記述することで，すばやくその表を理解したり，重要度を判断したりする助けとなる。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 表の見出しセルにはthを利用する

表の見出し，たとえば，テレビ番組表であれば，時間帯やテレビ局名が記述されているセルには，th要素を利用する。th要素を利用すると，字体が太字等に変更されてしまう場合がある。字体を変更したい場合は，CSSを利用する。

例1) th要素にabbr属性を付ける。

th要素に内容の省略した名称をabbr属性で入れておくと，読み上げエージェントをテーブル読み上げモードにして，td要素を読み上げた時に，見出しとしてこの短い名称の方で読み上げてくれる。これにより，セルごとに冗長な見出しの内容を繰り返し聞かなければならないことを避けることができる。

<th abbr="売上高">売上高およびその他の収益</th>

2) セル結合が本当に必要かどうか検討する。

3) セルの結合などで，複雑な構造のためthのみでは十分に表の構造を表現できない場合は，scope, headers, id属性を利用する

4) 表題をつけるにはcaption要素を利用する

caption要素で表と表題を構造的に関連付けする。表題は，その表がどんな表であるか明確にわかるようなものにする。

5) 表を理解するうえで必要な概要や構造に関する情報をsummary属性として記述する

summary属性には，表の理解の助けとなるような情報，たとえば，何を伝えようとしている表なのかといった概要や，表の大きさ，行や列に関する情報などを記述しておくと，表を理解するうえで大きな助けとなる。

目次へ [1]

5.2.d レイアウトテーブルを使用しないことを推奨

表組みの要素をレイアウトのために使わないことが望ましい。

(JIS X8341-3: 5.2 d)

背景と問題点

現在table要素（表組み）を利用して視覚的な画面レイアウトを行っているWebページが多い。これは，CSSが無かった時代から，一般的に利用されてきた，視覚的な画面レイアウト手法であった。しかし，表組みで，視覚的な画面レイアウトを行うと，製作者が意図した画面表示の順番と，音声ブラウザが読み上げる順序が異なる場合があるため，音声ブラウザでは，正しく情報を理解できない可能性がある。

関連する要素

table, td, th

関連項目

5.2 b 構造と表示スタイルの分離(CSS)

技術解説

レイアウトにはCSSを利用することが望ましいが，表を利用して画面レイアウトする場合は，音声ブラウザが読み上げる順序を常に意識して記述していくことが必要である。音声ブラウザは，一般的にHTMLに記述されている順番に読み上げる。そのため表組みの場合は，1行目の左から右へ，2行目の左から右へ，3行目の左から右へ，・・・そして最終行の左から右へと読み上げていく。さらに，このような順序で読み上げても，内容が理解できるようにする必要がある。さらに，セル結合などをさせた表の場合は，無意識のうちに思い込んでいる順序と，まったく異なる場合がある。また，テーブルの構造を表すような要素 たとえば th などを利用してしまうと，音声ブラウザなどの支援技術が間違った解釈をしてしまい，ユーザーに正しく情報が伝わらないことがある。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) CSSを使ったレイアウト

表組みを利用せずに，CSSを利用して表示位置を調整することもできる。HTMLでは，音声ブラウザの読み上げ順序に配慮した形で記述し，CSSで表示レイアウトを指定する。

例1) CSSによるレイアウト

（HTML）
<div id="header">（ヘッダ）</div>
<div id="navigation">
<ul class="navi">
<li>トップページ</li>
<li>商品</li>
<li>サービス</li>
<li>会社概要</li>
<li>サイトマップ</li>
</ul>
</div>
<div id="content"><p>（内容）</p><p>いろいろな内容など。</p></div>
<div id="footer">（フッタ）</div>
（スタイルシート）
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #AAAAAA;
    color: #FFFFFF;
    background-color: #330099;
}
div#navigation {
    float: left;
    width: 100px;
    margin: 0px;
    padding: 0px;
    border: solid 1px #AAAAAA;
    background-color: #DDDDDD;
}
ul.navi {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul.navi li {
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #AAAAAA;
    background-color: #EEEEEE;
}
div#content {
    float: left;
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #DDDDDD;
    background-color: #F5F5F5;
}
div#footer {
    clear: both;
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #AAAAAA;
    color: #FFFFFF;
    background-color: #444444;
}

1) 表組みによるレイアウトにおける音声ブラウザの読み上げ順番を配慮する

次のいくつかの表は，音声ブラウザがどのような順番で読み上げるかを示したものである。この読み上げ順序を考慮しながら，表組みによるレイアウトを行う。

表組みによるレイアウトにおける音声ブラウザの読み上げ順番

1

2

3

1	2	3
4	5	6

1
2	3	4

1	2
3

1	2	3
4		5

1	2
	3	4

1	2	3
	4

1	2	3
4

1	2	3
4	5

2) CSSを使ったレイアウト

表組みを利用せずに，CSSを利用して表示位置を調整することもできる。HTMLでは，音声ブラウザの読み上げ順序に配慮した形で記述し，CSSで表示レイアウトを指定する。

目次へ [1]

5.2.e　識別可能なページタイトル

ページのタイトルには，利用者がページの内容を識別できる名称を付けなければならない。

(JIS X8341-3: 5.2 e)

背景と問題点

ページのタイトルは，そのページの概要を理解したり，目的のページかどうか判断したりするのに利用されることが多い。またページを保存したり，ブックマークやお気に入りに登録したりする場合に，ページのタイトルがその名前として利用される。このページのタイトルが記述されていなかったり，ページの内容と異なっていたり，あるいは，複数のページにまったく同じタイトルが記述されていると，開いたページが本当に目的のページかどうか，すぐに判断できなかったりする場合がある。また，せっかくブックマークに保存して後から参照しようとしても，タイトルがわかりやすくないと，ブックマークそのものが，見つけ出せなくなってしまう場合がある。

関連する要素

title

関連項目

なし

技術解説

多くの音声ブラウザなどは，最初にページのタイトルを読み上げてから，内容を読み上げる。もし，ページのタイトルが適切でないときや，記述されていない場合，そのページを上から下まで全部読み上げてみないと，そのページが目的のページかどうかの判断ができないことがある。このような問題を避けるために，ページのタイトルにそのページの概要がわかるような固有のタイトルを記述する。

さらに，目的のページを探すために，ページを進めたり，戻ったりしている場合にも，それぞれに内容を表す固有のタイトルが記述されていることで，現在のページが確認しやすくなる。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) サイトを設計するときにタイトルの付け方の指針を決める。

ホームページやサイトを設計するときに，あらかじめ同一タイトルが存在しないようタイトルの付け方を決める。

2) 利用者が経験する可能性のあるページのパス（流れ）の中で同一タイトルがないか確認する。

音声ブラウザの利用者はページが移動したかどうかを確認するときに最初に確認するのが，ページタイトルである。そのため同一のタイトルであるとページの移動が確認できない場合がある。最低限，利用者が経験する可能性のあるページのパス（流れ）の中で同一タイトルがないか確認する必要がある。

3) ページの内容を最も端的に表す単語やフレーズを利用する。

単にサイト名等だけでなく，ページの内容を端的に表す単語やフレーズを含めることで，利用者がそのページを詳細に見ることが必要かどうかの判断を助けることになる。

4)長い文字列にならないようにする。

これはブラウザによって表示しきれない部分は省略されることを考慮するためである。また，音声でタイトル情報を聞く場合，あまり長いとタイトルを聞くだけで時間がかかってしまう場合がある。

例1) 検索エンジンで検索時に表示されるページのタイトルは，全角で約30文字である。

検索サイトにより違いがあるが，全角で約30文字までは表示され，それ以上は省略されることがある。

5) サイト名など同じ文字列を入れる必要がある場合は，タイトル文字列の最後に入れるようにする。

小さいが画面でタイトルの後半が省略されてしまう場合，先頭の同じ文字列（サイト名）などしか見えず，結果的にユーザーにとっては同じタイトルしか見えないという事態を避けることができる。また，音声ブラウザを利用する場合も，最初の段階でタイトルの違いがわかるため，効率よく情報を得ることができる。

例1) タイトル名の例

目次 - HTML 4.01の基礎講座

p要素 - HTML 4.01の基礎講座

body要素 - HTML 4.01の基礎講座

div要素 - HTML 4.01の基礎講座

6) サイト名など必ず同じ文字列をタイトルの最初に入れる場合は，なるべく最初の文字列は，省略するなど長くならないようにし，その文字列の後は必ず固有のタイトルを付ける。

例1) タイトル名の例

HTML 4.01の基礎講座 - 目次

HTMLの基礎 - p要素

HTMLの基礎 - body要素

HTMLの基礎 - div要素

7) どうしても同じタイトルになってしまう場合は，数字などを入れるなど，ページの推移がわかるようにする。

例1) タイトル名の例

例2) タイトル名の例

HTML 4.01の基礎講座 - 目次1

HTML 4.01の基礎講座 - 目次2

HTML 4.01の基礎講座 - 目次3

8) frameを使用した場合は，ページのタイトル名を付け忘れないこと。

目次へ [1]

5.2.f フレームの多用の禁止

フレームは，必要以上に用いないことが望ましい。使用するときは，各フレームの役割が明確になるように配慮しなければならない。

(JIS X8341-3: 5.2 f)

背景と問題点

フレームは適切な場面で利用すれば，有効な表現手段となる。ただし，音声ブラウザでは，それぞれのフレームを切り替えないと全体が確認できない場合もあるため注意が必要である。また，フレーム切り替えに，キーボード操作をしている場合，切り替え操作が煩雑になる可能性がある。

関連する要素

frameset, frame, noframes, iframe, link

関連項目

なし

技術解説

音声ブラウザによっては，1度に確認できる範囲が1つのフレームに限られ，キーボード操作により，次のフレームまたは，前のフレームといった具合にその都度切り替えながらでないと，全体が確認できない場合がある。そのため，複雑なフレーム構成になっていると，ページ構成が理解できない場合がある。さらに，支援技術によってはフレームに対応していない場合もある。

また，リンクをクリックしたときに別のフレームに内容が表示される場合，音声ブラウザによっては，別のフレームに新しいページが開いたことがわからないため，目的の情報が得られない場合や，次の操作ができなくなってしまう場合も考えられる。

したがって，フレームを利用する場合は，本当にふさわしいかどうか，検討する必要がある。フレームを利用する場合は，各フレームの役割を明確に記述することが大切である。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) フレームの利用が本当に必要かどうか検討する。

サイトロゴやバナー広告のためだけのフレームは基本的に作成しないほうがよい。どうしても必要な場合は，代替の手段を検討する。

例1) 内部フレーム (iframe) 要素

内部フレーム (iframe) 要素も<iframe>～</iframe>の内容も読上げないエージェントが存在するため，呼び出し先のページへのリンクを別に提供するなどの対策をとる。

2) frame要素にはtitle属性を用いて各フレームの役割を記述する。さらに，参照先のHTMLファイルにもtitle要素を用いてフレームの役割を記述する。

title属性を記述することで，音声ブラウザなどの支援技術がユーザーにそのタイトルの情報を示してくれる。また，タイトルを付けることで，おのずと不要なフレームを見分けることができるかもしれない。不要なフレームは省略し，できるだけ少なくする。

3) フレームの参照先HTMLがフレームであるような構造は避ける

frameset要素のsrc属性で指定されたファイルが，さらにフレームであるようなページは，音声ブラウザを利用するユーザによっては，非常に複雑な階層構造の中を移動することになるため避ける。

4) noframes要素には，フレーム未対応のブラウザで表示した場合でも最低限の情報やナビゲーションを記述する。

noframes要素は必ず記述するようにする。さらに，noframes要素の内容は，「フレーム対応のブラウザーをご利用ください」といった内容であってはならない。必ずフレームが利用できない場合のことを考慮した最低限の内容を記述する。最低限フレーム内の個々のページへのリンクやナビゲーションなどを記述する。

5) ユーザにフレーム版とフレームなし版を選択できるようにし，行き来できるようにする。

フレーム版でもフレームなし版でも同様に自由にコンテンツ内を見ることができるようにする。また，その2つの間を自由に行き来できるように配慮する。

目次へ [1]

5.2.g 階層構造とサイトマップの提示

閲覧しているページがウェブサイトの構造のどこに位置しているか把握できるように，階層などの構造を示した情報を提供することが望ましい。

(JIS X8341-3: 5.2 g)

背景と問題点

ページを閲覧していて，次から次へとページを移動していったり，目的のページを探すために，ページを戻ったり進んだりしていくと今現在のページが，サイトの中のどのあたりに位置するのか，わからなくなる場合があったり，作業の中断などによってそれまでの作業があいまいになって，現在位置や作業目的がわからなくなる場合がある。または，作業をやり直すために，スタート地点や基準となる場所へ戻りたい場合，ブラウザの戻る機能を利用しても，なかなか適切な場所に戻れないことがある。

関連する要素

なし

関連項目

なし

技術解説

Webの閲覧者がページの中で迷子にならないように，あるいは迷子になっても適切な場所からやり直せるようにする必要がある。特に他のサイトから直接リンクされているようなページの場合，そのサイトのトップページへリンクがあると有効である。また，ナビゲーションバーやパンくずリスト（またはパンくずナビゲーション）の採用，あるいはサイトマップを作成して，どのページからも参照できるようにするとよい。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) トップページおよび，後方，前方へのリンク

各ページには，最低限トップページのリンクを設定することで，いつでもサイトの先頭に戻ってやり直すことができる。また，前のページや次のページがある場合は，後方または前方へのページに移動するリンクを設定する。

2) サイトマップ

サイト全体の構造を現すサイトマップを作成して，各ページのわかりやすいところへリンクを設定しておく。目立たないところにリンクを設定すると，サイトマップは利用されないので注意が必要である。

3) ナビゲーションバーやパンくずリスト

サイト全体が複雑な場合やより快適なナビゲーションを提供する場合は，ナビゲーションバーの採用や，いわゆるパンくずリストなどのナビゲーションの採用を検討する。

4) link要素によるサイト構造の提示

head内のlink要素により，現在の文書がサイト内でどのような位置でどんな関係にあるかと言う情報を提供する。

例1) link要素

<link rel="index" title="現在のドキュメントに対してインデックスを提供する文書" href="index.html">
<link rel="contents" title="現在のドキュメントに対して目次を提供する文書" href="menu.html">
<link rel="start" title="一連の文書の中の最初の文書" href="chapter01.html">
<link rel="prev" title="前の文書" href="002.html">
<link rel="next" title="次の文書" href="004.html">
<link rel="alternate" title="ドキュメントの別な版" hreflang="en" href="english.html">

5) 視野狭窄ユーザへのナビゲーションの提供

視野狭窄のユーザは，サイト内での移動に限らず，情報が多いとページ内においても自分の今見ているページ内での位置を見失うことがある。

例1) 目次などのナビゲーションに戻る手段の提供

ページの先頭にナビゲーション等がある場合は，ページの先頭に戻るリンクを適宜，提供する。

例2) コンパクトなナビゲーションの提供方法

positionのfixedやJavaScriptを利用し，ページをスクロールしても，いつでもウインド内の決まった位置に，サイト内やページ内のナビゲーション等を提供する。

目次へ [1]

5.3　操作及び入力

5.3 a デバイスに依存しない操作

ウェブコンテンツは，特定の単一のデバイスによる操作に依存せず，少なくともキーボードによってすべての操作が可能でなければならない。

(JIS X8341-3: 5.3 a)

背景と問題点

• 全盲の利用者はマウスポインタが見えないため，マウスなどのポインティング・デバイスを利用できない。また弱視の利用者や加齢により視力低下した利用者は通常の大きさのマウスポインタが見づらいため，画面の表示を拡大したり，マウスではなくキーボードを利用することがある。
• 肢体不自由者や加齢により手の震える利用者は，正確にマウスポインタを制御することが難しく，また筋力が低下していたり，動作の範囲に制限がある利用者は大きくマウスを動かすことが難しいため，マウスではなくキーボードを利用することがある。
• 多くの支援技術はOSのキーボードショートカットやキーボード操作のエミュレーションによって自動的な処理を行っているので，キーボードで操作できないコンテンツは利用しづらい，あるいはできないことがある。

関連する属性

tablindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeypress, onkeydown, onkeyup, onload, onunload, onchange, onfocus, onblur, onsubmit, onreset, onselect

関連項目

5.2 a，5.3 f，5.4 a，5.4 b，5.4 e

技術解説

• キーボードで操作できない場合は，その代わりとなるプルダウンメニューなどを用意して，同等の機能を提供すれば良い。
• 本項目は，キーボード操作によって実行できることが重要としているが，手や指の動かせる範囲が狭い利用者に使いやすいトラックボールなどのポインティングデバイスによっても, すべての操作ができることもあわせて重要である。
• 利用者が画面を見る場合，視線は一般に左上から右下に向かって移動することが多い。したがって，画面内のボタンやテキストは，左から右へ，上から下に配置し，その順番でフォーカスを移動させるとわかりやすい。
• キーボードアクセスが可能で，スクリプトに依存しない（ページ移動のための）プルダウンメニューの作り方は以下のサイトが参考になる。
  Project UDON：http://alfasado.net/udon/accesible_html20/03.html

ソリューション

1) 全てのリンク及び入力項目に，理にかなった順序で移動できるようにする。

通常は特別なタグを付記しなくてもフォーカスは移動するが，スクリプトを多用する場合や，テキストフィールドやラジオボックスなどが多いフォームでは，フォーカスが適切な順番で移動しない場合があるので，操作手順に対応して移動することを確認する。

例1) tabindex属性で，Tabキーによる移動順序を設定する。

<タグ名 tabindex="n">
Tabキーを押した時にtabindexで指定した数値の小さなもの順にフォーカスが移動する。

例2) accesskey属性で，リンクへの移動，ボタンの押下，入力フォームへのフォーカス移動などを行う。

Windowsの「ファイル(F)」のFのダイレクトショートカットキーと同じような働きをする。
<タグ名 accesskey="t">
この例ではリンクボタンにTのキーを割り当てている。詳細の動作はOSやブラウザによる。
なお，OSや様々なユーザエージェントのショートカットキーとぶつからないように配慮する必要がある。

（参考）ショートカットキーの例。

IE
Alt+D ロケーションバーを選択（Firefoxも）
Alt+F メニューバーのファイルメニュー
Alt+E メニューバーの編集メニュー
Alt+V メニューバーの表示メニュー
Alt+A メニューバーのお気に入りメニュー
Alt+T メニューバーのツールメニュー
Alt+H メニューバーのヘルプメニュー

Opera
Show entire forward history Alt + X
Show entire backward histo Alt + Z

HPR 3.02
[Alt]キーを押しながら[D]キー インターネットへのダイヤルアップ接続
[Alt]キーを押しながら[R]キー 「読み上げモード」メニュー
[Alt]キーを押しながら[L]キー リンク読み上げモード
[Alt]キーを押しながら[I]キー 行読みモード
[Alt]キーを押しながら[W]キー 句読点読みモード
[Alt]キーを押しながら[C]キー 文字読み・詳細読みモード
[Alt]キーを押しながら[1]キー 見出し読み上げモード
[Alt]キーを押しながら[O]キー データ入力領域読み上げモード
[Alt]キーを押しながら[J]キー テーブル・ジャンプ読み上げモード
[Alt]キーを押しながら[N]キー カーソル読み上げモード
[Alt]キーを押しながら[T]キー テーブル・ナビゲーション読み上げモード
[Alt]キーを押しながら[A]キー お気に入り・リストを表示
[Alt]キーを押しながら[F]キー 「ファイル」メニューを表示
[Alt]キーを押しながら[E]キー 「編集」メニューを表示
[Alt]キーを押しながら[R]キー 「読み上げ」メニューを表示
[Alt]キーを押しながら[V]キー 「表示」メニューを表示
[Alt]キーを押しながら[G]キー 「移動」メニューを表示
[Alt]キーを押しながら[A]キー 「お気に入り」のリストを表示

（参考）accesskeyの挙動
accesskeyの挙動は，ブラウザによって異なる。accesskeyを押すとすぐにページ移動をするブラウザもあれば，該当するリンクにフォーカスが移動するだけで，「Enter」キーを押すまで，ページ移動を実行しないブラウザもある。

2) JavaScriptではイベントハンドラを入力装置を限定しないように記述する。

次に示すJavaScriptはプルダウンメニューにも使用されることが多いが，マウスでの操作を前提にしているため，キーボードでの操作の可否に注意する。

onclick，ondblclick，onmousedown，onmouseup，onmouseover，onmouseout，onchange

例えば，onmouseoverだけで，メニューを表示する場合，キーボードの利用者は，メニュー内のリンクを選択できないことがある。

附属書1図14は，決定ボタン(<input type=“button">)を加え，そのボタンのonclick属性でページ変更のJavaScriptを指定している。ドロップダウンコントロールに限らず，ラジオボタンなど他のフォーム要素でも注意が必要である。

附属書1図14 マウスとキーボードで選択できるメニュー

附属書1図15は，実行ボタンの付いていない選択メニューであり，ドロップダウンコントロール(<select>)のonchange属性で，ページ変更のJavaScriptを指定しているため，キーボードでは使用できない。

附属書1図15 キーボードでは選択できないメニュー

例1) イベントハンドラを入力装置を限定しないようにするための例。

ポインティングデバイスに関するイベントハンドラの指定に合わせて，キーボードデバイスに関するイベントも併記して設定する。 ondblclickとonmousemoveはマウスに限定したイベントハンドラであり，キーボードでは操作できない。

マウスとキーボードのイベントハンドラの対応表

マウス	キーボード
onclick	onkeypress
ondblclick	なし
onmousedown	onkeydown
onmouseup	onkeyup
onmouseover	onfocus
onmousemove	なし
onmouseout	onblur

3) キーボードだけでも操作できるプラグインを使用する。できないプラグインの場合は代替の機能をHTMLなどで提供する。

マクロメディアFlash，アドビPDFについては付録を参照すること。

注意事項

なし

目次へ [1]

5.3 b 入力欄のわかりやすさ

form要素などで入力欄を使用するときは，何を入力すればよいかを理解しやすく示し，操作しやすいよう配慮しなければならない。

(JIS X8341-3: 5.3 b)

背景と問題点

• 本項目は，理解（認知）と操作（入力）の2つの観点での配慮を求めたものである。
• 加齢により認知・理解力の低下した利用者や，操作に不慣れな初心者にとって，form要素のinput要素などのコントロールに説明がないと何を意味しているのかわからず，またコントロールが複数個ある場合，どれとどれを入力すべきかわかりにくい。
• 入力欄の後ろにラベルが書かれていると，音声ブラウザを使用している全盲の利用者は，ラベルと入力欄の対応関係がわかりにくい（5.3 b）図6, 7, 9, 10, 12, 13）。

図 7　情報を入力欄の後に記載した例

• さらに,ラベルと入力欄が離れていると，拡大表示ソフトを使用している弱視の利用者はその両方を拡大しながら見ることが難しい。

関連する要素

label，fieldset，legend，id，form，input，textarea

関連項目

5.3 c

技術解説

• ラベルには，入力する文字種 (半角文字か全角文字か，カタカナかひらがなか，字数制限があるかなど) を表示すると利用者にわかりやすくなる。
• 上肢に障害のある利用者や加齢による細かな操作が難しい利用者にとって，チェックボックスなど表示面積の小さいコントロールを，マウスで選択することが難しい場合がある。
• ラベルとコントロールを関連づけるとラベルとコントロールが一体化するため，ラベル部分をクリックしてもコントロールを選択することができる。
• ラベルは入力欄の“前”に置くと，音声ブラウズで読み上げたときに入力欄に何を入力すべきがわかりやすい（5.3 b）図5, 8, 11）。またラベルと入力欄の位置を近くすると，拡大表示ソフトで拡大したときに，それらを同時に見ることができ，わかりやすい。

フォームとアクセシビリティに関しては，以下のサイトが参考になる。

The Web KANZAKI：http://www.kanzaki.com/docs/html/htminfo33.html

ソリューション

1) label要素を使用し，ラベルとコントロールを関連づける

例1) ラベル要素の使用の例。id属性による明示的なラベル付け

<label for="uname">名前：</label><br>
<input type="text" name="username" id="uname">

例2) ラベル要素の使用の例。コントロールをlabel要素で囲むことによる暗黙的なラベル付け。この方法も文法的には正しいが対応していないブラウザがあるので，例1の方法をとることが望ましい。

<label>名前：<input type="text" name="username"></label>

2) コントロールが多くなる場合は，グループ化する。<fieldset>要素を使ってグループ化し，<legend>要素でグループのタイトルをつければよい。

例1) fieldset要素を使って，グループ化し，legend要素でグループのタイトルをつければよい。

ソースプログラムは，JIS 28ページの2.3 b) の－記述例－を参照のこと。

（参考）人が一度に記憶できる数は7±2と言われており（認知心理学の分野では「マジカルナンバー」と言われる），これ以下の数にすると覚えやすい。 附属書1図16は，その範囲内に選択肢を抑えているが，附属書1図17は，すべての選択肢が羅列されていて見にくく，覚えにくい。

3) 入力する文字種など入力書式に，自由度を持たせる。

例1) 半角，全角文字のどちらでも入力を受け付ける

プログラム的に，英数字の半角，全角文字のどちらでも入力を受け付けるようにしておく。

例2) サーバ側で，入力された文字を全角から半角に変換する。

(参考) XForms 1.0 Appendices E Input Modes
http://www.w3.org/TR/2003/REC-xforms-20031014/sliceE.html

4) 文字の入力フィールドには，事前に分かるように入力すべき文字種（漢字，全角文字，カタカナ，ひらがななど）を記述する。(3)のような手段で対応できず文字種に制限がある場合には，その旨を記述する。

5) 必須入力項目と任意入力項目との違いを，明確に示す。音声ブラウザでの読み上げを考慮し，必須であることは文字色や記号だけで表現しない。

6) 入力に関する指示，説明，注意事項などは，入力項目の近くに表示する。音声ブラウザの使用を考慮し，コントロールの前に記述する (これにより，入力操作を行う前に，入力方法が把握できる)。

7) 入力しやすく，また入力した結果を確認しやすくする。テキストボックス内の文字サイズは特別な理由がない限り，ラベルの文字サイズより小さくしない。なお，入力領域は十分な幅を持たせておくと，文字サイズを大きくした場合でもスクロールすることなく入力した文字列を容易に確認できる。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 c 入力時間制限

入力に時間制限を設けないことが望ましい。制限時間があるときは事前に知らせなければならない。

(JIS X8341-3: 5.3 c)

背景と問題点

加齢などによる認知・理解力の低下，視力低下による画面の見えにくさ，筋力低下，麻ひ（痺），手の震え，不随意運動などのために，応答の入力に時間がかかる場合がある。

関連する要素

 

関連項目

5.3 d

技術解説

ウェブコンテンツによっては，一定時間内にアクセスしないと，システム側で自動的にログアウトする機能を設けている場合がある。しかし，利用者によっては短時間で入力することができず，時間内に操作を完了できない場合がある。したがって原則的に入力に要する時間に制限を設けないことが必要である。

ただし, コンテンツ利用時の離席中の第三者によるなりすましや情報漏えいなどから利用者を保護するために時間制限を設けざるを得ない場合もある。その場合でも，事前に時間制限がある旨を告知すると，利用者が操作する際にあわてるような事態になることを少なくできる。

ソリューション

1) 可能な限り時間制限は設けない。

2) セキュリティなどの理由で，やむを得ない場合は，時間制限があることを表示する。その場合でも，操作をするために十分な時間設定にする。利用者側での設定時間延長については，5.3 dを参照。

例1) 経過時間，残り時間または受付終了時刻の表示

経過時間，残り時間または受付終了時刻をページ内で表示する。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 d 制限時間の延長・解除

時間制限があるときは，利用者によって制限時間を延長又は解除できることが望ましい。これができないときは，代替手段を用意しなければならない。

(JIS X8341-3: 5.3 d)

背景と問題点

加齢などによる認知・理解力の低下，視力低下による画面の見えにくさ，筋力低下，麻ひ（痺），手の震え，不随意運動などのために，応答の入力に時間がかかる場合がある。

関連する要素

なし

関連項目

5.3 c

技術解説

5.3 cでは“時間制限を設けない，設ける場合は事前に告知する”ことを求めたが，本項目では更に拡張し，利用者の保護のためなどで設けた制限時間を延長したり，解除できるようにすることを求めている。時間設定を行う場合でも，ウェブコンテンツ提供者側であらかじめ十分な時間を設けている場合が多いが，それでもすべての利用者が入力できるとは限らないからである。制限時間を延長したり，解除したりできれば，入力に多く時間を要する重度の肢体不自由者も確実にウェブコンテンツを利用できるようになる。

利用時間を延長できない場合は，インターネットを使用しないなどの他の代替手段を用意する。

ソリューション

1) ウェブコンテンツ内に「利用延長ボタン」を設けておき，利用者がそれを押すことで1回分の時間延長ができるようにする。その場合は，どのくらいの時間が延長されるかを明示しておく。

2) ウェブコンテンツ内に「時間制限解除」を設けておき，利用者がそれを押すことで制限時間を撤廃できるようにする。時間制限をなくすことによって，利用者に不利益が生じる可能性がある場合は，その旨を事前に告知する。

経過時間，残り時間または受付終了時刻の表示

時間制限を設けている場合は，経過時間，残り時間または受付終了時刻をページ内で表示する。

3) 代替手段として，電子メール，Fax，電話でも手続きができるようにする。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 e ページの自動更新，移動の禁止

利用者の意図に反して，又は利用者が認識若しくは予期することが困難な形で，ページの全部若しくは一部を自動的に更新したり，別のページに移動したり，又は新しいウィンドウを開いたりしてはならない。

(JIS X8341-3: 5.3 e)

背景と問題点

• 新しいページを開いた直後，またはページを参照しているときに，そのページが自動的に更新されたり，他のページに移動してしまうと，加齢により認知・理解力が低下した利用者や視力低下による画面を見にくい利用者は，新しいウィンドウやタブが開いたことに気づかなかったり，意図しないページが勝手に開いたことに戸惑ったりする場合がある。
• 新しいウィンドウが開いた場合，筋力低下，麻ひ（痺），手の震え，不随意運動のある利用者は，不要なウィンドウを閉じる操作が困難であったり，どちらが元のページであったかわからなくなる。
• 音声ブラウザ・点字ディスプレイの利用者は，読み上げ時にページが自動的に更新されると，再度最初から読まなければならなくなる。

関連する要素

a，area, meta

関連項目

なし

技術解説

• 本項目は，“利用者の意図や予期に反して”新しいページやウィンドウが開くことを禁止するものであり，利用者が意図的に新しいページを開くことを禁止しているわけではない。たとえば，(1)ヘルプページを別ページとして新たに開きたい，(2)数値を比較対照したい，などの場合，複数ページを開くことは，操作を容易にしたり理解しやすくできるので有効である。
• ウェブコンテンツの表示や操作の都合上，別ウィンドウを開くことが必要な場合は，あらかじめ新しいウィンドウが開くことを告知する。
• なお，指定したページのURLが変更されている場合は，利用者に告知せず新しいページを開いても良い。

ソリューション

1) リンクのある文字列上でマウスの右クリック操作し「新しいウィンドウで開く」を選択すれば，利用者は自分の意思で，そのページを新しいウィンドウで開くことができる。したがって, ページには新しいウィンドウを開くことを目的として，<a>要素もしくは，<area>要素のtarget属性は，_blank，_newを指定しない。

2) あらかじめリンク元で新しいウィンドウが開くことを明示する方法

例

「ニュース (新しいウィンドウで表示)」や「ニュース（別ウインド）」などと表記する

新しいウィンドウが開くことを示す図記号を付記するなどがある。（JIS 5.3e）例2.）

3) やむをえず更新する場合は，あらかじめそのことを告知しておく。

例

「このページは15分ごとに最新情報を更新します」などとする。

4) リダイレクトすることが利用者の利便性に供与する場合は，告知は必ずしも必要ではない。

例

ウェブサイトのURLが変更（移動）になった場合のサーバによるリダイレクト。

参考：WCAGではリダイレクト時間を0秒にすることを推奨している。

5) 情報がその性質的に時々刻々に変化するもので，最新情報を提供することが利用者の利便性に供与するものはリフレッシュする際に，毎回告知する必要はない。

例

気象情報，株価情報。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 f 一貫性のある基本操作部の提供

ウェブサイト内においては，位置，表示スタイル及び表記に一貫性のある基本操作部を提供することが望ましい。

(JIS X8341-3: 5.3 f)

背景と問題点

• 基本操作部（ページ共通のナビゲーションバー，「トップページ」「サイトマップ」などへのリンク，およびページ内リンクなど）がページごとに異なると，利用者は新しいページを参照するたびに，基本操作の方法を理解しなおさなければならない。特に，加齢により認知・理解力が低下した利用者や視力低下による画面を見にくい利用者は，その理解に時間がかかる。
• 音声ブラウザの利用者は，同じ操作部であれば読み飛ばすことができるが，毎回操作部を最初から読まなければならなくなる。
• キーボードやマウスの操作が難しい筋力低下，麻ひ（痺），手の震え，不随意運動のある利用者は，ページ送りボタンなどが同じ位置に表示されていないと，操作に時間がかかる。

関連する要素

a

関連項目

5.2 a

技術解説

• 本項目はページ共通の基本操作部について規定したものであるが，ページ固有の操作部がある場合も見やすさ，使いやすさ（ユーザビリティ）の観点から同様な配慮を行う。
• ウェブサイト管理者がテンプレートを積極的に活用することによって，ウェブサイトの統一感を実現すると同時に，ウェブページ制作者のページ制作工数を低減することもできる。
• なお，ここでいう一貫性とは，語句表記，フォントや色，形などの視覚デザイン，順序およびレイアウト，分類方法などで一貫性を持たせることを指す。

ソリューション

1) 基本操作部分の表現は，ウェブサイト内あるいは同一カテゴリ内で一貫性をもたせる。

2) [戻る]ボタンなどに使用する画像は，ウェブサイト内で統一し，画像の alt属性も必ず統一する。

3) 基本操作部分の表現と反応の対応関係は，ウェブサイト内で統一する。例えば「サイトマップ」と書かれたリンクからは，常に同じウェブページにジャンプさせる。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 g リンクの識別と操作

ハイパリンク及びボタンは，識別しやすく，操作しやすくすることが望ましい。

(JIS X8341-3: 5.3 g)

背景と問題点

• 本項目は，理解（認知）と操作（入力）の2つの観点での配慮を求めたものである。
• 加齢により認知・理解力が低下した利用者や視力低下による画面を見にくい利用者は，写真のような画像や下線のないテキストなどのa要素をリンクであることに気が付かない場合がある。すなわち，利用者は必要なリンクを選択することが困難になる。
• リンクのある文字や画像が隣接している場合，リンクの区切りを把握できない場合がある。
• 音声ブラウザはリンク部分のみを順番に読み上げるナビゲーション機能がある。「ここ」「こちら」などのように指示代名詞だけにリンクを付けると，視覚に障害のある利用者は，正しくリンク先の内容を理解できない場合がある。
• リンクのある文字や画像が隣接していたり，それぞれの面積が小さすぎたりすると，筋力低下，麻ひ（痺），手の震え，不随意運動のある利用者は，意図したリンクを選択するのが困難な場合がある。

関連する要素

a, img, map

関連項目

　5.4 b

技術解説

• ハイパリンクやボタンなどを独自にデザインする場合は，それがリンクやボタンであることがわかるよう形状や配色に配慮すると同時に，操作しやすい十分な大きさを確保する。

ソリューション

1) リンクを操作しやすくするために，選択可能なエリアを十分に確保する。

例1) 文字列全体にリンクを設定するか，大きな画像・文字

適度なリンク範囲を確保できるように，文字列全体にリンクを設定するか，大きな画像・文字などを用いる。

例2) テキストや画像の配置

スタイルシートを用いる場合には，テキストや画像の配置などを考慮する。

例3) リンクにそのままでは不向きな文字の例

i（アルファベットのアイ）やl（アルファベットのエル），1（アラビア数字のいち）などの非常に狭い文字は，クリックしにくい。:linkなどの擬似クラスによりtd要素やdiv要素などの背景の要素に対してスタイルを与えて，リンク範囲を広く出来る場合がある。

2) リンクを操作しやすくするために，隣接するリンク間に充分な間隔を設ける。

例1) 隣接するリンクが区別しやすいように配慮

テキストリンクが横に並ぶ場合，各テキストリンクの間に縦線 ( | ) や斜線 (／) などを入れて，隣接するリンクが区別しやすいように配慮する。

例2) 行間

行間を設定する場合は，狭くしない。

3) リンクが操作可能であると識別できるようにデザインする。

例1) 文字や絵文字 (アイコン)

画像に表示された文字や絵文字 (アイコン) は，ボタンの機能を正しく推測できるものを用いる。

例2) 選択や押下ができそうなデザイン

リンクのある画像は，枠をつける，影をつけるなどして，選択や押下ができそうなデザインにする。ロールオーバー機能を付加しても良い。なお，表現はサイト内で一貫して用いる。

例3) 操作方法が見ただけでわかるよう

特定の技術やプラグインで，ボタンやラジオボタンなどを独自にデザインする場合は，操作方法が見ただけでわかるように作成する。

4) リンク先が明確に分かるようにリンクを表現する。

例1) リンク先の内容を推測できない表現は避ける

「クリック！」「click here!」など，リンク先の内容を推測できない表現は避ける。

例2) 指示代名詞

指示代名詞だけでリンク先を指定しない。

例3) リンクする範囲

リンクする範囲を広げるだけで，わかりやすくなることがある。例えば，「ｘｘに関するより詳細な情報」の文字列のうち，「情報」だけをリンクとするのではなく，「より詳細な情報」をリンクする。また同様に「より詳細な情報はこちら」の文字列のうち，「こちら」ではなく，「より詳細な情報」も含めて文章全体をリンクとする。

例4) 標準的なリンク表示

下線を表示するといった標準的なリンク表示方法は，特に必要でなければむやみに変更しない。

注意事項

なし

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 h ナビゲーションスキップ

共通に使われるナビゲーションなどのためのハイパリンク及びメニューは，読み飛ばせるようにすることが望ましい。

(JIS X8341-3: 5.3 h)

背景と問題点

ナビゲーションバーやメニューなどをページの最初につける場合は，音声ブラウザはページを表示するたびに，それらを必ず読み上げることになる。そのため，音声ブラウザの利用者は本文を読み上げるまでに時間がかかることになり効率が悪い。

関連する要素

a

関連項目

5.3 f

技術解説

• ページの最初の部分に，ハイパリンクやメニューを読み飛ばせるスキップ機能を付記しておくと，利用者が必要に応じて本文を直接読み上げることができる。
  （参考）音声ブラウザ利用者のみを対象にする要件であるため，音声ブラウザでは読み上げるように，ソースコードには記述するが画面表示はしない隠しリンクにして，機能を提供することができる。
• ナビゲーションバーやメニューなどの分量が多いと，ウィンドウに最初に表示される本文の量が少なくなる。そのため，ページの下のほうを表示させたい場合，スクロール操作が必要になるが，筋力低下，麻ひ（痺），手の震え，不随意運動がありキーボードやマウス操作が難しい利用者にとっては，ページの移動に手間が掛かり，特に効率が悪い。一般の利用者の使いやすさ向上（ユーザビリティ）のためにも，ナビゲーションバーやメニューなどは必要最小限にする。

ソリューション

1) 各ページで使用している共通のナビゲーションバーやメニューなどは，音声ブラウザの使用時にスキップできるよう，本文へのページ内リンクを設ける。

例1) 「本文へ」などと文字や画像によるリンクにして，隠さないで視覚的にも提示する。

見せることにより，音声読み上げユーザだけでなく，キーボードやスイッチを使用するユーザにも使用することができるようになる。

例2) 透明gif画像による隠しナビゲーションスキップを提供する。

ナビゲーションが始まる箇所に透過 gif 画像を埋め込み，その画像に本文の開始位置に設定したアンカーへのリンクを設定する。
(補足)
透明gifなどの画像を縦横1ピクセルにしてリンクとした場合，正しくこの画像のalt属性の値を読み上げずリンクと認識しないスクリーンリーダーがある。画像のサイズを，横１ピクセル×縦７ピクセル以上にすると正しく読み上げ，リンクとなることがある。

例3) 背景色と同じ色のテキストで隠しナビゲーションスキップを提供する。

.skipnavi a:link {
    color: #FFFFFF;
    background-color: #FFFFFF;
}

例4) スタイルシートで非表示の設定をしたテキスト隠しナビゲーションスキップを提供する。

（スタイルシートのセレクタの例）

.hidden {
    display: none;
}

例5) 非常に小さなフォントで隠しナビゲーションスキップを提供する。

.skipnavi {
    font-size: 1%;
}

例6) ページの外に配置したテキストで隠しナビゲーションスキップを提供する。

（スタイルシートのセレクタの例）

.skipnavi {
    position: absolute;
    top: -10000em;
    left: -10000em;
}

2) ページのヘッダーに該当するナビゲーションバーや，画面の左側に表示するメニューを，不必要に大きくしない。

3) HTMLとしては，本文を先に読み上げ，メニューやナビゲーションを後で読み上げるように記述し，スタイルシートを使用して配置を上部や左側に変更する。

例1) ナビゲーションをスタイルシートの指定により視覚的には上に配置する。

ナビゲーションをHTMLでは本文の後に記述し，スタイルシートの指定により視覚的には上に配置する。これにより，音声読み上げーユーザにとっては，本文が先に提示され，ナビゲーションは後から提示される。この場合，音声読み上げユーザのナビゲーションの使いやすさのために，ページの始めの位置に，後ろに記述したナビゲーションやメニューのある場所へ移動するためのリンクを提供する必要がある。

 

（HTML部分）
<p id="header"><img src="rogo.gif" width="300px" height="50px" alt="株式会社ABCDEFG"></p>
<p class="content">（本文）<br>新製品のお知らせ</p>
<ul id="shiri_navi">
<li>トップページ</li>
<li>商品</li>
<li>サービス</li>
<li>会社概要</li>
<li>サイトマップ</li>
</ul>

（スタイルシート部分）
p#header {
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    background-color: #CC99CC;
}
p.content {
    position: absolute;
    top: 50px;
    left: 100px;
    margin: 0px;
    padding: 1em;
    border: solid 1px #AAAAAA;
}
ul#shiri_navi {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul#shiri_navi li {
    margin: 0px;
    padding: 0.5em;
    border: solid 1px #AAAAAA;
    background-color: #FFCCFF;
}

注意事項

1) ページ内を移動できないエージェントもある。

エージェントによっては，ページ内を移動するリンクをジャンプさせた時に，視覚的にはナビをスキップして移動したように見えて，その後，tabキーで移動しようとすると，ジャンプ元に戻って再び元の位置から移動し始める挙動を示すものがある。

2) 正しく表示されない場合とSEOスパム

ソリューションの1)の例4)から6)はブラウザの仕様によっては正しく表示されない場合がある。また，例2)から6)は一般の利用者には見えない形で情報を提供するので，検索エンジンによっては，SEOスパムと見なされる可能性がある。SEOスパムとは，ロボット検索エンジンに最適化すること（SEO: Search Engine Optimization）を，利己的な宣伝メッセージであるスパム（SPAM）により行おうという行為を指し，検索エンジンは不正行為と見なし，検索結果での順位が低くなる可能性がある。

目次へ [1]

5.3　操作及び入力（JIS X 8341-3:5.3）

5.3 i 誤操作の復帰

利用者がウェブコンテンツにおいて誤った操作をしたときでも，元の状態に戻すことができる手段を提供しなければならない。

(JIS X8341-3: 5.3 g)

背景と問題点

• 前のページの内容を十分確認しないまま次のページに移動してしまった場合，前のページに容易に戻れないと，利用者はページを表示させるための操作を再度行う必要がある。加齢などによる認知・理解力が低下したり，視力低下によって画面が見えにくい利用者は画面表示を確認するための時間がかかり効率が悪い。また，筋力低下，麻ひ（痺），手の震え，不随意運動がありキーボードやマウス操作が難しい利用者にとっては，操作の効率が悪い。
• 特に利用者が情報を入力するフォームの場合，入力済みのフォームに戻れない場合や，入力済みのデータが消去されている場合は，入力操作を再度繰り返す必要が生じる。
• 直前のページに戻れる機能がないと，加齢により認知・理解力が低下した利用者や初心者は，入力ミスが許されない不安感を感じさせる。

関連する要素

form

関連項目

5.3e, 5.4b

技術解説

• ブラウザの“戻る”機能を利用できない場合は，ウェブコンテンツ自身に前のページに戻る機能を付記する。
• フォームのような入力操作を必要とする場合に，前のページに戻れることを明記しておくと安心感が高まる。

ソリューション

1) ブラウザの[前に戻る]ボタンなどで，前に表示した画面を，簡単に表示できるようにする。特に，Webアプリケーションを利用したシステムのフォームの場合，ブラウザの[前に戻る]ボタンを押しても，「セッションが切れました」などのエラーメッセージを表示して，戻れなくなる事態を避けるべきである。

2) ブラウザの[前に戻る]ボタンなどで，フォームに戻ったとき，入力済みのデータをそのまま残して表示しなければならない。文字などを入力し直すのが非常に大変なユーザのためにも，入力した内容は消去してはならない。

3) 入力後，データの確定前に，利用者自身が入力内容を確認できるようにする。

例

データの確定前に入力内容の確認画面を表示する。

4) 申し込み内容を表示し，その内容を印刷できるようにする。

5) サイトで自動的に入力内容をチェックする場合，文字種などの入力エラーメッセージは，こまめにその都度表示する。

6) 入力内容のエラー画面を表示するときは，問題のある入力項目と問題のない入力項目を明確に示す。さらに，問題の修正方法を明確に示す。

7) フォームの送信後に，利用者への適切なフィードバックを行う。

8) 加齢とともに，短期的な記憶力が低下し，自由想起は難しいが，選択肢を提示された状態での選択は問題が少ない。選択するタイプの方法をとる。この時，比較検討をするのに使う情報は，画面内でスクロールをしないで同時に見ることができる範囲に配置する。これにより記憶に対する負担は軽くなる。特に横スクロールは，操作時にポインタが外れてしまうことが多く，ユーザを疲れさせるという問題もあるため，避けるべきである。ユーザにエラーを起こさせない予防的な配慮が必要である。

9) 加齢とともに，体を思い通りに正確に緻密に動かすという巧緻性が低下するので，プルダウンメニューなどのような動くメニューや動くナビゲーションは，なるべく使用しないようにする。動いてしまうメニューは，思い通りにクリックすることが難しくなる。

注意事項

なし

目次へ [1]

5.4 非テキスト情報

5.4 a 画像の代替テキスト

画像には，利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。

(JIS X8341-3: 5.4 a)

背景と問題点

　視覚障害のため，音声ブラウザなどを用い音声によって情報を得ている場合がある。その場合，音声ブラウザなどは，画像を音声化できない代わりに，その画像の代替テキストを読み上げる。したがって，代替テキストがないと利用者は内容を理解することができない。

また，テキストブラウザの利用者など，画像を表示しないでウェブコンテンツを閲覧しているときも，代替テキストがないと利用者は内容を理解することができない。

関連する要素

img

関連項目

（なし）

技術解説

画像に代替テキストを提供することで，その画像が伝えている情報は，音声あるいは点字などに変換することが可能になる。また，画像を非表示にしているウェブブラウザあるいは画像を表示しないテキストブラウザなどでは，画像を表示できないかわりに代替テキストをその画面に表示することができる。

Web ページに画像を用いることで視覚的な訴求力を高めることができるが，同時にその画像を見ることができない利用者のために代替テキストを記述することで，その画像が伝えている情報をより多くの利用者に伝えることができるようになる。

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

ポイントとなるのは以下の2点である。

(1) 必ずimg要素にはalt属性をつけること。

(2) 画像が用いられている意図や目的に応じて，代替テキストを簡潔に記述すること。ただし，その画像が情報を伝えていない場合は，alt属性を空（alt=""）にすること。

その画像を使用する目的あるいはその画像がページで果たしている役割，前後および周囲との文脈により，以下から適切な方法を用いて，画像の代替テキストを記述する。なお，W3Cが公開している(X)HTMLの勧告（仕様）によれば代替テキストが不要な画像のimg要素にもalt属性は必須であり，代替テキストが不要であることを示すためにもalt属性を空（alt=""）にしなくてはならない。

1) img要素のalt属性値に代替テキストを記述する

画像が伝えている情報を簡潔にテキストで記述する。

例1 画像の代替テキストを，img要素のalt属性に記述する。

<img src="image.gif" width="250" height="100" alt="日本工業規格">

2) alt属性値を空（alt=""）にする

代替テキストが不要な場合は，alt属性値を空（alt=""）にする。また，その画像の周囲にあるテキストで説明している場合も同様である。

例1 以下に挙げるような画像は，img要素のalt属性を空（alt=""）にする。

• スペーサー画像（レイアウトのために使用する透明のGIF画像）
• 装飾だけを目的にした画像
  <img src="spacer.gif" width="1" height="10" alt="">

3) その画像の周囲にあるテキストを代替テキストとする

例1 画像の周囲にあるテキストが画像の内容を説明している場合，あるいは画像の周囲に説明するテキストを置く場合は，繰り返しを避けるためにalt属性を空（alt=""）にする。

<img src="picture.gif" width="300" height="150" alt="">

<p>（･･･画像の内容を説明しているテキスト･･･）</p>

4) 代替情報としてデータテーブルを提供する

数値データを円グラフあるいは棒グラフなどの画像にして提供する場合は，そのグラフが伝えている数値データの内容をアクセシブルなデータテーブルであわせて提供する。

例1 img要素のalt属性には代替テキストとして，グラフがあることを記述する。

<img src="graph.gif" width="250" height="200"
  alt="棒グラフ：過去10年間における利用者人口の推移">
<table>
<caption>表1.　過去10年間の利用者人口推移</caption>
<tr>
<th></th>
……………

5) 別ページに代替テキストを記述する

alt属性値に記述する代替テキストが長くなってしまう場合には，別に説明ページを設けてlongdesc属性でリンクを提供する。また，longdesc属性をサポートしていないユーザーエージェントのために，画像のすぐ近くに同じ説明ページへのリンクをあわせて提供する必要がある。なお，この別ページには，元のページへの戻りのリンクを用意する。

例1 img要素のlongdesc属性で説明ページのURLを指定する。あわせて，longdesc属性が使えないブラウザのための代替手段として，同じリンク先を指定したテキストリンクを画像のすぐそばに置く。

<img src="diagram.gif" width="250" height="200"
  alt="図：日本規格協会の組織図" longdesc="detail.html">
<a href="detail.html">組織図の詳細</a>

注意事項

画像の代替テキストは，その画像の用途あるいは目的，役割などにより，ある程度パターン化できるが，実際には前後の文脈や周囲にあるテキストなどにより，ケースバイケースであることが少なくない。重要なのは，その画像を画面で見ることのできない利用者にも同等の情報が伝わることであり，ここで挙げているソリューション以外にもその方法は考えられる。何のために代替テキストを提供するのかをふまえて，適宜その提供の方法を検討する必要がある。

目次へ [1]

5.4 b ハイパリンク画像の代替テキスト

ハイパリンク画像には，ハイパリンク先の内容が予測できるテキストなどの代替情報を提供しなければならない。

(JIS X8341-3: 5.4 b)

背景と問題点

　視覚障害のため音声ブラウザなどを用い音声によって情報を得ている場合がある。その場合，音声ブラウザなどは，ハイパリンク画像（リンクを設定している画像）を音声化できないので，代わりに代替テキストを読み上げる。したがって，代替テキストがないと利用者はリンク先を識別・理解することができない。

関連する要素

img, area, input

関連項目

（なし）

技術解説

ハイパリンク画像のimg要素にalt属性がないと，音声ブラウザなどではそのリンク先に指定しているURI（a要素のhref属性値）がそのまま読み上げられてしまう。また，画像を表示できないブラウザでは何も表示されないため，利用者はリンクであることは認識できてもそのリンク先は全く分からない。

また，イメージマップを使用する際には，マップ内のリンク領域を定義できない場合を除いて，クライアントサイド・イメージマップを用いる。その際，イメージマップそのものを説明する代替テキストと，マップ内の各リンク領域の代替テキストとをあわせて記述する必要がある。

どうしてもサーバサイド・イメージマップを使用するしかない場合には，サーバサイド・イメージマップを利用者がマウス操作することが前提となる。マウスを操作できない利用者のために，マップ内に設定されている全てのリンクの代替手段となるテキストリンクをマップ画像の近くに置かなければならない。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

どの方法を用いるにしても，リンク画像の代替テキストは，テキストリンクと同様に，その部分だけでリンク先の内容が分かるように記述する必要がある。

1) img要素のalt属性値に代替テキストを記述する

その部分だけでリンク先の内容が分かるように記述する。

例1 リンク画像の代替テキストを，img要素のalt属性に記述する。

<a href="about.html"><img src="image.gif"
  width="150" height="25" alt="会社概要"></a>

2) alt属性値を空（alt=""）にする

リンク画像のすぐそばに同じリンク先へのテキストリンクがある場合は，繰り返しを避けるために，リンク画像のalt属性値を空（alt=""）にするか，画像とテキストを一体にして，ハイパーリンクをタグ付けする。

例1 img要素のalt属性を空（alt=""）にする。

<a href="about.html"><img src="image.gif"
  width="200" height="50" alt=""></a><br>
<a href="about.html>会社概要</a>

例2 img要素のalt属性を空（alt=""）にする。

<a href="about.html"><img src="image.gif"
  width="200" height="50" alt="">会社概要</a>

3) クライアントサイド・イメージマップのarea要素のalt属性に代替テキストを記述する

例1 マップ内のリンク領域の代替テキストを，area要素のalt属性に記述する。

<map name="menu">
<area shape=rect coords="0，0，60，90" alt="食品" href="../syokuhin.html">
<area shape=rect coords="60，0，120，90" alt="雑貨" href="../zakka.html">
<area shape=rect coords="120，0，180，90" alt="ギフト" href="../gift.html">
</map>

例2 イメージマップ全体の代替テキストを，img要素のalt属性に記述する。

<img src="map.gif" usemap="#menu" alt="メニュー一覧">

4) サーバサイド・イメージマップの代替手段としてテキストリンクを提供する

サーバサイド・イメージマップに設定してある全てのリンクと同じリンク先へのテキストリンクをマップ画像のすぐそばに置く。

例1 イメージマップ画像のalt属性に代替テキストを記述し，あわせて代替手段となるテキストリンクをすぐそばに置く。

<a href="cgi-bin/worldmap/database">
<img src="map.gif" alt="世界地図" ismap>
</a>
<br>
<a href="asia.html">アジア</a>|<a href="europe.html">ヨーロッパ</a>
|……………

5) フォームのボタン画像は，input要素のalt属性に代替テキストを記述する

フォームのボタンを画像にする際には，そのinput要素にalt属性をつけて，ボタンの操作結果をあらわす代替テキストを記述する。

例1 リンク画像の代替テキストを，img要素のalt属性に記述する。

<input type="image" value="送信" src="images/submit.gif" name="submit" alt="送信">

注意事項

リンク画像の代替テキストは，そのリンク画像の用途あるいは目的，役割などにより，ある程度パターン化できるが，実際には前後の文脈や周囲にあるテキストなどにより，ケースバイケースであることが少なくない。重要なのは，その画像を画面で見ることのできない利用者にもそのリンク先の内容が分かるようなラベル（文言）を代替テキストとして記述することである。

目次へ [1]

5.4 c 音声の代替

ウェブコンテンツの内容を理解・操作するのに必要な音声情報には，聴覚を用いなくても理解できるテキストなどの代替情報を提供しなければならない。

(JIS X8341-3: 5.4 c)

背景と問題点

　聴覚障害があるとき，音だけで情報を提供していると提供されていることが認識できず，その内容も理解できない。音声情報は，利用者が聴覚を用いることでその情報を得ることができる。しかし，聴覚に障害があったり，コンピュータの音声出力をオフにしていたり，周囲が騒がしい環境で利用していたりすると，その情報を全くあるいはほとんど得ることができない。

関連する要素

object

関連項目

（なし）

技術解説

音声で提供する情報には代替テキストを提供して，利用者が聴覚を用いなくてもその内容を理解できるようにする必要がある。

警告音などを用いる際は，その音が聞こえなくても分かるように，代替テキストなどにより画面で視覚的にもその情報を伝える。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 音声情報の代替テキストを提供する

音声情報が聞こえなくても，同じ情報が視覚的に伝わるようにする。

例1

音声の再生に合わせて，画面に代替テキストも表示する。

目次へ [1]

5.4 d 動画の字幕と状況解説

動画など時間によって変化する非テキスト情報には，字幕又は状況解説などの手段によって，同期した代替情報を提供することが望ましい。同期して代替情報が提供できない場合には，内容についての説明を何らかの形で提供しなければならない。

(JIS X8341-3: 5.4 d)

背景と問題点

　聴覚障害がある場合，音によって情報を提供していると提供されていることが認識できず，その内容も理解できない。

また視覚障害がある場合，どのような映像が表示されているのか理解できない場合に，内容を理解できない。

認知又は記憶に障害がある場合，字幕，状況説明などがあると内容を理解しやすくなる場合がある。

関連する要素

object

関連項目

（なし）

技術解説

音声付きの動画には，画面で視覚的に伝えている情報と音声で聴覚的に伝えている情報とがあり，それぞれに代替情報を提供する必要がある。

まず，画面で視覚的に伝えている情報については，音声による補足説明を副音声で提供し，主音声と重ならないように同期させるのが良い方法だが，実際には困難なケースが多い場合もある。そこで，これが困難な場合は，音声や点字に変換できるように，主音声を書き起こしたテキストおよび補足説明となる代替テキスト（副音声の原稿にもなるテキスト）を何らかの手段で提供する。テキスト情報になっていれば，音声あるいは点字に変換することができるので，視覚に障害があっても画面で伝えられている情報を得ることができる。

次に，音声で聴覚的に伝えている情報については，キャプション（字幕）を提供し，画面上で同期させるのが良い方法だが，これもやはり困難な場合がある。そこで，これが困難な場合は，キャプションと同じ要領で代替テキストを書き起こして別ページで提供するなど，音声を聞くことができない利用者にも同等の情報が伝わるようにする。テキスト情報になっていれば，それを点字に変換することができるので，例えば視覚と聴覚の両方に障害があっても，利用者はその情報を得ることができる。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 画面で視覚的に伝えている情報を同期させた副音声で提供する

副音声で，登場人物の表情および動作，背景，画面上の文字などを，SMILを用いて主音声と重ならないように提供する。

例1 以下の [ ]部分を副音声のナレーションとして録音し，画面と同期させる。

シンバ「それっ！」

[シンバは外へ駆け出して行き，両親が後に続きます。サラビはやさしく微笑みながら，シンバを父の方へ行くようにと促します。２頭は並んで座りながら，黄金に輝く日の出を見つめています。]

ムファサ「見なさい，シンバ。太陽が輝かせているのは，私たちの王国だ。」

シンバ「ほんとだ！」

2) 画面で視覚的に伝えている情報を代替テキストで提供する

登場人物の表情および動作，背景，画面上の文字などを，副音声ではなく，代替テキストとして提供する。

例1 登場人物のセリフおよび[ ]部分の補足説明を代替テキストとして別ページなどで提供する。

シンバ「それっ！」

[シンバは外へ駆け出して行き，両親が後に続きます。サラビはやさしく微笑みながら，シンバを父の方へ行くようにと促します。２頭は並んで座りながら，黄金に輝く日の出を見つめています。]

ムファサ「見なさい，シンバ。太陽が輝かせているのは，私たちの王国だ。」

シンバ「ほんとだ！」

3) 音声で聴覚的に伝えている情報を同期させたキャプション（字幕）で提供する

登場人物のセリフ，効果音などをテキストに書き起こして，同期したキャプションとして画面上で提供する。

例1　登場人物のセリフ以外の音もキャプションとして提供する。

＊「E.T.」のあるシーンに対する字幕。電話のベルが3回鳴った後，声が聞こえる場面。

[電話の呼出音が鳴る]

[呼出音]

[呼出音]

「もしもし？」

関連情報

SMIL 1.0仕様書（日本語訳）

http://www.doraneko.org/misc/smil10/19980615/Overview.html

QuickTimeとSMIL

http://www.apple.com/jp/quicktime/tools_tips/tutorials/qtsmil.html

マイクロソフト - PCマルチメディアのキャプションとオーディオの説明

http://www.microsoft.com/japan/msdn/accessibility/general/ATG_CCandAudioDesc.asp

マクロメディア - Macromedia Flash MX 2004によるアクセシブルコンテンツの作成 : キャプションと字幕

http://www.macromedia.com/jp/macromedia/accessibility/features/flash/captions.html

4) 音声で聴覚的に伝えている情報を代替テキストで提供する

登場人物のセリフ，効果音などをテキストに書き起こして，代替テキストとして提供する。これをトランスクリプトとよぶが，このトランスクリプトへのリンクは目立つところに配置すべきである。

例1　登場人物のセリフ以外の音も代替テキストとして記述する。

＊「E.T.」のあるシーンに対する字幕。電話のベルが3回鳴った後，声が聞こえる場面。

[電話の呼出音が鳴る]

[呼出音]

[呼出音]

「もしもし？」

目次へ [1]

5.4 e　オブジェクトの代替形式

アクセス可能ではないオブジェクト，プログラムなどには，利用者がその内容を的確に理解し操作できるようにテキストなどの代替情報を提供しなければならない。また，アクセス可能なオブジェクト又はプログラムに対しても，内容を説明するテキストなどを提供することが望ましい。

(JIS X8341-3: 5.4 e)

背景と問題点

　オブジェクトあるいはプログラムがアクセシブルでないと，そのオブジェクトあるいはプログラムが提供している情報および機能を利用できない。また，特定のプラグインを用いる場合には，そのプラグインをサポートしていない環境では，やはりユーザーは情報および機能を利用することができない。

関連する要素

object, script, a

関連項目

（なし）

技術解説

5.1 b) の「アクセシブルなオブジェクトの使用」にあるように，オブジェクトあるいはプログラムを使用する際は，それ自体をアクセシブルにするよう最大限につとめなくてはならない。しかし，どうしてもこれらをアクセシブルにできない場合には，利用者が同等の内容を理解してその情報およびサービスを利用できるように代替情報を提供する必要がある。

　また，オブジェクト，プログラム，あるいはプラグインがアクセシブルであっても，あわせてテキストなどの代替情報を提供することで，利用者は好きなほうを選択することができるようになり，その利便性が向上する。

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

1) object要素の代替テキスト

object要素には代替テキストを提供する。代替テキストは，オブジェクトのもつ情報と同等の内容を提供するか，もしくはそのオブジェクトを用いることができない場合の代替手段に関する情報を提供する。

例1

<object classid="java:Press.class" width="500" height="500">
  <object data="Pressure.mpeg" type="video/mpeg">
    <object data="Pressure.gif" type="image/gif">
      温度が上がるにつれて，風船の中の分子は・・・
    </object>
  </object>
</object>

2) script要素があるとき，noscript要素を使ってスクリプトが使えないときにも，アクセスできること

例1

<script type="text/javascript"> メニューのためのスクリプトが書いてある </script>
<noscript><a href="altmenu.html">メニューのページを開く</a></noscript>

3) プラグインの最新バージョンをダウンロードできるページへのリンクを提供する

プラグインを使用する際は，その最新バージョンをダウンロードできるページへのリンクを提供する。

例1 Adobe Player（PDF閲覧）の場合：

<a href=http://www.adobe.co.jp/products/acrobat/readstep2.html"
><img src="images/get_adobe_reader.gif" width="88" height="31"
alt="Adobe Readerのダウンロード"></a>

例2 Flash Playerの場合：

<a href=http://www.macromedia.com/jp/go/getflashplayer_jp/"
><img src=" images/get_flash_player.gif" width="88" height="31"
alt=" Macromedia Flash Playerのダウンロード"></a>

例3 Windows Media Playerの場合：

<a href="http://www.microsoft.com/japan/windows/windowsmedia/download/"><img
src="http://www.microsoft.com/windows/windowsmedia/images/Download_88x31_static.gif"
width="88" height="31" alt="Windows Media Playerのダウンロード"></a>

 

例4 QuickTimeの場合：

<a href="http://www.apple.com/jp/quicktime/download/"
>QuickTimeのダウンロード</a>

目次へ [1]

5.5 色及び形

5.5 a 色のみに依存する情報提示

ウェブコンテンツの内容を理解・操作するのに必要な情報は，色だけに依存して提供してはならない。

(JIS X8341-3: 5.5 a)

背景と問題点

　ある情報を強調したり，他との差異を明確にしたりするために，文字色を変えるなどして色を用いることは視覚的により分かりやすく情報を伝えることができるという点ではとても有用である（例：必須項目のみ赤字で示す，新商品名のみ赤字で示す，など）。また，グラフなどでは複数の色を用いてデータを示す場合がある。

しかし，色を用いて情報を提供する場合，それらの色が識別できない場合でも情報が伝わるようにしなければならない。たとえば，音声読み上げソフトでは文字の色までは読み上げないため，利用者は文字の色だけで伝えられている情報が理解できない。また，色覚に障害のある利用者がその文字やグラフの色を識別できずに理解できないこともある。さらに，モノクロで印刷した場合には色は全て破棄されるため，特定の色で情報が表現されていると利用者はその色が識別できずに理解できない。

関連する要素・属性

img, color, bgcolor

関連項目

技術解説　テキストの文字色で情報を示す場合は，あわせてテキストでも情報を提供する（例：「赤字の項目名（必須）」，「赤字の商品名（新商品）」，など）。そうすることで，音声読み上げソフトでも情報が伝わり，その色が識別できない場合でも情報が伝わるようになる。

また，グラフで複数の色を用いる際には，凡例だけではなく，引込み線を用いるなどして色が識別できなくても情報が伝わるようにする。

以下の手段を用いて，色が識別できなくても情報が伝わるかどうかを確認するとよい。

• グレースケールに変換してみる
• モノクロ印刷してみる
• 音声ブラウザあるいはスクリーンリーダーで読み上げてみる

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

1) 文字の色だけでなくテキストの補足情報を提供する

たとえば，文字色で情報を示す場合は，あわせてテキストでも情報を提供する。

例1

<p class="required">名前<em>（必須）</em></p>
ｐ.required { color : red }

2) グラフでは凡例だけでなく引込み線を用いて情報を提供する

例1

JIS X 8341-3:2004 規格書P13より引用。

目次へ [1]

5.5 b 形・位置のみに依存する情報提示

ウェブコンテンツの内容を理解・操作するのに必要な情報は，形又は位置だけに依存して提供してはならない。

(JIS X8341-3: 5.5 b)

背景と問題点

　表組みなどで用いられる「○」「△」「×」といった記号文字は，視覚的により分かりやすく情報を伝えることができるという点ではとても有用である。

しかし，これらの記号文字は音声ブラウザやスクリーンリーダーでは意図したとおりに読み上げられないことがあるため，音声読み上げでは情報が伝わらないことがある。

また，「左のボタン」「右のボタン」というように，位置だけで示した情報も音声読み上げでは伝わらないため，利用者は画面上の位置が把握できず，操作することができない。

関連する要素

（なし）

関連項目

（なし）

技術解説

「○」「△」「×」などの記号文字で情報を提供する場合は，音声読み上げでもその情報が正しく読み上げられるように，テキストによる補足情報を提供する，あるいは記号文字を画像にしてその意味を代替テキストで提供する。

　また，「左のボタン」「右のボタン」だけではなく，「左の送信ボタン」，「右のキャンセルボタン」というように，位置が把握できなくてもどのボタンかが伝わるようにしなければならない。その際，ボタン自体にも「送信」「キャンセル」といったラベルをつけておく必要がある。

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

1) 「○」「△」「×」などの記号文字による情報にはテキストによる補足情報を提供する。

「○」「△」「×」「－」などの記号文字の直後に，テキストでその記号文字が伝えている意味を補足する。

例1

「○（あり）」，「×（なし）」

「○（対応）」，「－（非対応）」

「○（開館日）」，「△（午前のみ開館）」，「×（休館日）」

2) 「○」「△」「×」などの記号文字を画像にして，代替テキストによる補足情報を提供する。

「○」「△」「×」「－」などの記号文字を画像にして，それぞれの代替テキストにその記号文字が伝えている意味を記述する。

例1

<img src="maru.gif" width="20" height="20" alt="あり">

<img src="batsu.gif" width="20" height="20" alt="なし">

3) 位置が把握できなくても操作できるように補足情報を提供する。

ボタン自体に「送信」「キャンセル」といったそのボタンの機能を示すラベルをつけ，「左のボタン」「右のボタン」ではなく，「左の送信ボタン」「右のキャンセルボタン」あるいは「送信ボタン」「キャンセルボタン」と表現する。

目次へ [1]

5.5.c 背景色と前景色のコントラストと配色

画像などの背景色と前景色とには，十分なコントラストを取り，識別しやすい配色にすることが望ましい。

(JIS X8341-3: 5.5 c)

背景と問題点

文字の色とその背景の色，画像で表現された文字や記号，アイコンなどは背景色と文字などの前景色の間に十分なコントラストと配色における配慮がないと，見づらい，見えない利用者がいる。たとえば，弱視の人の場合，色のコントラストが十分でないと，色の差を識別することが困難で，表示された情報を確認できないことがある。また，色覚障害のある人には，特定の色の識別が困難な場合がある。人間の色覚には，3色（赤，緑，青）の感覚受容体があり，それらの個々の色感覚が弱い場合と，まったく感覚がない場合がある。最も代表的なものは，第1色覚（赤）と第２色覚（緑）の障害である。

関連する要素

img，object，font

スタイルシートの色に関するプロパティすべて

関連項目

5.2.b 5.5.a 5.6c

技術解説

この要件が求めているのは「コントラストに対する配慮」と「色の組み合わせに対する配慮」の2点である。コントラストへの配慮は，高齢者や弱視の人に必要であると共に，色覚障害のある人でもコントラストが取れている色の組み合わせならば，識別可能になる。また，色の組み合わせに関する配慮は，一般には色覚障害の人のための配慮であるが，同時に色の効果的な使用によって識別性を高めることは一般の利用者のユーザビリティを高めるためにも有効である。具体的には，文字と背景色あるいは背景画像の関係，アイコンや図記号などと背景との関係，画像やオブジェクトなどの内部における表現したい文字や記号などと背景との関係に配慮が必要である。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1）画像のコントラストと色差を確保する。

　文字やアイコン，その他の図記号などを含む画像では，5.6c のソリューション1，2, 3と同様にコントラストと色差に配慮する必要がある。

2）コントラストや色差の確保が難しいと思われる場合には，縁取りなどを利用する。

　画像などで，コントラストや色差を確保できないときは，縁取りを利用することによって擬似的に背景色とのコントラストと色差を確保すると見やすくなる。

例1 画像で文字を見せる場合，背景を透明にすると，背景色をユーザが変えた時に，見にくくなる場合がある。

例えば，黒文字の画像の背景を透明にした時，ユーザが自分の設定で黒背景にすると，黒地に黒文字になってしまう。そのため，画像で文字等を表示する場合は，透明の背景にはしないか，文字に縁取りを施すこと。

目次へ [1]

5.6 文字

5.6.a 文字サイズの変更

文字のサイズ及びフォントは，必要に応じ利用者が変更できるようにしなくてはならない。

(JIS X8341-3: 5.6 a)

背景と問題点

　画面上の文字は，視力に問題が無くても読みづらいものである。特に，小さなサイズの文字や，読みづらい種類のフォントが用いられていると，弱視のユーザや，加齢に伴い視力低下と遠視（老眼）が同時に進行して視力の衰えたユーザには読みづらい。低下した視力を補うために画面に顔を近づけると遠視のために焦点の調節が出来ず文字がぼやけてしまう。焦点を合わせるために画面から顔を遠ざけると今度は文字が小さすぎて読めなくなってしまう。そのような場合に，ウェブページ内で提供されている機能で，または，ウェブブラウザの表示文字の拡大，縮小機能などを使って文字を大きく設定できる必要がある。この時，ウェブブラウザによる変更ができるように作成されていないと，この拡大，縮小機能を利用できないという問題が発生する。なお，この要件では，フォントサイズや種類の指定について述べているが，指定することを推奨しておらず，あくまでも，指定する場合に配慮すべき事項について述べている。

図 マイクロソフト社インターネットエクスプローラの文字サイズ変更メニュー

また，この文字の拡大機能を使っても一定程度しか文字を大きくできないため，それでも文字を読むことができない利用者は，拡大鏡(WindowsがOSで提供するユーザー補助機能)等の支援技術を用いている。画面を拡大するソフトウェアでは，画面を数倍から十数倍に拡大して表示することが可能であるが，画面をビットマップとして拡大するため，元の文字サイズが小さすぎると拡大した後も文字がつぶれて読みづらい。なお拡大時の横スクロールは，ユーザに次の行がどこかを見失わせることがあるため，なるべく横スクロールが発生しないように注意が必要である。

また，デフォルトのスタイルシートを利用せず，利用者が自ら作成したユーザスタイルシートを用いて表示を見やすくすることも可能だが，スタイルシートの切り替えは操作が煩雑でウェブページの仕組みにある程度精通していないと使えないため，ユーザスタイルシートの使用を前提にしたデザインを行うべきではない。

関連する要素

font, font-size, font-weight

関連項目

5.1.a 5.2.b

技術解説

この要件を実現する際には，5.1 a) 仕様に関する準拠，5.2 b) 構造と表示スタイルの分離，にも注意を払う必要がある。すなわち，HTMLだけで文字のサイズやフォントを変更する場合と，CSSを用いる場合とで実現方法と，利用者に対する影響が異なる点に注意を払う必要がある。一般論として，フォントを指定する要素，あるいはCSSのプロパティでは相対値である“em”，“%”を用いる。

ソリューション

ソリューション 次の方法を選択して，あるいは組み合わせて用いる。

1) font要素でサイズを指定したい場合には，相対値を使用する

font要素は，非推奨の要素であり本来使用しないほうがよい。しかし，font要素を使わざるを得ない場合には，絶対値指定せず，basefontからの相対値で指定するとよい。またこの場合には，basefont要素で基準となるフォントサイズを指定しないほうがよい。なお，basefontの初期値は3であり，サイズ指定できるのは1～7の範囲であることに注意する。

例）font 要素で文字を大きくする

文字のサイズを「中」にした状態

文字のサイズを「最大」にした状態

ソース

<ul>
<li><font size="-2">一番小さな文字(&lt;font size="-2")&gt; </font></li>
<li><font size="-1">少し小さな文字(&lt;font size="-1")&gt; </font></li>
<li>通常の文字</li>
<li><font size="+1">少し大きな文字(&lt;font size="+1")&gt; </font></li>
<li><font size="+2">大きな文字(&lt;font size="+2")&gt; </font></li>
<li><font size="+3">もっと大きな文字(&lt;font size="+3")&gt; </font></li>
<li><font size="+4">いちばん大きな文字(&lt;font size="+4")&gt; </font></li>
</ul>

2b) スタイルシートを使用してサイズを指定する場合には，相対値を使用する

スタイルシートを用いて文字のサイズを指定する場合には，font-sizeまたはfontプロパティで相対値で指定する。絶対値で指定する場合には，文字サイズを指定する次のキーワードを用いる。

xx-small，x-small，small，medium，large，x-large，xx-large

これらのキーワードはCSSの絶対指定として位置づけられているが，ウェブブラウザで文字を拡大縮小することが可能である。mediumを基準として，一般的にはCSS1では順に約1.5倍で変化し，CSS2では，約1.2倍で変化するが，この変化の倍率はウェブブラウザによって異なる。ただし，xx-small，x-smallは非常に小さいフォントで表示されることがあるので，使用する際には注意が必要である。

smallなどのキーワードは，ブラウザにより標準の大きさが異なるため，個別のCSSを作るなどの配慮が必要な場合がある。

絶対値指定では，12pt，20pxなどの形式で数値+単位での記述も許されているが，この方式でサイズを指定すると，利用者はフォントサイズを変更できないウェブブラウザがあり，問題の原因となる。

一方，相対値指定では，以下の方法で基準となるフォントから大きさを指定することが可能である。

例）パーセントで指定する

font-size: 150%;

親要素のフォントサイズを基準として，150%（高さ，及び幅を1.5倍）にする。

例）emで指定する

font-size: 2em;

親要素のフォントサイズを基準として，2倍（面積は4倍）にする。ウェブブラウザにより，ウェブブラウザで文字サイズを変えた時に，emで指定した時は，パーセントで指定した時よりも変化の割合が大きい場合がある。

また，ex（文字“x”を基準としたサイズ指定）も相対地指定であるが，ウェブブラウザによる対応が一様でないため使わないほうがよい。

なお，pt(ポイント)，mm（ミリメートル），cm（センチメートル），pc（パイカ），in（インチ），px（ピクセル）は絶対指定となるため使用しない。

例）larger，smallerで指定する

font-size: smaller;

親要素がmediumになっているときには，largerを指定するとlargeに，smallerを指定するとsmallを指定したのと同じになる。

以下の表が，この要件を満たすために用いることができるプロパティの記述法である。

プロパティの記述法

プロパティ値の指定方法

	プロパティ値	使用する際の注意点
用いてもよいもの	x-small，small，medium，large，x-large，xx-large	xx-smallは文字が小さくなりすぎ利可能性があるので避けたほうがよい。
	smaller，larger	smallerを用いる場合には，フォントが小さくなり過ぎないように注意する。
	“%”，“em”による指定	指定した文字が小さくなり過ぎないように注意する。
用いないほうがよいもの	“pt”，“mm”，“cm”，“pc”，“in”，“px”による指定

例 フォントサイズの指定例（ブラウザの文字の指定は，それぞれ「中」と「標準」）

xx-smallやx-smallなどの指定

　

mediumなどの指定

　

xx-largeやx-largeなどの指定

　

例2) テキスト入力エリアのようなフォームのコントロール要素は，ブラウザなどにより文字の大きさを変えた時に，一緒に大きさが変わるようにする。

input.text           { font-size: 100%; }
input.textimeon       { font-size: 100%; }
input.textimeoff      { font-size: 100%; }
input.textimeauto     { font-size: 100%; }
input.password        { font-size: 100%; }
input.checkbox        { width: 1em; height: 1em; font-size: 1em; }
input.radio           { width: 1em; height: 1em; font-size: 1em; }
input.submit          { font-size: 100%; }
input.reset           { font-size: 100%; }
input.button          { font-size: 100%; }
textarea.accss        { font-size: 100%; }
textarea.accssimeon   { font-size: 100%; }
textarea.accssimeoff  { font-size: 100%; }
textarea.accssimeauto { font-size: 100%; }
button.accss          { font-size: 100%; }
select.accss          { font-size: 100%; }

3）ページ内でフォント関係の設定を変更できるようにする

　ブラウザやコントロールパネル等での文字サイズの調節機能を知らないユーザのために，Webページの中に文字サイズを調節できるような機能を文字リンクやボタンなどで提供する。初心者等のユーザを想定した場合，いかに操作が容易で分かりやすくアクセシブルな機能を提供するか自体も重要である。

4）文字を可能な限り画像化しない

　文字を画像化すると，文字サイズを利用者が変更できなくなる。文字を画像化する変わりに，スタイルシートを使って表示したほうがよい。なお，ロゴマークなどその形に意味があるものに関しては画像化することはやむをえないが，その場合にも，文字サイズを出来るだけ大きめにする，書体を読みやすい書体を用いる，そして背景色とのコントラストを十分に確保するなどして，見やすさ読みやすさに十分配慮する必要がある。

注意事項

フォントのサイズを絶対値で指定していても表示サイズを変更可能なウェブブラウザや，表示最小フォントサイズを指定できるブラウザもある。今後，絶対値でフォントサイズが指定されていても利用者が自由なサイズで表示できる機能が一般になってくると，この要件はそのような機能を有しないウェブブラウザの互換性のためだけのものになると思われる。

スタイルシートで，文字サイズの指定を継承によって重ねると，コントロールパネルのユーザ補助でハイコントラスト設定してブラウザで表示した時に，拡大率が大きくなる事がある。例えばテキストサイズ100%の要素をテキストサイズ100%の要素に入れると200%になることがある。

目次へ [1]

5.6.b フォントの読みやすさ

フォントを指定するとき，サイズ及び書体を考慮し読みやすいフォントを指定することが望ましい。

(JIS X8341-3: 5.6 b)

背景と問題点

　5.6 a) の要件により利用者がフォントを変更できるようになっていても，すべての利用者がその変更操作できるとは限らない。たとえば，ウェブブラウザの操作が不慣れな高齢者は，画面がよく見えない上に，文字を大きくする操作もできないということが考えられる。したがって，最初から読みやすいフォントのサイズと種類が使われているほうがよい。しかし，この要件はフォントを指定するときに配慮すべき事項を定めているだけなので，積極的にフォントを指定することを求めているわけではない点に注意が必要である。

関連する要素

font, font-family, font-style

関連項目

（なし）

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) フォントサイズを小さくしすぎない

スタイルシートのfont-size，fontプロパティでxx-small，x-smallを用いない。また，0.8emあるいは80%以下のサイズを指定しない。

2) フォントはなるべく指定しない。もし指定するときは，フォントの種類は，スタイルシートで指定し，できるだけゴシック系のフォントを選択する。

フォントは，ユーザが自分でウェブブラウザなどの設定を使って指定できるように，なるべく指定はしない。フォントの種類を指定する場合には，スタイルシートで指定し，font要素で指定しない。font要素で指定すると，利用者はユーザスタイルシートを用いてフォントを変えることができなくなる。なお，スクリーンの画面表示には，ゴシック体が見やすいという意見がある。ゴシック系の日本語フォントには，マイクロソフトウィンドウズに搭載された「MS ゴシック」「MS Pゴシック」，マッキントッシュに搭載された「Osaka」などがある。欧文では，「sans-serif」がよく用いられる。一方，印刷用のためのフォントは，明朝体が見やすいという意見があるので，スタイルをメディアによって変える方法も有効である。

例 ゴシック系のフォントを指定する

font-family: "MS Pゴシック", Osaka, sans-serif;

3) フォントスタイル等を制御する場合には，見易さに配慮する。

スタイルシートのfont-style，font-stretch，font-size-adjust，font-weight，line-height，text-decoration，letter-spacing，word-spacing，text-shadowプロパティなどを用いてフォントのスタイルを調整したり，文字間や行間を制御したりする場合には，見易さへの配慮が必要である。

注意事項

フォントの大きさ，種類，書体に関する読みやすさは，色や利用者の使用しているコンピュータのモニタや照明環境などに左右されるため，明確な数値で評価することは難しい。したがって，この要件を満たすための最もよい方法は，ユーザーのブラウザでの設定を最優先するためにフォントに関する指定をしないことである。しかし，一般論として小さな文字は読みづらく，太い文字，大きな字は読みやすい。また，明朝体よりもゴシック体のほうが読みやすいことが知られている。何らかの指定をする際には，これらの点を念頭に入れる必要がある。

目次へ [1]

5.6.c フォント色

フォントの色には，背景色などを考慮し見やすい色を指定することが望ましい。

(JIS X8341-3: 5.6 b)

背景と問題点

　フォントの色と背景色の組み合わせによっては，文字が読みづらくなることがある。たとえば，ある種の色覚障害のある人には，赤と緑の区別が難しい。また，一般的に白内障や加齢による視力の低下のある人，弱視の人は，コントラストの低い文字は読みづらい。

関連する要素

color, background-color, background, background-image

関連項目

5.5c

技術解説

これらの問題に対処するには，色の組み合わせについての配慮が必要である。文字色と背景色の間に十分なコントラストをとることで，見やすくすることができる。なお，この問題に対応する最もよい方法は，フォントの色を指定せず，背景色も指定しないことである。当然ながら，画像化したテキストがない場合，フォントの色，背景色を指定していない場合には，この要件を配慮する必要がない。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1）文字の色を指定するときは，その文字が含まれる親要素の背景色とのコントラストを十分にとる。

　コントラストを十分にとるということは，グレースケールで表示あるいは印刷しても識別可能になっているということを意味する。RGBで表現された色をYIQ色空間に変換したY値（輝度）を基準としてその差を求めるとことで，ディスプレイに表示される色の組み合わせの近似的な輝度コントラスト比を求めることができる。RBGとYIQの変換は，一般に次式で可能である。

RGBの値からYIQ表色系を求める式
Y= 0.299 R +0.587 G +0.114 B （輝度（光度））
I = 0.596 R -0.274 G -0.322 B （肌色を含むオレンジからシアンにかけての色調）
Q = 0.211 R -0.522 G +0.311 B （それ以外の色）

注意：W3Cでは，コントラストについて125以上と定めているが，変更される可能性がある。
http://www.w3.org/TR/AERT#color-contrast

2）文字の色を指定するときは，その文字が含まれる親要素の背景色との色差を十分にとる。

　色差とは，次式で表される値で，色差を十分に確保することによって，より見やすい色の組み合わせが実現できる。

(maximum (R値1, R値2) - minimum (R値1, R値2)) + (maximum (G値1, G値2) - minimum (G値1, G値2)) + (maximum (B値1, B値2) - minimum (B値1, B値2))

注意：W3Cでは，色差について500以上と定めているが，変更されるかもしれない。
http://www.w3.org/TR/AERT#color-contrast

3) 背景画像は十分な配慮のものに使用する。

　html要素やその他の要素の背景に画像を用いると，そこに表示される他の画像や文字の色とのコントラストや色差をすべて検討しなければならなくなるため，背景画像を使用しないほうがより見やすいページを容易に作成できる。また，利用者がユーザスタイルシートを使用したり，スタイルシートを利用せずに表示した場合，あるいはOSのハイコントラスト表示を利用した場合に，利用者の色の指定と背景画像の関係が似通っていると，コントラストを確保できない。したがって，背景画像は，なるべく使用しないほうがよい。

4) スタイルシートを外した状態でも色の組み合わせ，コントラストに問題がないかどうかを評価する。

5) OSの機能や支援技術の提供する「ハイコントラスト表示」等を用いた場合にも，色の組み合わせ，コントラストを評価する

注意事項

目次へ [1]

5.7 音

5.7.a 音の自動再生の禁止

自動的に音を再生しないことが望ましい。自動的に再生する場合には，再生していることを明示しなければならない。

(JIS X8341-3: 5.7 a)

背景と問題点

ページを開いたときに自動的に音（音楽等）が流れると，意図しない出来事にユーザーが驚いてしまうことがある。たとえば，音声ブラウザを利用している場合，読み上げの音声が音（音楽など）と重なって聞き取りづらくなる可能性がある。音量を下げようとすれば，本文の読み上げの音量も下がってしまい，そのページの閲覧が事実上できなくなってしまう。あるいは，静かなオフィスや図書館などでページを利用しなければいけないことも考えられる。また，聴覚障害の利用者の場合，音が出ていることに気づかず，音が再生され続けてしまい，周囲に迷惑をかけていることに気づかないかもしれない。このように，音声読み上げソフトを利用している場合や，静かな場所や静かにしないといけない場所でWeb閲覧をしている場合などに，ページを開くのと同時に自動的に音が再生が開始されると使いづらい。

関連する要素

bgsound, object, embed

関連項目

5.4 c 音声の代替

技術解説

ページを開いたときに自動的に音声を再生するような設定は基本的にしないことが大切である。自動再生ではなく，再生ボタンを押すなど，ユーザーの操作で再生を開始すべきである。

どうしても，ページを開いたときに自動再生する必要がある場合は，そのページのわかりやすいところに，現在音が再生されていることを表示しなければならない。仮に，自動再生されているページを開く1つ前のページに，自動再生されるページであることを明示されていたとしても，他の場所から直接その自動再生されるページにリンクされていたり，ブックマークに登録されていたりする場合のことも考慮し，現在音が再生されていることを表示しなければならない。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 音の自動再生がどうしても必要か再度検討する。

音声読み上げソフトの読み上げがページで自動再生される音声と重なってしまうという問題以外に，音の自動再生が許容されるか否かは，利用者の特性やページの利用する時間帯，利用する場所によって異なると考えられる。音声出力を利用できない利用者もいるかもしれない，あるいは，静かなオフィスや図書館などでページを利用しなければいけないことも考えられる。そのようなことも考慮に入れて，それでもなお，音の自動再生が必要なのかどうか，再度検討する。

2) ページの先頭部分やタイトルの中に，音が自動再生されていることをわかりやすく表示する。

音を自動再生する場合は，そのページのわかりやすいところ，ページ先頭やタイトル部分に，現在音が再生されていることを表示する。または，音楽を再生するプラグインのコントローラーを表示することで，音の再生を伝えることも可能と思われる。

タイトルや本文中にテキストで表示する場合：

「このページは音楽が自動的に再生されます」

「音楽自動再生中」

タイトルや本文中にテキストで表示する場合：

「このページは音楽が自動的に再生されます」

「音楽自動再生中」

画像やアイコンで示す場合：

<img src="aotosound.gif" alt="このページは音楽が自動的に再生されます">

<img src="aotosound.gif" alt="音楽自動再生中">

3) bgsound 要素は利用せず object 要素および embed 要素を利用する。

bgsoundは利用者が音の制御をできない。そもそもbgsoundは，Internet Explorerの独自の拡張属性であり，規格外の要素であるため使用しないこと。そのため，音を再生する場合はobject要素を利用する。ただしobject要素の未対応のブラウザ，あるいは不完全なブラウザが多いことに配慮しobject要素と同時にembed要素も記述するほうがよい。

例1) Windows Media Playerで再生する例

<object
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<param name="filename" value="sound.mid">
<embed src="sound.mid">
<noembed>
Windows Media Playerでは音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.mid)</a><br>
</noembed>
</object>

例2) Real Playerで再生する例

<object
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height="300" width="300">
<param name="src" value="sound.rm">
<embed src="sound.rm" height="300" width="300">
<noembed>
Real Playerでは音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.mid)</a><br>
</noembed>
</object>

4) 自動再生しないように明示的に設定する。

環境によっては自動的に再生が開始されてしまう場合があるので，明示的に自動再生をしないように設定する。

例1) Windows Media Playerの場合

<object
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<param name="autoStart" value="false">
<param name="filename" value="sound.mid">
<param name="loop" value="false">
<embed src="sound.mid" autostart="false" hidden="false" loop="false">
<noembed>
Windows Media Playerでは音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.mid)</a><br>
</noembed>
</object>

例2) Real Playerの場合

<object
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height="300" width="300">
<param name="src" value="sound.rm">
<param name="autostart" value="flase">
<param name="loop" value="false">
<embed src="sound.rm" autostart="false" loop="false" height="300" width="300">
<noembed>
Real Playerでは音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.rm">音声ファイル (sound.rm)</a><br>
</noembed>
</object>

目次へ [1]

5.7.b 利用者による音量調整

音は，利用者が出力を制御できることが望ましい。

(JIS X8341-3: 5.7 b)

背景と問題点

音声を再生する場合，利用者の特性や利用している場所によって，音量を制御したい場合がある。音声が聞こえづらいので大きくしたいとか，逆に音声が大きすぎる場合には小さくしたいとか，周囲が静かな場所では音は小さめにしたい，会議中なので音声を消したい・・など。そのようなといった場合に，再生，停止（可能なら一時停止），音量調整をユーザーが，操作できるようにしたいと思われる。

関連する要素

object, embed

関連項目

5.1 b アクセシブルなオブジェクトの使用

5.4 c 音声の代替

5.4 e オブジェクトの代替形式

技術解説

音を鳴らす場合，object要素またはembed要素を利用して記述する。そのとき，再生の停止や一時停止，音量調節などためのコントロールパネルが表示できるプラグインを選択するべきである。また，意図的にコントロールパネル隠すようなことをしないことが重要である。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) bgsound要素は利用せずobject要素およびembed要素を利用する。

bgsoundは，Internet Explorerの独自の拡張属性のため，Internet Explorer 以外のブラウザでは音が再生できない。さらにbgsoundは利用者が音の制御をできなくする恐れがあるため，音を再生する場合はobject要素を利用する。ただしobject要素の未対応のブラウザ，あるいは，不完全なブラウザが多いことに配慮しobject要素と同時に embed要素も記述するほうがよい。

2) プラグインを指定する場合は，ユーザーがWebページで出力制御が可能な機能のあるプラグインを選択する。

再生の停止や一時停止，音量調節などのためのコントロールパネルが表示できるプラグインを選択する。

3)コントローラーなどは，非表示設定はせずに表示するようにする。非表示にする場合は最低限，音を停止または再生する機能を提供する。

例1) Windows Media Playerの場合

<object
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<param name="autoStart" value="false">
<param name="filename" value="sound.mid">
<param name="loop" value="false">
<param name=" " value="false">
<param name="hidden" value="false">
<embed src="sound.mid" autostart="false" hidden="false" loop="false">
<noembed>
Windows Media Playerでの音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.mid)</a><br>
</noembed>
</object>

例2) Windows Media PlayerとJavaScriptを利用して再生と停止リンクを作成する場合

<script type="text/javascript">
function Play(){
    MediaPlayer.play();
}
function Stop(){
    MediaPlayer.stop();
}
</script>
<object id="MediaPlayer"
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<param name="autoStart" value="true">
<param name="filename" value="sound.mid">
<param name="loop" value="false">
<param name="hidden" value="false">
<embed src="kid1.mid" autostart="false" hidden="true" loop="false">
<noembed>
Windows Media Playerでの音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.mid)</a><br>
</noembed>
</object>
<a href="javascript:Play()">音楽再生</A><br>
<a href="javascript:Stop()">音楽停止</A><br>

例3) Real Playerの場合

<object
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height="300" width="300">
<param name="src" value="sound rm">
<param name="autostart" value="flase">
<param name="loop" value="false">
<embed src="sound.rm" autostart="false" loop="false" height="300" width="300">
<param name ="controls" value="all">
<noembed>
Real Playerでの音声が再生できませんでした。<br>
下のリンクで音声ファイルを直接開くことができます。<br>
<a href="sound.mid">音声ファイル (sound.rm)</a><br>
</noembed>
</object>

目次へ [1]

5.8 速度

5.8 a 変化する画像・テキスト

変化又は移動する画像又はテキストは，その速度，色彩・輝度の変化などに注意して作成することが望ましい。

(JIS X8341-3: 5.8 a)

背景と問題点

スクリプトやアニメーションなどを用いて画像や文字を変化させたり，スクロールする表示を行うと，それを十分に理解できない人，変化が早すぎて戸惑ってしまう高齢者など，認知に障害のある利用者が理解できない可能性がある。弱視などで画面を拡大して利用する場合にも，スクロールする文字を読むことができないといった問題が発生する。背景色および文字色が変化する際には，背景と文字との輝度の変化が大きいほど目への負担が大きくなり，また点滅速度が早いと内容を認識できないことがある。

また，永続的に繰り返される変化，点滅，移動といった動きは，利用者の注意を向けさせる効果があるため，利用者のコンテンツへの集中力を損なうことがある点に注意する必要がある。

関連する要素

img, object, script

関連項目

5.8 b 5.3 e 5.9 f

技術解説

バナー広告などのアニメーション画像では，背景の変化はなるべく緩やかにして，極端な色の変化を避ける。複数の画像をアニメーションで表示する場合，明度，彩度および色相が大きく異なる画像を交互に繰り返し表示しないほうがよい。文字を変化または移動させる場合は，利用者が認識しやすいようにそのコントラスト輝度の変化および速度を緩やかにするとよい。また，点滅させる際は，認識しやすいようにその速度を遅くするなどの配慮も必要である。

また，スクロールや点滅といった動きのある表現は，利用者のコンテンツの他の部分への集中力をそぐため，できるかぎり避けるべきである。どうしてもこういった表現を用いる際には，点滅の場合には一定時間経過後には静止させるか利用者が停止できるようにする。スクロールは避けるなどの配慮が望まれる。

なお，文字をスクロールさせるmarquee要素，文字を点滅させるblink要素は，いずれもW3Cの勧告（仕様）にはない規格外要素であり，これらを用いるべきではない。

一般に人の読みの能力に関しては，適切な条件下で1回の視線の停留で読めるのは漢字かな混じり文で3.5文字程度である。停留は平均して300m秒程度必要でなおかつ眼球の移動（跳躍運動）に数10m秒必要なことから，静止した文章でも1秒間に読める文字数は10文字程度となる。実際には，変化したり移動したりする文字では，読みの速度がさらに低下すると考えられるので，1秒間で5文字程度と考えることができる。したがって，10文字程度の表示が変化する場合には，最低でも2秒間同じ内容を表示している必要がある。また，読みや注意能力の低下した高齢者の場合には，これよりもさらに長い時間が必要と考えられる。文字を移動する場合には，この読みの速度の問題に加え，次に視線を移動する位置が見えていないと読みずらい。したがって，少なくとも一度に10文字以上表示している必要があると考えられる。また，弱視者の場合には，これよりもさらに十分な時間を必要とするためスクロールしたり点滅したりする文字は使用しないようにしたほうがよいと考えられる。

以上の点から，時間的に変化する表現は可能なら避けたほうがよい。しかし，一方でイラストを用いたアニメーションはコンテンツの理解しやすさを向上させたり，大事な箇所に注意を向けさせるのに有効であり，ここで指摘した点に注意を払いつつ控えめに使用するのがよい。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) アニメーションやスクロールする文字などの，)時間的に動きのある表現を使わない

2) 文字や画像などの色や輝度を時間的に変化させて表示する場合には，画面ごとの明度，彩度および色相の変化を小さくする。

例1　文字の明度の変化が少ない画面例

繰り返し表示される。

文字の明度の変化が大きい画面例

繰り返し表示される。

3) 文字や画像化された文字をスクロールして表示する場合は，そのコントラスト輝度の変化および速度を緩やかにする。

4) スクロールさせる場合は，その速度を遅くして，可能なら利用者がスクロールを一時停止できるようにする。

5) 点滅させる場合は，その速度を遅くして，可能なら利用者が点滅を一時停止できるようにする。

目次へ [1]

5.8 b 早い周期の点滅禁止

早い周期での画面の点滅を避けなければならない。

(JIS X8341-3: 5.8 b)

背景と問題点

光の明滅によって光感受性発作（光源性てんかん）を誘発することがある。20Hzの時間周波数（1秒間に20回）にピークがあり，特に赤と青とを交互に点滅させると，光感受性発作を誘発しやすい。利用者の安全性に関することなので最大限の配慮が必要である。

関連する要素

img，object

関連項目

（なし）

技術解説　

画面全体を明滅させると，光感受性発作を誘発することがあるので使用しない。どうしても明滅させたい場合は，画面全体を1秒間に2回以上明滅させないようにして，特に，彩度の高い赤の明滅およびコントラストの強い画面の反転を避けなければならない。

また，画面内で明滅する部分の領域は，できるだけ小さい範囲に留めるよう配慮するのがよい。しかし，たとえ画面の一部だとしても，中には弱視の利用者のように画面を拡大していることもあるので，できるかぎり画面の明滅は避けるべきである。

また，画面全体を占めるような，しま，渦巻き，同心円といった規則的なパターン模様も画面の明滅の場合と同様の危険があるため，そういったページデザインも避けるべきである。

なお，W3Cでは，この明滅に関する具体的な基準値に関して，「ITC Guidance Note for Licensees on Flashing Images and Regular Patterns in Television (http://www.ofcom.org.uk/codes_guidelines/broadcasting/tv/vrs_code_notes/flsh_imgs/?a=87101)」 で定められている基準をWCAG 2.0で採用することを検討している。

ソリューション

次の方法を選択して，あるいは組み合わせて用いる。

1) 画面全体を1秒間に2回以上明滅させない。特に彩度の高い赤の明滅およびコントラストの強い画面の反転は避ける。

W3CのWCAG 1.0では，チェックポイント7.1で「１秒間に20回の点滅をピークとして，1秒間に4～59回(Hz)の点滅」，米国のリハビリテーション法508条では，「2～55ヘルツの周波数」（1秒間に2～55回）の点滅，を避けるようにとそれぞれ定めている。

2) 画面の一部を明滅させるときは，画面の1/4以上を占める面積での明滅は避ける。

例1　画面の明滅（図31参照）

3) 画面全体を占めるような，しま，渦巻き，同心円といった規則的なパターン模様を使用しない。

画面の明滅と同様の危険性があるため，このような表現は避ける。

例1 画面全体を占めるような，しま，渦巻き，同心円などの規則的なパターン模様の使用を避ける（図32参照）。

目次へ [1]

5.9 言語

5.9.a 自然言語の指定

言語が指定できるときは，自然言語に対応した言語コードを記述しなければならない。

(JIS X8341-3: 5.9 a)

背景と問題点

　自然言語の指定は，音声ブラウザが正しい言語辞書を用いて読み上げるために必要である。現在日本国内で使われている主な音声ブラウザやスクリーンリーダーは日本語にしか対応しないものが主流であるが，複数の言語を正しく識別できる環境が整備された際には，言語コードの指定によって複数の言語を用いて作成されたページを正しく読み上げることができるようになる。また，一般のウェブブラウザでも言語コードの指定が正しくされていないと，適切なフォントを用いて正しく表示できないことがある点に注意する。

関連する要素

html，span

技術解説

ウェブブラウザが表示する際に使用する言語は，次の順序で解釈され表示される。
1) 要素でlang属性で指定された言語コード
2) その要素の親になる要素において，lang属性で指定された言語コード
3) HTTPのContent-Languageヘッダで指定された言語コード
4) ウェブブラウザのデフォルトの言語コード
したがって，HTMLでは html要素で言語コードを指定しておくのが最もよい方法である。

ソリューション

1) html要素にはlang属性でデフォルトの言語を指定する。XHTMLでは，lang属性に加えてxml:lang属性を用いてデフォルトの言語を指定する。

例1

<html lang="ja">

例2

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

2) HTTPのContent-Languageヘッダにおける言語指定がコンテンツのデフォルト言語と一致すること。 このヘッダは，ウェブサーバーの設定により指定する。

3) HTML文書の途中で言語を切り替えたいときには，lang属性を使って指定する。言語属性を指定できる要素がすでにある場合は，それを使用し，それ以外では，span, div要素を用いる。

例1

<span lang="en">English section of the document</span>

例2

<p lang="en">This paragraph is written in English</p>

注意事項

なし

目次へ [1]

5.9.b 外国語の多用禁止

日本語のページでは，想定する利用者にとって理解しづらいと考えられる外国語は，多用しないことが望ましい。使用するときは，初めて記載する時に，解説しなければならない。

(JIS X8341-3: 5.9 b)

背景と問題点

　高齢者や認知障害のある人を含め外国語を理解できない，または日本語の外来語や外国語に習熟していない人にとって，外国語が文中などに多用されると理解が困難になる。

関連する要素

なし

技術解説

日本語のコンテンツの場合で，外国語を用いなくても情報が伝えられる場合には，日本語で記述すれば必要な情報を伝えることができるようになる。また，外国語を使わざるを得ない場合でも，その解説を提供することで内容の理解を促進することができる。規格本文の「想定する利用者にとって理解しづらいと考えられる外国語」のくだりは，あらゆるコンテンツで外国語の禁止を求めているわけではない。たとえば，学術研究に関する文書や外国語教育に関するもの，またあらかじめ外国語を十分に理解できると思われる利用者を対象として想定したコンテンツでは，外国語の使用を妨げない。

ソリューション

1) 想定する利用者が幅広くあらゆる利用者を対象にしたいときは，外国語の使用を最低限にし，ページの最初に出現した箇所でその単語の意味あるいは説明を提供する。文章で用いる場合には，その日本語訳を併記するか，日本語訳へのリンクを提供する。

例1

<span lang="en">foreign language</span> (外国語)

2) 利用者が一定の外国語に関する知識を持っていると想定される場合は，そのレベルに合わせて理解の困難な言葉に限って説明を提供する。

レベルに合わせた言葉

中学校で学ぶ英単語に限定する，あるいはBasic Englishの語彙だけを用いる。

注意事項

（なし）

目次へ [1]

5.9 c省略語，専門用語，流行語，俗語の多用禁止

省略語，専門用語，流行語，俗語などの想定する利用者にとって理解しにくいと考えられる用語は，多用しないことが望ましい。使用するときは，初めて記載されるときに定義しなければならない。

(JIS X8341-3: 5.9 c)

背景と問題点

省略語や専門用語などはそれを理解できない人がいるだけでなく，音声ブラウザなどでも正しく読み上げることができず理解できないことがある。

関連する要素

abbr，acronym，th，td

技術解説

省略語，専門用語，流行語，俗語などを多用すると，利用者の記憶に負担をかけ文書を理解しづらくなる。また，これらの言葉はスクリーンリーダーで正しく読み上げられない可能性がある。

規格本文の「想定する利用者にとって理解しづらいと考えられる用語」のくだりは，あらゆるコンテンツでこれらの用語の使用を禁止しているわけではないことを意図している。たとえば，学術研究に関する文書や，あらかじめその用語を十分に理解できると思われる利用者を対象として想定したコンテンツでは，それらの用語の使用を妨げない。

ソリューション

1) 省略語が最初に出現した箇所で，abbr要素またはacronym要素によって正式な名称等を明示する。

例1

<abbr title="Japanese Standards Association，日本規格協会">JSA</abbr>のサービスを利用する

2) tableのセルで省略語を定義する場合には，abbr属性で指定する。

abbr属性を指定できる要素は，th，tdのみである点に注意する。

例1

<th abbr=" JSA#">日本規格協会</th>

3) 想定する利用者にとって専門用語，流行語，俗語がわかりにくいとおもわれる場合には，少なくとも初めて出現した箇所でその説明を提供する。

例1

<p>彼は<a name="return_netjunky" href="#netjunky">ネットジャンキー</a>だ。</p>
              ：
              ：
<a name="netjunky">ネットジャンキーは，インターネットに熱中している人を指す言葉です<a>
<a href="#return_netjunky">本文に戻る</a>

4) 読みが難しいと思われる場合には，5.4のソリューションを併用する。

5) ユーザに馴染みのある用語を使用する

覚えやすく忘れにくいように，ユーザに馴染みのある言葉を使います。特に英語の使用は，アルファベットにしろカタカナにしろ，極力避ける。「back to top」は「トップページへ戻る」とし，「cart」や「ショッピングカート」は「買い物かご」などと記述する。

注意事項

（なし）

目次へ [1]

5.9 d　読みの難しいと考えられる言葉の多用禁止

想定する利用者にとって，読みの難しいと考えられる言葉（固有名詞など）は，多用しないことが望ましい。使用するときは，初めて記載されるときに読みを明示しなければならない。

(JIS X8341-3: 5.8 d)

背景と問題点

読みの難しい言葉には，姓名，社名，地名などの固有名詞，難読語などがある。これらの言葉を用いていると，読み方がわからず内容が正確に理解できないことがある。また，スクリーンリーダーで正しく読み上げられず意味が伝わらないことが考えられる。

関連する要素

ruby

技術解説

読み方が難しい言葉に読み方に関する情報を付記すると，文書が読みやすくなり，スクリーンリーダーでの読み上げも改善される可能性がある。

ソリューション

1) XHTML 1.1では，rubyを用いて読みを示す

Ruby Annotation W3C Recommendation 31 May 2001 http://www.w3.org/TR/ruby を参照する。

例1

<ruby xml:lang="ja">
  <rbc>
    <rb>斎</rb>
    <rb>藤</rb>
    <rb>信</rb>
    <rb>男</rb>
  </rbc>
  <rtc class="reading">
    <rt>さい</rt>
    <rt>とう</rt>
    <rt>のぶ</rt>
    <rt>お</rt>
  </rtc>
  <rtc class="annotation">
    <rt rbspan="4" xml:lang="en">W3C Associate Chairman</rt>
  </rtc>
</ruby>

ただし，rubyはHTMLでは利用できない。また，主な日本の音声ブラウザではruby要素を正しく扱うことができず，2度読み上げてしまう等の問題があるため，今後の音声ブラウザの対応状況を見極めてこのソリューションを使うべきである。

2) HTMLでは，カッコ書きなどで読みを示す。

例1

武者小路実篤（むしゃのこうじさねあつ）

例2

括弧書きがたくさん入り交じって煩雑になり，読みにくくなる場合は，ふりがなを行を変えて括弧に入れて提示する。

注意事項

なし

目次へ [1]

5.9 e　単語途中のホワイトスペースの禁止

表現のために単語の途中にスペース又は改行を入れてはならない。

(JIS X8341-3: 5.9 e)

背景と問題点

単語の途中にホワイトスペース（Unicode 0x0020，0x3000）や改行などの文字等を挿入してしまうと，音声ブラウザはひとまとまりの単語と理解できずに，文字ごとに読み上げてしまう場合がある。たとえば，次のようなソースでは，(a)では「じんるい」と読み上げるが，(b)以降では「ひとるい」と読み上げてしまう。

a) 人類
b) 人 類 （半角スペース）
c) 人　類 (全角スペース)
d) 人<br>類

関連する要素

br

技術解説

レイアウトのためにホワイトスペースを使って文字間隔を調整したり，改行を用いて縦書き表示を模して表示したりしたい場合があるが，そのような方法は音声ブラウザではうまく読み上げられない。表示スタイルの変更には，スタイルシートを用いるべきである。なお，スタイルシートを用いた縦書き（writing-modeプロパティ）については未対応のブラウザが多いので現時点では利用しないほうがよい。

ソリューション

1) ホワイトスペース，br要素を単語の途中に挿入しない

2) 縦書きがどうしても必要な場合には，文字を画像化する。 テーブルのtd要素でpre，br要素を使うといった方法で縦書きを実現した場合には，正しく読み上げが行われない。

3) 表示幅を指定して文章を整形したいときは，preのかわりにスタイルシートでwidthプロパティを使う。

注意事項

なし

目次へ [1]

5.9.f 図記号とイラストレーション

ウェブコンテンツは，文章だけでなく，分かりやすい図記号，イラストレーション，音声などを合わせて用いることが望ましい。

(JIS X8341-3: 5.9 f)

背景と問題点

機器の操作方法，数値データといったものは文章で表現されただけではわかりにくいことがある。これらに適切なイラストレーションやグラフなどを加えると，理解しやすくなる。また認知に障害のある場合などは，文章の説明を理解するのが難しいが，アイコンやイラストレーション，音声によるガイドがあると使いやすくなる。

関連する要素

なし

技術解説

 

ソリューション

1) 文章に適切に図やイラストレーションを付加する

操作手順を文章と図の両方で説明している例

“トレーを静かに押し込みます。"

2) ハイパリンクにボタンやアイコンなどを併用する

　ボタンやアイコンなどのデザインがわかりやすく，識別が容易なら，文章を理解できなくてもリンクをたどることが出来る。また，書かれている文章を忘れてしまっても，視覚的なイメージ記憶を活用することが可能になる。

3) 知的障害のある人のためのウェブページ

知的障害のある人のためのウェブページでは，平易でやさしい文章をできるだけ最小限に使用し，アイコンやイラストレーションなどで理解できるようにする。また，標準化されたシンボルを利用する。

注意事項

なし

目次へ [1]

6. 情報アクセシビリティの確保・向上に関する全般的要件

ウェブサイトのアクセシビリティを向上させるためには，企画，設計，政策および運用までの幅広い工程での配慮が重要である。各工程での配慮事項の一部を以下に説明する。

（1）企画工程では，特定のプラグイン（JavaScript，Javaアプレット，Flash，PDFほか）などの利用が情報を表現する上で必要かどうかを検討し，使う場合には，それが使えない利用者に対して同等の情報を提示できるよう検討する必要がある。また，要素技術レベルの流れ作業的なアクセシビリティ対応に陥らないよう，利用者の心身特性や利用環境を理解することが重要である。

（2）設計工程では，ウェブサイト全体が分かりやすい構造になっているか，利用者の記憶に頼らず操作ができるか，認知面での配慮が必要である。また，サイト全体で共通に使用するテンプレートなどもアクセシビリティを考慮して設計する必要がある。

（3）制作工程では，制作者のスキルに依存せず，またチェック漏れを少なくするために，ウェブガイドラインを元にしたチェックリストを作成する。また，チェックツールを用いると文法チェックが効果的に行える。

（4）運用工程では，利用者から寄せられるウェブサイトへの要望や改善提案などは定期的に収集し，ページレベルで対応できるものは反映を行うことが必要である。

目次へ [1]

6.1　企画・制作に関する要件（JIS X 8341-3:6.1）

ウェブコンテンツの情報アクセシビリティが容易に維持できるよう企画・制作しなければならない。

ウェブコンテンツを自動的に生成するプログラムには，アクセス可能なウェブコンテンツを生成する機能を装備する。

(JIS X8341-3: 6.1)

背景と問題点

ウェブコンテンツの制作段階で，各ページ単位でアクセシビリティの対策を考えても，サイト全体のアクセシビリティを均一に保つことは困難である。また，効率的にすべてのアクセシビリティの要件を満たすことが難しくなる。また，後工程にいくほど個々のページをアクセシビリティ対応することになるので,コストもかかる。

効率的かつ効果的に実施するには，企画・制作工程などウェブサイト構築の早い段階で，アクセシビリティの配慮を検討する。企画工程では，サイト全体で共通とするアクセシビリティの方針を定め，できるだけ早いうちに具体的に反映する。

これにより，個々の工程ごとの単発的な対応でなく，サイト全体で共通のナビゲーションやフォーマットをアクセシブルにできる。

利用者情報などをデータベースで管理する場合には，データが集積すればするほどアクセシビリティ対応を後付するのは難しくなる。

電子商取引のような利用者の入力に対応して，ウェブページを自動的に生成するようなウェブプログラムを有するウェブサイトの場合は，生成されたコンテンツもアクセシビリティの用件を満たすように，自動生成を行うプログラムにアクセシビリティ機能を装備することが重要である。

こうした取組みを実現するために，ウェブサイトの関係者全員がアクセシビリティについて正しく理解することにより，効率的かつ効果的に対処できる。

サイト制作を外注する場合，最初のサイト構築は外注先が行っても，情報更新など運用は発注元が行う場合がある。その際，サイト全体を運用しやすいように企画段階から考慮しておかないと，アクセシビリティを維持することが難しくなる。

関連項目

なし

技術解説

• ウェブサイトの情報アクセシビリティが人や組織によらず容易に維持できるよう，デザインガイドラインを作成し，その中でアクセシビリティを実現・管理する方法を具体的に記述する。
• 画像情報をデータベースで管理する場合には，入力時に画像データとともにテキスト入力欄を付記して登録するようにしておくと，alt属性として活用できる。
• CMS (Content Management System)など，ウェブコンテンツを自動的に管理，生成するソフトウェアを採用する場合は，アクセシビリティの維持，管理を効率的に行えるものを採用する。例えば，コンテンツを登録する画面で，アクセシビリティ・チェック機能を利用できるソフトウェアを採用する。
• サイト全体で共通に使用するフォーマット（画面デザイン・HTMLテンプレートなど）を制作する場合は，アクセシビリティについて考慮し，制作する。
• 自動的にアクセシビリティを確保できるような編集ツールが存在する場合は，その使用を制作者に義務づけるか，アクセシビリティのチェックツールが存在する場合は，その使用を制作者に義務づける。
• ウェブサイトにおけるアクセシビリティに関する基本的な考え方，方針，具体的な推進方法などを日付や作成部門名／作成者を付記して文書化し，ウェブサイトの関係者全員が参照できるようにする。
• ウェブサイトの関係者が，アクセシビリティに関する教育を受講する。
• サイト制作を外注する場合，発注元もアクセシビリティの基本的な用件を学び，企画段階から参画すると，サイト全体の構造などを理解しやすく，アクセシビリティに対応できるだけでなく，運用しやすいウェブサイトが構築できる。
• ウェブサイトを新規制作する場合は，サイト全体をアクセシブルなものにすべきであるが，既存のサイトを修正する場合には，利用者に閲覧されやすい上位階層から下位階層へ，情報の重要度が高いものから低いものへ，またアクセス数の高いものから低いものへ，など優先度の高いものからアクセシビリティ対応を行う。

目次へ [1]

6.2　保守及び運用に関する要件（JIS X 8341-3:6.2）

ウェブコンテンツを保守及び運用するときは，情報アクセシビリティの品質を確保し，向上させなければならない。

(JIS X8341-3: 6.2)

背景と問題点

ウェブコンテンツの保守及び運用工程で，アクセシビリティを考慮せずに情報を追加・削除・更新してしまうと，サイト構築時にはアクセシビリティに配慮されていても，次第にサイト全体がアクセシブルでなくなってしまう。これは，(1)アクセシビリティを維持しにくいサイト構造・ページ構成である，(2)保守，運用担当者のアクセシビリティに対する理解やスキルが不足している（人事異動などで手法やノウハウが継承されないことも含む），(3)アクセシビリティ維持のための予算や工数などが確保できていない，などさまざまな原因がある。

関連項目

なし

技術解説

• ウェブサイトの情報アクセシビリティが人や組織によらず容易に維持できるよう，保守及び運用のためのアクセシビリティチェック項目を検討し，チェックリストとして明文化する。
• ウェブサイトにおけるアクセシビリティに関する基本的な考え方，方針，具体的な推進方法などを日付や作成部門名／作成者を付記して文書化し，ウェブサイトの関係者全員が参照できるようにする。
• 保守及び運用作業において，アクセシビリティが確保しにくい場合は，ウェブサイトの企画・制作部門と連携し，より効率的に確実にアクセシビリティを確保できるようにする。
• アクセシビリティのチェックツールが存在する場合は，それを日々の作業で励行する。
• ウェブサイトの関係者が，アクセシビリティに関する教育を受講する。

目次へ [1]

6.3　検証に関する要件（JIS X 8341-3:6.3）　

ウェブコンテンツの企画・制作を行う者は，ウェブコンテンツがこの規格の要件を満たしていることを検証しなければならない。

(JIS X8341-3: 6.3)

背景と問題点

サイト全体で共通に使用するフォーマット (画面デザイン・HTMLテンプレートなど) を制作する場合，そのフォーマットでアクセシビリティを確保する。そうでないと，各ページの制作段階で，個別に対応する必要が生じ，場合によっては，大きな修正作業が発生してしまうことになる。

企画・制作・保守・運用のすべての工程で，アクセシビリティの評価，検証を行うことで，効率的にアクセシビリティを実現できる。

関連項目

なし

技術解説

• 評価・検証作業を効率的に実施するため，高齢者・障害者支援技術，チェックツールを適宜組み合わせて，利用するとよい。
• 評価・検証作業を複数人で実施する場合は，アクセシビリティを一定のレベルにそろえるため，検証方法を定期的に調整し，チェックリストなどを作成する。また，チェックリストは，適宜，更新しておく。
• 各工程に適した評価・検証手法を選択する。

(1)企画工程

評価できるウェブコンテンツがないので「質問法」が中心になる。質問法（ヒヤリング）には，1.質問紙調査(アンケート調査)，2.インタビュー/グループインタビュー，3.個人面接　などがある。

(2)設計工程

機能仕様書，ユーザインタフェース仕様書などを「洞察法」で評価できる。洞察法には，1.ヒューリスティック評価，2.認知的ウォークスルー　などがある。

(3)詳細設計段階

評価用のプロトタイプ，β版，公開版ができれば，「洞察法」に加え，「観察法」，「実験的方法」が可能になる。観察法には，1.行動観察，2.ユーザタスク分析　などがある。実験的方法には，1.パフォーマンステスト，2.プロトコール解析　などがある。

チェックツールと人手による評価・検証手法を併用し，効率良く確実にアクセシビリティを向上させる。

(1)アクセシビリティ専用チェックツールとして，以下のものがある。

• WebInspector（富士通） http://design.fujitsu.com/jp/universal/assistance/
• Web Accessibility Toolbar（インフォアクシア） http://www.infoaxia.com/tools/wat/index.html
• Web Accessibility Toolbox（インフォアクシア） http://www.infoaxia.com/tools/iawat/index.html
• Web Developer（インフォアクシア）http://www.infoaxia.com/tools/webdeveloper/index.html
• aDesigner（日本IBM） http://www.research.ibm.com/trl/projects/acc_tech/adesigner.htm
• HomePageBuilder （日本IBM） http://www-6.ibm.com/jp/software/internet/hpb/
• LIFT for Macromedia Dreamweaver（ソシオメディア） http://www.sociomedia.co.jp/lift/
• ウェブヘルパーASP（アライド・ブレインズ） http://www.aao.ne.jp/author/webhelper/index.html
• ウェブバリアファインダー（インフォクリエイツ） http://www.infocreate.co.jp/bf/wbf/index.php
• Accessibility Extensions for Mozilla/Firefox http://cita.disability.uiuc.edu/software/mozilla/

例

alt属性の有無など，HTMLファイルの記述を機械的に確認するときに効果的である。

参考：HTML文法チェックツール (「Another HTML-lint」など) でもチェック可能な項目がある。

(2)人手による簡便な評価・検証手法として，以下のようなものがある。

• グレースケールで表示しても，内容が伝わるか確認する。

  解説：ウェブの画面を画像データとして保存し，画像編集ソフトなどでグレースケールに変換する。これにより，明度の違いだけで内容が把握できることを確認する。

• 文字色と背景色の組み合わせをチェックする。
• キーボードのみで操作ができるか確認する。特に次の4つのポイントでチェックする。
  1. 「上矢印」「下矢印」キーによる画面スクロールが可能か。
  2. 「Tab」キーによるキーボード・フォーカスの移動が可能か。全てのリンク及び入力項目に，正しい順序で移動できるようにする。
  3. リンクやコマンドは，「Enter」キーで実行できるか。フォーカスの移動ではなく，「Enter」キーを押すまで，実行しない。
  4. 音声ブラウザを使用し，正しく読み上げられるか確認する。

     解説：alt属性の内容の適切さなど，チェッカーツールで判定できない問題を確認するとき，効果的である。

• ブラウザの設定を変更し，内容が伝えられることを確認する。
  1. グラフィックス表示をオフにし，代替表示されるalt属性のテキストだけで情報が伝えられるか。
  2. サウンド出力をオフにし，重要な情報を伝えられるか。
  3. スタイルシートをオフにし，ページが読めるか。
  4. 画面表示を白黒反転などさせてページが読めるか。

     参考：Microsoft Windowsの場合，[コントロールパネル] の[ユーザー補助]の[画面]で[ハイコントラスト]を選択する。

目次へ [1]

6.4フィードバックに関する要件（JIS X 8341-3:6.4）

ウェブコンテンツの企画・制作を行う者は，利用者の意見を収集する窓口を用意し，利用者からの意見をウェブコンテンツの情報アクセシビリティの確保・向上に活かさなければならない。

(JIS X8341-3: 6.4)

背景と問題点

ウェブサイトは，情報を追加，削除，更新しながら常に変化していくものである。

更新時のウェブサイトの情報が見やすく，わかりやすく，操作しやすいかウェブサイト提供者側でチェックするとともに，利用者からの意見や要望などを広く収集する必要がある。

さらに企画・制作の工程でそれらに的確に対応できる体制・手法などを確保しておく必要がある。

関連項目

なし

技術解説

• 利用者が，ウェブサイトの管理者へ容易に意見，要望，質問ができるようにする。
• 利用者から収集した意見を，関係者が適切に把握し，効率的かつ効果的に対処できるようにする。
• 利用者の様々な状況に合わせ，電子メール，ウェブのフォーム，電話，ファックスなど，複数の意見収集窓口を用意する。

目次へ [1]

6.5サポートに関する要件（JIS X 8341-3:6.5）　

利用者とコミュニケーションが取れるよう，問い合わせ先をウェブコンテンツ上の分かりやすい位置に明示しなくてはならない。

(JIS X8341-3: 6.2)

背景と問題点

ウェブサイトは，情報を追加，削除，更新しながら常に変化していくものである。

更新時のウェブサイトの情報が見やすく，わかりやすく，操作しやすいかウェブサイト提供者側でチェックするとともに，利用者からの意見や要望などを広く収集する必要がある。

それには，利用者が容易に問い合わせできるようその方法をウェブサイトに明示にすることは重要である。

関連項目

なし

技術解説

• 利用者が，ウェブサイトの管理者へ容易に意見，要望，質問ができるようにする。
• 利用者から収集した意見を，関係者が適切に把握し，効率的かつ効果的に対処できるようにする。
• 利用者の様々な状況に合わせ，電子メール，ウェブのフォーム，電話，ファックスなど，複数の意見収集窓口を用意する。

目次へ [1]

7. 参考資料：HTML 4.01 elements list

HTML 4.01の要素リスト

Name	Description
A	anchor
ABBR	abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM
ADDRESS	information on author
APPLET	Java applet
AREA	client-side image map area
B	bold text style
BASE	document base URI
BASEFONT	base font size
BDO	I18N BiDi over-ride
BIG	large text style
BLOCKQUOTE	long quotation
BODY	document body
BR	forced line break
BUTTON	push button
CAPTION	table caption
CENTER	shorthand for DIV align=center
CITE	citation
CODE	computer code fragment
COL	table column
COLGROUP	table column group
DD	definition description
DEL	deleted text
DFN	instance definition
DIR	directory list
DIV	generic language/style container
DL	definition list
DT	definition term
EM	emphasis
FIELDSET	form control group
FONT	local change to font
FORM	interactive form
FRAME	subwindow
FRAMESET	window subdivision
H1	heading
H2	heading
H3	heading
H4	heading
H5	heading
H6	heading
HEAD	document head
HR	horizontal rule
HTML	document root element
I	italic text style
IFRAME	inline subwindow
IMG	Embedded image
INPUT	form control
INS	inserted text
ISINDEX	single line prompt
KBD	text to be entered by the user
LABEL	form field label text
LEGEND	fieldset legend
LI	list item
LINK	a media-independent link
MAP	client-side image map
MENU	menu list
META	generic metainformation
NOFRAMES	alternate content container for non frame-based rendering
NOSCRIPT	alternate content container for non script-based rendering
OBJECT	generic embedded object
OL	ordered list
OPTGROUP	option group
OPTION	selectable choice
P	paragraph
PARAM	named property value
PRE	preformatted text
Q	short inline quotation
S	strike-through text style
SAMP	sample program output, scripts, etc.
SCRIPT	script statements
SELECT	option selector
SMALL	small text style
SPAN	generic language/style container
STRIKE	strike-through text
STRONG	strong emphasis
STYLE	style info
SUB	subscript
SUP	superscript
TABLE
TBODY	table body
TD	table data cell
TEXTAREA	multi-line text field
TFOOT	table footer
TH	table header cell
THEAD	table header
TITLE	document title
TR	table row
TT	teletype or monospaced text style
U	underlined text style
UL	unordered list
VAR	instance of a variable or program argument

 

目次へ [1]

---

---

©copyright 2005 Japanese Standards Association. All Rights Reserved.