ウェブアクセシビリティー

• ホームページの設計指針（ＪＩＳ規格）
• 新ＪＩＳ
• ウェブアクセシビリティー・チェックリスト
• ハイコントラスト機能で確認
• IEのユーザー補助機能で確認
• ウェブアクセシビリティ評価ツール
• サイトのアクセシビリティ評価

　高齢者・障害者等に配慮したホームページの設計指針のＪＩＳ規格が平成16年6月20日に制定され、平成22年8月20日に改訂されました。ホームページを作成する場合にはこのＪＩＳ規格に準拠することが望ましいとされています。
　以下、平成16年に制定された規格を旧ＪＩＳ、平成22年に改訂された規格を新ＪＩＳと呼ぶことにします。
　なお、ＪＩＳ規格は日本工業標準調査会ホームページで閲覧できます。

• 規格番号：JIS X 8341-3
• 規格名称：高齢者・障害者等配慮設計指針
  －情報通信における機器，ソフトウェア及びサービス－
  第３部：ウェブコンテンツ
• 日本工業標準調査会ホームページへ（別ウィンドウで表示）

　旧ＪＩＳは例があり具体的でしたが、新ＪＩＳは例が無く抽象的になりました。
　新ＪＩＳは、W3C（World Wide Web Consortium）が定めた、WCAG（Web Content Accessibility Guidelines）2.0 を和訳してＪＩＳ風にアレンジしたようです。基になった英文が推敲されていないことに加え、逐語訳でカタカナが多くわかりにくくなりました。
　ＪＩＳ規格として重要な具体的な実装方法については、附属書Ｂに次のような記述があり、英語の文書に従うよう求めています。（ＪＩＳ規格は日本の規格ですが・・・予算がなかったのでしょう。）

この規格を用いるときには，W3C が公開しているこれらの文章を参照することが望ましい。
　　　a) Understanding WCAG 2.0
　　　b) Techniques for WCAG 2.0

　新ＪＩＳでは、アクセシビリティ達成等級が設けられました。等級A、等級AA、等級AAAの三等級に分かれています。これらの等級の定義がＪＩＳにはありませんが、原文の WCAG 2.0 には“A (lowest), AA, and AAA (highest)”とあります。
　WCAG 2.0 の英文とその和訳はインターネットで閲覧できます。これらの方がわかりやすい場合があります。
　なお、WCAG 2.0 に適合しても、アクセシビリティが低下する場合があります。表示モードをハイコントラストに変更した場合、文字が見えなくなる場合があります。

• WCAG 2.0 の英文のページへ（別ウィンドウで表示）
• Understanding WCAG 2.0の英文のページへ（別ウィンドウで表示）
• Techniques for WCAG 2.0の英文のページへ（別ウィンドウで表示）
• WCAG 2.0 の和訳のページへ（別ウィンドウで表示）

　ウェブアクセシビリティー・チェックリスト例を表１に示します。標準的なホームページ作成言語の HTML を対象にします。
　新ＪＩＳの原文の関連文書の“Understanding WCAG 2.0”などを参考にしています。
　第３列は、関連する新ＪＩＳの箇条番号と等級です。

表１　ウェブアクセシビリティー・チェックリスト例

分類	チェック項目	箇条 等級
言語	html要素のlang属性に"ja"を指定し、meta要素に文字コードを指定する	7.3.1.1 等級A
レイアウト	表組み要素（table要素）をレイアウトに使う場合には、表題、th要素を付けない	7.1.3.1 等級A
	スクリーンリーダーの読み上げ順序が見た目の順序と同じか確認する	7.1.3.2 等級A
	フレームをなるべく使わないようにする	無し
構造	ページのタイトルを、title要素を用いて適切に付ける	7.2.4.2 等級A
	見出しを、h1～h6要素を用いて適切に付ける	7.1.3.1 等級A 他
	ページがサイトのどこに位置しているかを明示する	7.2.4.8 等級AAA
	ナビゲーションやメニューの位置、表示スタイル及び表記に、サイト内で一貫性を持たせる	7.3.2.3 等級AA 他
	共通に使われるナビゲーションやメニューを、読み飛ばせるようにする	7.2.4.1 等級A
キー 操作	タブキーや矢印キーで、キーボードフォーカスを移動できるか確認する	7.2.1.2 等級A 他
	キーボードですべての機能を、特定のタイミングを要することなく、操作可能か確認する	7.2.1.1 等級A 他
文章	文字のサイズを %単位または em単位で指定する	7.1.4.4 等級AA 他
	文字色を指定する場合、色だけに依存して情報を提供しない	7.1.4.1 等級A
	文字色と背景色の間に十分なコントラストをとる	7.1.4.3 等級AA 他
	記号、形、大きさ、位置だけに依存して情報を提供しない	7.1.3.3 等級A
	単語の文字間にスペースや改行を入れない	7.1.3.2 等級A
表	表題を表の上にcaption要素で適切に付け、見出し項目をth要素で明示する	7.1.3.1 等級A
箇条 書き	ul要素、ol要素、dl要素を使って記述する	7.1.3.1 等級A
画像	画像の説明をalt属性で記述する	7.1.1.1 等級A
	背景画像をメニューやナビゲーション、各種ボタンに用いない	7.1.1.1 等級A
	色だけに依存して情報を提供しない	7.1.4.1 等級A
	画像化された文字は、テキストだけで表現可能な場合には用いない	7.1.4.5 等級AA 他
	画像化された文字の場合、文字色と背景色の間に十分なコントラストをとる	7.1.4.3 等級AA 他
リンク	a要素を使って設定する	7.1.3.1 等級A
	リンク先の説明を適切に記述する	7.1.1.1 等級A 他
	新しいウィンドウを開いてページを表示する場合には、新しいウィンドウで表示されることを明示する	7.2.4.4 等級A 他
	リンク用テキストの文字色や下線の設定を変更する場合、所定の条件を満足させる	7.1.4.1 等級A
入力 部品	入力欄にラベル（項目名）を適切に付け、何を入力するかを明示するとともに、label要素の for属性でラベルと入力欄との関係を明示する	7.1.1.1 等級A 他
	利用者に事前に知らせてある場合を除いて、入力部品に入力しただけでは状況に変化を生じさせない	7.3.2.2 等級A
送信	送信する前に、送信内容の確認画面を表示し、入力エラーがある場合はそのエラーを利用者に明示する	7.3.3.1 等級A 他
ページ移動	meta要素の refresh属性を使用し別ページに自動的に移動する場合、時間制限をゼロにする	7.2.2.1 等級A 他
全般	文法（構文）チェックを行いエラーがないか確認する	7.4.1.1 等級A
	HTMLの場合、標準的な HTMLのユーザインタフェースを使用していることを確認する	7.4.1.2 等級A
	ハイコントラスト機能で確認する	無し
	IEのユーザー補助機能で確認する	無し

• ウェブアクセシビリティー・チェックリストの説明
• コントラスト比の計算

　表１に記載した項目以外に関連するＪＩＳ規定の箇条番号、箇条名称、等級を表２に示します。

表２　表１の項目以外に関連するＪＩＳ規定

分類	番号	名称	等級
映像	7.1.1.1	非テキストコンテンツに関する達成基準	A
	7.1.2.1	収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアに関する達成基準	A
	7.1.2.3	収録済みの映像コンテンツの代替コンテンツ又は音声ガイドに関する達成基準	A
	7.1.2.5	収録済みの映像コンテンツの音声ガイドに関する達成基準	AA
	7.1.2.7	収録済みの映像コンテンツの拡張した音声ガイドに関する達成基準	AAA
	7.1.2.8	収録済みのメディアの代替コンテンツに関する達成基準	AAA
音声	7.1.1.1	非テキストコンテンツに関する達成基準	A
	7.1.2.1	収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアに関する達成基準	A
	7.1.2.2	収録済みの音声コンテンツのキャプションに関する達成基準	A
	7.1.2.4	ライブの音声コンテンツのキャプションに関する達成基準	AA
	7.1.2.6	収録済みの音声コンテンツの手話通訳に関する達成基準	AAA
	7.1.2.8	収録済みのメディアの代替コンテンツに関する達成基準	AAA
	7.1.2.9	ライブの音声しか含まないコンテンツの代替コンテンツに関する達成基準	AAA
	7.1.4.2	音声制御に関する達成基準	A
	7.1.4.7	小さい背景音又は背景音なしに関する達成基準	AAA
APPLET	7.1.1.1	非テキストコンテンツに関する達成基準	A
OBJECT	7.1.1.1	非テキストコンテンツに関する達成基準	A
スクロール	7.2.2.2	一時停止，停止及び非表示に関する達成基準	A
点滅	7.2.2.2	一時停止，停止及び非表示に関する達成基準	A
閃光	7.2.3.1	3 回のせん（閃）光又はいき（閾）値以下に関する達成基準	A
	7.2.3.2	3 回のせん（閃）光に関する達成基準	AAA
アニメ画像	7.1.1.1	非テキストコンテンツに関する達成基準	A
	7.2.2.2	一時停止，停止及び非表示に関する達成基準	A
時間制限	7.2.2.1	調整可能な制限時間に関する達成基準	A
	7.2.2.3	制限時間なしに関する達成基準	AAA
	7.2.2.4	中断に関する達成基準	AAA
	7.2.2.5	再認証に関する達成基準	AAA
情報の自動更新	7.2.2.2	一時停止，停止及び非表示に関する達成基準	A
	7.3.2.5	利用者の要求による状況の変化に関する達成基準	AAA
CAPTCHA注１	7.1.1.1	非テキストコンテンツに関する達成基準	A
その他 (等級AA)	7.2.4.5	複数の到達手段に関する達成基準	AA
	7.3.1.2	部分的に用いられている言語に関する達成基準	AA
その他 (等級AAA)	7.1.4.8	視覚的な表現に関する達成基準	AAA
	7.3.1.3	一般的ではない用語に関する達成基準	AAA
	7.3.1.4	略語に関する達成基準	AAA
	7.3.1.5	読解レベルに関する達成基準	AAA
	7.3.1.6	発音及び読み仮名に関する達成基準	AAA
	7.3.3.5	ヘルプに関する達成基準	AAA

• 注１：Completely Automated Public Turing test to tell Computers and Humans Apart の略

　新ＪＩＳ、旧ＪＩＳのどちらにも規定されていませんが、重要な確認事項です。
　オペレーティングシステムのハイコントラスト機能を使ってディスプレイの表示モードを変更し、文字が読めるか確認します。
　例えば、背景画像は見えなくなります。背景画像で重要な情報を伝えることはできません。また、画像化された文字で、文字色が黒の透過画像は見えなくなります。
　通販サイトなど商業系サイトの中には、「購入」ボタンや「ログイン」ボタンや「メニュー」が見えなくなるサイトがあります。公的機関の中にも「メニュー」が見えなくなるサイトがあります。その多くは、背景画像をメニューやボタンに用いています。
　Windowsでは、左「Alt」＋左「Shift」＋「Print Screen」でハイコントラストモードに変更できます。元に戻すときも同じ操作です。

　これも、新ＪＩＳ、旧ＪＩＳのどちらにも規定されていませんが、重要な確認事項です。
　IE(Internet Explorer) の場合、「ツール」「インターネットオプション」「全般」「ユーザー補助」の順にクリックし、書式設定の“Webページで指定されたフォントサイズを使用しない”のチェックボックスにチェックを入れます。
　レイアウトの仕方によっては文字が重なり読みにくくなる場合があります。実際文字が重なるサイトがあります。
　さらに、表示の文字サイズを大きくして文字が重なっていないか確認しましょう。

　総務省が評価ツールを提供しています。
　ページの評価結果が次の４つのレベルで表示されます。

1. 問題あり
2. 問題の可能性大
3. 要判断箇所
4. 手動確認

• 総務省のページへ（別ウィンドウで表示）