guideline_all - コピー

43 

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(1)

ユニバーサルデザインに配慮した

ホームページ作成のガイドライン

(2)

目 次

Ⅰ 兵庫県ホームページとユニバーサルデザイン

1 インターネットによる県政情報の発信

・・・・・・・・・・・・・・2

(1) インターネットによる広報の重要性

(2) 県ホームページの特徴と基本的留意点

2 ユニバーサルデザインの実現に向けて

・・・・・・・・・・・・・・3

(1) ユニバーサル社会づくりの推進

(2) 障害者・高齢者のインターネット利用の拡大

(3) JIS規格の制定と本ガイドラインの目的

(4) 本ガイドラインの適用範囲

Ⅱ 具体的な制作方法

1 配慮すべき項目の考え方

・・・・・・・・・・・・・・・・・・・・・5

2 レベル設定について

・・・・・・・・・・・・・・・・・・・・・・・5

配慮すべき項目一覧

・・・・・・・・・・・・・・・・・・・・・・・・・6

1章 ページの制作・運用

2章 ページの設計およびデザイン

3章 テキスト

4章 画像

(3)

Ⅰ 兵庫県ホームページとユニバーサルデザイン

1 インターネットによる県政情報の発信

(1) インターネットによる広報の重要性 ブロードバンドの普及などによりインターネットの人口普及率は増加の一途をたど り、インターネットは県民生活に着実に浸透しつつある。ウェブサイト(一般的には 「ホームページ」と呼ばれることが多い)は、このインターネット技術を利用して、 文字や映像、音声などを組み合わせて情報伝達ができる媒体の一種である。広報誌等 の紙媒体、テレビ番組等の映像媒体と比べて、場所や時間の制約がなく居ながらにし て情報を即座に入手できる、情報発信者と双方向のやり取りがしやすいなどのメリッ トがあるとともに、情報の更新が素早く行えることから、緊急情報などもタイムリー に発信できることも特徴である。 県では、平成8年に県の公式ウェブサイト「兵庫県ホームページ」(http://web.pref. hyogo.jp/)を開設し、知事の定例記者会見や報道発表資料、各種計画や施策などイン ターネットを通じた県政情報の発信を進めてきた。申請書ダウンロードサービスや電 子申請システムの運用も開始され、これら県政情報サービスのポータル(玄関)とし ての「県ホームページ」(トップページ)へのアクセス数は、開設以来順調に伸び続け、 平成 15 年度には年間約 486 万件に達している。このほか、県ホームページ以外に、観 光、環境、生涯学習、教育など県が特定の分野に関する情報発信を行うサイトも多数 あり、広く利用されている。 このように、ウェブサイトは、広報紙・誌、テレビ等と並ぶ重要な広報媒体である とともに、今後インターネット利用の普及がさらに進むにつれ、情報の速報性・検索 性に優れるウェブサイトによる県政情報発信の重要性はますます高まっていくと考え られる。 (2) 県ホームページの特徴と基本的留意点 インターネット上で提供されるウェブサイトは、広告媒体の一種としてのもの、商 品やサービスを提供するもの、ソフトウェアの更新などのいわゆる製品サポートを行 うものなど、多種多様である。しかし、多くのウェブサイトは、その利用者を想定し た上で、一定の情報に絞って構築されている。

(4)

参画と協働の県行政を推進するためには、県民と行政が情報を共有する(ともに知 る)ことが不可欠である。そのためには、県政に関する多種大量の情報を分かりやす く整理するとともに、想定される多様な利用者に適した形で提供する必要がある。 県ホームページは利用者が多様であり、求める情報内容も一般的なものから専門的 なものまで幅広いことから、ページの作成に当たっては「広く一般の県民」のみを想 定し、情報内容を何でも“平易に”するのではなく、多様な利用者に応じて情報内容 を十分に考慮して作成する必要がある。

2 ユニバーサルデザインの実現に向けて

(1) ユニバーサル社会づくりの推進 県では、年齢や性別、障害の有無、国籍などにかかわりなく、県民誰もが地域社会 の一員として支え合い、安心して暮らし、持てる力を発揮して元気に活動できる「ユ ニバーサル社会」の実現を推進している。 このユニバーサル社会づくりの一環として、障害者や高齢者等も含め、誰もが「県 ホームページ」など県が提供するウェブサイトを十分に活用し、県政に関する情報や 県の行政サービスを容易に受けられるようにすることが県の責務といえる。 (2) 障害者・高齢者のインターネット利用の拡大 障害者や高齢者にとってインターネットは、活字、ラジオ、テレビといった従来の 媒体と比較して、それぞれの身体条件に合った支援機器やソフトを用いて他人の助力 に頼らず自身で情報入手ができることから、近年、利用が急速に拡大しつつあり、自 立・社会参画する上で非常に重要なツールとなっている。 しかし、利用者の身体的な条件によってウェブコンテンツが使いにくい、あるいは 使えない場合がある。例えば、全盲の利用者の場合、ウェブページ内のテキスト情報 を人工合成音声に変換して読み上げる「音声読み上げソフト」を利用しているが、画 像や動画などの非テキスト情報は内容を読み上げることができないため、そのままで は内容を理解することができない。 このようなことから、県の情報発信に関わるすべての人が、障害者や高齢者など心

(5)

(3) JIS規格の制定と本ガイドラインの目的 ウェブアクセシビリティを確保するために配慮すべき具体的事項を明示した日本工 業規格「ウェブコンテンツJIS(JIS X 8341-3)」が平成 16 年6月に制定された。 特に、住民生活に密着した情報やサービスを提供する自治体は、ウェブアクセシビリ ティへの配慮の重要性を十分に認識する必要があり、このJIS規格に準拠したウェ ブコンテンツづくりが求められる。 本ガイドラインは、このJIS規格に規定された項目を基本に構成しており、県ホ ームページなどインターネットを通じた情報発信を行う際に、障害の有無等にかかわ らず誰もが容易に情報やサービスを得られるよう適切にウェブページを作成するため の指針となるものである。 (4) 本ガイドラインの適用範囲 本ガイドラインは、「県ホームページ」に掲載するものだけでなく、県がインターネ ットを通じて情報発信するすべてのウェブコンテンツに適用されるべきものである。 また、担当者がウェブページを自ら作成する場合だけでなく、外部業者等にページ 作成を委託(外注)する場合も、本ガイドラインの要件を適切に満たすべきことを仕 様書に記載するなど、ウェブアクセシビリティの確保を図らなければならない。

(6)

Ⅱ 具体的な制作方法

1 配慮すべき項目の考え方

このガイドラインでは、以下の考え方に基づき、ホームページによる情報の受発信を 行う各課室等の責任者およびページ作成担当者が配慮すべき事項についてまとめている。 (1)ウェブコンテンツ JIS の規定事項を基本に、兵庫県のホームページにおいて特に 重点的に配慮すべき点を中心に項目を整理 (2)担当者のホームページ作成マニュアルとしての利用を考慮し、庁内における標準 的なホームページ作成ソフトである「ホームページビルダー」を用いた方法を解説 (3)インターネット技術の進展、ホームページ作成ソフトやウェブブラウザの機能改 良などの状況に応じ、随時、項目内容やレベル設定の見直しを図る。

2 レベル設定について

各項目については、必須要件となる「レベル1」、努力目標となる「レベル2」の2段 階に分類する。 ◆レベル1…ページを作成する上で最低限配慮しなければならない事項として、ホー ムページによる情報受発信を行う各課室等が、早急な改善に取り組むと ともに、新たなページ作成やページ更新時等に遵守していくものとする。 ◆レベル2…ウェブアクセシビリティの向上を図るための努力目標として、ホームペ ージによる情報受発信を行う各課室等が、新たなページ作成やページ更 新時等に配慮するものとする。

(7)

配慮すべき項目一覧

1章 ページの制作・運用

作成したページを公開す る際は、必ず事前にこのガイドラインの要件を 満たしていることを点検する レベル1 P8 ページを更新す る際は、必ず事前にこのガイドラインの要件を満たして いることを点検する レベル1 P9 提供する情報に対する問い合わせの担当窓口と連絡手段を分かりやすい 場所に明記する レベル1 P10

2章 ページの設計およびデザイン

色、形、配置、動きのみで内容を表現するページデザインを避ける レベル1 P11 すべてのページに、ページ内容を明確に示すページタイトルを付ける レベル1 P12 画面全体を早い周期で点滅させてはならない レベル1 P14 7 見出しやリストなどの要素を使って文書構造を規定する レベル2 P15 8 スタイルシートを使用する場合は、スタイルシートが使用できなくても ページの内容が理解できるようにする レベル1 P16 PDFファイルで情報を提供する場合は、重要度や想定される利用者に 応じ、テキスト等による代替情報を併用する レベル1 P17 10 Java スクリプト、Java アプレットは極力使用しない レベル2 P18 11 サイトのページ階層を分かりやすく整理し、現在表示されているページ がサイト内のどの階層に位置しているかを明確にする レベル2 P19 12 同一階層のページデザイン、ナビゲーションデザインは極力統一する レベル2 P20

3章 テキスト

13 テキスト色と背景色とのコントラストを十分にとる レベル1 P21 14 レイアウトを目的として、一つの単語の途中でスペース や改行を挿入し ない レベル1 P22 15 機種依存文字を使用しない レベル1 P23 16 想定する利用者を考慮し、専門用語や外来語、略語などの多用を避ける レベル1 P24 17 文字のサイズは、 利用者が変更できるようにする レベル1 P25

(8)

21 リンクを設定した文字および画像は、マウスでの操作がしやすいよう、 大きさや位置に配慮する レベル1 P30 22 リンク先のページは原則として別ウィンドウで開かない。やむを得ず別 ウィンドウで開く 場合は、その旨を明記する レベル1 P31 23 リンク先のページがPDFファイルである場合は、その旨およびファイ ルサイズを明記し、閲覧ソフト を入手するためのリンクを提供する レベル1 P32 24 マウス操作以外の手段で選択することのできないリンクの仕組みを用い ない レベル1 P33

6章 表組み

25 表組みを使用する際には、音声読み上げソフトの読み上げ順を考慮する レベル2 P34 26 表組みには適切な表題を設定する レベル2 P35

7章 フレーム

27 フレームは極力使用しない レベル2 P36 28 フレームを使用する際は、フレームに表示される各ページに、ページ内 容を明確に示すページタイトルとフレーム名を付ける レベル1 P37 29 フレームを使用する際は、フレームに対応していないブラウザのために 代替情報を用意する レベル1 P38

8章 フォーム

30 フォームを使用する際は、入力条件をテキストで明確に示さなければな らない レベル1 P39

9章 動画、音声

31 コンテンツに動画や音声が含まれる場合は、テキスト等で内容を示した 情報を併用する レベル1 P40 32 動画や音声を自動的に再生しない。また、動画や音声の再生・停止や音 量などをコントロールできるようにする レベル2 P41 33 Flash データのみでのページ構成は避ける。また、Flash データの内容は、 テキストで内容を示した情報を併用する レベル2 P42

(9)

1章 ページの制作・運用

1 作成したページを公開する際は、必ず事前にこのガイドラインの要件を

満たしていることを点検する

レベル1(関連 JIS 6.3)

このガイドラインに定められた項目を適切に満たしているかどうかをはじめとして、想 定する利用者にとって使いやすいものになっているかを点検し、ウェブアクセシビリティ を確保することは最も基本的かつ不可欠な作業である。 【具体的な点検方法】 ガイドラインの項目をピックアップしたチェックリストにより、それぞれの項目を満 たしているか、主に目視で点検する。 ◆ユニバーサルデザインを進める観点から、以下に挙げる方法も活用して点検するこ とが望ましい。 ・チェックツール(点検ソフト)によるチェック 「ウェブヘルパー」などのソフトを使ってHTMLを点検する。また、ホームペ ージビルダーV9には、アクセシビリティチェック機能が付属しているので、こ れを用いてもよい。 ○ウェブヘルパー(総務省が開発したウェブアクセシビリティ点検ツール) http://www2.nict.go.jp/ts/barrierfree/accessibility/helper/index.html ・高齢者、障害者、有識者など利用者を交えたチェック 想定する利用者にページを実際に利用してもらい、操作や情報伝達上の問題点を 発見する。 ※ これらの検証方法は、いずれも完璧ではないため、複数の方法を必要に応じて 組み合わせてチェックすることが有効である。

(10)

ページを更新する際は、必ず事前にこのガイドラインの要件を満たして

いることを点検する

レベル1(関連 JIS 6.2)

ページにおける情報の追加、更新またはリニューアルを行う際に、このガイドラインに 定められた項目を満たしているかどうかをはじめとして、想定する利用者にとって使いや すいものになっているかを点検し、常にウェブアクセシビリティを確保・向上させなけれ ばならない。具体的な点検方法は、本ガイドライン(1 )を参照。

(11)

3 提供する情報に対する問い合わせの担当窓口と連絡手段を分かりやすい

場所に明記する

レベル1(関連 JIS 6.5)

提供する情報の内容など、それぞれの場面で必要な問い合わせ先(担当課室・係名)と 連絡手段をページの分かりやすい場所に明記し、利用者とコミュニケーションが取れるよ うにしなければならない。 連絡手段については、特定の問い合わせ手段だけでは利用できない人に配慮し、電話番 号、メールアドレス、ファクス番号などできるだけ複数の手段を明記すること。 また、担当窓口の変更など、内容に異動が生じたときには、速やかに更新すること。 【具体例】 このページに関するお問い合わせは○○課○○係まで ●直通電話 078(362)□□□□ ●ファクス 078(362)△△△△ ●E-mail *****@pref.hyogo.jp

(12)

2章 ページの設計およびデザイン

4 色、形、配置、動きのみで内容を表現するページデザインを避ける

レベル1(関連 JIS 5.5a、5.5b)

視機能の障害により、視覚による情報の全部または一部が得られない場合を想定して、 色、形、配置、動きの情報が得られなくても、内容を理解できるページデザインを心掛け ること。 ただし、図や写真、表で内容を具体的に表現することは、利用者が内容を理解しやすく なる場合もあるため、文字と色、形、配置、動きをバランス良く使用すること。 【具体例】 ① 画像で表現された情報を、視覚障害がある人も音声読み上げソフト等を使って認識 できるよう、代替テキストを設定する。 (※代替テキストについては、本ガイドライン(18 )を参照。) ▲ダム貯水率の増減を示す矢印に「増加」「減少」などの代替テキストを設定した例 ② 入力フォーム中で「赤は必須項目」と指示する場合には、色覚障害がある人も指示 が認識できるよう、その必須項目を赤い文字にするだけでなくテキストで「(必須)」 と加える。 お名前 お名前(必須) 悪い例 色だけで条件づけ 良い例 ボックスの前で条件を明記

(13)

5 すべてのページに、ページの内容を明確に示すページタイトルを付ける

レベル1(関連 JIS 5.2e)

多くの音声読み上げソフトでは、まずページタイトルを読み上げるため、ページタイト ルが設定されていないと本文から読み始めてしまい、内容が理解しにくくなる場合がある。 また、サーチエンジンでページを検索した場合、優先的にページタイトルが検索される 傾向があるので、利用者がページを検索しやすくなるという利点もある。 ※ページタイトルは、ブラウザのタイトルバー(画面上部の青い部分)に表示される。 【設定方法】 〈ホームページビルダーの場合〉 (方法1)「編集」→「ページの属性」(ver.2001 では「ページのプロパティ」)→ 「ページ情報」→「ページタイトル」でタイトルを入力 (方法2)「編集」→「簡単ページ設定」→「ページのタイトル」でタイトルを入力 〈ソースに直接書き込む場合〉 ▲〈TITLE〉〈/TITLE〉で挟まれた部分に書き込む

(14)

留意点 ◆ページの固有名称は同じにならないように、補足情報を提供するなどして分かりやす くする。 悪い例 同じタイトルのページが複数ある 良い例 補足を付けるなどして、各ページ と、各ページの内容が理解できない。 に固有のタイトルを設定する。 ◆フレームを用いる場合、フレームを表示するページだけでなく、フレームを構成する 各ページにもタイトルを付けること。それにより、各フレームの内容と関連がより分 かりやすくなる。 (※フレームについては、本ガイドライン(27 )(28)(29 )を併せて参照のこと。) ◆県ホームページ内におけるページタイトルは、原則として「兵庫県/○○課/○○(ペ ージ内容)」を標準形とする。 ただし、ページを運営する組織や内容により、例により難い場合は「○○課」を省略 するなどしても差し支えない。

(15)

6 画面全体を早い周期で点滅させてはならない

レベル1(関連 JIS 5.8b)

早い周期での光の明滅、色調の変化は、光感受性発作(光源性てんかん:大脳の異常か ら、激しく点滅する光の刺激を受けると、けいれんなどの発作を起こす症状)などを引き 起こす恐れがあるため、背景色の設定や動画・アニメーション画像等の作成時には、絶対 に使用してはならない。 画面の一部が点滅する場合でも、弱視の利用者などは拡大表示で見ている可能性がある ため、使用には十分注意すること。 なお、早い周期でなくとも点滅するページ自体が、高齢者などにとって見づらいといわ れているので、極力使用しないことが望ましい。

(16)

7 見出しやリストなどの要素を使って文書構造を規定する

レベル2(関連 JIS 5.2a)

私たちが普段ウェブを利用する際には、レイアウトや文字の大きさなどの視覚情報から、 見出しやリスト(箇条書き)を認識し、文書の内容を理解している。しかし、視覚情報を 得られない利用者は、そのような構造を見た目で認識できずページの内容が理解しにくく なる。 文書の構造を設定することで音声読み上げソフトなどがこれを解釈し、「見出しの部分で は読み上げるスピードを変える」、「リストの項目部分では効果音を鳴らす」というように、 その部分が見出しやリストであることを、利用者に伝えることができる。 【作成例】 大見出し(h1)→ <h1>県民生活の元気と安心</h1> 段落(p) → <P>県民生活の質的充実を図り、新しい時代を切り拓いて・・</P> 中見出し(h2)→ <h2>1.くらしの安全・安心の確保</h2> リスト(ul) → <UL> <LI><A href="index1.htm">地域安全対策の推進</A> <LI><A href="index2.htm">食の安全・安心</A> <LI><A href="index3.htm">健康づくり対策の推進</A> </UL>

(17)

8 スタイルシートを使用する場合は、スタイルシートが使用できなくても

ページの内容が理解できるようにする

レベル1(関連 JIS 5.2b)

古いバージョンのブラウザなど、スタイルシートに対応していない環境によっては、ス タイルシートの解釈に不具合が生じ、コンテンツが表示されない場合がある。 したがって、スタイルシートを利用できない場合でも、ページの内容が理解できるよう、 文書の構造をきちんと規定したページを作成すること。 ★スタイルシート とは 文字の大きさや色など、「見た目」に関する設定を行うもの。リンク文字の色を変更した り、見出しに背景色を設定したりするなどサイト全体のデザイン変更が容易になる、行間 や文字間隔などのきめ細かい設定が可能になる、などの利点がある。 見出しやリスト(箇条書き)など、文書の「構造」については、HTML 上で規定する(本 ガイドライン(7 )参照)

(18)

9 PDFファイルで情報を提供する場合は、重要度や想定する利用者に応

じ、テキスト等による代替情報を併用する

レベル1(関連 JIS 5.4e)

視覚障害者など音声読み上げソフトの利用者は、利用環境によりPDFファイルの音声 読み上げが困難な場合があり、PDFファイルで提供されている情報が得られにくい。 PDFファイルで情報を提供する場合は、重要度の高さや視覚障害者など想定する利用 者を考慮し、必要に応じて同じ内容のHTML文書などを代替情報として用意すること。 また、用意した代替情報へのリンクと案内文も併せて設けるとよい。 (※PDFファイルへのリンク設定については、本ガイドライン(23 )を参照のこと。) 【具体例】 ▲PDF ファイルと html ファイルを併用して情報提供する 参 考 PDFファイルを作成するためのソフト「Adobe Acrobat」には、アクセシビリティ機能 が付いており、これを活用してPDFファイルを作成することが望ましい。詳細は下記ペ ージ参照。 ○アクセシブルな Adobe PDF ファイルの作成方法 http://www.adobe.co.jp/products/acrobat/pdf/accessible.pdf

(19)

10 Java スクリプト、Java アプレットは極力使用しない

レベル2(関連 JIS 5.1b、5.3a、5.3e、5.4e)

利用者によっては、Java スクリプト、Java アプレットを使用しないように、ブラウザを 設定していることもある。また、マウス操作以外の手段で選択することのできないリンク の仕組みを作る、画面を点滅させる、強制的にページを移動させるなど、アクセシビリテ ィ確保の上で問題がある機能も多い。 そのため、サイトの機能上やむを得ず使用する場合は、同じ内容をテキストで提供する などにより、十分なアクセシビリティの確保を図るようにする。 ★Java スクリプト・Java アプレットとは Java スクリプトとは一般的に、HTMLファイルに組み込むことにより、ブラウザの機 能を用いて動作するプログラムのことを指す(正式には、ネットスケープ社が開発したス クリプト言語の名称を指している)。 HTMLファイルの表示内容に動的な変化をつけることができ、何らかの操作で表示さ れた画像を差し替える仕組みや、文字を動かす仕組みなどに用いられていることが多い。 また、Java アプレットとは、Java という言語を用いて作られたアプリケーションプログ ラムのことで、チャットや掲示板、Web ゲームなどに用いられていることが多い。 参 考 【ブラウザにおける Java スクリプト有効・無効の設定方法】 一般的なブラウザでは、初期設定でJava スクリプトの動作は有効になっているが、セキ ュリティ等の設定を変えることで、Java スクリプトの動作が無効になることがある。 〈Windows版インターネットエクスプローラーの場合〉 「ツール」→「インターネットオプション」→「セキュリティ」→「既定のレベル」の セキュリティレベルが「高」の場合、Java スクリプトの動作が無効になる。 また、「セキュリティ」→「レベルのカスタマイズ」→「アクティブスクリプト」で「無 効にする」を選択している場合、Java スクリプトの動作が無効になる。

(20)

11 サイトのページ階層を分かりやすく整理し、現在表示されているページ

がサイト内のどの階層に位置しているかを明確にする

レベル2(関連 JIS 5.2g)

コンテンツの多い複雑なサイトの場合、利用者がサイトの中で今自分がどのページにい るのか、前のページへはどう戻るのかといったことが分からなくなる場合がある。そのた め、サイトの全体構成や現在位置を明確にし、他のページへの移動をスムーズに行うため、 リストやメニューなどのナビゲーションを作成する。 【具体例】 ① ナビゲーションバー ② パンくずリスト ③ サイトマップ

(21)

12 同一階層のページデザイン、ナビゲーションデザインは極力統一する

レベル2(関連 JIS 5.3f)

ページデザインを統一することにより、ページ全体に統一性を持たせ、利用者に信頼感 を与えることができる。また、ナビゲーションデザインを統一することにより、操作効率 を向上させ、ページ間の移動をスムーズにすることができる。 (※ナビゲーションについては、本ガイドライン(11)参照。) 【具体例】 「○○課のトップページへ」「お問い合わせ」などのリンクに用いる表記、位置、色など をサイト内で統一する。

(22)

3章 テキスト

13 テキスト色と背景色とのコントラストを十分にとる

レベル1(関連 JIS 5.5c、5.6c)

弱視の人や高齢者、色覚に障害のある利用者に配慮して、テキスト色(文字色)と背景 色の組み合わせには、淡い色調のものは使わないなど明度の差(コントラスト)を十分に 確保すること。リンク部分のテキスト色も同様である。 留意点 ・識別しにくい色の組み合わせ(白と黄、水色と灰色など)は避ける ・明るさの異なる色を組み合わせる ・テキストの背景に写真や壁紙などの画像を用いる場合には、テキストが読みにくくなら ないよう配慮する ・デザイン上、十分なコントラストを確保できない場合は、テキスト色、背景色の両方と 十分にコントラストのある縁取り線を入れる 悪い例 白と黄の組み合わせ 良い例 白と明度の低い緑の組み合わせ 参 考 色覚に障害がある場合の見え方を簡易チェックするツール ■カラーコントラストチェッカー V2.0 http://www.i-create.jp/accessibility/color-checker.shtml

(23)

14 レイアウトを目的として、一つの単語の途中でスペースや改行を挿入

しない

レベル1(関連 JIS 5.9e)

行幅を整えるために、一つの単語の途中に改行やスペースを挿入すると、音声読み上げ ソフトでは一つの単語として認識できず、正しく読み上げることができない。 また、リンクの途中に改行を挿入すると、音声読み上げソフトは改行の前で一度読み上 げを停止し、利用者の操作によって続きの言葉を読み上げるため、利用者にはリンクが二 つあるかのように聞こえてしまう。 【実例】 ▲「国 際」は「くに さい」、「経 済」は「けい すみ」のように読み上げられてしまう。 ▲「お申し込み」の直後で強制的に改行しているため、「お申し込み」と「お問い合わせ」の二つのリン クがあると誤解してしまう。

(24)

15 機種依存文字を使用しない

レベル1(関連 JIS 5.1a)

特定のOS(Windows、Machintosh など)でしか表示されない文字(機種依存文字)は使 用しないこと。 【実例】 ▲上図の Windows 環境で表示される丸付き数字とローマ数字は、Machintosh 環境では、 左から「(日) (月) (火) (特) (監) (企)」と表示される。 〈機種依存文字の 例〉 ・丸付き数字(①、②、③ など) ・ローマ数字(Ⅰ、Ⅱ、Ⅲ など) ・半角カタカナ(ア イ ウ エ オ など) ・省略文字(㈱、㈲、㊤、℡ など) ・単位記号(㌔、㍍、㌘、㍑、㎞、㎡、㎏ など) ・元号略字(㍼、㍻ など)

(25)

16 想定する利用者を考慮し、専門用語や外来語、略語などの多用を避ける

レベル1(関連 JIS 5.9b、5.9c、5.9d)

そのページを利用すると想定する利用者にとって理解しにくい専門用語や外来語、略語 については、分かりやすい言葉に置き換える。使用する場合には、そのページ上で初めて 記載されるときに、正式名称や訳語、補足説明などを加えること。 同様に、読みの難しい漢字には、振り仮名を付けるなどの配慮も必要である。 これは、すべてのページを平易にしなければならないという意味ではなく、ページの内 容に即して、想定する利用者を考慮して判断することが必要である。 【具体例】 ① 省略語の正式名称を括弧書きで表記する 1997年のWHO(世界保健機構)の調査によると、日本の 15歳以上の男性は、喫煙率が 59 パーセントになるそうです。 ② 外国語の使用を避ける 好ましくない例(左) 好ましい例(右) ③ 難しい言葉の読み方を明示する 光害(ひかりがい)とは、過剰な夜間照明などによる・・・

(26)

17 文字のサイズは、利用者が変更できるようにする

レベル1(関連 JIS 5.6a)

高齢者や弱視の人をはじめ、利用者にとってページの文字が小さくて読みづらいと感じ る場合などに、利用者の操作で文字のサイズを変更できるよう、pt(ポイント)などの固定 値ではなく、em や%などの相対的な単位で指定すること。指定の際にはスタイルシートを 用いることが望ましい。 【具体的な注意点 】 ページを作成する方法の一つに、Wordで作成した文書を[名前を付けて保存]か ら「ファイルの種類:web ページ」を選んでHTMLファイルにして保存するやり方があ るが、自動的に文字のサイズが固定値に設定されてしまうので、この方法は使わないこ と。 参 考 県ホームページでは、ブラウザの文字を大きくする方法を紹介しています。 紹介している方法で、ページの文字のサイズが変更できるかどうかを確認できます。 http://web.pref.hyogo.jp/moji.html

(27)

4章 画像

18 画像には必ず代替テキストを設定する

レベル1(関連 JIS 5.4a)

音声読み上げソフトの利用者でも画像の情報が得られるよう、また、何らかの原因で画 像が表示されない場合にそこに本来何の画像が表示されるかという情報を伝えるため、画 像には必ず代替テキスト(代わりとなる文字情報)を設定する。代替テキストには、その 画像の内容を明確に示すコメントを設定するが、特に内容のないデザイン上必要な画像に ついては、代替テキストにスペースを設定すること。 ※代替テキストは画像の上にマウスを持ってくると、□の中に設定内容が表示される。 ▲テキストを入力している場合 ▲スペースを入力している場合 【設定方法】 (ホームページビルダーの場合) 画像をクリックして選択→「編集」→「属性の変更」→「画像」タグの「代替テキスト(A)」 に入力 (ソースに直接書き込む場合) ①画像にalt= ”○○”を付記し、○○の部分に画像の内容を簡潔に書く。 <IMG src="img/yume.gif" ・・・ alt="ひょうご夢情報">

②特に説明の必要がない画像には、alt=” ”と記述する(スペースを入れる)。 <IMG src="img/icon_map.gif" ・・・ alt=" ">

(28)

供する)。画像ファイル自体には代替テキストを設定できないため、音声読み上げ ソフトを利用する場合、リンク先の情報が得られない。また画像ファイルでは、 画面上の操作設定(「戻る」ボタンの設定など)が不可能となる。

(29)

5章 リンク設定

19 リンクのある文字は、リンク先の内容を明確に表現する

レベル1(関連 JIS 5.3g)

音声読み上げソフトの中には、リンクのある文字だけを読み上げる機能を持つものがあ り、その文字に十分な情報が含まれていないと、それぞれのリンクの違いや、リンク先の 内容を理解できないことがある。 特に高齢者や視覚障害者に配慮し、①短い単語へのリンクにしない、②リンク先ページ の概要が把握できるようなるべく説明的なリンク文言にする、などによりリンク先の内容 を明確に表現すること。 悪い例 図の例のように、両方とも“こちら”や“戻る”だけにリンクを設定すると、どちらのページにリン クするのか理解できない。右の図は、画像にのみリンクを設定。 良い例

(30)

20 リンク画像には、リンク先の内容を予測できる代替テキストを設定する

レベル1(関連 JIS 5.4b)

画像にリンクが設定されている場合、代替テキストが設定されていなければ、音声読み 上げソフトはその画像のリンク先のURLを読み上げるため、リンク先が何のページか理 解しにくくなる。そのため、画像にリンクを設定する際には、リンク先の内容を想像でき るコメントを代替テキストで提供すること。 【具体例】 3つの例のうち、左の図は、リンク画像に関する代替情報が提供されていないため、 リンク先が何のページか全く分からない。また、中央の図は、代替情報が提供されてい るが、リンク画像であることも併せて利用者に伝えるためには、右の図のような代替情 報が適切であるといえる。 ※ 代替テキストの設定方法については、本ガイドライン(18)を参照。

(31)

21 リンクを設定した文字および画像は、マウスでの操作がしやすいよう、

大きさや位置に配慮する

レベル1(関連 JIS 5.3g)

マウスの操作に不慣れであったり、細かな操作が困難である場合を想定して、リンク設 定部分の大きさや隣との間隔に配慮すること。 また、リンクを設定した画像がマウスでクリックできることに気付かない場合があるた め、①クリックできることを明記する、②ボタンのようなイメージを持つ画像にする、③ ページ内でリンク画像のイメージを統一する、などできるだけクリックできることが分か るように配慮する。 【具体例】 ① リンクやボタンは操作しやすい大きさにする 良い例 リンクボタンが適切な大きさ 悪い例 ボタンが小さく、テキストにリンクが設定 に設定されている。 されていない。 ② 隣り合うリンクとの間隔をとる 良い例 間隔を十分にとっている。 悪い例 間隔が狭く、リンクの選択がしにくい。

(32)

22 リンク先のページは原則として別ウィンドウで開かない。やむを得ず

別ウィンドウで開く場合は、その旨を明記する

レベル1(関連 JIS 5.3e)

操作方法によっては、リンク先のページが別の新しいウィンドウで開かれることにより、 ①複数のウィンドウが開くことで最初のページに戻るのが困難になる、②音声読み上げソ フトを使用する場合、別ウィンドウが開いたことを読み上げることができない、③肢体の 不自由な利用者にとっては、複数のウィンドウを開いたり閉じたりするのは困難、などの 支障があるため、原則としてこれを使用しないようにすること。やむを得ず別ウィンドウ を開く場合には、その旨を明記し、利用者が意図せずに別ウィンドウを開いてしまわない よう配慮すること。 【具体例】 ・リンク先が新しいウィンドウで開くことを通知する

(33)

23 リンク先のページがPDFファイルである場合は、その旨およびファイ

ルサイズを明記し、閲覧ソフトを入手するためのリンクを提供する

レベル1(関連 JIS 5.3g、5.4e)

PDFファイルを開く環境がない、あるいは通信環境が遅く、大きなサイズのファイル を開くことが困難な場合を想定し、利用者が意図せずにPDFファイルを開いてしまうこ とがないよう、あらかじめ表記しておくこと。併せて、閲覧ソフト(Adobe Reader)をダ ウンロードできるサイトへのリンクを提供する。 【具体例】 ・PDFファイルを開くためのソフトをダウンロードできるサイトを紹介する。 ・PDFファイルのリンクを設定した文字に、PDFファイルであることと、ファイル のサイズを添える。 留意点 ・PDFファイルのサイズが大きくなりすぎないよう、見出しや章ごとに区切るなど、 分割して提供する工夫をすること。 ・PDFファイルは、利用者の環境によっては、音声読み上げソフトでその内容を読み 上げることができないことがあるため、文字による代替情報を提供すること(本ガイ ドライン(9 )参照)。 参 考 ファイルサイズの確認方法

(34)

24 マウス操作以外の手段で選択することのできないリンクの仕組みを用い

ない

レベル1(関連 JIS 5.3a)

マウスでの操作のみに依存せず、少なくともキーボードによってすべての操作が可能で あるページを作成すること。 音声読み上げソフトの利用者は、キーボードのタブキーやエンターキー、矢印キーなど を用いて、リンクの選択やページ内の移動などを行っている。また、上肢に障害を持つ利 用者は、トラックボールや専用のスイッチなどを用いてウェブを利用している。このよう な利用者の多様なウェブ利用環境に配慮すること。 [マウス操作のみに依存する仕組みの例] 以下に挙げるような仕組みは使用しないこと。 ・Java スクリプトを用いたリンクの仕組み ・オンマウスによるメニューの表示(マウスがその上にきた時のみ、メニューが表示さ れる仕組み) ・実行ボタンのないプルダウンメニュー [改善例:実行ボタンのあるプルダウンメニュー] ▲実行ボタン(上図では「GO!」のボタン)のあるプルダウンメニューであれば、 矢印キー、タブキー及びエンターキーにより、ページを選択し、リンクできる。 実行ボタンがなければキーボードで操作することができない。

(35)

6章 表組み

25 表組みを使用する際には、音声読み上げソフトの読み上げ順を考慮する

レベル2(関連 JIS 5.2d)

音声読み上げソフトは、表の内容を、左上のセルを始点として、左から右へ順に読み上 げるので、読み上げ順に考慮して表組みとその内容を作成すること。 表の規模や構成が複雑になると意図しない順序で読み上げ、内容の把握が困難になるこ とがあるので、①できるだけシンプルな表にする、②文章によるリスト(箇条書き)に置 き換える、などに配慮し、レイアウトのために表を使用するのはなるべく避けること。 [音声読み上げソフトの表の読み上げ順] ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ② ④ ① ⑤ ③ ⑥ ⑦ ⑧ ⑨ ⑩ ② ① ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑤ ⑫ ⑬ ⑭

(36)

26 表組みには適切な表題を設定する

レベル2(関連 JIS 5.2c)

表の属性に、表の内容を明確に示した表題を設定すること。 音声読み上げソフトは、表組みではまず表題を読み上げるため、表題を設定することに より、利用者に表の開始位置を伝える役目を果たす。 ただし、レイアウトを目的とした表組みには、表題を設定してはならない。 【ホームページビルダーによる 設定方法】 ① 表をクリックして選択→「編集」→「属性の変更」→「表」タグの中の「表題」の欄 で、表題を「表の上」につけるか「表の下」につけるかを選択→作成画面上に、点線で 囲まれた枠が表示されるので、その枠の中に表題を入力する ② 表をクリックして選択→ツールバーの「表」→「表題の挿入」→「表の上」か「表の 下」かを選択し、選択欄の下の白枠に表題を入力する

(37)

7章 フレーム

27 フレームは極力使用しない

レベル2(関連 JIS 5.2f)

音声読み上げソフトを使用する場合などは、視覚的にページ全体の内容を一度に把握す ることができないため、各フレームの役割を理解したり、フレームの一部の内容がリンク により入れ替わっても、そのことを認識できない場合がある。また、各フレームにスクロ ールバーが表示された場合、操作が困難になるなどの難点もある。 そのため、アクセシビリティの観点から、フレームの使用は避けることが望ましく、や むを得ず使用する場合には、各フレームの役割が明確になるよう配慮すること(具体的に は本ガイドライン(28)(29)を参照)。 ★フレームとは ホームページの画面を分割し、それぞれに個別のHTML ファイルを読み込むことによっ て、画面の一部分だけを入れ替えることやリンクさせることが可能な機能

(38)

28 フレームを使用する際は、フレームに表示される各ページに、ページ

内容を明確に示すページタイトルとフレーム名を付ける

レベル1(関連 JIS 5.2e、5.2f)

ページの性質上、やむを得ずフレームを使用する場合には、フレームに表示される各ペ ージに、ページの内容を明確に示すページタイトルとフレーム名を付けることにより、音 声読み上げソフトで個々のページの内容を把握しやすくすることができる。 【具体例】 ・ページタイトルの設定は、本ガイドライン(5 )を参照。 ・フレーム名は、フレームページの作成時に、リンクにおけるフレームの表示位置を示 すもの。 ファイル名:index.htm ファイル名:title.htm ページタイトル:兵庫県のホームページ ページタイトル:ひょうご夢情報 フレーム名:top

(39)

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>

(40)

8章 フォーム

30 フォームを使用する際は、入力条件をテキストで明確に示さなければ

ならない

レベル1(関連 JIS 5.3b)

利用者がフォームに入力する際に入力条件がある場合は、音声読み上げソフトの読み上 げ順に配慮し、入力条件をテキストで明確に示さなければならない。 なお、多数の入力項目がある場合、「○個の入力項目があります」など、入力項目の規模 が分かる情報を提供するのが望ましい。 【具体例】 氏名(必須項目) フリガナ(カタカナで入力) メールアドレス(半角で入力) 電話番号(ハイフンを入力) 例:000−0000 ・各入力条件は、利用者が入力した後に音声読み上げソフトで条件を読み上げないよう にするため、必ず入力欄の前に明示すること。 ・「フリガナ」などのように、視覚的な表現だけで情報を伝えるのではなく、音声読み上 げソフトの使用に配慮し、「カタカナで入力」と明示する。 ・電話番号、郵便番号など、入力方法が複数考えられる場合、入力例を明示する。 ・なお、住所を記入させる際、その一部のみ(都道府県名など)をプルダウン機能で選

(41)

9章 動画、音声

31 コンテンツに動画や音声が含まれる場合は、テキスト等で内容を示した

情報を併用する

レベル1(関連 JIS 5.4c、5.4d)

視覚情報や音声情報が得られない、あるいは動画や音声を再生する手段がない場合を想 定して、動画や音声の内容をテキスト等で提供しなければならない。 【具体例】 ① 音声の内容を書き起こしたテキストを用意する ② 警告やエラー発生などの音と同時に表示されるメッセージを用意する ③ 映像に対して、場面の状況などを音声で解説した音声解説を用意する

(42)

32 動画や音声を自動的に再生しない。また、動画や音声の再生・停止や

音量などをコントロールできるようにする

レベル2(関連 JIS 5.7a 5.7b)

利用者が意図しない形で自動的に動画や音声を再生すると、視覚や聴覚に障害がある場 合、映像や音が再生されていることが認識できない。また、音声読み上げソフトを利用し ている場合、ソフトの音声と自動的に再生された音が重なって聞こえにくくなってしまう ことがある。 そのため、動画や音声を提供する場合は、再生する前の段階でその旨を明示すること。 また、利用者の利用環境に配慮し、動画や音声の再生・停止や音量をコントロールできる ようにすること。 【具体例】 ① 音が再生されていることを伝える ② 音の出力をコントロールできるようにする

(43)

33 Flash データのみでのページ構成は避ける。また、Flash データの内容は、

テキストで内容を示した情報を併用する

レベル2(関連 JIS 5.4e)

Flash データを再生する手段がない場合、あるいは、特殊な操作方法を用いたり、音声読 み上げソフトを使用している場合を想定して、ページの全てをFlash データで作成しては ならない。また、ページの一部をFlash データで作成した場合には、Flash データを再生す る手段がない場合を想定して、動画や音声の内容をテキストで提供しなければならない。 ★Flash とは 米Macromedia 社が開発した、音声やベクターグラフィックスのアニメーションを組み 合わせてウェブコンテンツを作成するソフト。Flash Player という表示用ソフトをインス トールすれば、パソコンやOSの種類にかかわらず利用できる。

Updating...

参照

Updating...

関連した話題 :