＜概要＞
１．「ウェブアクセシビリティ」を確保するとはどういうことか？
1-1 「WEBユニバーサルデザイン」と「WEBアクセシビリティ」
「WEBユニバーサルデザイン」とは、WEB設計者がWEBの構想段階からアクセシビリティを考慮して設計すること。
「WEBアクセシビリティ」とは、高齢者や障害者など誰でもがホームページで提供されている情報に、問題なくアクセスし、利用できること。
1-2 誰もが利用できるWEBをデザインするとはどういうことか
視覚障害者の場合：音声読み上げソフトを使って健常者とあまり変わらないくらいの利用ができる。
→しかし、情報が伝わりにくいページが多い。
肢体障害者の場合：補助装置や支援ソフトを使って、WEBやメールを利用できる。
→キーボードだけで操作できるようにしないと操作しにくい。
＜参考＞
視覚障害者の利用特性のポイント
- 画像、PDF、FLASH等には、代替テキスト（ALT属性やテキスト等）がないと、内容がわからない。
- ナビゲーションのリンクが多すぎて、なかなか本文にたどり着けないケースが多い。
- 情報を探す時には、リンク部分だけを読む傾向がある。リンク文の表現がアクセシビリティに直結
- データ表やプルダウンメニューの構造を理解するには相当苦労。
高齢者の利用特性のポイント
- 適切な情報の整理、次が想像できるボタン名、わかりやすい操作手順への配慮が高齢者にとってのアクセシビリティ
- たくさんのサイトを調べているうちに、現在位置や履歴を見失いがち。
- サイト内のボタンを押すにも不安。英語ボタン名だと操作を敬遠。
- 直前に見ていた画面に戻る操作で戸惑う。（例：「戻る」ボタン、「閉じる」ボタン）
「誰もが使えるWEB」を制作するためには、「ウェブアクセシビリティ・ガイドライン」に基づいたウェブ制作を行うことが基本。
1-3 ウェブアクセシビリティ・ガイドラインの正しい理解
ウェブアクセシビリティの指針としてWAIの「ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG1.0）」があるが、それは、画像やマルチメディファイルを使っていても、より多くの利用者が情報を得られるようにする制作方法（アクセシブル・デザインの技術）を示している。
ウェブアクセシビリティの最も重要なコンセプトは「情報伝達の保証」＝情報が誰にでも必ず伝わるようにすることである。
アクセシビリティ確保の4つのポイント
- 情報表示の代替手段を用意すること（基本）
- 構造的でわかりやすい文章の記述（誰にでも分かりやすい文章を書くことが大事）
- 正しい文法・用法のHTMLの記述（特に構造タグの正しい適用）
- 理解しやすい、識別しやすい配色や表現を心がける
２．アクセシブル･デザインに関する様々な不安と誤解
2-1 アクセシビリティを確保すると、デザイン性やユーザビリティが落ちるのではないか？
より高いアクセシビリティに配慮したページとは、
- 適切な代替テキストあり
- 文章構造（見出し<H>タグ要素）の適用
- スケーラブルなレイアウトテーブル
- スケーラブルなCSS（スタイルシート）の設定 → Internet Explorerでは自分の好きなスタイルシートを設定することができるので、できるだけスタイルシートを使用した方が良い。
補足として、
- CGIは使ってもいいが、ラジオボタンやチェックボックスはラベルの後に置くことが原則。また、ラベルと入力部品の関係を示すため、1つずつ、<Label><input=" ">テキスト</Label>とくくるようにする。
- 入力フォーム以外の連絡方法（メールアドレス、電話、住所等）も提供する。
- Java-scriptを利用することは、できるだけ避ける。
- 検索BOXは、できるだけホームページの上の方に配置する。
- フレームはできるだけ使用しない方がいいが、使用する場合は各フレームにタイトルを付けて、FRAMESETのファイルの中に、NOFRAMEの要素を記述し、同じ内容の文章を入れることが必要である。
2-2 FLASHは絶対使ってはいけないのか？
FLASHを使った場合、リンクやフォームなど、インタラクティブな要素が含まれると、全く操作できない状態に陥るケースがある。
[基本的な考え方]
- FLASHにインタラクションを組み込むことはなるべく避ける。
[対応技術]
- FLASHに対応していないブラウザのために、object要素を入れ子にして、代替表現を用意する。（未対応ブラウザが多い）
- FLASH MXの"ACCESSIBILTY PANEL"を利用して、個々の要素に代替テキストを入れる。
- FLASHを利用したページと、同じ内容の非FLASHページを提供する。FLASHオブジェクトを呼び込む前にリンクをおく。
３．アクセシブル･ウェブデザイン実践のポイント
3-1 デザインのアクセシビリティ度を見極める“４つの眼”
- 非テキスト要素すべてに代替テキストがあるか
- 文章そのものがわかりやすいか。特に、リンク、見出し。
- HTMLで構造化ができるところはちゃんとしているか。
- 使いやすさの面で配慮できるところに抜かりはないか。
3-2 “４つの眼”で理解するアクセシビリティ技術（代表例）
画像に対する「代替テキスト」の付け方
- 非テキスト要素の“alt属性”に、短い代替テキストを付ける（40字程度）
- 長い説明を要する場合は、本文中もしくは別のファイルで、画像が表現するものと同じレベルの情報を提供する。
- 長い説明や、画像の雰囲気を解説した文章のファイルを用意し、“img要素”内に“longdesc属性”で指定する。
見出しに画像を使う場合の指定の仕方
- 見出しに相当する内容が、画像で表現される場合でも、img要素を<H>でくくり、構造を指定する。
“本文へスキップ”の設定の仕方
- サイト全体を通して、繰り返し表示されるメニューなどをジャンプする実現方法としては、１ピクセルの透明画像を用意し、そのALT属性に「本文へスキップ」と埋め込み、本文の文頭アンカーへリンクすることが多い。
４．ウェブアクセシビリティを進めるためにウェブ担当者に求められる役割
4-1 サイトの位置付けを明確にしサイト利用者への配慮の方向性を検討
特に公的サイト・自治体のウェブサイトでは、個々のアクセシビリティの確保が必須。しかし、情報をより効果的に提供するための工夫や配慮も重要。
4-2 アクセシブルデザインを確保するためのワークフローの明確化
企業や団体ごとに、ウェブアクセシビリティを確保するための、WEB制作〜公開までの手順を明確にすることが大切である。東京都（東京都公式ホームページガイドライン）や仙台市（仙台地域における検討成果「ウェブアクセシビリティ確保に向けての目標」）を参考として紹介した。
4-3 アクセシビリティ度を見極める技術を身に付ける
ウェブアクセシビリティの点検ツール例として以下の4つを紹介した。
＜参考書＞
- 「詳解 HTML＆XHTML＆CSS辞典」 著者：大藤幹 (株)秀和システム ＜講師お勧め＞
- 「ユニバーサルHTML/XHTML」 著者：神崎正英 (株)毎日コミュニケーションズ
- 「ウェブアクセシビリティ すべての人に優しいウェブ・デザイン」 著者：Michael
G.paciello 監訳：ソシオメディア(株) ASCII BOOKS
|
