目次
はじめに
本書の使い方
1-1 IT社会に不可欠なユニバーサルデザインという考え方
1-2 国内外の現状について(高齢化社会・リハビリテーション法508条)
1-3 Webサイトとユニバーサルデザイン
【コラム1】HTMLとWWW、その誕生の背景
2-1 アクセシビリティとは何か
2-2 なぜWebのアクセシビリティが必要なのか
2-3 アクセシビリティに配慮した実例紹介(自治体、企業)
【コラム2】障害を持つ人々にとってパソコンは救世主になるのか
1-1 視覚障害(全盲)
1-2 視覚障害(弱視)
1-3 視覚障害(色弱)
1-4 聴覚障害
1-5 上肢障害(マウス使用の場合)
1-6 上肢障害(キーボードのみ使用の場合)
1-7 上肢障害(補助具使用の場合)
1-8 高齢者
1-9 子ども
1-10 外国人
【コラム3】アクセシブルなWebはデザイン的に劣るのか
2-1 音声ブラウザ
2-2 音声読み上げソフト
2-3 点字ディスプレイ
2-4 画面拡大ソフト
2-5 音声入力ソフト
2-6 文字入力支援ソフト
2-7 その他の支援技術
1-1 画像にはALT属性を付けること。
1-2 リンクボタンになっている画像の全てにALT属性を使ってリンク先を明確にすること。
1-3 日本語のページでは外国語の乱用はせず、誰にでも解る様に配慮すること。
1-4 色や形によって伝えられる情報は、色や形がなくても情報が伝わるようにすること。
1-5 レイアウトのテーブルは、情報が適切に音声ブラウザで読み上げられること。
1-6 HEADに付ける<TITLE>は内容が解るように適切なタイトルを付けること。
1-7 ページの制作サイズはブラウザの横幅800pxを超えないこと。
1-8 イメージマップはクライアントサイドとし、リンクにALT属性を付けること。
1-9 フレームは必要最小限にすること。
1-10 丸数字等の機種依存文字は使わないこと。
【コラム4】どうしてもアクセシブルにできない場合
2-1 重要な画像(地図・組織図・グラフ・バナー広告)などには、解説をつけること。
2-2 キーボード操作だけで適切なリンクができること。
2-3 PDFでの情報提供は極力避けること。
2-4 プルダウン形式の選択メニューはキーボードからのアクセスを可能にすること。
2-5 FLASHなどで重要な情報を提供する場合は、テキストで補足をすること。
2-6 リンクによって、新しいウィンドウを開くことは必要最低限とすること。
2-7 一単語内にスペースや強制改行を入れないこと。
2-8 重要な意味を持つものには記号を用いないこと。
2-9 リンクの下線はむやみに消さないこと。
2-10 略語や一般的でない言葉には、理解しやすいように説明を付けるなどして配慮すること。
2-11 取り消しボタンは、誤操作をしないように必要性を検討し、使う場合は送信ボタンと距離を離すこと。
2-12 「戻る」等のサイト内基本操作は、わかりやすいように同じ位置・形状にすること。
2-13 文頭等にナビゲーションを付ける場合は、読み飛ばせるように、本文へのアンカーを付けること。
2-14 見出し要素は正しい順番を守ること。
2-15 点滅やスクロールなど変化する画像・テキストは、コントラスト・早さに注意すること。
2-16 画像は極力軽く作ることを心がけ、指定にはwidth、height属性を付けること。
2-17 背景色と前景色には十分なコントラストをつけること。
2-18 表の始まりには「表題」を付けること。
2-19 表組みのセル結合は、必要最小限にすること。
2-20 フォントサイズ・色・表示位置等の指定にはできるだけスタイルシートを使うこと。
2-21 スタイルシートを使用しても未対応のブラウザで閲覧可能であること。
2-22 スタイルシートでの文字サイズ指定は、ブラウザで大きさを変えられること。
2-23 構造のための要素および属性と見栄えのための要素および属性は、正確に使用すること。
2-24 サイトで使用する文章の基本となる言語を指定しておくこと。
【コラム5】星ひとつのガイドライン
3-1 絵文字はなるべく使わず、文字や画像に置き換えること。
3-2 文字の透過画像は、背景色を変えても見えるように配慮すること。
3-3 画像を極力使用しないでテキストで表現すること。
3-4 リンクするボタン画像などは、リンクであることがわかるように配慮すること。
3-5 リンクする画像が隣接する場合は、誤操作をしないように間を開けること。
3-6 リンクを張ったテキストは文字幅が狭すぎないこと。
3-7 テキストリンクが並ぶ場合は、誤操作をしないように適切な行間を取ること。
3-8 大きな画像等にリンクする場合は、内容・サイズを表記すること。
3-9 リンクの文字は、文章の前後関係を見なくても意味が通り、あまり長くならないこと。
3-10 連続したリンクが一つのものと誤認されないように、間に仕切り記号を入れる等配慮をすること。
3-11 音声情報に対してはできるだけ文字でも情報を提供すること。
3-12 ビデオ情報に対しては、できるだけそれと同期した音声の情報も提供すること。
3-13 ビデオ情報に対しては、できるだけ文字による説明を提供すること。
3-14 重要な情報を警告音等で知らせる場合は、同等のメッセージを表示すること。
3-15 音声情報は、再生・停止・音量調整などのコントロールを可能にすること。
3-16 取り消し線を引く場合は「取り消し」がわかるように配慮すること。
3-17 英単語をうまく音声で読ませるには小文字で表記すること。
3-18 リストは正確に構造を記述し、見栄えのためには用いないこと。
3-19 リストの番号表示等は音声では読み上げられないこともあるので注意すること。
3-20 文書が複数ページにまたがる場合は、それらを集めるための手段を提供すること。
3-21 文章はわかりやすい表現にすること。
3-22 全角と半角の使い方は、できるだけサイト内で統一すること。
3-23 表組は、行と列の関係を考慮してなるべくわかりやすくすること。
3-24 表組の行や列の見出し項目には
1-1 OSやブラウザを変えて確認する
1-2 キーボードのみで操作が可能か確認する。
1-3 音声ブラウザで聞いてみる。
1-4 人の目によって確認する。
1-5 スタイルシートを外して確認する。
2-1 Dream WeaverプラスLIFT
2-2 IBMホームページ・ビルダー
3-1 ウェブヘルパー
3-2 i-Checker
3-3 ウェブバリアファインダー
3-4 Another HTML-lint gateway
3-5 Bobby(英語版)
3-6 Web Inspector
【コラム7】デザイナーの思った通りには見られていない
3-1 ホームページ・ビルダーでalt属性を付ける
3-2 ページタイトルを付ける
3-3 表を作成する
3-4 画像を編集する
3-5 スタイルシート
3-6 アクセシビリティのチェック
【コラム8】これってトップページに必要?
Web Content Accessibility Guidelines 2.0(日本語訳)(W3Cの勧告 2003年04月29日)