アクセシビリティ・ガイドライン

以前勤めていて、今はつぶれてしまったWeb制作会社で、僕がチームリーダーしていた時に作った資料です。
XHTMLが全盛だった時代なので今は古い情報ですが、まあこのまま削除してしまうのも勿体ないので、資料として公開します。

制定日:2008-11-05 Ver.1.00

目次

はじめに
アクセシビリティについて ／ アクセシビリティの考慮 ／ ガイドラインについて
閲覧プラットフォーム
Webブラウザ ／ 画面サイズ ／ DOCTYPE宣言 ／ 文字コード等
コンテンツ制作全般
規格及び仕様 ／ 使用する言語 ／ 文書構造 ／ 表記について ／ スタイルシート ／ 表（table) ／ 新しいウィンドウ
操作
キーボード操作 ／ 入力や選択
要素
画像 ／ リンク画像 ／ ページタイトル ／ 表(Table) ／ リンク ／ フレーム
テキスト
文字の色 ／ 文字のサイズ ／ 画像内の文字 ／ 文字の書体 ／ 単語内の空白や改行
ナビゲーション
現在位置の情報 ／ 共通メニュー ／ メニュー読み飛ばし機能 ／ やり直し手段
視覚表現
色 ／ 形や位置 ／ 変化や移動
HTML以外の技術
PDF ／ フラッシュ、スクリプト、アプレット等
文書
外国語 ／ 省略語、専門用語等 ／ 読みの難しい言葉
その他
ユーザビリティへの配慮 ／ 確認
チェック
チェック方法 ／ 文法チェック ／ アクセシビリティチェック ／ ブラウザで確認

はじめに

アクセシビリティについて

アクセシビリティについてよくわからない場合は、多くのユーザーが自分とは異なった状況で操作している可能性を第一に考えてみる。サイトにアクセスしてくる方たちには、以下に当てはまるユーザがいることを想定すること。

  • 見ること、聞くこと、動かすことができない
  • 読むことが困難、または文章を理解できない
  • キーボードやマウスがない、またはキーボードやマウスを使うことができない
  • テキストしか表示できない、小さな画面を使用、インターネットに低速でしか接続できない環境で操作している
  • 書かれている言語を容易に話したり理解することができない
  • 見たり聞いたりできない状況、または手が使えない状況（車の運転中や、騒がしい環境などの場合）にある
  • 古いバージョンのブラウザ、音声ブラウザ、異なるOSなどを使用している

アクセシビリティの考慮

コンテンツを制作する場合に上記の状況を考慮する必要がある。
このように、考慮すべき様々な状況がある一方で、アクセシブルなページを提供すると、同時に複数の状況に対して有効となる場合が多く、結果としてWeb利用者全体に利益をもたらす。
例えば、フォントのスタイルを指定する場合に、FONT要素を使用せずにスタイルシートを利用することで、HTML制作者は同時に複数の文書に渡っての制御をすることが可能になり、視力の低下している人達に対してもアクセシブルなページとなる。そして、各ページでスタイルシートを共有することは、すべてのユーザーのダウンロード時間の短縮にもつながる。

ガイドラインについて

アクセシビリティを考慮することは、Webコンテンツが障害のある人にとってアクセシブルなページに作成するということだが、このガイドラインはアクセシビリティを向上させるために画像を使わないようになど、視覚的効果を制限するよう奨めている訳ではなく、画像と同等の役割を果たすテキストを提供することで、アクセシブルなコンテンツを制作できることを説明している。

このガイドラインに従うことにより、Webコンテンツをどんなユーザーエージェント（たとえば、音声ブラウザ、携帯電話など）を利用していても、どのような環境（騒がしい場所、明るすぎる場所、暗すぎる場所、手を使えない状況）のもとでも利用可能にするということにも繋がる。さらには情報が整理されたアクセシブルなコンテンツというのは、全てのユーザがWeb上から、より速く情報を探し出せることにもなる。
特に指示が無くとも、当ガイドラインを目標としてサイト制作に望むように。

閲覧プラットフォーム

サイト制作する際の目安として、以下を基準とする。しかしユーザの意向による場合はこの限りではない。

Webブラウザ

基本的に以下のWeb ブラウザで閲覧する際に、情報入手に極端な不具合を起こさないことを最優先すること。

  • Microsoft Internet Explorer ver.6 以降
  • Firefox 1.5 以降

画面サイズ

出来るだけ多くの人が閲覧できるように以下のサイズにて制作すること。

  • （必須）800×600（SVGA）サイズで問題なく閲覧できること。
  • （推奨）640×480（VGA）サイズでも極端な不具合なく閲覧できることが望ましい。

DOCTYPE宣言

以下のいずれかを選択すること。

  • HTML4.01 strict
  • XHTML1.0 strict
  • XHTML1.1

文字コード等

以下のいずれかにすること。

  • utf-8
  • Shift_jis

コンテンツ制作全般

規格及び仕様

方針

Webコンテンツに関する仕様や指針に従ってコンテンツを作成する。

基本記述言語を選択し、DOCTYPE宣言を行って採用した記述言語を明示する
例：
<?xml version="1.0"" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
廃棄される予定の要素や仕様にない要素は使用しない
  • 廃棄される予定の要素font要素、table要素のalign属性など
  • 正式な仕様にない要素marquee要素、blink要素など
使用する文字コードをmeta要素内で指定する
例：
<meta http-equiv="content-type" content="text/html; charset=uft-8" />

使用する言語

ホームページやウェブシステムで使用している言語（日本語か外国語かの区分）をHTMLで適切に宣言していないと、音声や点字に変換して利用する場合に、適切に変換されない可能性がある。

方針

  • HTML要素にlang属性と、xml lang属性で、標準として使用される言語を指定する
  • 文書内で、基本として指定された言語とは異なる言語を用いる場合、すべての切り替わり箇所で、lang属性を用い言語の切り替わりを指定する
例：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

文書構造

見出しや段落、箇条書き等の文書構造を考えてコーディングすると、障害のある人を含めた様々な人にとって、わかりやすさを向上させることが出来る。

方針

HTMLで見出し、段落、リスト等の要素を用いて、ページ内の内容の構造を示す。

  • 文書内の大見出し、中見出し、小見出しに相当する部分には、h要素を指定する
  • 見出し要素の階層（h1、h2、h3・・・）は、文書の階層構造を正しく表現する
  • 箇条書きに相当する部分は、ol、ul、dlといった箇条書きの要素を用途に合った形で使用する
  • 段落に相当する部分にはp要素を指定する
  • 強調を表す場合は、strong、em要素等を指定する

表記について

基本的表示事項

以下の事項を全て記載すること。

掲載情報の取り扱い等
  • 掲載情報の著作権に関する記述
  • 掲載情報の利用に関する記述
  • 掲載情報の無断改変禁止に関する記述
  • 掲載情報を用いた行為への責任に関する記述
ホームページの内容等に関する問い合わせ先
  • 担当部局課名及び電話番号、FAX番号又はメールアドレス等

機種依存文字は使用しない

NG例：
  • JIS標準コードにない漢字（人名や地名など）
  • アルファベットの組み合わせでできている単位記号（㎝、㎏など）
  • ローマ数字（Ⅰ、Ⅱなど）
  • 丸数字（①、②など）
  • 文字記号（㈱、㈲など）
OK例：
  • 読みをひらがな、カタカナなどで記述する
  • 類似の別の漢字や算用数字などを代用する
  • 漢字や記号を画像で作成して配置し、読みを代替テキスト（alt 属性など）で記述する
  • 一文字ずつ書き下す（cm、(株)など）

スタイルシート

配置や配色、文字サイズ等の文書の見映え（表示方法）をスタイルシートで表現すると様々な利用者が自分の利用しやすいように表示等を切り替えることが容易になる。

方針

スタイルシートを用いて表示方法を記述する。また、スタイルシートが利用できない環境にも配慮する。

  • 文書の構造はHTMLで記述し、配置や見映えはスタイルシートを用いて記述する
  • スタイルシートなしでも、文字が読みとれなかったり、情報の意味や関係性が理解しにくくなったりせず、問題なく情報やサービスを利用できるように記述する
  • スタイルシートなしでも、元々表現されている情報のグループ分けや見出し構成、箇条書き等、文書の構造を理解できるように記述する

表（table)

HTMLの表組み（table要素）で画面内の配置を行う場合は、情報の本来の順序と違う順序で読み上げられてしまうと、内容の把握が困難になるので、音声ブラウザ等での読み上げ順序等に配慮が必要となる。

方針

表組み（table要素）を用いる時は、本来の使用目的である表データを表示することにとどめ、音声ブラウザ等への配慮を行う。

  • レイアウト目的でのテーブルの使用は行わない
  • 読み上げ順が、情報の意味上のつながりと異ならないように記述する

新しいウィンドウ

リンク先のページを新しいウィンドウに表示すると、全盲の利用者や高齢者をはじめ、混乱したり上手に利用できない人が出てくるので、極力行わないようにする。

方針

ユーザが意図しない形で自動的に更新したり、別のページへ自動的に移動や新しいウィンドウで開かせることは、必要最小限にする。

  • 同一サイト内へのリンクは、同じウィンドウでの表示にする
  • 新しいウィンドウを開く場合は、リンクテキスト内にメッセージを含める（別ウィンドウで表示など）
  • 新しいウィンドウを開く場合は、リンクテキストや画像に、統一の図記号を添える

操作

キーボード操作

手の動作が不自由な人、目が見えない人等、マウスを利用できない人は、マウスの代わりにキーボードで操作をしているので、配慮のある設計を行う。

方針

出来る限り、キーボードのみでユーザがすべての操作を実行できるようにする。

  • フォームのプルダウンメニューには実行ボタンを添える
  • FlashやJavaScript等によるプルダウンメニューなどはキー操作での実行を可能にする。
    実行可能にできない場合は、同等の機能や情報を入手できる代替手段を提供する。
  • tabindex属性でフォーカスの移動順序を理にかなった順序になるよう指定する

入力や選択

視覚障害者や手の動作が不自由な人、高齢者等は、ホームページでの入力に時間がかかり、場合によっては大きな負担になります。視覚障害者では特に、どこに何を入力するのかの指示に配慮が必要。

方針

入力や選択の操作では、何を入力すればよいかがわかりやすく示し、入力操作がしやすいよう配慮する。

入力のわかりやすさ、操作しやすさ
  • フォームに入力する情報は必要最小限にする
  • テキストラベルはコントロールのすぐ近くに置く
  • label要素を使用し、ラベルとコントロールを関連付ける
  • コントロールが多くなる場合は、グループ化する
  • 必須入力と任意入力の項目の違いを明示する（文字色や記号だけで表現しない）
  • 入力に関する指示や説明、注意事項は、入力項目の近く（できるだけ前）に記述する
  • テキストラベルやコントロールは、表示の順序や操作の流れに沿って配置する
OK例
  • 項目を縦に並べて置く
  • ラベルはコントロールの前に置く
  • Tabキーを押してコントロールを移行する順序を、画面のレイアウトに合わせる
  • 最後の入力欄の近くに実行ボタンを置く

要素

画像

画像を掲載する場合は、画像が見えない利用者（音声ブラウザ等で利用している人等）向けに代わりの情報を用意するべきである。

方針

画像には必ず代替テキストを提供し、画像が見えない場合でも画像が示している情報の内容が過不足なく伝わるように配慮する。

  • すべての画像（img要素）にはalt属性により代替情報を提供する（視覚的にしか意味のない画像も含めすべて）
  • タイトル画像や見出し画像などテキストを画像化した場合は、画像内のテキストの内容をalt 属性に記述する
  • alt属性には画像の説明ではなく、画像により伝えたい「内容」を書く

リンク画像

画像にリンクを貼る場合は、画像が見えない利用者（音声ブラウザ等で利用している人等）向けに代わりの情報が用意されていないと、どのようなリンク先かわからず使用できない。

方針

リンク画像には、リンク先の内容が予測できる代替テキストを提供する。

  • ハイパーリンク画像の alt 属性の中に代替テキストを指定する
  • フォームボタンを画像にする際は、input要素の alt属性に代替テキストを記述する
  • alt 属性の内容は、その部分だけでリンク先の内容がわかるように記述する
  • 同じリンクが繰り返されることを避ける（テキストリンクとリンク画像を並べる場合など）
  • マップ内のリンク領域の代替テキストを、area 要素の alt 属性に記述する
  • イメージマップ全体の代替テキストを img要素の alt属性に記述する
  • ほとんどの要素に適用可能なtitle属性を加えて、説明情報を提供する

ページタイトル

ページタイトルによって、ページの内容が把握できないとわかりにくさや混乱の原因になります。

方針

すべてのページには必ず、そのページの内容を的確に表すページタイトルを付ける

  • すべてのページにtitle要素を指定する。
  • タイトルには、ページの内容を最も端的に表す単語やフレーズを含める。
  • 複数のページに同じタイトルを付けない
  • すべてのタイトルに、ホームページやウェブシステム名等の同じ文字列を入れる場合は、最後尾に配置したり、省略するなどして、利用者が効率よくページ内容を把握できるようにする

表

HTMLの表組みで提供される情報は、配慮のある作りになっていないと、特に音声ブラウザ等の利用者にとって、内容の把握が困難です。

方針

表組みで情報を表現する場合、できるだけ単純な作りにするとともに、HTMLで表の構造を明示する。

  • テーブルはできる限り単純な構造にするとともに、複雑な結合や入れ子にしない
  • 巨大なテーブルを使用しない
  • 表の見出しセルにはthを指定する
  • 表を理解する上で必要な概要や構造に関する情報をsummary属性として記述する

リンクの貼られている部分の文章（リンクテキスト）やリンク画像の内容がわかりにくいと、多くの利用者が混乱してしまう。

方針

リンクテキスト、リンク画像は、識別・操作がしやすいよう表示するとともに、リンク先が明確にわかるような表記にする。

リンクテキストの内容
  • リンクテキストだけで、リンク先の内容を想像できるようにする
  • 指示代名詞だけでリンク先を指定しない（ここ、こちら等）
  • 「クリック！」など、リンク先の内容を推測できない表現を用いない
  • リンクテキストにはリンク先のページタイトルを使う
見た目のわかりやすさ、操作のしやすさ
  • 小さな文字やボタンをリンクに使用しない
  • 「××に関する詳しい情報」のような文字列のうち、「情報」だけをリンクとするのでなく、適度なリンク範囲を確保できるように文字列全体にリンクを設定する
  • テキストリンクのアンダーラインを極力取らない
  • リンク以外のテキストに、リンクテキストとまぎらわしい表現（テキストにアンダーラインを引く、ブラウザ標準のリンクテキストの色を使用するなど）をしない
リンク先の表示
  • 外部リンクを張る場合は、ユーザにあらかじめ分かるよう、可能ならば注意を促す
  • PDFファイルや画像ファイルなど、HTML以外のページにリンクする場合は、リンクテキストやリンク画像に、リンク先がPDF や画像であることや、ファイルサイズ等を明示する

フレーム

フレームを使ったページは、適切な配慮がなされないと利用できなかったり、利用しにくいページになる。

方針

ユーザからの要望が無い限り、フレームは使用しない。フレームを利用できない環境でも問題なく情報やサービスを利用できるようにする。

  • フレームの各ページには内容を的確に表すタイトルを付ける
  • フレーム内に他のサイトのページを表示させない
  • フレームを利用できない状況でも問題なく情報やサービスを利用できるよう、noframes要素に適切な代替情報を記述する。

テキスト

文字の色

ページ内の文字の読み取りやすさは、高齢者をはじめ多くの利用者にとって重大な問題。文字の色と背景色の組み合わせによっては、文字が読み取りづらくなる可能性がある。

方針

文字の色を指定する場合は、読みとりやすさに配慮する。

  • 文字色と背景色、画像中の色が十分なコントラストを持つようにする
  • スタイルシートを使用する場合、文字色と背景色の両方を指定する
  • スタイルシートを外した状態でも、色の組み合わせ、コントラストに問題がないようにする
  • 文字の背景に画像を使用する場合、画像が表示されない状態でも、文字色と背景色が十分なコントラストを持つようにする
  • ユーザ側でテキストの色を変更できるようにする

文字のサイズ

利用者が見づらいと思った時に、自分で文字サイズを変更できるよう制作することが重要。

方針

文字のサイズを指定する場合は、読みとりやすさに配慮する。

  • フォントはスタイルシートを用いて指定する
  • フォントの指定にfont 要素を使用しない
  • フォントサイズは相対指定（%、em など）で指定する
  • 本文のテキストに小さなフォントを使用しない
  • ユーザ側で文字のサイズを変更できるようにする

画像内の文字

画像内の文字の読み取りやすさは、高齢者をはじめ多くの利用者にとって重大な問題である。

方針

文字を画像化する場合は、読みとりやすさに配慮する。

  • 文字を画像化する場合は、読みやすいフォントを選択する
  • 画像化した文字が読みとりやすいよう、文字サイズを大きめにする
  • 画像化した文字が読みとりやすいよう、文字色と背景色のコントラストを明確にする
  • 長いテキストを画像化しない

文字の書体

文字の書体の違いによって読みやすさが異なる場合がある。一般に、文字の細い明朝体よりもゴシック等のはっきりとしたフォントの方が、読みやすい。

方針

文字の書体を指定する場合は、読みとりやすいフォントを選ぶ

  • フォントの書体は基本的に指定しない。指定する必要がある場合は、読みやすいフォントを指定する

単語内の空白や改行

体裁を整える目的でひとつの単語の文字と文字の間にスペースや改行を入れると、画面読み上げソフト等が正しく読み上げられなくなる。

方針

単語の文字の間にスペースや改行を入れない

  • 単語の途中に空白（スペース）を入れない（文字の間隔を調整したい場合はスタイルシートで調整する）
  • 単語の途中にbr 要素を入れない（縦書きを表現したい場合はスタイルシートで調整したり、画像で表現したりする）

表示されているページが、サイト内のどの位置にあるかをわかりやすく伝えることで、多くの人が混乱せずにサイトを利用できる。

方針

表示中のページがサイトやコンテンツのどこに位置するかを把握しやすくするために、現在位置を示す情報やリンクを各ページに表示する。また、色や形等の識別ができない利用者のために、階層等の構造を把握できるよう配慮する。

  • ページの階層を示す「パンくず」リストを、視覚的にわかりやすい位置に設置する
  • ページ共通のナビゲーションバーを設ける
  • サイトマップを作成し、すべてのページからリンクする
  • サイトトップページや後方、前方のページへのリンクを設置する
  • 色や形の違いだけで、現在位置の情報を表現しない

ホームページの各ページに共通のメニュー等を表示することで、多くの利用者がわかりやすく利用することができる。

方針

各ページに、見映えや表記が共通の基本操作部分を表示する

  • ページレイアウトを首尾一貫したものにする
  • リンクに用いる言葉をサイト内で統一する
  • サイトやコンテンツ内を移動するメニューの仕組みを共通化する
  • ページ内を移動するサイトやコンテンツ内共通のリンクの仕組みを共通化する

ホームページの各ページに共通のメニュー等が表示される場合、音声読み上げソフトを利用している人や、キーボードで操作している人等は、ページ内のメインの部分（本文等）にすぐにたどり着けず、非常に使いづらくなってしまう可能性がある。

方針

共通メニューがわずらわしさの原因にならないように、読み飛ばし機能をつけるか、配置に配慮する。

  • メニューの最初に、本文の最初へジャンプするページ内リンク（「本文へ」）を用意する
  • メニューをHTML の最後の方に記述し、画面読み上げソフト等では最後に読み上げられるようにする
  • メニュー内のリンク数、文字の量を減らす

誰でも間違った操作をしてしまうことがあるが、障害者や高齢者の場合そのようなケースが多くなる。配慮がないと、ホームページの利用が負担になったり、目的を達成できなくなる可能性がある。

方針

すべてのページで、ブラウザの「戻る」ボタン又はページ内のリンクによって前のページに戻ることができるようにする。また、利用者が情報を入力・選択する機能がある場合、入力内容の確認や入力エラーの確認、やり直しが簡単にできるようにする。

  • すべてのページで、ブラウザの戻る機能、又は前のページに戻る機能のいずれかを利用できるようにする
  • 入力後、データの確定（送信等）前に、利用者自身が入力内容を再確認できるようにする
  • 入力ページに戻った場合、入力済みのデータが消去されないようにする
  • 入力内容をチェックする場合、入力のエラーメッセージは、こまめにその都度表示する
  • 申込内容を表示し、印刷できるようにする
  • 送信後に、利用者に対してフィードバックを行う

視覚表現

色

色の区別がつきにくい人や、画面読み上げソフト等で利用している人は、色の違いを把握できない。色の違いだけで情報の意味の違いや強調が表現されていると、意図が伝わらない事がある。

方針

情報の識別や指示は、色の違いなしでも伝達できるよう、他の手段も併用して表現する

  • 強調したい単語や文章には、色を変えるだけでなく太字にし、emやstrong等の要素を指定する
  • 色の違いで伝達される情報には、色以外の表現を併用する
OK例
  • テキストで説明を追加する
  • 塗りつぶしパターンの違いをつける
  • ◎、△等の記号で表現する
  • 引込み線を用いて情報を提供する

形や位置

画面に表示されている形や位置によって、情報を区別したり指示が行われる場合、音声ブラウザ等で利用している人等は、情報の区別がつかなかったり、操作できなくなる可能性がある。

方針

情報の識別や指示は、画面上の形や位置の違いなしでも伝達できるよう、他の手段も併用して表現する

  • 形や位置の違いで伝達される情報は、（右側の「実行」ボタン）などテキストの情報と合わせて提供する
  • 記号文字で情報を伝える場合に、「○（まる）」「×（ばつ）」など記号の意味をテキストで添える
  • 記号文字を画像化して、alt 属性で記号の意味の代替を示す

変化や移動

文章が移動したり、画像の表示内容が切り替わって変化するような場合は、視覚障害者や高齢者に情報が伝わらない可能性がある。

方針

変化や移動する画像、テキスト等の使用は最小限にする。使用する場合は、視覚的に刺激の強い（点滅や変化の差が大きい）表現は避ける。

文字のスクロール（移動）
  • 規格外要素であるmarquee要素は使用しない
  • 文字のスクロールは行わない
  • 利用者が読みとるべき情報はスクロールさせない
  • 一定時間、文字をスクロールした後、その文字を静止させる
  • 文字のスクロールのスピードを緩やかに設定する
画像や文字の点滅、変化
  • 規格外要素であるblink要素は使用しない
  • 利用者が読み取るべき情報は点滅や変化をさせない
  • 一定時間変化をした後、静止させる
  • 変化をできるだけ緩やかに設定する

HTML以外の技術

PDF

PDF形式のファイルの情報を提供するときは、内容を読み取ったり操作できない利用者が出ないように配慮が必要。

方針

アクセシビリティに配慮した PDF 形式で制作し公開すると同時に、掲載の際にはPDFファイルの情報内容を説明するテキスト等を提供する。

掲載方法
  • PDFファイルで提供した情報は、HTMLファイルでも提供する。
  • 紙媒体の資料をPDF化した場合は、内容のテキスト情報を提供する。
  • PDFファイルへのリンクテキストやリンク画像に、リンク先がPDFであること、ファイルのデータ量を明示し、利用者に伝える
  • プラグインの最新バージョンをダウンロードできるページへのリンクを提供し、プラグインを持っていない利用者が入手しやすいようにする
作成時の注意
  • Acrobat5.0 形式で PDFファイルを作成する
  • PDFのバージョンは1.4 とし、Web 表示用に最適化する
  • 文書のプロパティにファイルのタイトルと作成者を記述する

フラッシュ、スクリプト、アプレット等

HTML以外のプログラム（Flash、Script、Applet 等）やオブジェクト（Word等での情報提供を含む）を使用する場合は、内容を読み取ったり操作できない利用者が出る可能性がある。

方針

プログラム（Flash、Script、Applet 等）で作成した情報を提供する場合は、内容を説明するテキストや同等の操作を可能にする代わりの手段を提供する。

文書

外国語

一般的でない外国語を使用すると、高齢者や子供をはじめ多くの利用者が理解できない可能性がある。

方針

想定する利用者にとって、できるだけ一般的な外国語を用いる。一般的でない外国語を用いる場合には、理解を助けるための配慮をする。

  • 原稿の作成時に、外国語への配慮が適切かどうか検討する
  • ナビゲーションメニューやトップページの見出し等重要な箇所では、外国語を用いず日本語又はカタカナで表記する （Top → トップ）
  • 外国語でなく日本語に置き換えられる表現は、日本語で表記する
  • 利用者にとって一般的でない外国語を使用する場合は、ページの最初に出現した箇所で、カッコ書きで日本語での言い換えや解説を添える

省略語、専門用語等

一般的でない省略語や専門用語が使用されると、高齢者や子供をはじめ多くの利用者が理解できない可能性がある。

方針

想定する利用者にとって、一般的でない省略語や専門用語等は用いない。一般的でない省略語等を用いる場合には、理解を助けるための配慮をする。

  • ナビゲーションメニューやトップページの見出し等重要な箇所では、省略語、専門用語を用いない
  • 原稿の作成時に、省略語や専門用語への配慮が適切かどうか検討する
  • ページ内で初めて使用した箇所で、カッコ書きで正式名称や解説を添える
  • ページ内や別ページに用語解説を用意し、ページ内で初めて使用した箇所からリンクする
  • ページ内で始めて使用した箇所で、abbr要素又はacronym要素によって正式な名称等を指定する

読みの難しい言葉

読みの難しい言葉が使用されると、子供をはじめ多くの利用者が理解できない可能性がある。

方針

想定する利用者にとって、読みの難しい言葉は用いない。読みの難しい言葉を用いる場合には、解を助けるための配慮をする。

  • 原稿の作成時に、読みの難しい言葉への配慮が適切かどうか検討する
  • ページ内で初めて使用した箇所で、カッコ書き等で読み仮名を示す
  • ruby要素（XHTML1.1で対応）を使って読み仮名を示す

その他

ユーザビリティへの配慮

ユーザビリティ（利用しやすさ）に配慮する。

内容
  • トップページには、そのサイトの内容を最もよく表す説明を入れる
  • 重要な情報は、ページの上部に置く
  • 問い合わせ先を明記する
画面
  • 内容を簡潔にし、スクロールは最小限にする
  • ページが長くなるときは、適切なナビゲーション（ページ内リンクなど）を設ける
  • 800×600の画面を基準として標準でブラウザを表示したときに、横スクロールなしでも内容が読めるようにする
  • ウィンドウのステータスエリアにメッセージを表示しない

確認

作成したコンテンツに問題がないかチェックしましょう。

  • Webブラウザによって極端な不具合が生じないようチェックを行う
  • 使用プラットフォームによって極端な不具合が生じないようチェックを行う
  • アクセシビリティのチェックを行う
  • 支援ツール使用時の動作のチェックを行う

チェック

チェック方法

以下に、チェックのステップと、各ステップで利用できるツールを紹介。

  • ステップ1. 文法チェック
  • ステップ2. アクセシビリティチェック
  • ステップ3. ブラウザで確認

なお、オーサリングツール（Dreamweaverなど）を利用してウェブコンテンツを制作する場合には、拡張機能等を利用して、制作時からアクセシビリティのチェックを行うこと。

文法チェック

まず、(X)HTMLやCSSが、文法的にW3C技術標準に準拠しているかどうかのチェックを行う。

  • HTML/XHTML の文法をチェックする
  • CSSの文法をチェックする

HTML/XHTML文法

W3C Markup Validation Service（英語表示）

URL: http://validator.w3.org/

HTMLがW3Cの規格にしたがって正しく記述されているかをページ毎にチェックするオンラインツール。
作成したファイルをアップロードするか、URLを入力すればチェックが行われる。
ここではDTDに関する最低限のチェックのみなので、誤りがあれば修正し、すべてのチェックにパスすること。

Another HTML-lint gateway（日本語表示）

URL: http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

(X)HTMLの詳細な文法チェックをページ毎に行うオンラインツール。
作成したファイルをアップロードするか、URLを入力すればチェックが行われる。
必ずしも100点満点になる必要は無いが、少なくとも致命的エラーの項目がないように、90点以上は維持すること。

CSS文法

W3C CSS 検証サービス（日本語表示）

URL: http://jigsaw.w3.org/css-validator/

W3CによるCSSチェックツール。
CSSが文法的に問題ないかをチェックできる。ファイルをアップロードするか、 テキストとして貼り付けるか、URLで指定し、エラーや警告の内容を確認して、適切な修正を行うこと。

アクセシビリティチェック

(X)HTMLやCSSが、文法以外の面でアクセシビリティ上の問題がないかを、WCAG1.0やJISなどの規格項目に照らし合わせながらチェックする。
以下のツールを使ってチェックを行うことができますが、ツールでは自動的に判断できない内容も存在するので、自分で問題の有無をチェックする必要がある。

  • HTMLのアクセシビリティをチェックする
  • 色のアクセシビリティをチェックする

アクセシビリティチェック

ウェブアクセシビリティチェックサイトHAREL

URL: http://harel.nttdata.co.jp/wact/inputProc/inputUrlBL.do

アクセシビリティ適合度をチェックするサイト。点数表示される。

Fujitsu Accessibility Assistance

URL: http://jp.fujitsu.com/about/design/ud/assistance/

視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール。

WebInspector

URL： http://jp.fujitsu.com/about/design/ud/assistance/webinspector/
CSS を含んだHTML ファイルのアクセシビリティをチェック

ColorSelector

URL： http://jp.fujitsu.com/about/design/ud/assistance/colorselector/
背景色と文字色の組み合わせをチェック

ColorDoctor

URL： http://jp.fujitsu.com/about/design/ud/assistance/colordoctor/
色覚特性に応じた見え方をシミュレート

色チェック

aDesigner

URL: http://www.research.ibm.com/trl/projects/acc_tech/adesigner.htm

視覚障がい者（全盲ユーザーやロービジョンユーザー）にとってのアクセシビリティやユーザビリティをチェックすることができるソフトウェアツール。
音声によるWebページ閲覧のユーザビリティを視覚化して画面表示したり、ロービジョンユーザー（弱視・色覚異常・白内障）の症状に応じた「見え方」をシミュレートして画面表示したりすることができる。また、アクセシビリティ・ユーザビリティの各種ガイドラインへの適合性チェックを行うことができる。
チェックの結果検出された問題点（エラー）はリスト表示される。また、Webページ全体に対する総合評価も表示される。シミュレーション結果を見つつ、リスト表示されたエラーに適切に対処するように。

ブラウザで確認

実際にいろいろなブラウザを用いて、自分の目と耳で確認しながらチェックする。

  • テキストブラウザでの表示を確認する
  • 音声ブラウザでの読み上げを確認する
  • 複数ブラウザでの表示を確認する
  • ブラウザの設定を変更して確認する
  • キーボードでの操作を確認する

テキストブラウザでの表示

テキストブラウザでの表示を確認することで、スタイルシートが反映されない状態や、画像が表示されない状態を確認することができる。(X)HTMLが構造的に記述されているかを確認すること。

Lynx for Win32

URL: http://lynx-win32-pata.sourceforge.jp/

Lynxの特徴は、文字ブラウザのみの表示、キーボードによる操作、フレーム、テーブル、スタイルシート及び各種スクリプト・アプレット等に未対応となっており、Internet ExplorerやNetscape等のグラフィカルブラウザとは異なる特徴を持つ。それらLynxが持つ特徴は、音声ブラウザにもほとんど当てはまることから、アクセシビリティ確保の面でよい目安となる。

音声ブラウザでの読み上げ

音声ブラウザで実際に読み上げを行って、読み上げ順などが適切かどうかを確認する。

NetReader 体験版

URL: http://www.aok-net.com/dlpage/dltknr.htm

※現在、音声ブラウザは製品版のみ。しかし、試用版にて体験することができる。なお、テキストブラウザや「aDesigner」でも、擬似的に再現することができる。

複数ブラウザでの表示

できるだけ多くのブラウザで表示確認を行う。

ブラウザの設定を変更

ブラウザの設定を変更してみて、内容が意図どおりに正しく伝わるか、利用できない機能はないか、などを確認する。

  • 画像表示をオフにする
  • Javascriptをオフにする
  • CSSをオフにする
  • 文字のサイズを変更する

キーボード操作

マウスを使わず、すべてのリンクがたどれるか、すべてのボタンが選択できるかを確認する。

アクセスランキング

購読する Feed（Atom）

購読する Feed（RSS2.0）