目次

はじめに……………………………………………………………………………………………………… 1
１２のポイント
ポイント１．正しい文法で書く………………………………………………………………………… 3
ポイント２．タグで構造や役割を示す………………………………………………………………… 4
ポイント３．画像が見えない人のために……………………………………………………………… 5
ポイント４．利用者が迷わないリンク………………………………………………………………… 6
ポイント５．テキストで注意すること………………………………………………………………… 7
ポイント６．テーブルに必要とされる配慮…………………………………………………………… 8
ポイント７．迷わず使える入力フォーム……………………………………………………………… 9
ポイント８．フレームをバリアにしない ………………………………………………………………10
ポイント９．スクリプトとマルチメディア ……………………………………………………………11
ポイント１０．スタイルシートを有効に使う……………………………………………………………12
ポイント１１．色づかいの配慮……………………………………………………………………………13
ポイント１２．その他に注意したいこと…………………………………………………………………14
ＪＩＳの個別要件と１２のポイントの関連 ……………………………………………………………………15
総務省「みんなの公共サイト運用モデル」…………………………………………………………………19

はじめに
ウェブアクセシビリティの大切さ
ウェブアクセシビリティとは、「障害者や高齢者など、心身の機能に制約のある人でもウェブで提供されている情報に問題なくアクセスし利用できること」を意味する言葉です。ウェブは、障害者や高齢者にとっても重要な情報源であり、多くの利用者がいます。しかし、実際には多くのウェブページにバリアがあり、そのページに書かれている内容さえ知ることができないことも少なくありません。
では、なぜそのようなことが起きるのでしょうか？

まず知っていただきたいのは、すべての利用者が同じブラウザを使っているわけではないということです。テキストだけが表示されるブラウザを使っている人もいれば、コンピュータの音声で内容を読み上げさせて聞いている人もいます。特定の一般的なブラウザでどのように表示されるかだけを考えて作られたウェブページは、それ以外の環境では情報として正しく伝わらないことが多いのです。
また、すべての利用者が同じようなハードウェアを使っているわけではない点にも注意する必要があります。たとえば、マウスが操作できないためキーボードをはじめとする他の機器を使っている利用者は少なくありません。
また、小さな画面を使っている人や、画面は大きくても表示内容を極端に拡大している人もいます。様々な理由か
らモノクロの画面を使っている人もいるでしょう。そのような理由から、フルカラーの大画面でマウスを使っている利用者を前提として制作されたページは、そうでない環境の人には利用できないことも多いのです。

１

このパンフレットについて
パンフレットの構成

このパンフレットは、プロのウェブデザイナーはもちろんのこと、職場でウェブ制作の担当になっている
人や個人でホームページを公開している人など、ホー

文法

構造

画像

リンク

p.03

p.04

p.05

p.06

テキスト

テーブル

フォーム

フレーム

p.07

p.08

p.09

p.10

スクリプト
マルチメディア

スタイルシート

色

その他

p.11

p.12

p.13

p.14

ムページを作る機会のあるすべての人に向けて、知っておいてもらいたいウェブアクセシビリティのポイン
トをまとめたものです。パラパラとめくってみて、まずは興味のありそうな部分だけでも読んでみてください。ほんの少し知識を増やして、ほんの少し気をつけるだけで、多くの利用者がそのページを利用できるよ

ＪＩＳの個別要件と１２のポイントの関連
p.15〜18

うになるのです。

パンフレットの内容は、１ページずつ大きく12種類に分かれています。そして、各ページは２つまたは３つの項目で構成されています。それぞれの項目は、一つひとつで完結していますので、はじめから順番に読み進める必要はありません。まずは、できるところから、ほんの１つでもあなたの制作するページに取り入れてみてください。
また、ウェブアクセシビリティの維持・向上の実践のため、総務省「みんなの公共サイト運用モデル」を紹介しています。こちらについても是非ご活用下さい。

情報バリアフリーのための情報提供サイト
情報通信研究機構（ＮＩＣＴ）では、「情報バリアフリーのための情報提供サイト」を平成14年７月に開設し、平成１５年３月には同サイト内に「みんなが使えるホームページの作り方」を掲載しました。
更に平成16年及び17年にはサイトのリニューアルやコンテンツの充実化を図り、現在、８つのコーナーで、
情報バリアフリーに関わる様々な情報提供を行っています。
「みんなが使えるホームページの作り方」は、掲載以
来多くの方々にご愛読いただいてきましたが、今回、ウ「情報バリアフリーのための情報提供サイト」
URL：http://www2.nict.go.jp/v/v413/103/index.html

ェブアクセシビリティＪ
ＩＳとの対応等、内容の追加や改訂を行いました。
このサイトのそれぞれのページは、どのような環境から利用した場合でも情報の内容が伝わるように出来る限り配慮しています。

「みんなが使えるホームページの作り方」
URL：http://www2.nict.go.jp/v/v413/103/accessibility/minna/index.html

２

正しい文法で書く

ポイント１

DOCTYPE宣言をつける【関連するJIS X 8341-3 個別要件】5.1.a

HTMLはいくつかのバージョンと種類に分かれています。そして、それぞれで使えるタグの種類や配置場所などの決まりが異なります。

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

そのため、文法をチェックするには、DOCTYPE宣言をつけてバージョンと種類を明示する必要があります。また、この
DOCTYPE宣言は、最近では別の役割も果たすようになっていま<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

す。比較的新しいブラウザの中には、「標準モード」と「互換モード」という２つの表示モードがあるものが多いのですが、それ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

らはDOCTYPE宣言の書き方によって自動的に切り替わる仕組み

Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">になっているのです。どう書くとどちらのモードになるかはブラウザによって異なりますが、標準的な正しい表示をさせたいので

HTML4.01のDOCTYPE宣言の例。Strict、Transitional、Framesetの３種類がある。

あれば、正しいDOCTYPE宣言をつけるようにしてください。

使うべきでないタグ【関連するJIS X 8341-3 個別要件】5.1.a

HTMLのタグの中には、使うことを「非推奨」とされているもの

applet

JAVAアプレットがあります。それらは、主に表示方法の指定を行うタグで、現在

basefont

基準フォント・色・サイズ

ではHTMLではなくスタイルシートで指定することになっている

center中央揃え

dir

ディレクトリ・リスト

ものです。「非推奨」のタグを使うと、様々なアクセシビリティ

font

フォントの種類・色・サイズ上の問題を引き起こしますので注意してください。特定の企業な

isindex

検索用入力フィールド

どが独自に拡張した、表示を制御するタグについても同様です。

menu

メニュー・リスト

また、タグの中で指定する属性の中にも「非推奨」とされている

s

取消線

strike取消線

u

下線

ものがあります。基本的には、文字色や背景色、フォントの種類、行揃えなどの表示方法を設定する属性は、非推奨です。同じ名前

HTML4.01で非推奨とされているタグ。

の属性でも、タグの種類によって「非推奨」とそうでないものがありますが、詳細は専門書などを参考にしてください。

文法の確認【関連するJIS X 8341-3 個別要件】5.1.a

W3C(World Wide Web Consortium)が勧告として公開していW3CのHTML検証サービス。
URL：http://validator.w3.org/

るHTMLやCSSなどの仕様は、アクセシビリティを十分に考慮して作成されています。そのため、その文法を守ることによって、アクセシビリティ上の問題の多くを取り除くことができます（ただし、文法が正しいからと言って、それがアクセシブルであるとは限りません）。W3Cには無料で利用できるHTMLとCSSの文法チェックのページ（検証サービス）がありますので、ページを作成・変更したら常にチェックするようにしてください。タグの閉じ忘れなどの単純なミスによって、自分のブラウザでは問題な
くても、他のブラウザでは何も表示されない、というような事態も防ぐことができるかもしれません。

３

W3CのCSS検証サービス。
URL：http://jigsaw.w3.org/css-validator/タグで構造や役割を示す
見出しを明確に示す

ポイント２【関連するJIS X 8341-3 個別要件】5.2.a

見出し（h1〜h6）を正しくタグ付けし、明確に示すことは重要なことです。たとえば、ホームページの内容を音声で読み上げさせている場合、そのページの構成を把握するために、見出しだけを抜き出して読み上げる機能を利用して拾い読みをすることもあります。その場合、見出しが正しくタグ付けされていなければ、見出しとして認識されず読み上げられません。また、逆に文字を大きく表示させたいなどの理由で、見出しでない部分に見出しのタグ付けがされていると、関係ない部分が読み上げられて混乱する可能性もあります。見出しは画像になっていることが多いですが、<h1>情報バリアフリーのための情報提供サイト
へようこそ</h1>

たとえ画像であっても見出しとしてタグ付けする必要があるとい見出しの例とそのソース。適切に見出しのタグが付けられている。

う点にも注意してください。

強調したい部分のタグ付け【関連するJIS X 8341-3 個別要件】5.2.a

文字の色を変える、太字にする、下線を引く。これらは、その部分を強調したい時の手段です。しかし、HTMLで表示方法を指定

em {するだけだと、その通りに表示できない環境を利用している人には、強調されていることが伝わりません。HTMLで強調を示すには、
emタグ(普通の強調)またはstrongタグ(普通より強い強調)を使い

font-style: normal;/* 斜体を戻す */font-weight: bold/* 太字にする */}strong {ます。そのままの状態だと、一般的にemタグの内容は斜体で、font-weight: bold;strongタグの内容は太字で表示されますが、表示方法はスタイル

text-decoration: underline; /* 下線を引く */シートで自由に変更できます。HTMLで強調されていることを構

color: #ff0000;/* 文字を赤に */background: #ffffff/* 背景を白に */造的に示しておくと、たとえば音声で表現される場合でも、音量/* 太字にする */}や抑揚などの変化でそれを伝えることが可能になります。
em要素とstrong要素へのスタイルシートの指定例

ブロックレベルとインライン【関連するJIS X 8341-3 個別要件】5.2.a

HTMLで使うことのできるタグの中には、１つのまとまった単位として扱われるもの（ブロックレベル：見出し・段落など）と、その中の文章の一部として使われるもの（インライン：強調・リ

ブロックレベル要素の例
address blockquote div
fieldset form
h1〜h6
p
pre
table

dl
ol
ul

ンク・画像など）があります。HTMLの基本的なルールとして、
インラインのものは、ブロックレベルの中に入れることになっています。たとえば、<body>〜</body>の中に画像やリンクを直接入れるのではなく、まず見出しや段落などのタグを書いて、インラインのものはその中に入れるということです。このようにページの内容を構造的な単位でまとめておくと、音声などの環境では、
ブロックレベルの単位で読み飛ばすなどの操作ができるようになり、
内容がより扱いやすくなります。

４

インライン要素の例
a
big
code
img
object
small
sup

abbr
br
dfn
input
q
span
textareaacronymbuttonem
kbd
samp
strong
tt

b
cite
i
label
selectsubvar

画像が見えない人のために画像には適切な代替テキストを

ポイント３【関連するJIS X 8341-3 個別要件】5.4.a、5.4.b

imgタグにつける「alt="○○○"」は、HTMLの文法上必須のものです。たとえ代替テキストが必要ないと思われる場合でも、「alt=""」のように(内容を空にして)指定しておく必要があります。
この「alt」は「alternate text」を略したもので、意味としては「代わりとして使われるテキスト」ということになります。つまり、「alt="○○○"」で指定するテキストは、テキストブラウザや音声・点字などの画像を表示できない環境で、画像の代わりとして利用されることを目的としたものなのです。代替テキストは、画像の説明をするためのものではありませんし、マウスのポインタを画像にのせた時にそれをポップアップさせるためのものでもありません（画像の説明をポップアップさせたい場合は「title="○○○"」を使用してください）。あくまで、画像が無い状態で、その代わりの役割を果たすために利用されるものなのです。そのため、同じ画像でもその役割、配置されている位置や前後関係などによって、代替テキストとしてふさわしい内容は変わってくるという点に注意
してください。代替テキストが適切かどうか確認するには、音声ブラウザやテキストブラウザなどを使用するか、
テキスト形式で書き出したものをテキストエディタなどで開いてチェックしてください。
また、画像が複雑なグラフである場合など「alt="○○○"」だけでは画像の意味や内容等を十分に伝えきれない場
合には、「longdesc="○○○"」で詳しい説明のあるページのURLを示すこともできます。ただし、longdescに対応していないブラウザもありますので、可能であれば説明ページへのリンクもつけてください。
<a href="../../index.html"><img class="nict" src="../assets/nict̲logo̲small.gif"
alt="情報バリアフリーのための情報提供サイトへ"
width="346" height="40"></a>
画像と代替テキストの例１。ロゴ画像の役割を代替テキストで表している。

<a href="#top-top"><img src="../../assets/icon̲back.gif"
alt="ページの先頭へ戻る"></a>
画像と代替テキストの例２。画像の説明ではなく、画像の機能を表している。

イメージマップ使用時の注意【関連するJIS X 8341-3 個別要件】5.4.b

イメージマップには、画像自体の代替テキストの他に、マウスに反応する各領域に対しても代替テキストをつける必要があります。
右のソース例のように、リンク先と領域を定義するareaタグの中に「alt="○○○"」の形式で記入してください。その際、代替テ<map name="navigation"><area href="prev.html" shape="rect"
alt="前のページ " coords="100,10,180,40"><area href="top.html" shape="rect"

キストはリンク先が具体的にイメージできるようなものにしてく

alt="先頭ページ " coords="200,10,280,40">

ださい。また、古いブラウザの中には、各領域に対する代替テキ<area href="next.html" shape="rect"

ストを利用できないものもあります。可能であれば、イメージマ

alt="次のページ " coords="300,10,380,40"></map>

ップとは別にテキストのリンクも用意してください。なお、アクセシビリティを考慮するのであれば、サーバー側で処理を行うイ
メージマップは基本的に使用しないでください。もし使う必要がある場合は、テキストによるリンクは必ず用意してください。
５

イメージマップに代替テキストをつけた例

利用者が迷わないリンク

ポイント４

リンク先が予測できるようにする【関連するJIS X 8341-3 個別要件】5.3.g

リンク部分の言葉として、「ここ」や「ここをクリック」などは使わないでください。その言葉だけではリンク先がどのようなページなのかを連想することができませんし、キーボードなどマウ
ス以外の装置を使っていて、クリックのできない利用者もいるのです。ブラウザの中には、リンク部分を抜き出して一覧にできるものや、リンク部分だけを読み上げさせて拾い読みできるようになっているものがありますが、そのような機能も無駄になってしまいます。リンク部分の言葉は、極端に漠然としたものにせずに、簡潔でリンク先の内容が連想できるようなものにしてください。
リンク先に関する情報を補足して明確に示したい場合には「title="○○○"」の形式で入れておくこともできます。

新しいウィンドウは混乱のもとOpera6でリンクの一覧を表示させた例。リンク部分が「ここ」や「ここをクリック」になっていると、このような機能も意味がなくなる。

【関連するJIS X 8341-3 個別要件】5.3.e

新しいウィンドウが開いても、それを目で確認できないため混乱する利用者がいます。また、ウィンドウを最大化している利用者■リンク先を新しいウィンドウに表示させる非推奨例の中には、新しいウィンドウが開いたことに気がつかず、ブラウ<a href="abc.html" target="̲blank">リンク</a>

ザの「戻る」ボタンが突然効かなくなって戸惑う人もいます。こ■JavaScriptで新しいウィンドウを開く非推奨例のように、突然新しいウィンドウを開くことは、ユーザーを混乱させる原因となっているのです。多くのブラウザには「新しいウィンドウで開く」機能がついているため、利用者は新しいウィン
ドウに表示させたい思えば、そのようにできます。しかし、「新しいウィンドウを開かない」機能のあるブラウザは、まだ普及しているとは言えません。基本的には、新しいウィンドウは開かないようにして、もし開く必要のある場合は、あらかじめそれがわ<script type="text/javascript"><!-function wopen(wurl, wname) {window.open(wurl, wname, "toolbar=no〜")}// --></script>
新しいウィンドウは基本的には開かない。開く場合はあらかじめ知らせる
ようにしよう。

かるようにしておきましょう。

連続するリンクは明確に区切る【関連するJIS X 8341-3 個別要件】5.3.g

ブラウザの種類によっては、２つ以上のリンクが続いていると、それらの区切りが明確には分からない状態になります。そうなることを防ぐために、リンクが続く場合には、その間にリンクしていない文字（記号など）を入れるようにしてください。リンクが続くのは、テキストの場合だけではありません。リンクしている
画像が続く場合には、その代替テキスト同士の区切りがわかるよ
うに配慮する必要があります。この場合は、代替テキストに句読点を含めるなどして、その前後の区切りがわかるようにしておいてください。テキストの場合と同様に、リンクしている画像の間にリンクしていない文字を入れておき、画面表示の場合にのみス
タイルシートでそれを消す、という方法もあります。

６

連続するリンクを記号「¦」で区切っている例。
通常は、記号の前後に半角スペースも入れておく。

テキストで注意すること

ポイント５

単語の途中に空白や改行を入れない
案内の文書などを作る場合、「日時」「場【関連するJIS X 8341-3 個別要件】5.9.e

所」のように文字の間に空白を入れて幅を調整することがあります。また、HTMLのソースを見やすくするために、長い文章の途中に改行を入れる
人もいます。このように、もし１つの単語の途中に空白や改行が入っていると、音声では正しく読み上げられなくなる確率が高くなりますので注意してください。たとえば、ある音声ブラウザでは「日時」は「ひ・とき」、「場所」「ば・ところ」のように読み上げます。また、ソース上の文章の途中に改行を入れると、ほとんどのブラウザでは半角スペースが入った状態で表示されま
すし、単語が区切られると検索もできなくなります。文字の間隔を調整する場合は、スタイルシートを利用しましょう。

■CSSソース.sp { letter-spacing: 1em }■HTMLソース<ul><li class="sp">日時</li><li class="sp">場所</li><li>テーマ</li></ul>
スタイルシートを使った文字間隔の調整例。

機種依存文字と記号に注意する【関連するJIS X 8341-3 個別要件】5.1.a

文字コードを正しく指定していても、使用しているＯＳの種類（とフォントの種類）によっては、異なる文字として表示される文字があります。最も注意しなければいけないのは、Windowsでの①②③などの数字です。これらは、Macintoshでは、（日）（月）（火）のように表示されますので注意してください。また、年月日や電話番号などのように、数字と記号だけで構成されるテキストは、どWindows環境での表示例。

の記号を使うかによって音声ブラウザでの読み上げ方が変わってきますので注意してください。たとえば、数字を「/」で区切ると分数として読み上げられる場合があります。年月日を正確に伝えたい場合は、それらを記号で区切るのではなく、「○年○月○日」
同じページをMac環境で表示させた例。

のように漢字を使って示すと確実です。

文字を点滅・移動させない【関連するJIS X 8341-3 個別要件】5.8.a、5.8.b

視覚等に障害のある人の中には、点滅したり移動する文字を読むことが非常に困難か、あるいはまったく読めない人もいます。また、環境によっては、移動しながら表示される文字を音声で読み上げさせることはできません。そのような動きを確実に止められる機能を提供できる場合を除いては、文字を点滅・移動させることは避けてください。特に、文字を点滅させるBLINKタグと文字を移動させるMARQUEEタグは、特定のブラウザの独自拡張です。
HTMLでは表示方法を指定しないという意味でも、これらのタグは使わないでください。また、部分的な点滅ではなく、画面の広い範囲を明滅させると、発作の原因となる場合がありますので注意してください。
７

このように文字を移動させることは避けるべき。

テーブルに必要とされる配慮
音声環境での読み上げ順に注意する

ポイント６【関連するJIS X 8341-3 個別要件】5.2.d

テーブルを使ってレイアウトをした場合、見た目には何の問題もなくても、音声ブラウザなどで読み上げさせると読み上げ順序がバラバラで意味不明になってしまうことがあります。一般的な音声ブラウザは、テーブルのセルを上の行から順に左のセルから右のセルへという順序で（ソースに書かれている通りの順番で上から下へと）読み上げます。テーブルでレイアウトをする場合には、その順序で読み上げられても意味が通るようしてください。確認にはテキストブラウザや設定でテーブルを無効にできるブラウザ
を使用すると便利です。また、テーブルでレイアウトをする場合
でも、見出しなどの構造を示すタグはしっかりとつけてください。

表のヘッダを明確に示す

テーブルのセルが読み上げられる順序。

【関連するJIS X 8341-3 個別要件】5.2.c

レイアウトのために使用するテーブルではなく、表形式のデータを表すためのテーブルでは、thタグとtdタグを適切に使い分けて、そのセルがヘッダなのかデータなのかを明確に示してください。

<th>〜</th>でタグ付け

そのようにしておくことで、音声環境では各データの前に対応するヘッダを読み上げて、何に対するデータなのかをわかりやすくすることが可能になります。また、音声ブラウザの中には、デー
タのセルからそれに対応するヘッダの情報を得られるものがあり
ますが、これもヘッダとデータが正しくタグ付けされていることが前提となって機能します。逆に、太字でセンタリングなどの表<td>〜</td>でタグ付け
そのセルがヘッダであれば<th>〜</th>を、データであれば<td>〜</td>を使ってタグ付けする。

示上の効果だけを目的として、ヘッダではない部分にthタグを使用しないでください。

表のヘッダとデータを関連付ける
表形式のデータを表すためのテーブルのうち、ヘッダが２列以上あるなど複雑な形式になっているものについては、音声で読み上げるとデータとヘッダの関係が正確には把握しにくくなります。
それをわかりやすくするためには、データとヘッダを関連づける
ようなタグ付けをしておく必要があります。まず、thead・tbody・tfoot・colgroupなどのタグを使って、セルを適切に分類しグループ化してください。その上で、ヘッダに「scope="○○○"」を指定して対象となるデータの範囲を示したり、データに「headers="○○○"」を指定してヘッダを示すなどすると、データとヘッダの関係が明確にわかるようになります。

【関連するJIS X 8341-3 個別要件】5.2.c<table border="1" width="90%"summary="身体障害者による情報通信機器の利用状況の表"><caption>＜身体障害者の情報機器の利用率データ（2002年）＞</caption><thead><tr><th> </th><th scope="col">視覚障害</th><th scope="col">聴覚障害</th>
・
・
</tr>
</thead><tbody><tr><th scope="row">パソコン</th><td>75.5%</td><td>84.7%</td>
・
・
</tr>
・
・
</tbody></table>「scope="○○○"」の使用例。上の表のソースの一部を抜粋。

８

迷わず使える入力フォーム

ポイント７

入力・選択項目に対するラベルの配置位置 【関連するJIS X 8341-3 個別要件】5.3.a、5.3.b
フォームで使われる入力・選択項目と、それに対して付けられるテキストのラベルの位置関係に注意してください。画面上では問題がないように見えていても、音声や点字などの環境では、どのラベルがどの項目に対応しているのかわからなくなる場合があります。特にテーブルを使って各項目やラベルの位置を揃えている

テーブルで両図のようにレイアウト
されていると、以下の順で読み上げられる。
そのため、ラベルと入力項目の対応がわかりにくい。
・ID
・名前
・電話
・12345・田中 太郎・03-4567-8910

ような場合には、それらが読み上げられる順序に注意してください。
一般的な音声ブラウザでは、テーブルの各セルはソースに書かれている順序で(左上のセルから右方向に１行ずつ)読み上げられます。
その順序で読み上げられてもラベルと入力・選択項目の対応がわかる（交互に読み上げられる）ようになっていれば問題ありません。

入力・選択項目とラベルを関連付ける【関連するJIS X 8341-3 個別要件】5.3.blabelタグを使うと、フォームの入力・選択項目とラベルを内部的に関連付けることができます。それによって、音声ブラウザで入力・選択しようとしている項目のラベルを読み上げさせて確認したり、ラベル部分をクリックするだけでラジオボタンやチェックボック
スのオン・オフを切り替えることなどが可能になります。labelタ
グを使う場合は、まず入力・選択項目側に「id="○○○"」の形式
でＩＤを指定しておきます。そして、ラベルのテキスト(または入力・選択項目も含む全体)を<label>〜</label>で囲い、<label>
タグの中に「for="○○○"」の形式で、入力・選択項目に指定したＩＤと同じ値を指定します。

<table><tr><th><label for="i d n t">ＩＤ</label></th><th><label for="name">名前</label></th><th><label for="t e l e">電話</label></th>
</tr>
<tr>
<td><input type="text" id="i d n t"></td><td><input type="text" id="name"></td><td><input type="text" id="t e l e"></td></tr></table>labelタグの使用例。
「for=」と「id=」の値を同じにすると関連付けられる。

tabキーによる移動順序を設定する【関連するJIS X 8341-3 個別要件】5.3.a

マウスを使わずにキーボードだけで操作してみると、項目を移動する順序が不自然であったり、選択したい項目になかなかたどり
着けないことがあります。特にテーブルを使ってレイアウトをしている場合には、そのようになる可能性が高くなります。ページ全体を通して、tabキーで問題なく移動できるかを確認し、必要<input type="text"><inputtabindex="4" type="text"><textarea tabindex="3">〜</textarea><selecttabindex="2">〜</select><buttontabindex="1">〜</button>であれば「tabindex="移動順"」のように指定して、適切な順序で移動するように修正してください。移動順としては、0〜
32767の範囲の数値が指定できます。１以上の値が指定された
項目は、小さな数から大きな数へという順序で移動するようになります。値として「0」を指定した項目と移動順が指定されていない項目は、それらの後にソースに書かれている順で移動します。

９tabキーによる移動順の指定例。
このサンプルでは、ソースの順で言うと下の行の項目から上の行の項目へと順に移動する。
※「tabindex=」を指定できるタグは、次の通り。
a, area, button, input, object, select, textarea

フレームをバリアにしない
各フレームの役割を明示する

ポイント８【関連するJIS X 8341-3 個別要件】5.2.f

比較的新しいテキストブラウザや音声ブラウザは、フレームにも対応しています。ただし、対応していると言っても一度に全体を見られるわけではなく、各フレームへのリンクが用意されていて、個別に参照する形式になっているものが多いようです。そのため、
このフレームはメニュー、このフレームは本文、といった役割がわからないと、それぞれのフレームを何度も行ったり来たりすることになり大変不便です。それを少しでも使いやすくするためには、
各frameタグに「title="○○○"」と「name="○○○"」を指定して、いずれの値でも役割がわかるようにしておき、さらにフレー
ム内に表示される各文書のtitle要素にも適切な内容を入れておいてください。

テキストブラウザLynxでのフレームの表示例。各フレームへのリンクは、「name="○○○"」で指定した値で示されている。

フレームが表示できない環境用の内容も入れる
フレームを使う場合は、noframesタグを使ってフレームに対応
していない環境向けの内容を必ず入れてください。内容としては、「フレーム対応のブラウザでご覧ください」といったものではなく、各フレームに表示される文書へのリンクなど、フレームに対応していない環境でも内容が利用できるようにするものを入れてください。また、noframesタグに入れた内容が実際に利用できるかどうかを確認することも重要です。フレームが表示できない環境
用の内容が用意されているにもかかわらず、リンク部分にミスがあるため先に進めない、というケースもあるのです。設定でフレームを無効にできるブラウザもありますので、実際に試して問題なく利用できることを確認してください。

【関連するJIS X 8341-3 個別要件】5.2.f<frameset cols="25%,*"><frame src="menu.html" name="menu"
title="メニュー"><frame src="content.html" name="content"
title="コンテンツ"><noframes><body><ul><li><a href="○○.html">○○○</a></li><li><a href="○○.html">○○○</a></li><li><a href="○○.html">○○○</a></li><li><a href="○○.html">○○○</a></li></ul></body></noframes></frameset>
noframesタグを使ったソースの例。

フレームの幅や高さを固定しない【関連するJIS X 8341-3 個別要件】5.2.f

フレームの内容は、常に制作者の意図した通りに表示されるとは限りません。特にフォントとそのサイズについては、環境によって大きく異なって表示される場合があります。そのため、フレー
ムの幅や高さが特定の環境に合わせて固定されていると、環境によっては内容の一部が表示されなくなったり、スクロールしなけ
れば見られないなどの状態になることがあります。その際、スクロールバーが表示されないように指定してあったり、フレームの枠が消されて枠を移動できないようになっていると、内容の一部が見られない可能性もあります。フレームの幅や高さは基本的には固定せず、必要に応じて幅や高さの変更ができるようにしておきましょう。

１０

左のフレームを、サイズ変更不可でスクロールバーも表示
しない設定にした例。フォントやウィンドウのサイズによっては、内容の一部が表示されなくなる。

スクリプトとマルチメディア

ポイント９

テキストによる代わりの内容も用意しておく 【関連するJIS X 8341-3 個別要件】5.1.b、5.4.c、5.4.d、5.4.e
スクリプトに対する代替テキストを用意しておくには、noscript
タグを使用します。マルチメディア・ファイルの場合は、object
タグの内容として代替テキストを入れてください。ただし、現状
ではobjectタグのサポート状況はあまり進んでいるとは言えません。本来、独自拡張のタグは使用すべきではありませんが、古い■スクリプトに対する代替テキスト<script type="text/javascript">・・・スクリプト・・・</script><noscript>
・・・スクリプトの代替テキスト・・・</noscript>

ブラウザとの互換性を考慮する必要がある場合は、embedタグを使用することも仕方ないことだと言えます。現状では、使用する■マルチメディアに対する代替テキスト

マルチメディア・ファイルの形式によって様々な指定方法があり<object 〜 >・・・マルチメディアの代替テキスト・・・</object>

ますので、詳細はそれぞれのサイトを参照してください。そして、最終的にはそのスクリプトまたはマルチメディア・ファイルに未

objectタグを適切にサポートしているブラウザは、現在のところ多くない。

対応の環境でも問題なく利用できることを確認してください。

スクリプトに未対応でも利用できるようにする【関連するJIS X 8341-3 個別要件】5.1.b、5.4.e

スクリプトに未対応の環境や、スクリプトが動作しないように設定されている環境でも、そのページが利用できるようにしてください。たとえば、リンク部分に「href="javascript:○○○"」のように指定すると、JavaScriptが動作しなければそのリンクは利用できないことになります。また、他のページへの移動手段としてプルダウン・メニューを使用している場合は、JavaScriptが動作しなくても移動できるように、通常のリンクも別に用意するか

移動手段としてプルダウン・メニューを使う場合は、スク
リプトが動作しなくても移動できるようにしておく必要がある。

サーバー側で処理を行うなどしてください。もし、スクリプトが動作しなければ利用できないのであれば、アクセシブルな別のページを作成して同等の役割を果たす情報を提供してください。

入力装置に依存しないイベントハンドラを使う
イベントハンドラとは、マウスでクリックされた、キーが押された、<a href="javascript:〜">テキスト</a>
この例のような、リンク部分にスクリプトを埋め込む方法は避けるべき。

【関連するJIS X 8341-3 個別要件】5.1.b、5.3.a
併用可能なイベントハンドラの例など特定のイベントが発生した時にスクリプトを呼び出すためのマウス

属性のことです。イベントハンドラを使う場合には、必ずしもす

onmousedown + onkeydown

べての利用者がマウスを使っているわけではないという点に注意

キーボード

onmouseup+ onkeyup

onclick+ onkeypress

してください。つまり、キーボードをはじめとするマウス以外の

onmouseover + onfocus

入力装置を使用していても、すべての機能を利用できるようにしonmouseoutておく必要があるということです。そのためには、イベントハン
ドラはマウス専用のものだけを使用せずに、キーボードでも利用できるものを併用するようにしてください。また、マウスの座標値を利用するイベントハンドラ、ダブルクリックに反応するイベ
ントハンドラは、装置に依存することになりますので使わないで
ください。

１１

+ onblur

これらを併用することで、キーボードでも利用可能にできる。ただし、常に適切に動作するとは限らないので、必ずテストを行うこと。

スタイルシートを有効に使う

ポイント１０

CSSが適用されなくても読めるようにする 【関連するJIS X 8341-3 個別要件】5.2.b
画面表示用に書かれたスタイルシートが、すべての環境で常に適Netscape Navigator 4.7 での表示。スタイルシートに対応していな
い古いブラウザでも内容がわかる必要がある。

用されるわけではありません。設定でスタイルシートが適用されないようにしている利用者もいますし、テキストブラウザや音声ブラウザを利用している人もいます。したがって、スタイルシー
トが適用されなくても、内容が正しく伝わるようにしておく必要があるのです。基本的には、HTMLで適切に構造を示すようなタグ付けをしておき、それに対してCSSを適用するような手順で作成すれば、通常は問題は発生しません。元のHTMLが適切にタグ付けされていなかったり、HTMLとCSSを同時進行で作成する場
合、CSSで絶対配置を行う場合などには特に注意してください。

大きさの指定には相対的な単位を使う

テキストブラウザLynxでの表示。構造的なタグ付けがされていれば問題なく表示される。

【関連するJIS X 8341-3 個別要件】5.6.a「文字が小さすぎて読めないが、大きくしようとしても変更できない」、「コンテンツの幅が固定されていて、１行ごとに横スク
ロールしなければ内容が読めない」という不満は意外と多いようです。フォントサイズの指定など、大きさを指定する場合には、

160%

スタイルシートの相対的な大きさを表す単位を使ってください。
たとえば、CSSの単位では「pt」「px」「cm」などではなく、

90%

100%

「em」や「%」を使用してください。ただし、出力先をプリンタに限定している場合や、大きさのわかっているビットマップの画像に関連して距離やサイズを指定する場合など、出力媒体の物

このページでは、フォントサイズは「%」で指定している。

理的特性がわかっている場合には、絶対的な大きさを表す単位を使ってもかまいません。

フォントスタイルはCSSで指定する
CSSを使用すると、フォント、フォントサイズ、太字、斜体、下線、文字間隔、行間、文字色、背景色などが自由に設定できます。
このような表示上の指定を行うHTMLのタグは、ほとんどが非推奨とされていますので使用しないでください。fontタグを使用することは様々な問題を引き起こしますし、bodyタグで文字色やリンク色を指定するよりは、CSSを使った方がさらに細かく指定できます。HTMLでは構造的な意味を示すタグ付けだけをして、それに対する表示の指示をCSSで与えると、指定通りに表示できな
い環境でも利用できる文書になります。逆にHTMLで構造的な意
味を示さずに表示指定だけを行うと、指定通りに表示できない環
境ではタグの意味がなくなります。

１２【関連するJIS X 8341-3 個別要件】5.2.b
フォントスタイルのCSSでの指定方法
太字
斜体
下線
行間
文字間隔
文字色
背景色
フォントの種類
フォントサイズ

font-weight: bold;
font-style: italic;
text-decoration: underline;
line-height: 行間;
letter-spacing: 文字間隔;
color: 色;background-color: 色;
font-family: フォント;
font-size: サイズ;

この他に、複数のスタイルを一度に指定できる方法も用意されている。

色づかいの配慮

ポイント１１

色が再現されなくてもわかるようにする 【関連するJIS X 8341-3 個別要件】5.5.a
色だけに意味を持たせないでください。たとえば、「品名が赤い色に意味を持たせている例。

ものは在庫切れです」と表現すると、赤い色を識別できない人やモノクロの画面で見ている人、文字色の指定が反映されないブラウザを使用している人には、どれが在庫切れなのかわからない状態になります。そのような事態を避けるためには、色の他にも区別できるような手段を与えてください。たとえば、テキストを追加して説明を加える、他のフォントスタイルを併用する、前後関係でわかるようにするなどの方法が考えられます。そのページが、色が再現されなくても問題がないか確認するためには、実際に画面をグレースケールに変更するか、白黒で印刷するなどしてみてください。

上のページをテキストブラ
ウザのLynxで表示させたところ。モノクロ表示なので、どれが割引対象外なのか区別できない。音声の環境でも同様の結果となる。

文字色と背景色のコントラストは十分にとる 【関連するJIS X 8341-3 個別要件】5.5.c、5.6.c
文字色と背景色に十分なコントラストがとられていない場合、モノクロの画面で見ている人や色の識別が困難な利用者は、文字が読めなくなる可能性があります。これはたとえば、文字色と背景

文字色と背景色のコントラストが十分でない例

色がほぼ同じ明るさで色だけ異なる場合、そこから色をとれば文字と背景の区別がつかなくなるということです。色がスタイルシ

グレースケールでの見え方ートで指定されている場合は、スタイルシートを無効にすることで読める可能性もあります。しかし、画像についてはコントラス
トを変えることはできませんので特に注意してください。色のコントラストについても、画面をグレースケールに変更、またはグ色の識別が困難な利用者の見え方の例１

レースケールで印刷するなどでおおまかな確認は可能です。一般
的なブラウザでは、デフォルトの設定では背景は印刷されない点にご注意ください。

文字色と背景色は常にセットで指定する
ブラウザのデフォルトの背景色は白でテキストの色は黒になっているとは限りません。必要に応じて、背景色が黒で文字色を白に設定している利用者もいます。つまり、背景色も文字色も、指定
していなければ何色で表示されるかはわからないのです。たとえば、
文字色だけを指定したとします。そうすると、背景色は場合によっては、文字色と同じか近い色になっている可能性があるのです。
文字色ではなく、背景色だけを指定した場合も同様の問題が起こり得ます。この問題を避けるためには、文字色と背景色を常にペアで指定する必要があります。この理由から、文字色しか指定できないfontタグは使用せずに、スタイルシートを使用することが推奨されています。
１３

色の識別が困難な利用者の見え方の例２【関連するJIS X 8341-3 個別要件】5.5.c、5.6.c

a:link {/* 見ていないリンク */color: #339900;
background: #ffffff}
a:visited {/* すでに見たリンク */color: #999999;
background: #ffffff}
a:hover {/* カーソルが上にある時 */color: #ff6600;
background: #ffffff}
a:active {/* クリックした時 */color: #ff6600;
background: #ffffff}
リンク部分のテキストの文字色と背景色をスタイルシート
で設定する例

その他に注意したいこと

ポイント１２

ナビゲーションを読み飛ばすためのリンク 【関連するJIS X 8341-3 個別要件】5.3.h
ナビゲーションは、ページの上または左に配置されることが多い

このページでは、不可視のテキストでリンクが用意されている。

ためか、ほとんどの場合ソース上ではメイン・コンテンツの前にあります。そのため、音声で内容を聞く場合には、メイン・コン
テンツより先にナビゲーションが読み上げられることになります。
しかも、通常ナビゲーションはサイト内で共通したものが使用されるため、ページを開くたびに同じ内容の（サイトによっては大量の）リンクの読み上げに時間をとられることになります。このような事態をを避けられるようにするには、ナビゲーション部分
を読み飛ばすことのできるリンクを用意してください。スタイル
シートを使用すれば、そのリンクは画面上では表示されないようにすることもできます。

自動的に別のページに移動させない

ナビゲーションを読み飛ばすためのリンク

テキストブラウザや音声ブラウザなどでは、「ナビゲーシ
ョンをスキップ」というリンクが現れ利用できる。

【関連するJIS X 8341-3 個別要件】5.3.e

利用者がそのページの内容を読むのにどれくらい時間が必要なのかは予測できるものではありません。たとえば、内容を音声で読み上げさせている場合もありますし、年齢や障害の種類によっては予想外の時間を必要とする場合もあります。このような理由から、
metaタグで時間を設定して、自動的に別のページに移動したり、■30秒毎に自動的に更新する非推奨例<head><meta http-equiv="refresh" content="30"></head>■15秒後に自動的に別のページに移動する非推奨例

内容を更新することは避けてください。特に音声で読み上げさせている場合は、ページが変わったことに気が付かず混乱する場合もあります。ページの自動的な移動や更新はサーバー側で行うよ
うにするか、または通常のリンクを用意して、利用者が望んだ時に移動できるようにしてください。

<head><meta http-equiv="refresh"
content="15;url=http://www.shiba.tao.go.jp/"></head>ページの更新や移動を目的としたmetaタグは、使うべきではありません。

テキストだけの別ページは最後の手段【関連するJIS X 8341-3 個別要件】5.1.b、5.4.c、5.4.d、5.4.e「とりあえずアクセシビリティのことは考えずにページを作成して、必要になったらテキストだけのページを追加すればよい」とは考えないでください。別のページを余分に追加するということは、
更新と確認にかかる手間や時間が増えることを意味します。そのためか、別に用意されたテキストのページは、元のページと比較
すると更新されないことが多いのです。元のページと同じ内容を知ることができなくなった時点で、そのテキストページは代替としての役割を果たさなくなり、アクセシブルだとは言えなくなります。テキストだけの別ページを用意するのは、あくまで最後の手段と考え、できるかぎり元のページ自体をアクセシブルなものにしてください。

１４

はじめからアクセシビリティを意識して設計すると、そうでない場合よりも簡単にアクセシビリティを実現できる。

ＪＩＳの個別要件と１２のポイントの関連「みんなが使えるホームページの作り方」の１２のポイントが関連するJIS X ８３４１-３「高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス−第３部：ウェブコンテンツ」の「５.開発及び制作に関する個別要件」を一覧に整理しました。
「みんなが使えるホームページの作り方」は、JISが制定される前に作成したもので、JISの開発及び制作に関する個別要件には対応していません。１２のポイントが関連するJISの個別要件及びその内容について、それぞれJIS原本を参照してください。
なおJISの各個別要件は、経済産業省産業技術環境局標準課情報電気標準化推進室のご理解により原本からそのま引用させて頂きました（転載禁止）。

みんなが使えるホームページの作り方
JIS X ８３４１- ３

５.１.a（該当する項目が無いJISについては、簡単な補足説明を記載しています。）

ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつそれらの文法に従って作成しなければなら
ない。

５.１
規格及び
５.１.b ウェブコンテンツには、アクセス可能なオブジェクト
仕様などの技術を使うことが望ましい。

１-a
１-b
１-c
５-b

DOCTYPE宣言をつける使うべきでないタグ
文法の確認
機種依存文字と記号に注意する

９-a
９-b
９-c
１２-c

テキストによる代わりの内容も用意しておく
スクリプトに未対応でも利用できるようにする
入力装置に依存しないイベントハンドラを使う
テキストだけの別ページは最後の手段

５.２.a

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

２-a 見出しを明確に示す
２-b 強調したい部分のタグ付け
２-c ブロックレベルとインライン

５.２.b

ウェブコンテンツの表示スタイルは、文書の構造と分 １０-a CSSが適用されなくても読めるようにする
離して、書体、サイズ、色、行間、背景色などをスタ １０-c フォントサイズはCSSで指定する
イルシートを用いて記述することが望ましい。ただし、利用者がスタイルシートを使用できない場合、又は意
図的に使用しないときにおいても、ウェブコンテンツの閲覧及び理解に支障が生じてはならない。

５.２.c

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

６-b 表のヘッダを明確に示す
６-c 表のヘッダとデータを関連付ける

５.２
５.２.d 表組みの要素をレイアウトのために使わないことが ６-a 音声環境での読み上げ順に注意する
構造及び
望ましい。
表示スタ
イル
５.２.e ページのタイトルには、利用者がページの内容を識別 【該当項目無し】音声ブラウザの利用者、検索エンジできる名称を付けなければならない。

ンの利用者などにとって、ページのタイトルは自分の探している情報がそのページにあるかどうかを判断する最初の手がかりになります。title要素に
ページ内容を把握できる分かりやすいタイトルを用意しましょう。

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

８-a 各フレームの役割を明示する
８-b フレームが表示できない環境用の内容も入れる
８-c フレームの幅や高さを固定しない

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

【該当項目無し】パンくずリストと呼ばれるような手法などを用いて、閲覧ページの現在位置を示すこと
により、利用者が迷いにくくなったり、情報を探しやすくなります。

１５

みんなが使えるホームページの作り方
JIS X ８３４１- ３（該当する項目が無いJISについては、簡単な補足説明を記載しています。）

５.３.a

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

７-a 入力・選択項目に対するラベルの配置位置
７-c tabキーによる移動順序を設定する
９-c 入力装置に依存しないイベントハンドラを使う

５.３.b

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

７-a 入力・選択項目に対するラベルの配置位置
７-b 入力・選択項目とラベルを関連付ける

５.３.c

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

【該当項目無し】障害がある場合など入力作業にかなりの時間を要する場合があります。制限時間があると利用が出来なくなってしまうかもしれません。また制限時間が設定されていることが分からないと、混乱の原因になります。

５.３.d

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

【該当項目無し】制限時間を利用者が自分で延長した
り、制限設定を解除できるようにすべきです。それが難しい場合は、利用できない人が出る可能性がありますので、同じ目的を達成できる別の手段（メール、電話、FAX、対応窓口など）を合わせて用意し、案内しましょう。

５.３.e

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

４-b 新しいウィンドウは混乱のもと
１２-b 自動的に別のページに移動させない

５.３
操作及び
入力

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

【該当項目無し】サイト内で共通のナビゲーションメ
ニューを設けることで、迷いにくく情報を探しやすいサイトになります。見栄えや操作の仕組みに一貫性があることが重要です。

５.３.g

４-a リンク先が予測できるようにする
４-c 連続するリンクは明確に区切る

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

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

１２-a

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

【該当項目無し】障害のある場合や、年配の利用者には、誤って意図しない操作をしてしまうことが比較的多くあります。そのような場合でも、ブラウザの戻るボタンや画面上のリンクなどから元の状態に簡単に戻れるよう設計し、必要に応じて補足説明など
で分かりやすく案内しましょう。

５.４.a

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

３-a 画像には適切な代替テキストを

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

３-a 画像には適切な代替テキストを
３-b イメージマップ使用時の注意

５.４.c

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

１６

ナビゲーションを読み飛ばすためのリンク

９-a テキストによる代わりの内容も用意しておく
１２-c テキストだけの別ページは最後の手段

みんなが使えるホームページの作り方
JIS X ８３４１- ３

５.４.d（該当する項目が無いJISについては、簡単な補足説明を記載しています。）

動画など時間によって変化する非テキスト情報には、 ９-a テキストによる代わりの内容も用意しておく
字幕又は状況説明などの手段によって、同期した代替 １２-c テキストだけの別ページは最後の手段
情報を提供することが望ましい。同期して代替情報が提供できない場合には、内容についての説明を何らかの形で提供しなければならない。

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

９-a テキストによる代わりの内容も用意しておく
９-b スクリプトに未対応でも利用できるようにする
１２-c テキストだけの別ページは最後の手段

５.５.a

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

１１-a

５.５.b

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

【該当項目無し】音声でサイトを利用するような場合
は、位置関係や形といった視覚的な表現の理解が難
しくなります。情報を分かりやすく伝えるために位置関係や形を利用する場合がありますが、そのような視覚的な理解が難しい場合でも情報の把握などに支障が出ないように注意しましょう。

５.５.c

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

文字色と背景色のコントラストは十分にとる
文字色と背景色は常にセットで指定する

５.６.a

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

１０-b

大きさの指定には相対的な単位を使う

５.６.b

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

【該当項目無し】読みやすさや、デザイン性の向上のために、文字のサイズや書体を指定することがあります。障害のある場合や年配の利用者も含め、読み
にくさの原因にならないよう注意して指定しま
しょう。

５.６.c

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

１１-b
１１-c

５.７.a

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

【該当項目無し】音声で利用している場合、サイトから自動的に音が再生されると、二重になり内容を把握しづらくなります。また、音を再生できないパソ
コンを使っている人や、耳が聞こえない人などには、音が再生されていることが分かりません。情報が伝わらなかったり、利用者の知らないうちに音が流れていて周りに迷惑をかけたりということが起きないように、利用者の意図と無関係に音を再生することは避けましょう。

５.７.b

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

【該当項目無し】サイト内で音を再生するコンテンツを用意する場合には、音の再生・停止や、音量の調整などを利用者自身が行えることを確認しましょ
う。

５.８.a

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

５-c 文字を点滅・移動させない

５.８.b

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

５-c 文字を点滅・移動させない

５.５
色及び形

５.６ 文字５.７ 音

５.８ 速度

１７

色が再現されなくてもわかるようにする

文字色と背景色のコントラストは十分にとる
文字色と背景色は常にセットで指定する

みんなが使えるホームページの作り方
JIS X ８３４１- ３（該当する項目が無いJISについては、簡単な補足説明を記載しています。）

５.９.a 言語が指定できるときは、自然言語に対応した言語
コードを記述しなければならない。

【該当項目無し】ウェブでは日本語だけでなく様々な言語が用いられています。HTML要素のlang属性にそのページがどの言語で書かれているかを指定することで、音声や点字で読んでいる場合などでも適切に伝わるようになります。

５.９.b

日本語のページでは、想定する利用者にとって理解しづらいと考えられる外国語は、多用しないことが望ましい。使用するときは、初めて記載する時に解説しなければならない。

【該当項目無し】外国語が苦手な日本人はたくさんいます。特に年配の利用者にとっては、外国語が多用されていると非常に使いにくい印象になります。乱
用を避け、日本語での説明をつけるなど配慮をしま
しょう。

５.９.c

省略語、専門用語、流行語、俗語などの想定する利用者にとって理解しにくいと考えられる用語は、多用しないことが望ましい。使用するときは、初めて記載されるときに定義しなければならない。

【該当項目無し】一般的でない用語は乱用を避け、使用する場合は、説明をつけるなど配慮しましょう。

５.９.d

想定する利用者にとって、読みの難しいと考えられる 【該当項目無し】難しい漢字は乱用を避け、使用する言葉（固有名詞など）は、多用しないことが望ましい。 場合は、説明をつけるなど配慮しましょう。
使用するときは、初めて記載されるときに読みを明示しなければならない。

５.９ 言語

５.９.e 表現のために単語の途中にスペース又は改行を入れてはならない。

５-a 単語の途中に空白や改行を入れない

５.９.f ウェブコンテンツは、文章だけではなく、分かりやすい図記号、イラストレーション、音声などを合わせて用いることが望ましい。

【該当項目無し】文章だけの説明では分かりにくい
ケースは多々あります。図やイラスト、音声などを効果的に活用し、分かりやすさを向上させましょう。
認知や記憶に障害があり文章の理解が難しい場合
でも、図やイラストなどで分かりやすく表現されていると、理解が可能な場合があります。

１８

総務省「みんなの公共サイト運用モデル」「みんなの公共サイト運用モデル」は、高齢者や障害者を含む誰もが公共分野のホームページ等を利用することができるよう、ウェブアクセシビリティの維持・向上を実現するための取組モデルです。

「みんなの公共サイト運用モデル」の策定
総務省では、高齢者や障害者を含む誰もが公共分野のホームページ等を利用することができるよう、平成16年
11月から「公共分野におけるアクセシビリティの確保に関する研究会」を開催し、検討を進め、「みんなの公共サ
イト運用モデル」を策定（平成17年12月公表）しました。このモデルは、JIS X8341-3をベースとし、ウェブ
アクセシビリティ維持・向上のための運用モデルと、その実践のための手順書やワークシート類で構成されています。

「みんなの公共サイト運用モデル」の全体像
ウェブアクセシビリティ維持・向上の取組は、個別のホームページ等の調達において実施されるだけでなく、それらの運用を通じて「継続的に」実施すべきものです。そのためには、ホームページ等のアクセシビリティに関する品質管理プロセス＝PDCAサイクルの確立が必要不可欠です。このプロセスをPDCAサイクルとして捉え、「みんなの公共サイト運用モデル」として取りまとめました。

「みんなの公共サイト運用モデル」

１９

実際にウェブアクセシビリティ維持・向上のための業務を行おうとする場合は、このモデルを下敷きとして、各
種手順書・ワークシート類を活用しながら、それぞれの地方公共団体の実務に合致した形で取組を進めていくことが有効です。

「みんなの公共サイト運用モデル」ホームページ
総務省では、「みんなの公共サイト運用モデル」ホー
ムページを開設しています。ホームページでは、研究会
配付資料や報告書に加え、報告書付録の各種手順書・ワークシート類の元のファイル（Excel等）を入手することができます。また、ウェブアクセシビリティの重要性
を強く実感していただくため、障害者の方々が実際にどのようにウェブを利用しているかを紹介したビデオ映像も公開しています。

（参考）「みんなの公共サイト運用モデル」ホームページ
URL：http://www.soumu.go.jp/joho̲tsusin/w̲access/index.html

２０