ここから始めるWebアクセシビリティロゴ

Last update: 2004/06/20

このコーナーは、著書内の具体的事例などで、モノクロ印刷では理解できないものや変化する画像などを参照するもので、音声には対応しておりません。

第1章 情報のユニバーサルデザインとWebのアクセシビリティ

1.情報のユニバーサルデザインとは

1-1 IT社会に不可欠なユニバーサルデザインという考え方
1-2 国内外の現状について(高齢化社会・リハビリテーション法508条)
1-3 Webサイトとユニバーサルデザイン
【コラム1】HTMLとWWW、その誕生の背景

2.Webのアクセシビリティとは

2-1 アクセシビリティとは何か
2-2 なぜWebのアクセシビリティが必要なのか
2-3 アクセシビリティに配慮した実例紹介(自治体、企業)
【コラム2】障害を持つ人々にとってパソコンは救世主になるのか

第2章 Webを使っている人達の問題点

1.どんな人達が使っているのかを知ることから始まる

1-1 視覚障害(全盲)
1-2 視覚障害(弱視)
1-3 視覚障害(色弱)
1-4 聴覚障害
1-5 上肢障害(マウス使用の場合)
1-6 上肢障害(キーボードのみ使用の場合)
1-7 上肢障害(補助具使用の場合)
1-8 高齢者
1-9 子ども
1-10 外国人
【コラム3】アクセシブルなWebはデザイン的に劣るのか

2.どんな支援技術を使っているかを知る

2-1 音声ブラウザ
2-2 音声読み上げソフト
2-3 点字ディスプレイ
2-4 画面拡大ソフト
2-5 音声入力ソフト
2-6 文字入力支援ソフト
2-7 その他の支援技術

第3章 アクセシブルWebの制作方法

3-1.最初の一歩はここから始めましょう【レベル1】

3-1-1 画像にはALT属性を付けること。
3-1-2 リンクボタンになっている画像の全てにALT属性を使ってリンク先を明確にすること。
3-1-3 日本語のページでは外国語の乱用はせず、誰にでも解る様に配慮すること。
3-1-4 色や形によって伝えられる情報は、色や形がなくても情報が伝わるようにすること。
3-1-5 レイアウトのテーブルは、情報が適切に音声ブラウザで読み上げられること。
3-1-6 HEADに付ける<TITLE>は内容が解るように適切なタイトルを付けること。
3-1-7 ページの制作サイズはブラウザの横幅800pxを超えないこと。
3-1-8 イメージマップはクライアントサイドとし、リンクにALT属性を付けること。
3-1-9 フレームは必要最小限にすること。
3-1-10 丸数字等の機種依存文字は使わないこと。

3-2.次はこの項目に対応しましょう。【レベル2】

3-2-1 重要な画像(地図・組織図・グラフ・バナー広告)などには、解説をつけること。
3-2-2 キーボード操作だけで適切なリンクができること。
3-2-3 PDFでの情報提供は極力避けること。
3-2-4 プルダウン形式の選択メニューはキーボードからのアクセスを可能にすること。
3-2-5 FLASHなどで重要な情報を提供する場合は、テキストで補足をすること。
3-2-6 リンクによって、新しいウィンドウを開くことは必要最低限とすること。
3-2-7 一単語内にスペースや強制改行を入れないこと。
3-2-8 重要な意味を持つものには記号を用いないこと。
3-2-9 リンクの下線はむやみに消さないこと。
3-2-10 略語や一般的でない言葉には、理解しやすいように説明を付けるなどして配慮すること。
3-2-11 取り消しボタンは、誤操作をしないように必要性を検討し、使う場合は送信ボタンと距離を離すこと。
3-2-12 「戻る」等のサイト内基本操作は、わかりやすいように同じ位置・形状にすること。
3-2-13 文頭等にナビゲーションを付ける場合は、読み飛ばせるように、本文へのアンカーを付けること。
3-2-14 見出し要素は正しい順番を守ること。
3-2-15 点滅やスクロールなど変化する画像・テキストは、コントラスト・早さに注意すること。
3-2-16 画像は極力軽く作ることを心がけ、指定にはwidth、height属性を付けること。
3-2-17 背景色と前景色には十分なコントラストをつけること。
3-2-18 表の始まりには「表題」を付けること。
3-2-19 表組みのセル結合は、必要最小限にすること。
3-2-20 フォントサイズ・色・表示位置等の指定にはできるだけスタイルシートを使うこと。
3-2-21 スタイルシートを使用しても未対応のブラウザで閲覧可能であること。
3-2-22 スタイルシートでの文字サイズ指定は、ブラウザで大きさを変えられること。
3-2-23 構造のための要素および属性と見栄えのための要素および属性は、正確に使用すること。
3-2-24 サイトで使用する文章の基本となる言語を指定しておくこと。

3.その他の対応したい項目です。【レベル3】

3-3-1 絵文字はなるべく使わず、文字や画像に置き換えること。
3-3-2 文字の透過画像は、背景色を変えても見えるように配慮すること。
3-3-3 画像を極力使用しないでテキストで表現すること。
3-3-4 リンクするボタン画像などは、リンクであることがわかるように配慮すること。
3-3-5 リンクする画像が隣接する場合は、誤操作をしないように間を開けること。
3-3-6 リンクを張ったテキストは文字幅が狭すぎないこと。
3-3-7 テキストリンクが並ぶ場合は、誤操作をしないように適切な行間を取ること。
3-3-8 大きな画像等にリンクする場合は、内容・サイズを表記すること。
3-3-9 リンクの文字は、文章の前後関係を見なくても意味が通り、あまり長くならないこと。
3-3-10 連続したリンクが一つのものと誤認されないように、間に仕切り記号を入れる等配慮をすること。
3-3-11 音声情報に対してはできるだけ文字でも情報を提供すること。
3-3-12 ビデオ情報に対しては、できるだけそれと同期した音声の情報も提供すること。
3-3-13 ビデオ情報に対しては、できるだけ文字による説明を提供すること。
3-3-14 重要な情報を警告音等で知らせる場合は、同等のメッセージを表示すること。
3-3-15 音声情報は、再生・停止・音量調整などのコントロールを可能にすること。
3-3-16 取り消し線を引く場合は「取り消し」がわかるように配慮すること。
3-3-17 英単語をうまく音声で読ませるには小文字で表記すること。
3-3-18 リストは正確に構造を記述し、見栄えのためには用いないこと。
3-3-19 リストの番号表示等は音声では読み上げられないこともあるので注意すること。
3-3-20 文書が複数ページにまたがる場合は、それらを集めるための手段を提供すること。
3-3-21 文章はわかりやすい表現にすること。
3-3-22 全角と半角の使い方は、できるだけサイト内で統一すること。
3-3-23 表組は、行と列の関係を考慮してなるべくわかりやすくすること。
3-3-24 表組の行や列の見出し項目にはを使って指定すること。
3-3-25 数字によるテーブルには、できるだけ代替え情報を提供すること。
3-3-26 それぞれのFRAME要素にタイトルを付けること。
3-3-27 フレームを使わなくても読めるようにすること。
3-3-28 フレームのスクロールバーを非表示にする場合は注意すること。
3-3-29 フレームに直接画像を入れずに別のHTMLファイルを使うこと。
3-3-30 フレームのサイズは相対単位で指定すること。
3-3-31 submitボタンに画像はできる限り使わないこと。
3-3-32 入力ボックス、テキストエリアにはデフォルト値を持たせるか、説明を付けること。
3-3-33 フォームによる入力をさせる場合には、できるだけ代替え手段を用意すること。
3-3-34 入力エリアへのコメントは、入力エリアの前に来るように配置すること。
3-3-35 JavaScriptには対応していない音声ブラウザを考慮して代替え手段を用意すること。
3-3-36 Javaアプレットには対応していないブラウザを考慮して代替え手段を用意すること。
3-3-37 利用者の意図にかかわらず、ページの更新や移動を自動的に行わないこと。
3-3-38 変更される情報は、アクセシビリティ情報も同時に更新されること。
3-3-39 関連する技術の規格・仕様・文法に準拠して作成すること。
3-3-40 制限時間があるときは知らせると共に、延長できない場合は代替手段を用意すること。
3-3-41 書体を指定する場合、サイズや読みやすさを考慮して指定すること。
3-3-42 文章だけではなく、図・記号・イラスト・音声などを合わせて分かりやすくすること。
3-3-43 間違った操作を行わないような配慮や、間違った場合の取り消し方法を提供すること。

第4章 アクセシビリティを確かめるには

1.一般的な確認方法

1-1 OSやブラウザを変えて確認する
1-2 キーボードのみで操作が可能か確認する。
1-3 音声ブラウザで聞いてみる。
1-4 人の目によって確認する。
1-5 スタイルシートを外して確認する。

2.Web作成ツールによるアクセシビリティの確認方法

2-1 Dream WeaverプラスLIFT
2-2 IBMホームページ・ビルダー

3.アクセシビリティチェッカーによる確認方法

3-1 ウェブヘルパー
3-2 i-Checker
3-3 ウェブバリアファインダー
3-4 Another HTML-lint gateway
3-5 Bobby(英語版)
3-6 Web Inspector
【コラム7】デザイナーの思った通りには見られていない

第5章 ホームページ・ビルダーを使ってアクセシブルWebに挑戦

1.アプリケーションソフトとアクセシビリティ

2.ホームページ・ビルダーの設定について

3.ホームページ・ビルダーでできるアクセシビリティ

3-1 ホームページ・ビルダーでalt属性を付ける
3-2 ページタイトルを付ける
3-3 表を作成する
3-4 画像を編集する
3-5 スタイルシート
3-6 アクセシビリティのチェック

4.最後に

【コラム8】これってトップページに必要?

第6章 参考資料

1.Webのアクセシビリティで参考になる資料

2.JIS規格について

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

Web Content Accessibility Guidelines 2.0(日本語訳)(W3Cの勧告 2003年04月29日)


HOME
(C)Copyright 1998-2004 UDIT Inc. All rights reserved.