ウェブアクセシビリティ

1.ウェブアクセシビリティの考え方

 「はじめに」で述べたように、インターネットにはこれまで障害者、高齢者等の情報利用を妨げてきた障害を取り払う利点があり、情報へのアクセシビリティを飛躍的に高める可能性を持っています。しかしながら、商用での活用が拡大したインターネットでは技術の多様化が進み、障害者、高齢者等、一部の利用者への配慮を欠いた技術開発も進められました。そのためW3C(World Wide Web Consortium)は、障害者を中心にウェブサイトのアクセシビリティを高めることを目的としてWAI(Web Accessibility Initiative)を1997年に設立し、アクセシビリティ向上への取り組みを始めました。
 ウェブアクセシビリティとは、「身体的な能力や環境の違いにかかわらず、誰もが平等にウェブサイトを利用できること」を指し、WAI が1999年に“Web Content Accessibility Guidelines 1.0” を発表してからその動きが本格化しました。2003年6月に公開された同ガイドラインの2.0版草案では、アクセシビリティの高いウェブサイトをデザインするための原則として、以下に示すような四つの原則が示されています。本県のウェブアクセシビリティについても、この原則を尊重して取り組むこととします。
ウェブサイトのデザインの原則 (出典:“ Web Content Accessibility Guidelines 2.0”)
知覚可能性(Perceivable)
コンテンツが言葉によって表現できない場合を除き、すべてのコンテンツがすべての利用者に知覚可能な形式で表現されることを保証する。

使用可能性(Operable)
コンテンツのインターフェース要素がすべての利用者にとって使用可能であることを保証する。

理解容易性(Understandable)
可能な限りコンテンツと操作の理解を容易にする。

健全性(Robust)
現在あるいは将来のアクセシビリティ技術や利用者エージェントと一緒に機能するよう、コンテンツの能力を最大化するウェブ技術を活用する。

※ W3C
WWWで利用される技術の標準化を進めるための団体で、1994 年にWWWの発明者であるティム・バーナーズ=リーが出資し、マサチューセッツ工科大学と欧州合同素粒子原子核研究機構の連携のもと発足した。現在、世界で400を超える組織が参加している。

2.ウェブサイトの計画

ウェブサイトの目的や利用者等の明確化
○目的と政策における位置付けを明確にする。(必須)
○利用者や利用形態をある程度事前に想定する。(必須)
(説明)
 ウェブサイトの開設は何らかの目的をもって行われるものですから、その目的と政策における位置付けを検討し、明確にすることが不可欠です。また、アクセシビリティに配慮したウェブサイトを実現するためには、利用者や利用形態についても、ある程度事前に想定する必要があります。例えば、子どもを対象にした学習情報提供が目的であれば、難しい漢字を極力使わずに画像等を多用することが理解増進に役立ちます。また、災害情報等の緊急性が高い情報に関しては、画像等を使わず、テキストによる速報性の高いデザインにすることが望ましく、携帯電話等にも対応することが望まれます。
分かりやすいサイト構造
○適切な深さの階層構造とする。(必須)
○メニューは、利用者が直感的に分かりやすい区分とする。(必須)
(説明)
 ウェブサイトを構築する場合、一つのページにすべての情報を掲載することは難しく、トップページにメニューを設け、他にメニューごとのページを作成する階層構造をとるのが一般的です。通常、計画時においてウェブサイトの階層構造をデザインしておきますが、必要以上に深く階層化すると、情報を探す利用者側の使い勝手が損なわれるので、計画時においてこの点に留意する必要があります。
 また、メニューに関しても、庁内における業務処理区分のように作成側にとって都合の良い分け方をするのではなく、利用者が直感的に分かりやすいメニュー区分とする必要があります。
図:サイト構造の良い例、悪い例
サイト構造の一貫性、継続性
○デザインを統一し、構造やデザインを頻繁に変更しない。(推奨)
○一度公開したものを安易に削除したり、アドレス等を変更しない。(推奨)
(説明)
 ホームページを繰り返し利用する人は、そのデザインや構造に慣れることで、より効率的に情報を見つけることが可能になります。そのようなウェブサイトの特性を考慮すると、ホームページごとにデザインが異なることや、構造やデザインを頻繁に変更することは利用者にとって不便であり望ましいことではありません。
 また、利用者の中には自分の必要なホームページを閲覧ソフトのブックマーク・お気に入りに登録したり、リンクを張ったりしますので、一度公開したホームページを安易に削除したり、アドレス(URL)や名前を変更しないことが望まれます。どうしてもアドレスを変更しなければならない場合には、元のアドレスにおいて新しいアドレスへのリンクを一定期間表示する必要があります。
ユニバーサルデザインを前提にした設計
○特定の閲覧ソフト等に依存する表現は極力避ける。(必須)
○特定の機器でしか操作できない表現は避ける。(必須)
○データ容量を極力小さく(100キロバイト程度以下)する。(必須)
○必要に応じて支援機能を整備し、誤操作に対する警告を表示する。(推奨)
(説明)
 ウェブサイトは、前述した情報のユニバーサルデザインや、情報システムのユーザビリティを前提に構築しなければなりません。特定の閲覧ソフトや特定のソフトウェアでしか表示できないような表現(例えば、一部の閲覧ソフトだけで機能する点滅機能<blink>など)は、避けなければなりません。仮に特定の閲覧ソフト等に依存した表現を用いる場合には代替手段を用意する必要があります。ポインティングデバイス等、特定の機器でしか操作できない表現は避け、キーボードのみでも操作できるようにすることや、速度が遅い通信回線でも支障なく表示できるようデータ容量を極力小さくする(1ページ当たり100キロバイト程度を上限)ことが必要です。また、必要に応じて利用者への支援機能等を整備し、利用者が間違った操作を行った場合はその対処方法を含む適切な警告を表示することが望まれます。
標準的な仕様への準拠と仕様の明示
○標準的な仕様に準拠し、その仕様を明示する。(必須)
○どの言語で書かれているかを適切に記述する。(推奨)
(説明)
 上記の設計に基づいて、具体的にウェブサイトを構築する際には、原則として標準的な仕様に準拠するとともに、その仕様を明示する必要があります。ホームページを記述するHTMLの標準的な仕様は、W3Cの勧告で定められていますが、現在いくつかのバージョン(版)があります。勧告には、HTML4.01Strict(厳密型)、HTML4.01Transitional(移行型、勧告において推奨しないとされている要素・属性が含まれる)やHTML4.01Frameset(フレーム設定型、Transitional にフレームが加わったもの)が規定されています。いずれの場合でも、どのバージョン(版)を使用するかについてHTMLの冒頭において適切に記述(DTD:Document Type Definition 文書型宣言)することが必要です。
 なお、ホームページがどの言語で書かれているかを示す lang属性に関しても、HTML全体、特定の段落、特定の語句などそれぞれの箇所で適切に記述することが望まれます。一部の読み上げソフトや表示装置は、この lang属性を読み取り、その言語に適した発音や出力を行うようになっています。そのため、使用している言語に応じて、日本語はlang="ja"と、英語はlang="en"と記述することがアクセシビリティの向上につながります。
文書型宣言の例
HTML 4.01 Transitional の場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
・・・略
</html>

3.テキスト

表現の簡略化
○専門用語、略語、外来語を乱用せず、分かりやすい言葉で表現する。(推奨)
○明瞭で簡潔な文章にし、情報を容易に把握できるようにする。(推奨)
(説明)
 ユニバーサルデザイン、ユーザビリティの繰り返しになりますが、利用者が容易に理解できるよう、専門用語、略語、外国語を乱用せず、分かりやすい言葉で表現することが望まれます。
 また、画面を通してホームページを見る場合、一度に見える範囲が限定されるほか、紙の文章を読むよりも時間を要します。そのため、明瞭で簡潔な文章にすることを心掛け、利用者が容易にホームページ内の情報を把握できるようにすることが望まれます。ホームページの情報把握を容易にするためには、以下に示すような方法があります。
文書表現簡略化の方法
要約の作成 ホームページの内容の要約を最初に表示する。
箇条書き 行頭数字等を付けて、短い表現で併記する。
構造化 文章をいくつかのまとまりに整理し、分けて表示する。
時系列化 新しい情報から順に、上から表示する。

機種依存文字の使用禁止
○機種依存文字を使用しない。(必須)
(説明)
 JIS規格の符合表上の空き領域に各ソフトウェア開発事業者が独自に定義した文字を「機種依存文字」と呼びます。これは使う機器によっては表示できない場合があり、あるいは異なる文字として表示される場合もあります。したがって、このような機種依存文字を使用しないでホームページを作成する必要があります。
図:主な機種依存文字の例
テキストの画像化禁止
○テキスト情報として作成された情報を画像化しない。(必須)
(説明)
 テキスト情報は出力形態の変更が容易であり、アクセシビリティに富んだ情報の形態です。テキスト情報をまとめて画像情報として表示しているホームページを見かけることがありますが、これには、文字の拡大・縮小が指定できない、読み上げソフトで読み上げられない、検索エンジンで検索できない、データ量が増加する等の欠点がありますので、アクセシビリティ確保の観点から、テキスト情報として作成されたものは、あくまでテキスト情報として発信する必要があります。
読み上げソフトへの配慮
○単語の間に無意味な空白や改行を入れない。(必須)
○単位や日時は、記号ではなく日本語で表記する。(必須)
○ASCIIアートを使用しない。(推奨)
(説明)
 テキスト情報の画像化以外に、テキストそのものの表現の仕方でも読み上げソフトの利用者への配慮が必要です。例えば、単語の間に無意味な空白や改行が存在すると、読み上げソフトは空白や改行で単語を分けて読み上げることになり、利用者側には意味が分からなくなります。また、単位や日時は記号ではなく日本語で表記しないと読み上げた場合、理解が難しくなります。文字や記号を組み合わせて絵を表現するASCIIアートと呼ばれるものも、読み上げソフトを用いている場合は理解が難しく、使用しないことが望まれます。
この中には、「顔文字」と呼ばれる (^^)、m(__)m も含まれます。
テキスト表記の良い例、悪い例
悪い例:電 子 行 政 (読み)『でん こ こう せい』
 ↓
良い例:電子行政 (読み)『でんしぎょうせい』


悪い例:今度の会合は秋 [改行]
    分の日を予定している
(読み)『こんどのかいごうはあき ふんのひをよていしている』
 ↓
良い例:今度の会合は秋分の日を予定している
(読み)『こんどのかいごうはしゅうぶんのひをよていしている』


悪い例:1,000kg (読み)『せんけーじー』
 ↓
良い例:1,000キログラム (読み)『せんきろぐらむ』

視覚的な配慮
○文字の点滅(画面全体の発光を含む。)は避ける。(必須)
○文字の色や大きさは、利用者が変更できるようにする。(必須)
(説明)
 文字を点滅させること(画面全体を強く発光させることを含みます。)は、光過敏性てんかんの人の発作を誘発する危険性があり、3Hz~60Hz(一秒間に3回~60回)の点滅や発光は避ける必要があります。
 また、作成者側において設定した文字の色や大きさが各個人にとって必ずしも望ましいとは限らないため、色覚障害のある人は文字の色を、視覚障害のある人は文字の大きさを、それぞれ変更して利用する可能性があります。したがって、文字の色や大きさに関しては、利用者が変更できるよう、HTMLのフォントの指定(font属性)などで固定的に規定しないようにする必要があります。

4.画像

サムネイルの活用
○データ容量が大きな画像をそのまま貼り付けず、サムネイルを活用する。(必須)
○大きな画像は、データ容量をサムネイルに併せて表示する。(必須)
(説明)
 ブロードバンド(広帯域)のサービスが普及してきているとはいえ、サービス提供区域や経済的な問題によってこのサービスを利用できない人もいます。したがって、ホームページは通信速度が低い利用者でも快適に利用できるための配慮が必要です。特に写真等の画像に関しては、データ容量が大きな画像をホームページに貼り付けるのではなく、最初はサムネイルを使用して、利用者が選択した後に大きな画像を表示する仕組みにする必要があります。また、その際、サムネイルと併せて大きな画像のデータ容量等も併せて表示することで、利用者は画像の大きさや表示までの時間をある程度想定することが可能になります。
※ サムネイル
小さく表示した画像の見本を指す。
テキスト情報の付記
○画像の内容を説明する適切な内容の代替テキストを埋め込む。(必須)
(説明)
 視覚障害の場合には、触覚表示装置等を使わなければ画像を認識することは難しくなります。したがって、ホームページの画像には、それがどのような内容を表しているかを適切に示す代替テキストを埋め込むことが不可欠であり、画像にalt 属性を用いて説明文を付記する必要があります。なお、説明文が長くなる場合(半角150字以上といわれます)は、longdesc属性を用いて説明へのリンクを提供することで対応している読み上げソフトに配慮する方法があります。
PDFファイルの取扱い
○可能であれば、HTMLとPDF双方で情報提供する。(推奨)
(説明)
 PDF(Portable Document Format)は、元文書と同じ形で印刷できる、OS(基本ソフト)に依存しない、閲覧ソフト(Adobe Reader)が無償配布されている等の理由から、インターネット上で文書データを配布するファイル形式として用いられる機会が多くなっています。しかしながら、現状では、読み上げソフト等のすべてがPDFに対応しているわけではないため、PDFのみではなく、可能であれば、HTMLとPDF双方で情報を提供することが望まれます。

5.映像・音声

情報の多重化
○映像や音声の情報には代替情報を加える。(必須)
○SMILを使用する場合は、別途テキスト情報を作成する。(推奨)
(説明)
 ブロードバンドの普及に伴い、映像や音声による情報の流通に対するニーズも高まると予想されますが、視覚や聴覚に障害を持つ人にとっては利用しにくい場合があります。そこで、代替手段として音声やテキストによる代替情報を付加する必要があります。すでに、SMIL(スマイル Synchronized Multimedia Integration Language)という、映像に音声解説情報や字幕を挿入するデータ形式が規格化されています。ただし、SMILを取り扱う映像再生ソフトそのものが視覚障害者にとって利用しにくい場合も多いため、別途テキスト情報を作成することが望まれます。
映像・音声のコントロール
○映像や音声の情報は、利用者が再生・停止できるようにする。(推奨)
○Flash等の機能は、基本的に使わない。(推奨)
○動画や音楽のファイルを自動的に再生させない。(推奨)
(説明)
 映像や音声による情報提供を行う場合は、基本的に映像や音声の再生は利用者が選択できる設定とし、特定の用途で自動再生を行う場合でも利用者がこれを容易に停止できることが望まれます。
 例えば、Flash等による動画機能を用いるホームページも見られますが、通信速度が遅いと表示が遅れるほか、視覚障害を持つ人にとっては利点がありません。また、同じホームページを度々利用する人にとっては、同じ動画を繰り返し見ることは時間の浪費につながることもあります。したがって、このような機能は基本的に使わないことが望ましく、どうしても必要な場合にはスキップ(飛ばすこと)できるようにすることが望まれます。
 また、ホームページに動画や音楽のファイルを埋め込み、ホームページを開くと自動的にこれらのファイルの再生が始まるようなウェブサイトも見られますが、上記と同様に、通信速度や、視覚や聴覚に障害を持つ利用者を考慮すると望ましくありません。特に読み上げソフト等を活用している利用者にとっては、邪魔になる可能性が高いものです。

6.ページレイアウト・デザイン

ページサイズ
○ページの横幅は、640ピクセルで横スクロールなく表示できるようにする。(必須)
○1ページの情報量は、なるべく少ない移動で読める程度にする。(必須)
○どうしても長くなる場合は、ページ内リンクを設ける。(必須)
(説明)
 大きな画面のパソコンも増えてきていますが、依然として画面の小さなパソコンを使っている人もいます。また、ホームページを閲覧する場合、縦方向の移動は比較的負荷が少ないが、横方向の移動が多いと利用者側の負荷が大きくなります。そのため、ホームページの横幅に関しては、現在の基本的な最小解像度である640ピクセルとして、横移動なく表示できる大きさとする必要があります。
 また、縦方向の移動に対する負荷が小さいとは言え、あまりに長く移動しなければすべての情報を閲覧できないのでは、やはり利用者の負荷が大きくなり、情報の一覧性や理解の面でも問題があります。したがって、情報量が多い場合は適宜、分割して、1ページの情報量はなるべく少ない移動で読める程度にする必要があります。どうしても1ページが長くなる場合は、当該ページの最初にページ内リンクを設ける必要があります。
※ ピクセル
画素。画面を構成する単位。
レイアウト・デザインの設定
○レイアウトやデザインについては、スタイルシートを活用する。(推奨)
○スタイルシートがなくても表示や理解に支障のない内容とする。(推奨)
○テーブルは、レイアウトやデザインのために用いることは避ける。(推奨)
○表は、読まれる際の順番に配慮する。(必須)
○フレームの使用は避ける。(推奨)
○フレームを用いる場合は、各フレームに適切な題名を付ける。(必須)
(説明)
 ホームページのレイアウトやデザインについては、スタイルシートの活用が望まれます。元来、HTMLは、「文書の論理的な構造」を示す言語でしたが、ウェブの急速な普及に伴いレイアウトやデザインが重視されるようになり、「文書の体裁」を整えるために利用される傾向が強まってきました。この状況を改めるため、W3Cでは、「構造に関する指定」と「体裁に関する指定」を区分して、前者をHTMLに、後者をスタイルシートに、それぞれその機能を担わせることとしています。しかしながら、閲覧ソフトや読み上げソフトの中にはスタイルシートに対応していないものもありますので、スタイルシートがなくても情報の表示や理解に支障をきたさないよう、内容をHTML の仕様に準拠して論理的な構造とするなどの配慮が望まれます。
 なお、HTMLで表の構造を規定する「テーブル(table要素)」については、これをホームページ全体に適用してレイアウトを整えるために使用されることがありますが、テーブルはあくまでも表の構造を示すものとして用いて、レイアウトやデザインのために用いることは避けるのが適当です。また、表を作成する場合には、読む側の理解や作成する側の意図に配慮し、読まれる際の順番に留意する必要があります。
 複数のページで一つのページを構成する「フレーム(frame要素)」を用いてウェブサイトを構築している事例もありますが、未対応の閲覧ソフトがあることや、読み上げソフトでは使いにくいことなどに配慮して、使用を避けることが望まれます。フレームを用いる場合には、各フレームに適切な題名を付ける必要があります。
※ スタイルシート
HTMLに関するレイアウトやデザインの定義をまとめて設定する技術又はその設定内容を指す。
表の読み上げ順序の例
悪い例
青森県岩手県宮城県秋田県
66,86060,424152,79250,666

読み上げ順序
青森県→岩手県→宮城県→秋田県→66,860→60,424→152,792→50,666


良い例
青森県
66,860
岩手県
60,424
宮城県
152,792
秋田県
50,666

読み上げ順序
青森県→66,860→岩手県→60,424→宮城県→152,792→秋田県→50,666

色への配慮
○色覚障害で見えにくい色の組合せに注意し、特に赤と緑の組合せは避ける。(必須)
○色の違いのみで情報を表現することは極力避ける。(必須)
○文字と背景のコントラスト(明暗差)は強めに設定する。(推奨)
(説明)
 ウェブサイトを利用する人の中には色覚障害を持つ人もおり、色の使い方への十分な配慮が必要です。色覚障害には、赤の感度がない(弱い)「第一色盲(色弱)」、緑の感度がない(弱い)「第二色盲(色弱)」、青の感度がない(弱い)「第三色盲(色弱)」があり、これらの色の組み合わせには注意することが必要で、特に赤と緑の組み合わせは避ける必要があります。また、色の違いのみによって情報を表現することは、極力避ける必要があります。
 さらに、上記の色覚障害者だけでなく、視覚障害のある人は、文字と背景のコントラスト(明暗差)が弱いと文字が読みづらくなるため、コントラスト(明暗差)は強めに設定するよう心掛ける必要があります。
図:色だけに頼った表現(悪い例)、そうでない表現(良い例)
簡素なデザインと情報配置への配慮
○不必要な画像、アイコン等は極力排除し簡素なデザインとする。(必須)
○読み上げソフトに配慮し、情報は基本的に左から右に配置する。(推奨)
(説明)
 各ホームページのデータ容量はできるだけ小さくする必要があり、ページの中で意味をなさない不必要な画像やアイコン等は極力排除し、利用者が必要な情報を効率的に取得できるよう簡素なデザインを心掛ける必要があります。
 また、一般的な読み上げソフトでは、左から右に向かって情報を読み上げます。したがって、ホームページにおける情報の配置も左から右の順で理解が円滑に進むように配慮することが望まれます。例えば、画像に関しては、基本的に説明文を左に、画像を右に配置することで理解が容易になります。

7.ページ間の円滑な移動

○ウェブサイトの構造を簡潔に示したサイトマップ(全体地図)を提供する。(推奨)
○ページごとに適切な題名を付ける。(必須)
○トップページや前後・上位階層へのリンクを用意する。(必須)
○ナビゲーションバーを用意する。(推奨)
○ホームページ間の移動を表す言葉は統一する。(必須)
(説明)
 ウェブサイトがたくさんのホームページから構成される場合、トップページを見ただけではサイトの全体構成が分かりづらく、必要な情報を見付けにくくなります。そこで、ウェブサイトの構造を簡潔に示したサイトマップ(全体地図)を提供することが望まれ、その必要条件としてページごとに適切な題名を付けることが求められます。特に、類似したホームページがたくさんある場合には、ページ相互の違いを表す情報(日付等)を題名に付記することが必要です。
 さらに、他のウェブサイトの検索機能を使って、県のウェブサイトを訪れる利用者もあり、必ずしもトップページから順番に入るのではなく、階層構造の下のページから入る場合もあります。したがって、どのページからウェブサイトに入っても、トップページや関連ページに移動できるよう、トップページや前後、上位階層へのリンクを各ホームページに埋め込む必要があります。
 また、ウェブサイトの規模が大きくなると、情報を探しているうちにサイト全体での位置を見失ったりする場合が想定され、検索機能等を用いてページを移動した場合にも現在位置が分かりにくくなります。そこで、ナビゲーションバーというものを設定することで、階層構造を表すとともに、他の階層やカテゴリーへの移動を容易にすることが望まれます。
 なお、読み上げソフトを用いている場合、ナビゲーションバーが繰り返し読み上げられてしまい利用者側の負荷になるため、本文への移動ボタン等をその前に設けておくことが望まれます。
 その他、利用者の混乱を避けるためにも、ホームページ間の移動を表す言葉に関しては統一を図る必要があります。例えば、トップページへの移動を表す言葉が「HOME」、「青森県庁ホームページ」、「トップ」等に分かれているのは、利用者に対する配慮に欠けているといえます。
※ ナビゲーションバー
前後のページやトップページへのリンクを明示的に示したもの。各ページに共通なものとすることが望ましい。現在位置をテキストの順序で表現したリスト(パンくず式リスト)も含む。
図:ナビゲーションバーの例

8.リンク

閲覧ソフトの同一画面の使用
○リンク先は同一画面で表示する。(必須)
(説明)
 ウェブサイトの大きな利点の一つが関連情報を持つホームページを相互にリンクできることですが、リンクを活用する際にはその意図が利用者に正確に伝達されるように配慮する必要があります。まず重要なのは、リンク先を新しい閲覧ソフト画面で開かないようにすることです。異なるサイトであることを強調する意図等から、リンク先を新しい閲覧ソフト画面で開くように設定しているホームページが多くありますが、読み上げソフトを使っている人にとっては、どの画面を見ているのか分かりにくい、狭いディスプレイだと表示が見えにくい等の問題があります。したがって、リンク先は同じ閲覧ソフト画面の中で表示されることが必要です。
サイト移動の明示
○移動する先が同一サイト内かどうかを明確に区別できるようにする。(推奨)
(説明)
 視覚に障害を持っている人は、ホームページの違いをデザイン等の差異等によって見分けることができません。したがって、知らないうちに他のサイトに移動していてもそれを理解できず、移動先のホームページにある「前のページに戻る」のリンクをクリックしても、実際には前に見ていたホームページに戻らない可能性があります。このようなことがないよう、異なるサイトへのリンクにはalt属性に「他のサイトへジャンプします」等の文字を加えたり、リンクそのものに同様の表記をしたりすることで、リンクによって移動するサイトが、同一サイト内なのかそうでないのかを明確に区別できるようにすることが望まれます。
図:サイト移動による位置関係の誤認例
リンクの分かりやすい表示
○テキストにはリンク箇所と混同される色の使用は避ける。(推奨)
○リンクを示すテキストの色はなるべく初期設定の色を用いる。(推奨)
○リンクを表すテキストは、リンク先を具体的に表現する。(推奨)
○同じリンクを表すテキストを二行にわたって表示しない。(推奨)
○別なリンクを連続したテキストで表示しない。(推奨)
○リンクに画像を用いる場合は、代替テキストを用意する。(必須)
(説明)
 一般的な閲覧ソフトの初期設定では、通常、未訪問のリンクは青色のテキストと下線で表示され、訪問済みのリンクは紫色のテキストと下線で表示されます。そのため、リンク箇所以外において同様の色を使うとリンク箇所と混同される可能性があるので、テキストにおける同様の色の使用は避けることが望まれます。逆に、リンクを示すテキストの色を任意の色に変えると、リンクであることに利用者側が気付かない可能性があるので、なるべく初期設定の色を用いることが望まれます。
 また、読み上げソフトの中には、文章中のリンク部分のみを抜き出して読み上げる機能を持っているものもありますので、リンクを表すテキストでは、「ここ」というような抽象的な内容ではなく、リンク先を具体的に表現することが望まれます。
 このほか、同じリンクを表すテキストを改行によって二行で表示したり、二つのリンク先を連続したテキストで表現したりすることも、利用者を迷わす原因となるので、このような表現を用いないことが望まれます。
 また、画像のみでリンクを表現することは望ましくなく、用いる場合でも必ずalt属性を埋め込むとともに、代替テキストを付加する必要があります。特にクリッカブルマップ等を用いる場合は、代替テキストを整備することが不可欠です。
リンク表示の悪い例、良い例
図:リンク表示の悪い例、良い例
リンク先が「ここ」で表現されており、読み上げソフトでは何のリンクか判別できない。

※ クリッカブルマップ
ホームページの画像等にリンク先のアドレスを埋め込む方法。画像等の上でクリックするとその場所に対応したページへ移動する。

9.必要情報の明示

○更新日時や担当部局・課、連絡先を明示する。(必須)
○リンク先がHTMLファイル以外の場合、ファイルの種類・大きさを明記する。(必須)
○著作権の表示を行う。(必須)
○個人情報を取り扱う場合には、その取扱を事前に明示する。(必須)
(説明)
 利用者がウェブサイトを利用する上で必要となる情報を明示することは、不可欠です。各ホームページの更新日時や担当部局・課、連絡先を明示することで、利用者は情報の鮮度を把握できるとともに、担当組織が分かり、問合せ等も容易になります。また、リンク先がHTMLファイル以外(画像、映像、PDFなど)の場合には、ファイルの種類や大きさを明記することが必要です。
 一方、権利や義務に関する情報を明記することも不可欠です。情報内容の無断での流用、改ざん等が起きないようあらかじめ著作権についての表示を行っておくとともに、ホームページから県民の意見を収集する際に個人情報を取り扱う場合には、その都度、県においてその個人情報をどのように取り扱うかを事前に明示しておくことが必要です。

10.検索機能

○検索機能は、その存在を明確に示す。(推奨)
○検索機能は、簡単なものとする。(推奨)
○高度な検索に関しては別途専用ページ等を用意する。(推奨)
○検索結果は、利用者が把握しやすい形で表示する。(推奨)
○検索のためのキーワードをメタ情報として埋め込む。(推奨)
(説明)
 ウェブサイトに情報検索機能を設ける際には、以下の点に留意する必要があります。検索機能があることに利用者が容易に気付くよう、その存在を明確に示すとともに、利用者が使いやすいように検索のための入力欄を分かりやすい場所に配置することが望まれます。
 検索機能は入力欄にキーワード(索引語)を入力・選択して「検索」ボタンをクリックする簡単なものとし、複数キーワード(索引語)、検索条件(日時や対象組織・分野)等を用いた高度な検索に関しては、別途、検索のための専用ページや、使用方法を解説したページを設けた方が、初心者にとって利用しやすくなります。また、検索機能の解説では、検索できる範囲(県庁全体なのか、特定部局・分野なのか)、情報の絞込みの方法等を明らかにすることが望まれます。
 検索結果は、検索対象情報の件数、そのうちの検索結果件数、検索結果件数中の表示されている件数等、利用者が把握しやすい形で表示されることが望まれます。検索結果件数が多数ある場合は、複数のページに分けて表示し、現状が何番目の検索結果かを示す機能を設けることも望まれます。また、検索結果を利用しやすいものとするためには、前述したように各ホームページに適切な題名が付いていることが不可欠で、付いていない場合には検索結果が役に立たない可能性もあります。
 加えて、検索機能に用いている検索ソフトウェアがメタ情報等をもとに検索するものである場合、想像・連想しやすいキーワード(索引語)を検索対象となる各ホームページにメタ情報として埋め込むことが望まれます。
 入力フォームには、どのような情報をどのような形式(全角/半角、ひらがな/漢字、大文字/小文字など)で入力してもらうのかを明示することが不可欠であり、入力項目が必須であるかどうか、あるいは入力例等も併せて示すことが必要です。また、入力形式の限定(全角のみ、小文字のみなど)は利用者側の負担となるので、可能な限り複数の入力形式に対応できることが望まれます。
※ メタ情報
情報に関する情報を指す。具体的には、ここではホームページのHTML文書において、メタ要素<meta name="keywords">により指定されているキーワードを指す。

11.双方向機能

入力フォームの分かりやすさ
○どのような情報をどのような形式で入力するかを明示する。(必須)
○入力項目が必須かどうか及び入力例等を示す。(必須)
○可能な限り複数の入力形式に対応する。(推奨)
(説明)
 ウェブサイトは情報を発信するだけでなく、県民をはじめとするウェブサイトの利用者から情報を収集する手段として活用できます。特に入力フォームは、定型的な情報を利用者から収集する仕組みとして有効であり、様々な場面で使われる機会が多くなっています。
 しかし、入力フォームを活用する際には、入力に必要な情報を提供しておくなど、使い勝手に十分な配慮が求められます。
 入力フォームには、どのような情報をどのような形式(全角/半角、ひらがな/漢字、大文字/小文字など)で入力してもらうのかを明示することが不可欠であり、入力項目が必須であるかどうか、あるいは入力例等も併せて示すことが必要です。また、入力形式の限定(全角のみ、小文字のみなど)は利用者側の負担となるので、可能な限り複数の入力形式に対応できることが望まれます。
図:入力フォームの悪い例、良い例
入力フォームの内容確認とセキュリティ(安全性・機密性)
○入力内容は、送信前に確認できるようにする。(推奨)
○個人情報が送信される場合には、セキュリティを確保する。(必須)
(説明)
 利用者が入力フォームに入力を行って、その情報を発信する場合、後から誤入力に気付くことや、利用者が気付かずに誤入力していること等があり得ます。したがって、入力フォームへの入力が完了しただけでは情報が送信されない仕組みにし、入力内容に関して確認ができるようにすることが望まれます。
 また、入力フォームで利用者が送信する情報の中に個人情報(氏名、住所、電話番号、年齢、性別、職業など)が入っている場合には、利用者の端末から県のサーバへ情報が送られるまでの間に盗聴されないよう、SSL等のセキュリティ(安全性・機密性)を確保した仕組みを用いる必要があります。
※ SSL
Secure Sockets Layerの略で、閲覧ソフトとサーバとの間でやり取りするデータを暗号化することでセキュリティ(安全性・機密性)を確保する技術。
電子メール利用の留意点
○各情報の連絡先には電子メールアドレスを併記する。(必須)
○電子メール送信のリンクであることを可能な限り分かりやすく表示する。(推奨)
(説明)
 入力フォーム以外に電子メールの利用も一般的になってきています。電子メールアドレス等をクリックすると、自動的にメールソフトが起動して、送付先のアドレスが入力された新規メールが作成されるため、利用者側には便利です。前述したように、各情報には連絡先を明示する必要がありますが、利用者が平日の昼間に電話等で連絡できない可能性を考慮すると、電子メールアドレスも併せて明示する必要があります。
 一方、このような電子メール送信へのリンクが分かりにくい場合、利用者の意図に反してメールソフトが立ち上がってしまい、利用しにくくなります。したがって、電子メール送信のリンクであることを利用者に可能な限り分かりやすく示すことが望まれます。

12.その他の留意点

Javaスクリプト
○Javaスクリプトを使う場合は、それが無効となる環境でも同様のサービスが提供できるようにする。(必須)
(説明)
 Javaスクリプトはホームページ上で稼働するプログラムとして、ポップアップメニュー等、いくつかの便利な機能を提供できる反面、未対応の閲覧ソフトがあるほか、読み上げソフトを用いている場合には利用できない可能性があります。したがって、Javaスクリプトを使う場合には、Javaスクリプトが無効となる環境でも同様のサービスが提供できるよう、HTMLのnoscript要素内に代替する内容を記述することが必要です。
Javaアプレット、プラグイン(追加機能ソフト)
○Javaアプレットやプラグイン等を使用する場合は、利用方法の解説や代替手段を提供する。(必須)
(説明)
 Javaアプレット、プラグイン等、閲覧ソフトにプログラムを追加することで、ホームページにおける高度な表現が可能になります(前述したFlash等もプラグインに含まれる)が、利用者にとっては、インストール作業やプログラムのバージョン(版)の違いへの配慮等、負荷も少なくありません。また、Javaスクリプト同様、未対応の閲覧ソフトがあるほか、読み上げソフトを用いている場合には利用できない可能性があります。したがって、このようなJavaアプレットやプラグインを使用する場合には、ダウンロード(下り転送)やインストール(ソフトウェア導入設定)の方法を分かりやすく解説するとともに、Javaアプレットやプラグインが提供する情報やサービスを代替手段でも提供しておく必要があります。
※ Javaアプレット
対応する閲覧ソフト上で実行できるJava(プログラムするための言語の一種)のプログラム。

13.ウェブサイトの評価と改善

評価と改善の仕組み
○定期的に評価し、改善する仕組みを作ること。(必須)
(説明)
 「情報のアクセシビリティ」で述べたようにユニバーサルデザイン、アクセシビリティへの取組についてマネジメントサイクルを構築することが不可欠ですが、ウェブサイトに関しては、特に、定期的にこれを評価し、改善していく仕組みが必要です。評価の方法としては、県庁内部で評価する自己評価と、第三者に評価を依頼する外部評価が想定されます。
自己評価(自己チェック)
○チェックツールで確認すること。(必須)
○複数の利用環境で確認すること。(必須)
(説明)
 ウェブサイトのアクセシビリティを確認するには、そのためのツール(道具)を活用することで、ある程度の確認を行うことができます。特にページレイアウト・デザインで述べた「色への配慮」については、専用のチェックツールを用いることにより実際の見え方を確認することができます。また、県庁内部において複数の環境を設け、実際に利用してみることも確実性の高い評価の仕組みであり、読み上げソフトによる試聴や、環境(処理速度、通信速度、画面の大きさなど)の異なる端末での確認が必要です。
ウェブサイトのチェックツール例
対象 チェックツール
全般 ウェブヘルパー
平成12年度から総務省が開発に取り組み、高齢者や障害者、誰もがホームページを利用できるよう、ホームページの問題点を点検し修正を支援するために作成されたシステム。平成16年1月時点で、Ver2.0とスクリーンリーダー対応を図ったVer2.0R、それにVer1.0の計3種類のバージョン(版)を公開

Personal i-Checker Ver 1.0
端末に転送し、端末上のHTMLファイルについてアクセシビリティの確認を行うプログラム。日本アイ・ビー・エム株式会社が提供。

ウェブバリアファインダー
株式会社インフォ・クリエイツが提供するホームページのアクセシビリティを確認するウェブサイト。URLを入力すると、国のIT戦略会議の指針に基づくガイドラインの一部項目を確認するが、登録が必要。

WebInspector(ウェブインスペクタ)
富士通株式会社が提供する自社のウェブ・アクセシビリティ指針に基づきホームページのアクセシビリティを診断するソフトウェア。白内障者や色弱者の方にとっても読みやすいか否かを診断する機能を有していることが特徴。
Color Access
杉村昌彦氏が提供するフリーソフト。第一色盲(色弱)、第二色盲(色弱)の人にどのように見えるかを確認。

カラーコントラストチェッカー V2.0
有限会社アイ・クリエイツが提供する第一色盲(色弱)、第二色盲(色弱)、第三色盲(色弱)の人にどのように見えるかを確認できるウェブサイト。
※ フリーソフト
コピー・配布が作者によって認められているソフトウエアの総称。
外部評価
○実際に利用者側から外部評価してもらう。(必須)
(説明)
 ウェブサイトの利用者は多岐にわたるので、すべての人の使い勝手を発信者側でチェックすることには限界があります。したがって、利用者にとってアクセシビリティが向上しているかどうかを、実際に利用者側から外部評価してもらうことが重要です。
 具体的には、県のウェブサイトについては、情報政策課を窓口として、障害者団体や福祉関連NPO等の協力を得てウェブサイトの評価を実施することや、ウェブサイトのモニターを募ることが想定されます。県庁の膨大なウェブサイトのすべてを毎日確認することは現実的でないため、外部評価は年数回、範囲を限定して、定期的に行うことが想定されます。

関連タグ

この記事についてのお問い合わせ

広報広聴課
電話:017-734-9137  FAX:017-734-8031

この記事をシェアする

  • facebook
  • twitter
  • googleplus
  • LINE

フォローする

  • facebook
  • twitter

みなさんの声を聞かせてください

このページの内容に満足しましたか?

このページの情報は見つけやすかったですか?

送信前に確認

このページの県民満足度

県民満足度