マウスの操作に不慣れであったり、細かな操作が困難である場合を想定して、リンク設 定部分の大きさや隣との間隔に配慮すること。
また、リンクを設定した画像がマウスでクリックできることに気付かない場合があるた め、①クリックできることを明記する、②ボタンのようなイメージを持つ画像にする、③ ページ内でリンク画像のイメージを統一する、などできるだけクリックできることが分か るように配慮する。
【具体例】
① リンクやボタンは操作しやすい大きさにする
良い例 リンクボタンが適切な大きさ 悪い例 ボタンが小さく、テキストにリンクが設定 に設定されている。 されていない。
② 隣り合うリンクとの間隔をとる
良い例 間隔を十分にとっている。 悪い例 間隔が狭く、リンクの選択がしにくい。
22 リンク先のページは原則として別ウィンドウで開かない。やむを得ず 別ウィンドウで開く場合は、その旨を明記する
レベル1(関連 JIS 5.3e)
操作方法によっては、リンク先のページが別の新しいウィンドウで開かれることにより、
①複数のウィンドウが開くことで最初のページに戻るのが困難になる、②音声読み上げソ フトを使用する場合、別ウィンドウが開いたことを読み上げることができない、③肢体の 不自由な利用者にとっては、複数のウィンドウを開いたり閉じたりするのは困難、などの 支障があるため、原則としてこれを使用しないようにすること。やむを得ず別ウィンドウ を開く場合には、その旨を明記し、利用者が意図せずに別ウィンドウを開いてしまわない よう配慮すること。
【具体例】
・リンク先が新しいウィンドウで開くことを通知する
23 リンク先のページがPDFファイルである場合は、その旨およびファイ ルサイズを明記し、閲覧ソフトを入手するためのリンクを提供する
レベル1(関連 JIS 5.3g、5.4e)
PDFファイルを開く環境がない、あるいは通信環境が遅く、大きなサイズのファイル を開くことが困難な場合を想定し、利用者が意図せずにPDFファイルを開いてしまうこ とがないよう、あらかじめ表記しておくこと。併せて、閲覧ソフト(Adobe Reader)をダ ウンロードできるサイトへのリンクを提供する。
【具体例】
・PDFファイルを開くためのソフトをダウンロードできるサイトを紹介する。
・PDFファイルのリンクを設定した文字に、PDFファイルであることと、ファイル のサイズを添える。
留意点
・PDFファイルのサイズが大きくなりすぎないよう、見出しや章ごとに区切るなど、
分割して提供する工夫をすること。
・PDFファイルは、利用者の環境によっては、音声読み上げソフトでその内容を読み 上げることができないことがあるため、文字による代替情報を提供すること(本ガイ ドライン(9 )参照)。
参 考 ファイルサイズの確認方法
24 マウス操作以外の手段で選択することのできないリンクの仕組みを用い ない
レベル1(関連 JIS 5.3a)
マウスでの操作のみに依存せず、少なくともキーボードによってすべての操作が可能で あるページを作成すること。
音声読み上げソフトの利用者は、キーボードのタブキーやエンターキー、矢印キーなど を用いて、リンクの選択やページ内の移動などを行っている。また、上肢に障害を持つ利 用者は、トラックボールや専用のスイッチなどを用いてウェブを利用している。このよう な利用者の多様なウェブ利用環境に配慮すること。
[マウス操作のみに依存する仕組みの例]
以下に挙げるような仕組みは使用しないこと。
・Javaスクリプトを用いたリンクの仕組み
・オンマウスによるメニューの表示(マウスがその上にきた時のみ、メニューが表示さ れる仕組み)
・実行ボタンのないプルダウンメニュー
[改善例:実行ボタンのあるプルダウンメニュー]
▲実行ボタン(上図では「GO!」のボタン)のあるプルダウンメニューであれば、
矢印キー、タブキー及びエンターキーにより、ページを選択し、リンクできる。
実行ボタンがなければキーボードで操作することができない。
6章 表組み
25 表組みを使用する際には、音声読み上げソフトの読み上げ順を考慮する レベル2(関連 JIS 5.2d)
音声読み上げソフトは、表の内容を、左上のセルを始点として、左から右へ順に読み上 げるので、読み上げ順に考慮して表組みとその内容を作成すること。
表の規模や構成が複雑になると意図しない順序で読み上げ、内容の把握が困難になるこ とがあるので、①できるだけシンプルな表にする、②文章によるリスト(箇条書き)に置 き換える、などに配慮し、レイアウトのために表を使用するのはなるべく避けること。
[音声読み上げソフトの表の読み上げ順]
① ② ③
④ ⑤ ⑥
⑦ ⑧ ⑨
② ④
① ⑤ ③
⑥
⑦ ⑧ ⑨ ⑩
②
① ③ ④
⑥ ⑦ ⑧
⑨ ⑩ ⑪
⑤
⑫ ⑬ ⑭
26 表組みには適切な表題を設定する レベル2(関連 JIS 5.2c)
表の属性に、表の内容を明確に示した表題を設定すること。
音声読み上げソフトは、表組みではまず表題を読み上げるため、表題を設定することに より、利用者に表の開始位置を伝える役目を果たす。
ただし、レイアウトを目的とした表組みには、表題を設定してはならない。
【ホームページビルダーによる 設定方法】
① 表をクリックして選択→「編集」→「属性の変更」→「表」タグの中の「表題」の欄 で、表題を「表の上」につけるか「表の下」につけるかを選択→作成画面上に、点線で 囲まれた枠が表示されるので、その枠の中に表題を入力する
② 表をクリックして選択→ツールバーの「表」→「表題の挿入」→「表の上」か「表の 下」かを選択し、選択欄の下の白枠に表題を入力する
7章 フレーム
27 フレームは極力使用しない レベル2(関連 JIS 5.2f)
音声読み上げソフトを使用する場合などは、視覚的にページ全体の内容を一度に把握す ることができないため、各フレームの役割を理解したり、フレームの一部の内容がリンク により入れ替わっても、そのことを認識できない場合がある。また、各フレームにスクロ ールバーが表示された場合、操作が困難になるなどの難点もある。
そのため、アクセシビリティの観点から、フレームの使用は避けることが望ましく、や むを得ず使用する場合には、各フレームの役割が明確になるよう配慮すること(具体的に は本ガイドライン(28)(29)を参照)。
★フレームとは
ホームページの画面を分割し、それぞれに個別のHTMLファイルを読み込むことによっ て、画面の一部分だけを入れ替えることやリンクさせることが可能な機能
28 フレームを使用する際は、フレームに表示される各ページに、ページ 内容を明確に示すページタイトルとフレーム名を付ける
レベル1(関連 JIS 5.2e、5.2f)
ページの性質上、やむを得ずフレームを使用する場合には、フレームに表示される各ペ ージに、ページの内容を明確に示すページタイトルとフレーム名を付けることにより、音 声読み上げソフトで個々のページの内容を把握しやすくすることができる。
【具体例】
・ページタイトルの設定は、本ガイドライン(5 )を参照。
・フレーム名は、フレームページの作成時に、リンクにおけるフレームの表示位置を示 すもの。
ファイル名:index.htm ファイル名:title.htm
ページタイトル:兵庫県のホームページ ページタイトル:ひょうご夢情報 フレーム名:top
29 フレームを使用する際は、フレームに対応していないブラウザのために 代替情報を用意する
レベル1(関連 JIS 5.2f)
ページの性質上、やむを得ずフレームを使用する場合でも、フレームに対応していない ブラウザを使用しても各ページをたどることができるよう、代わりとなるナビゲーション 等を用意すること。
【具体例】
・noframe 要素を使い、リンク集のようなナビゲーションを用意する。
【設定方法】
・ホームページビルダーのフレーム作成画面で、[フレームなし]タブで通常のページ作 成の要領でリンクを設定する。
参考(タグ)
<FRAMESET>
<NOFRAMES>
<BODY>
<H3>兵庫県ホームページ「ひょうご夢情報」</H3>
<ul>
<li><A href="kurashi.htm">暮らしと環境</A></li>
<li><A href="mati.htm">まちづくり</A></li>
<li><A href="kyouiku.htm">教育・文化・レクリエーション</A></li>
8章 フォーム
30 フォームを使用する際は、入力条件をテキストで明確に示さなければ ならない
レベル1(関連 JIS 5.3b)
利用者がフォームに入力する際に入力条件がある場合は、音声読み上げソフトの読み上 げ順に配慮し、入力条件をテキストで明確に示さなければならない。
なお、多数の入力項目がある場合、「○個の入力項目があります」など、入力項目の規模 が分かる情報を提供するのが望ましい。
【具体例】
氏名(必須項目)
フリガナ(カタカナで入力)
メールアドレス(半角で入力)
電話番号(ハイフンを入力)
例:000−0000
・各入力条件は、利用者が入力した後に音声読み上げソフトで条件を読み上げないよう にするため、必ず入力欄の前に明示すること。
・「フリガナ」などのように、視覚的な表現だけで情報を伝えるのではなく、音声読み上 げソフトの使用に配慮し、「カタカナで入力」と明示する。
・電話番号、郵便番号など、入力方法が複数考えられる場合、入力例を明示する。
・なお、住所を記入させる際、その一部のみ(都道府県名など)をプルダウン機能で選