富士通ウェブ・アクセシビリティ指針日本語サイト向け...

富士通ウェブ・アクセシビリティ指針日本語サイト向け

第1.01版

2002年7月18日

富士通株式会社

1.富士通のアクセシビリティに対する考え方

富士通グループでは、製品やサービスには機能や性能に加え、“アクセシビリティ（注１）が高い”ことが重要と考

えております。それを実現するため、以下の４つのコンセプトを富士通グループの製品やサービス開発に活かし

ております。

（1）視覚機能や聴覚機能などの低下が、製品やサービスの利用制限にならないよう、多様な操作方法を提供す

る。

（2）ユーザの体格や筋力の違い、運動や姿勢の制限、車いすの利用の有無などに、柔軟に対応でき、負荷や

疲労が小限になるよう、寸法、配置、操作方法、操作力等を設定する。

（3）ユーザの経験、知識、文化、言語などによって、誤解が生じたり、理解不能にならないよう、わかりやすい情

報提示を行なう。

（4 ）ユーザの作業の安全性、効果、効率、満足度が高まるよう、高いユーザビリティを有するインタフェースを設

計する。

（注１）アクセシビリティ：環境、設備、機器、ソフトウェア、サービス等を障害者、高齢者等、様々な人々が利用し

やすくしていこうという思想、及び、利用しやすさの度合い。

富士通ウェブ・アクセシビリティ指針

All Rights Reserved, Copyright (C) 富士通株式会社 2002 1

2.指針策定の経緯

近年のインターネットの普及により、「いつでも、どこでも」情報を受取ったり、発信することができるようになって

きております。富士通グループは、No.1インターネット企業として、さまざまなサービス・ソリューションを提供し、

この新しい情報社会を切りひらいてまいりました。

また富士通グループでは、これまでに、アクセシビリティの高い製品（注２）を数多く開発、提供し、誰もが情報社

会の恩恵を受けられることを目指してまいりました。

そして今回、インターネットについても、「誰でも」が容易に利用できるように「富士通ウェブ・アクセシビリティ指針」

を策定し、公開いたします。なお、本指針の策定作業は、国内外の様々な動向との整合性を保ちながら、進めら

れました。

（注２）富士通グループの開発、提供してきたアクセシビリティの高い製品の例

・高齢者、視覚障害者、車いす利用者、等を想定した操作しやすいATM

・視覚障害者のための表示拡大ソフトウェア、音声ブラウザ

・在日外国人、知的障害者、小学生のための読み仮名表示ソフトウェア

・視覚障害者、高齢者に対応した大きな文字サイズの携帯電話器



3.指針のポリシー

（1）実効性を重視

国内外のウェブデザイナー、社外有識者へのヒアリングを通し、実現性が高く、効果的内容を目指しました。

（2）グローバルな適用可能性

まず、国内の富士通グループが公開し、提供するウェブサイトに適用いたします。そして順次、各国語版を作成

し、全世界の富士通グループに適用を推進いたします。※携帯電話用ウェブサイトには適用されません。

（3）既存の基準、ガイドライン等との整合性重視

WAI（Web Accessibility Initiative）のWeb Content Accessibility Guidelines1.0、米国リハビリテーション法

508条、総務省ウェブヘルパー（注３）など、既存の基準、ガイドライン等との整合性を重視いたしました。

（注３）総務省ウェブヘルパー：総務省情報通信政策局が開発している「ウェブアクセシビリティシステム」。2002年4月の時点で実証実験中（http://www.jwas.gr.jp/）



4.指針の使い方

4.1.優先度について

優先度1の指針は、全てのウェブサイトでの必須要求事項とします。優先度2は強い推奨、優先度3は推奨としま

す。優先度2、3の項目は、各ウェブサイトの構築にあたって、その適用の要否を検討してください。

4.2.その他

本指針はアクセシビリティに関する事項のみをまとめたものです。ウェブサイトをデザインするにあたっては、本

指針以外に、以下の点にも注意する必要があります。

（1）公式に発表されている正しいHTML文法で記述する。

（2）W3Cで廃棄予定、又は、推奨していない技術は、使用しない。

（3）ユーザビリティに配慮する。



【参考】国内外の動向

・国内

中央省庁、地方自治体を中心に、ウェブ・アクセシビリティへの配慮が強く望まれています。

『高齢者や障害者等に配慮した情報通信関連機器・システム等の開発の推進及び高齢者・障害者の情報リテラ

シーの向上の支援を行い、高齢者・障害者が容易にITを利用できる環境を整備する。』

（IT戦略本部「e-Japan2002プログラム」2001年6月26日、

http://www.kantei.go.jp/jp/it/network/dai5/5siryou2.html）

・国外

アメリカ合衆国では、連邦政府のウェブ・アクセシビリティが法制化されています。

『障害を持つ連邦政府職員が、障害を持たない職員と変わりなく利用できること。障害を持つ国民が、障害を持

たない国民と変わりなく、連邦政府の情報、データへアクセスできるようにすること。』

（「リハビリテーション法508条」1998年改正、http://www.section508.gov/）

また欧州を中心に、508条と同様のガイドライン化の検討、国際規格（ISO/TS16071等）の検討などが進められ

ています。





（ 1）全てのページに、ページの内容を的確に示し、ページの識別が可能なように

タイトルをつけること。

○○

××【解説】

音声ブラウザの使用者は、<title>のテキストでページ内容

を把握します。

<title>のテキストが不適切な場合、ページ本文の読み上げ

で判断しなければならず、時間がかかります。

【事例と実装】

・<head>内の<title>で、ページタイトルを指定する。

・総文字数64文字以内とする。

・ページタイトルは、「ページ名-サイト名（例.アクセシビリティ

その１-FUJITSU）」など。

全体優先度：１

【悪い例】すべてのページの<title>が同じ場合

【良い例】<title>を変え、識別しやすくした場合



（2）ページ内で記述する基本となる言語を、明示すること。

優先度：１全体

【解説】

HTMLファイルで、言語を指定しない場合、音声ブラウザで

は、正しい発音で読み上げない場合があります。

例えば、フランス語で車を表す「voiture」という言葉は、初

期設定が“英語”の音声ブラウザでは「voter」（投票者）と発

音されてしまいます。


・ページ単位で指定する（<html>にlang属性を指定する）。

その場合、<meta>のcharset属性で指定した言語と同じ言

語を指定する（日本語の場合はcharset属性をShift_JIS、

iso-2022-jpなどに指定し、<html>のlang属性はjaを指定す

る。）。

・ページ内で言語が変わるところに<span lang=“en”>など

を指定する。ただし、個々の単語に指定する必要はない。

日本語文字コード（Shift_JIS、iso-2022-jpなど）指定のファ

イル内では、英語(アルファベット)と日本語以外の言語は、

lang属性を用いても正常に表示、読み上げがなされないた

め、注意すること。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head><title>アクセシビリティその１</title></head>

【良い例】ページ単位で日本語を指定する場合

○○



【解説】

文字色と背景色の明度コントラストが小さいほど、文字が読

みにくくなります。弱視の人、高齢者の場合は、特にその差

を充分確保する必要があります。また、色覚特性によって

は、赤と緑、黄と青、高齢者の場合は白と黄、青と黒、青紫

と黒を識別するのが困難な場合があります。


・明度の差を充分に確保する。

・赤と緑、白と黄、青と黒、青紫と黒の組み合わせは、避け

る。

・背景画像に明度の低い色を使用し、文字色を明度の高い

色にするような場合は、背景色（bgcolor属性）も明度の低

い色を指定する。

（3）文字色と、背景色との差（コントラスト、明度等）を充分に取ること。

○○

××

【悪い例】明度の高い白と黄の組み合わせ

【良い例】明度の高い白と明度の低い茶の組み合わせ

文字色と背景色の明度コントラストが小さいほど、弱視の人、高齢者の場合は、特にその差を充分確保する必要があります。

文字色と背景色の明度コントラストが小さいほど、弱視の人、高齢者の場合は、特にその差を充分確保する必要があります。

優先度：１全体



【解説】

色覚特性によっては、また高齢者（視覚が加齢性変化に影響された場合）は、色の違いを把握することが困難な場合

があります。


・色だけでなく、形、文字も変化させ、情報を識別できるようにする。

（4）情報識別の手段として、色彩のみを使用せずに、文字やパターンなどと併

用すること。

全体

××

【悪い例】色だけで円グラフの領域を表現

○○

【良い例】引き出し線をつけ領域の違いを表現

優先度：１



【解説】

光過敏性てんかんのある人は、１秒間に数回の明滅やストロボの光のような急激な変化に対し、発作を引き起こす可

能性があります。視覚に障害等がある場合や、加齢等の色々な原因で認知力等が低下してくるような場合には、明滅

や自動スクロールなどの変化する情報の、内容を把握するのが困難なことが生じてきます。


・画面全体が、1秒間に2回以上、明滅する表現はおこなわない。特に彩度の高い赤の明滅や、コントラストの強い画面

の反転は避ける。

・画面全体を占める、しま、渦巻き、同心円などの規則的なパターン模様は使用を避ける。また、上記パターンにおけ

る補色の配色は避ける。

・画面要素（文字、画像など）に、明滅や自動スクロールなどを使用する場合は、なるべく遅くし、内容を把握しやすくす

るか、静止した状態での情報提供（テキストによる解説など）も行う。

・<blink>は使用しない。

・<marquee>は使用しない。

（5）画面全体が明滅するような表現はおこなわない。また、情報量の多いもの

や、重要な情報には明滅やスクロール等、変化する表現は使用しないこと。使用する場合、コントラストが極端に変わるものや、速いもの等は避ける。




【解説】

音声ブラウザの中には、ステータスバーのテキストを読み上げないものがあります。また、本来ステータスバーに表示

されるURLの情報やロード状況が、表示されなくなります。（音声ブラウザの中には、JavaScriptで表示されるテキスト

を読み上げないものがあります。）


・メッセージは、本文に記載する。

（6）メッセージはステータスバーに表示しないこと。

全体

××【悪い例】ブラウザのステータスバーにメッセージを表示

優先度：１



【解説】

上肢障害や全盲のため、マウスなどのポインティングデバイスの使用が困難で、全ての操作をキーボードで行う人が

います。

（本来は、入力装置の種類によらず、全ての操作ができることが望ましい。）


・一般的なブラウザで、｢上矢印｣｢下矢印｣キーによる画面スクロール、｢TAB｣キーによるフォーカス移動ができる。

・キーボード操作は、全てのリンク及び入力項目にフォーカスを移動し、それらの選択、実行を可能とする。

・JavaScript、Javaアプレットなどのプログラムも入力装置に依存しないようにする。

（7）キーボードだけで、全ての操作ができ、情報を取得できること。




【解説】

弱視の人や上肢に障害のある人は、スクロール操作が困

難な場合があります。

また、弱視の人は、拡大ツールで画面の一部を拡大してい

ることがあります。拡大ツールのスクロールとブラウザのス

クロールが二重になり、操作がより困難になります。


・ウインドウの横幅が800ピクセルのとき、横スクロールなし

で表示できること。（ページの横幅を固定にする必要はな

い。）

（8）ウインドウを大化したときに、横方向のスクロールを発生させないこと。

全体

【良い例】ウィンドウ部分を含めて800ピクセル

○○

800ピクセル

優先度：２



【解説】

縦に長いページで、上下のスクロールを多用しなければな

らないページは、内容を把握するのが困難です。

弱視の人や上肢に障害のある人は、スクロール操作が困

難な場合があります。


・ページの縦幅450ピクセルを1画面として、長くても2から3画面分の長さとする。

・上記の長さにすることが不可能な場合は、ページ内ナビゲー

ションを用意する（ページの先頭へ戻るためのナビゲーショ

ンを、画面に配置するなど。この場合、サイト内で一貫した

ナビゲーションを用いること）。

（9）1ページは適切な長さにし、長くなるときは、適切なナビゲーション（ページ内

リンクやページの先頭へ戻るリンク）をつけること。

××

450ピクセル

全体

○○

【良い例】ページ内ナビゲーションを用意

【悪い例】上下に長いページ

優先度：２



【解説】

コンテンツの多い複雑なサイトの場合、音声ブラウザの使

用者や高齢者は、必要な情報を探すのに、時間がかかる

場合があります。


・サイトマップを提供し、各項目にリンクを設ける。

（10）サイトマップを提供し、サイト全体の構成を示すこと。

全体

○○

【良い例】コンテンツの多いサイトは、サイトマップを提供する

優先度：２



【解説】

コンテンツの多い複雑なサイトの場合、音声ブラウザの使用者や高齢者は、必要な情報を探すのに、時間がかかる場

合があります。


・情報構造や操作フローを表示する。

例1.階層や関係を示すナビゲーションを、各ページに表示する

例2.タブ表現を用いてナビゲーションを表示し、選択されているタブを強調する。など

（11）現在表示されているページが、サイト構造のどこに位置しているか、把握

できるようにする。

全体

○○

【良い例】ナビゲーションを表示

優先度：２



【解説】

ウェブサイトが対象とするユーザに応じて、他の言語のページを用意してください。また、日本語ページでも、平仮名を

用い、やさしい日本語で記述することで、より多くの人が読めるようになります。（日本語を母国語としない在日外国人

の約8割は、平仮名を読める。文化庁調査、2001年）


・他言語ページの内容の程度については、各ウェブサイトで決定すること（サイト概要のみを記述しても良いし、まったく

同じものを提供してもよい）。

（12）対象ユーザに応じて、他の言語のページを用意すること。

全体優先度：３



【解説】

上肢に障害のある人、視覚に障害のある人、高齢者は、内容を認識してから、操作を完了するまでの時間が長くなる

場合があります。


・時間制限は設けない。

・ゆとりのある時間設定にし、経過時間や残り時間をページ内で表示する。

（13）入力等に時間制限を設ける場合は、その設定時間をユーザが変更または

オフにできること。




【解説】

例えば、特定の技術やプラグイン（JavaScript、Javaアプレット、Flash、PDFなど）で、重要な情報を提供し、代替テキ

ストの提供ができない場合は、別途、テキストページを用意してください。


・テキストページでも、アクセシビリティ上問題にならない範囲で、画像を使用してよい。

（14）ページをアクセシブルにできない場合は、同等の情報を持つテキストペー

ジを用意すること。更新は、通常ページと同じタイミングで行うこと。




【解説】

音声ブラウザを利用している人は、画像（<img>）の内容を把握することが困難です。alt属性で画像の内容を記述します。


・alt属性で画像の内容を記述する。

・意味を持たない画像（箇条書きのポインタ等）や、テキストが併記されている画像には、alt=“”と記述すること（“の間には

何も入力しない）。

（15）画像には、画像の内容を的確に示すalt属性を付けること。

○○

【良い例】alt属性で画像を解説

○○

【良い例】意味を持たない画像はalt=””と記述

画像

××

【悪い例】「第二章」を２度読み上げてしまう

優先度：１



（16）リンクのある画像には、リンク先の内容を的確に示すalt属性を付けること。

画像優先度：１

【解説】

リンクのある画像（<img>）に、alt属性が指定されていない

場合、音声ブラウザは、リンク先のURLを読み上げます。音

声ブラウザの使用者は、リンク先を把握できません。


・alt属性でリンク先を記述する。

・リンク先をalt属性として記述することで、画像の説明が不

要となる場合は、画像の説明を省略してよい。（15参照）

・画像の内容を詳細に解説する必要がある場合は、alt属性

にリンク先を記述し、HTML内にテキストで解説を記述する。

○○

【悪い例】 alt属性なし（URLを読み上げてしまう）

【良い例】alt属性にリンク先を記述

××



【解説】

イメージマップのリンクに、alt属性が指定されていない場合、音声ブラウザは、URLを読み上げます。音声ブラウザの

使用者は、リンク先を把握できません。


・<area>に、alt属性を指定する。alt属性はリンク先の内容が把握できるように記述する。

（ 17）イメージマップには、リンク先の内容を的確に示す alt属性を付けること。

画像

○○××

【悪い例】 alt属性なし（URLを読み上げてしまう）【良い例】 alt属性にリンク先を記述

優先度：１



【解説】

サーバサイドイメージマップの場合、音声ブラウザは、リン

ク先の情報を読み上げません。そのため、音声ブラウザの

使用者は、リンク先を把握できません。


・クライアントサイドイメージマップを使用する。

・画像と同じHTMLファイル内に、別途テキストでリンクを設

ける場合は、サーバサイドイメージマップを使用してもよい。

・ただし、クライアントサイドイメージマップの場合も、ブラウ

ザの「画像表示しない」設定では、リンクを選択できない。し

たがって、画像と同じHTMLファイル内に、別途テキストでリ

ンクを設けるとよい。

（18）イメージマップはサーバーサイドではなく、クライアントサイドとすること。サー

バーサイドを使用する場合は、同一画面上にテキストリンクを付加すること。

【良い例】画像と同じHTMLファイル内に、

別途テキストでリンクを設ける

画像

○○

優先度：２



【解説】

画像内に描かれた文字は、ブラウザでサイズやコントラストを変更できません。ブラウザで文字サイズや文字色を調整

している高齢者、軽度な弱視の人は、参照するのが困難です。


・文字（特に漢字）の装飾（斜体など）は少なくする。

・背景に模様のある画像や写真は避ける。使用する場合は、文字が背景に埋もれないよう、文字の周囲に縁を描くな

どする。

・画像化した文字のサイズは、16ピクセル以上とする。

（19）画像化した文字は、文字フォント、サイズ、コントラスト等を考慮し、読みや

すくすること。

画像

×× ○○

【悪い例】いずれも文字が読みにくい

【良い例】読みやすい

優先度：２



【解説】

弱視の人は、画面を白黒反転させて表示していることがあります。文字を記述した画像で、背景色が透過色になって

いる場合、画像内の文字が読めなくなる場合があります。


・画像化した文字の周囲は、透過色を指定しない。

（20）画像化した文字の周囲には、透過色を設定しないこと。

画像

通常の設定では、参照できるが…【悪い例】文字のまわりが透過指定された文字白黒反転させている画面では、読みにくい

××

○○

【良い例】画像化した文字の周囲は、透過色を指定しない

優先度：３



【解説】

重要な画像（図表やグラフ）の解説が長い場合、alt属性で

は読みづらく、参照しにくくなります。alt属性の内容は、ツー

ルチップコントロールで表示されるため、マウスの利用が困

難な人や視覚に軽度の障害がある人は、把握するのが困

難です。


・画像と同じHTMLファイル内に、テキストで解説を記述す

る。

（21）重要な画像（図表やグラフ）には、概説を同一ページ内で提供するか、解

説ページへリンクさせること。

画像

○○

【良い例】グラフの解説をテキストで表記

優先度：３



【解説】

音声ブラウザの中には、リンクのあるテキストだけを読み上

げる機能を持つものがあります。リンクのあるテキストが、

「ここ」「こちら」のように表記されると、それぞれのリンクの

違いや、リンク先の内容を把握できません。


・リンクのあるテキストは、リンク先の内容を推測できるもの

にする。

（22）リンクのある文字は、リンク先の内容がわかるように表現すること。（「ここ」

「こちら」など指示代名詞だけでリンク先を指定しない。）

【悪い例】「ここ」「こちら」にリンクをつけると、リンク部分だけを読み上げた場合、すべて「ここ」「こちら」と読み上げてしまうので、リンク先を識別できない

リンク

より詳細な文章はここをクリックしてください。関連するページへのリンクはここをクリックしてください。

また、印刷用のデータは、ここからダウンロードしてください。

××

優先度：２



【解説】

サイト内基本操作（「戻る」等）および基本要素の表現（文言、ボタン形状、色彩、配置等）が、ページごとに異なると、上

肢に障害のある人や視覚に障害のある人は、内容の把握や操作が困難になります。


・サイト内基本操作および基本要素の表現は、配置位置、形状、ラベリング、色などサイト内で統一する。

・サイト内で共通のナビゲーションバーを設ける。

（23）サイト内基本操作（「戻る」等）および基本要素の表現（文言、ボタン形状、

色彩、配置等）に一貫性を持たせること。

リンク

○○

【良い例】すべてのページに同じナビゲーションバーを用意

優先度：２



【解説】

ウェブサイト内の全てのページの初に、長いナビゲーションバーが存在すると、音声ブラウザはページを表示するた

びに、ナビゲーションバーの内容を読み上げます。そのため、本文を読上げるまでに時間がかかります。


・ナビゲーションバーの手前に、本文へのリンクをつける。このリンクは、１ピクセルの透過色画像とすることで、視覚表

示に影響を与えない。

（24）ページ共通のナビゲーションバーやメニューなどをスキップできるよう、本

文へのページ内リンクを設けること。

リンク

本文へ

ページの先頭へ

【良い例】GIFなどの、透過色画像で、

ページ内リンクを指定する。これらのリンクは、音声ブラウザで参照可能。

○○

優先度：２



【解説】

リンクのある画面要素（文字、画像など）が隣接している場合、リンクの区切れを把握できないことがあります。

また、上肢に障害のある人や、高齢者は、意図したリンクをマウスで選択するのが困難な場合があります。


・リンクのある画面要素の周辺に、適度な空間を設ける。

・テキストリンクが横に並ぶ場合、各テキストリンクの間に縦線やスラッシュなどを区切りとしていれる。

・テキストリンクが縦に並ぶ場合、スタイルシートで行間を広く設定する。

・1文字でのテキストリンクは、隣接文字と間隔を設ける。

（25）異なる機能（リンク等）を持つ画面要素（文字、画像など）が隣接する場合、

誤操作しないように、充分な間隔を確保すること。

××

リンク

○○リンク先Ａリンク先Ｂリンク先Ｃ××

リンク先Ａ｜リンク先Ｂ｜リンク先Ｃ

リンク先Ａ／リンク先Ｂ／リンク先Ｃ○○

【悪い例】リンクの間に空白しかない

【良い例】リンクの間に縦線やスラッシュがある【悪い例】行間が狭い【良い例】行間が広い

リンク先Ａリンク先Ｂリンク先Ｃリンク先Ｄリンク先Ｅ

リンク先Ａ

リンク先Ｂ

リンク先Ｃ

リンク先Ｄ

リンク先Ｅ

優先度：２



【解説】

リンクのある画面要素（文字、画像など）の面積が小さい場合、上肢に障害のある人や、高齢者は、意図したリンクを選

択するのが困難な場合があります。


・適度なリンク範囲を確保できるように、文字列全体にリンクを設定したり、大きな画像、文字を用いる。

（26）リンクのある画面要素（文字、画像など）は、確実に操作できるように、充

分な面積にすること。

リンク

××

【悪い例】　（三角）だけにリンクがある状態

○○

【良い例】テキストもリンクがある状態

優先度：２



【解説】

写真のような画像や下線のないテキストの場合、高齢者や初心者は、リンクの存在を見落とす場合があります。


・リンクのあるテキストは、アンダーラインを消去しない。

・リンクのある画像を、ボタンに見えるようにする。（枠をつける、影をつけるなど。表現はサイト内で一貫して用いる。）

（27）リンクのある画面要素（文字、画像など）は、リンクがあることが見ただけで

分かるようにすること。

×× ○○

リンク

×× ○○

【悪い例】下線のないリンク【良い例】下線のあるリンク

【悪い例】ボタンとして表現していない画像【良い例】ボタンとして表現した画像

優先度：２



【解説】

リンク先に画像ファイルを指定した場合、音声ブラウザは画像の内容を読み上げることができません。

ウィンドウ、フレームのいずれについても、画像ファイルを直接表示することは避けてください。


・画像を配置したHTMLファイルを作成し、リンク先とする。

（28）画像への直接リンクはせず、画像読み込み用のHTMLファイルを作成し、

そこにリンクすること。

××

リンク

【悪い例】画像ファイルへのリンク音声ブラウザでの読み上げが不可能

優先度：２



【解説】

視覚に障害のある人や高齢者などは、新しいウィンドウが開いたことに気づかないか、または、その変化に戸惑う場合

があります。このため、前のページを表示するなどの操作が困難になります。さらに、多くのウィンドウが開いた場合、

不要なウィンドウを閉じねばならず、上肢に障害のある人は、その操作が困難です。


・新たなウィンドウ表示は、ヘルプなど同時に参照したい情報に限定する。

（29）リンク先は、同じウインドウに表示し、新たなウインドウを開くことは、必要

小限にすること。

リンク

××

前のページを表示したくても「戻る」ボタンを選択できない

【悪い例】新たにウィンドウを開き過ぎた場合

優先度：２



【解説】

視覚に障害のある人や高齢者は、自動的なページの変化に気づかないか、または、その変化に戸惑う場合がありま

す。


・サイトのURL変更に伴う新しいページへの移動などは、自動的におこなってもよい。ただし、自動的に移動することを

テキストなどで明示する。

・自動更新の有無、更新間隔などを変えられる場合は、自動変更してもよい。

（30）表示中のページを自動的に更新したり、自動的に他のページを表示（他の

ページへ移動）しないこと。

リンク優先度：２



【解説】

聴覚に障害のある人を考慮し、警告音などを使う場合は、同等の内容をページ内に表示してください。

視覚に障害のある人を考慮し、音声情報の追加や、音声ブラウザでの読み上げを可能にしてください。とくに、

JavaScriptで、ダイアログを表示することは避けてください。音声ブラウザによってはJavaScriptで表示されるテキスト

を読み上げません。


・音で情報を提示するときは、HTMLファイル内に同等の内容を表示する。

・JavaScriptによるダイアログボックス、メッセージの表示はおこなわない。

（31）重要な情報を知らせる場合は、警告音などの聴覚的な方法と、メッセージ

表示などの視覚的な方法で情報提示を行う。

音声・映像優先度：２



【解説】

聴覚に障害のある人は、音声で提供された情報を把握することができません。

プレゼンテーションをナレーションとスライドのみで配信するような場合は、テキストなどを提供し、視覚的にも情報を把

握できるようにしてください。


・音声データの内容を、テキストで記述し、提供する。

・テキストは、音声データと同期させて表示しても良い。また、音声の速度が速い場合は、要約しても良い。

・操作上の効果音（エラーや警告を除く）やBGMには、テキストの情報を加える必要はない。

（32）音声情報には、テキストなどによる同等の情報を提供すること。

音声・映像優先度：３



【解説】

視覚に障害のある人は、音声のない動画の情報を把握することができません。音声や、読上げ可能なテキストなどを

提供し、聴覚的にも情報を把握できるようにしてください。


・動画データには、内容を説明する音声または、テキストを提供する。

・テキストは、動画データと同期させて表示してもよい。また動画の速度が速い場合は、要約してもよい。

・音声は、動画データに同期させる。

（ 33）動画映像には、音声またはテキストなどによる同等の情報を提供すること。




【解説】

視覚や聴覚に障害のある人や高齢者は、音声、動画などの情報を、見逃したり、聞き逃す場合があります。

再度聞き直したり、いったん止めて、後で聞けるようにしてください。


・音声、動画などの重要な情報には、再生、停止、早送り、巻き戻しなどのコントロールを提供する（プラグインで提供さ

れる場合は、それを利用してよい。）。

・バナー広告や、ワンポイント的なGIFアニメーションには、不要。

（34）動画情報、音声情報は、再生、停止、音量調整などをユーザが制御できる

ようにすること。コンテンツ内に明確な制御部分を設けること。




【解説】

文字装飾は、音声ブラウザで読み上げないことがあります。

例えば、取り消し線の装飾が読み上げられないと、正反対の意味で伝わってしまいます。


・取り消し線のタグ（<strike>、<s>、<del>）は使用せず、「取り消し」であることをテキストで明示する。

（35）取消し線など意味が大きく変わる文字修飾タグは単独で使用せず、「取り

消し」等の言葉を併記すること。

【用意するもの】１．ビニールテープ２．カッターナイフ３．はさみ

××

【用意するもの】１．ビニールテープ２．カッターナイフ（不要になりました。）３．はさみ

○○

テキスト

【悪い例】取消し線のみで表記

【良い例】テキストで「取消し」を表記

優先度：１



【解説】

音声ブラウザによっては、テキストの記号を意図したように

読み上げないことがあります。重要な情報を示すのに、記

号だけを使用することは、避けてください。

絵文字(ASCIIアート)は意図どおり読み上げません。絵文

字は使わず、文字や画像に置き換えてください。

また、機種依存文字は、文字化けの原因となりますので、

使用しないでください。

（36）記号（「○」「×」「△」など）を識別などの目的に単独で使用せず、言葉など

で併記すること。また、機種依存文字（丸付き数字、ローマ数字など）などは、使用しないこと。

テキスト

【悪い例】「○」「×」は読み上げないことがある

チェック結果

○　価格、大きさ、速さ

×　重さ、色、機能

××

チェック結果

○（良い）　価格、大きさ、速さ　

×（悪い）　重さ、色、機能

○○

【良い例】「○良い」「×悪い」などと表記すれば、音声ブラウザでも理解可能

優先度：１



【解説】

小さな文字や、行間や文字間の狭い文章は、多くの人が読みにくくなります。

文字サイズや行間を読みやすく指定し、さらに、利用者が自分の好みにあわせて変更できるようにしてください。


●文字サイズ

・スタイルシートで指定する。

・相対値での設定を行う。

(これにより、ブラウザでのサイズ変更が可能になる。)

●行間

・スタイルシートで、指定する。

・line-height:は、日本語で120から200%。英語で160から250%とする。

（37）フォントサイズ、行間、表示位置等を指定する場合は、読みやすくすること。

テキスト優先度：２



1997年のWHOの調査によると、日本の15歳以上の男性は、喫煙率が59パーセントになるそうです。

1997年のWHO（世界保健機関）の調査によると、日本の15歳以上の男性は、喫煙率が59パーセントになるそうです。

【解説】

外国語、専門用語、略語、社内用語などは、特定の人にし

か理解することができません。一般的な用語に置き換える

か、注釈や解説を加えてください。


・乱用しないこと。

・専門用語などは、初出のとき、解説を括弧書きなどで記述

する。

（38）外国語、専門用語、略語、社内用語など一般的ではない言葉を多用しない

こと。

○○

テキスト

××

【悪い例】略語のみを表記

【良い例】括弧書きで正式名称を表記

優先度：２



【解説】

音声ブラウザでは、テーブルを、左上から、右下に読み上げます。そのために、行や列の関係がわかりにくくなります。

読み上げ順序を考慮したテーブルを作成してください。また、各行、各列の、見出し項目を読み上げず、内容が把握で

きない場合があります。

（39）表組は、行と列の関係や表示順序（セル単位、左上から右下）を考慮する

などして、わかりやすくすること。

④

①②

③

【例】一般に1行ずつ左から右のセルを読み上げます。

テーブル


●レイアウトに用いる場合

・読み上げ順序を考慮して、テーブルを作成する。

（特に、フォームにテーブルを使用する際は、ラベルとコン

トロールが対で順番に読上げられるようにする。）

●表として用いる場合

・行や列の見出し項目名は、<th>を使って指定する（<td>を使用しない）。

・scope属性、id属性、headers属性を記述する。

・セルの結合は、必要小限とし、複雑に入り組んだ表に

しない。

・重要で複雑な表には、テキストによる解説を提供する。

優先度：１



【解説】

表の上部に表題がない場合、音声ブラウザの使用者は、読み上げ中のテキストが表であることがわかりません。


・<caption>で、わかりやすい表題を指定する。

・レイアウトのためのテーブルには表題は不要。

（40）表の上部に、表題を記述すること。

テーブル

○○

【良い例】表の上部に表題を指定する

優先度：２



【解説】

音声ブラウザを利用する人は、フレームで細かく分割されたページの内容を把握するのが、困難な場合があります。


・フレームを、入れ子（フレーム内にフレームを設定する）にしない。

・フレームを使用する場合は、分割する領域を4つまでとする。

（41）フレームの使用は、小限にすること。

フレーム優先度：１

【悪い例】音声ブラウザでは、フレームを1つ選択して読み上げなければならない

フレームの入れ子は避ける

××フレームを即座に切り替えて内容を把握することは困難



【解説】

音声ブラウザの中には、各フレームに番号をつけて読み上

げるものがあります。タイトルがない場合、利用者は各フレー

ムの番号と内容との対応を覚えなければなりません。


・フレームに表示される各ページに、<title>でタイトルを指

定する。

・<title>の記述は、フレーム内でのそのページの役割(メニュー、本文など)とそのページの内容を示す。

（42）全てのフレームに、フレームの内容を的確に示し、フレームの識別が可能

なようにタイトルをつけること。

フレーム

【良い例】フレーム内の各ページに、

<title>でタイトルを指定

優先度：２

○○



【解説】

音声ブラウザの中には、<noframes>、<iframe>の内容を、

各フレームのページ内容の代わり、又は、各フレームのペー

ジ内容に追加して読上げます。


・<noframes>、<iframe>を指定する。

（<iframe>の場合、<iframe></iframe>の内容が、代替テ

キストとなる。）

・<noframes>、<iframe>の内容は、フレームに表示するペー

ジへのリンクか、フレームに表示するページの概要とする。

このページをご覧いただくには、フレーム対応のブラウザが必要です。フレームを使用しない場合は、下記のメニューページへジャンプされる事をお勧めします。メニューのページへ

<noframes><body><p>このページをご覧いただくには、フレーム対応のブラウザが必要です。<br>フレームを使用しない場合は、下記のメニューページへジャンプされる事をお勧めします。<br><a href="menu.htm">メニューのページへ</a></p></body></noframes>

（43）フレーム未対応ブラウザを考慮して、フレームを使わなくても読めるように

すること。

フレーム

○○

【良い例】<noframes>を記述する

優先度：２



【解説】

文字サイズを大きくすると、文字がフレーム内に収まらない

場合があります。このとき、フレームのスクロールバー、フレー

ム枠（ボーダー）が非表示だと、全ての情報を見ることが困

難になります。


・フレームのスクロールバー（<frame>のscrolling属性）は

非表示にしない。

・フレーム枠（<frame>のframeborder、border属性）は消

去しない。フレーム枠をユーザが任意に設定できるようにす

る。（フレームのスクロールバーとボーダーの両方を非表示

にするのは、絶対に避ける。）

（44）フレームのスクロールバーを非表示にしないこと。

フレーム

××

○○

【悪い例】スクロールバーがない

【良い例】

スクロールバーがあり、10番目の項目があることを推測できる

優先度：２



【解説】

プルダウンメニューの選択肢を選択した場合、即座に実行されることがあります。上肢に障害のある人で、キーボード

を使用する場合、意図した選択肢を選択する前に実行され、選択肢の指定が困難な場合があります。


・プルダウン形式の選択メニュー（<select>）は、実行ボタンを付ける形式にすること。選択肢を選んだだけでは、実行

されないようにする。

（45）プルダウンメニュー、ポップアップメニューなどで、選択したメニュー項目が、

自動的に実行されないこと。

×× ○○

フォーム

【悪い例】

「２.ジャーゴン」を選択したいのに、「１.マジカルナンバー」が選択される

【良い例】決定ボタンを設ける

優先度：３



【解説】

上肢に障害のある人や高齢者の場合、チェックボックスな

ど表示面積の小さいコントロールを、マウスで選択すること

は困難です。ラベル（名称）とコントロールを関連づけること

で、ラベル部分をクリックし、コントロールを選択することが

容易になります。

また、ラベルとコントロールを関連づけ、複数のコントロール

を適切にグルーピングすることで、設定すべきコントロール

が見つけやすくなります。


・<label>タグを使用し、ラベル（名称）とコントロールを関連

づける。

・コントロールが多くなる場合は、<fieldset>タグを使って、

グループ化する。また、<legend>タグでグループのタイトル

をつける。

（46）フォームは、ラベルとコントロールの関係を明確にし、設定項目をグルーピ

ングするなどして、わかりやすく、操作しやすくすること。

○○

【良い例】<label>タグを使用した場合「ポスター、チラシ」をクリックできる

××

【悪い例】<label>タグを使用しない場合チェックボックスしかクリックできない

フォーム優先度：３



【解説】

特定の技術やプラグインの中には、アクセシブルな配慮のないものがあります。障害のある人や高齢者は内容を把握

し、操作するのが困難な場合があります。


●特定の技術やプラグインはアクセシブルなものを使用する。

・音声読み上げを考慮し、PDFファイルのみでの情報の提供は避ける（2002年3月現在）。

●代替手段は以下を参考とする。

・特定の技術やプラグインの内容、または、それらを利用可能にする情報（ダウンロードページのURLなど）を、テキス

トで提供する。

・JavaScriptの場合は、<noscript>に記述する。

・プラグイン、Javaアプレットは、<object></object>に記述する。

（プラグインを<embed>で指定する場合は<noembed>、Javaアプレットを<applet>で指定する場合は、

<applet></applet>を利用する。）

（47）特定の技術やプラグイン（JavaScript、Javaアプレット、Flash、PDFなど）はアクセシブルなものを用いること。アクセシブルなものが存在しない場合は、代替手段を提供すること。

特定の技術やプラグイン優先度：２



【解説】

構造のための要素や属性と、表現のための要素や属性を切り分けて使用することにより、音声ブラウザなど、多様なブ

ラウザで利用できます。例えば、ある音声ブラウザでは、見出し(<h1>から<h6>)を指定したテキストは、それを読み上

げる前に音をならし、見出しであることを示すかもしれません。しかし、文字の大きさ(<big>など)だけで見出しを指定し

た場合、この効果を得ることが出来なくなります。見た目の要素の例：<b>、<i>、<big>、<small>、<tt>


構造のためのタグは、文字修飾の目的で使用せずに

論理構造の記述に用いる。

・見出し

　見出しには、<h1>から<h6> を用いる。

　文字サイズのみの指定に使用しない。

・引用

　引用文では、<q>または<blockquote> を用いる。

インデントのために使用しない。

・リスト。<ul><ol>。

　リストは、<ul>または<ol>を用いる。

インデントのために使用しない。

（48）構造のための要素や属性と、表現のための要素や属性は、正確に使用し、

論理構造に沿って記述すること。表現要素にはスタイルシートを使用すること。

スタイルシート優先度：２

構造見た目

見出し<h1> 文字サイズ：200%

段落<p> 行間：130%

引用<q> 左マージン：80ピクセル

リスト<ul> 左マージン：60ピクセル

【例】構造のための要素と表現のための要素



【解説】

一般のブラウザや音声ブラウザの中には、スタイルシートに対応していないものがあります。

例えば、スタイルシート(レイヤなど)で、表示順序（レイアウト）を指定した場合、その指定は音声ブラウザで反映されず、

理解できない順序で読み上げられることがあります。


・スタイルシートの指定を無効にして表示し、確認する。

（49）スタイルシートを使用する場合、未対応のブラウザで閲覧可能にすること。

スタイルシート優先度：２



検証方法（参考）本指針の各項目を検証する方法として、主なものを紹介します。

1.ブラウザの設定を変更し、内容が伝えられるか確認します。(1)グラフィックス表示をオフにし、代替表示されるaltテキストだけで情報が伝えられるか。

(2)サウンド出力をオフにし、重要な情報が伝達できなくなることがないか。

(3)スタイルシートをオフにし、ページが読めるか。

(4)画面表示色をハイコントラスト(注1)にし、白黒反転などさせてページが読めるか。

注1：Microsoft(R) Windows(R)の場合、[コントロールパネル]の[ユーザー補助]の[画面]で選択。

２.キーボードのみで操作ができるか確認します。たとえば、TABキーですべてのリンクに移動でき、カーソル（矢印）キーでスクロールバーを動かせることを確

認します。

３.グレースケールで表示しても、内容が伝わるか確認します。ウェブの画面を画像データとして保存し、画像編集ソフトなどでグレースケールに変換します。これにより、明

度の違いだけで内容が把握できることを確認します。

４.チェッカーツールを使用し、alt属性の有無、title要素の有無などを確認します。alt属性の有無など、HTMLの記述を機械的に確認するときに効果的です。「総務省ウェブヘルパー

（http://www.jwas.gr.jp/）」などが有名です。また、いくつかの指針は、文法チェック用のツールでも、チェック

可能な場合があります。

５.音声ブラウザを使用し、正しく読上げられるか確認します。alt属性の内容の適切さなど、チェッカーツールでは判定できない問題を確認するとき、とくに効果的です。

Microsoft、Windowsは、米国Microsoft Corporationの米国およびその他の国における登録商標です。

富士通ウェブ・アクセシビリティ指針 日本語サイト向け...

Documents

富士通ウェブ・アクセシビリティ指針日本語サイト向け...