ウェブアクセシビリティとは

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。

ウェブは、高齢者や障害者にとっても、重要な情報源になりつつあります。しかし、実際に提供されているウェブページにはバリアがあり、高齢者や障害者にとって使いにくい、あるいは使えない作りになっているために、内容を知ることさえできないことが少なくありません。

例えば、非常に小さい文字でたくさんの情報を提供しているウェブページは、弱視の人や多くの高齢者が判読できない場合があります。このようなウェブページを「アクセシビリティが確保されていないページ」と言います。

ウェブを利用する際に、なにが問題となるのか

ウェブの重要性が高まるにつれ、多くの高齢者や障害者がウェブを利用するようになりました。

ところが、高齢者や障害者がウェブを利用する時に、利用者の身体条件などによって、思ったように欲しい情報を取得できない、という問題が起こっていることは、これまであまり知られていませんでした。

特にハードルが高いのは、全盲や弱視といった視覚障害者です。視覚障害者は、文字で書かれたウェブサイトを、音声読み上げソフトと呼ばれる補助ソフトを使って、ウェブを“読んで”います。

音声読み上げソフトは、テキストデータを日本語で読み上げてくれるものです。ところが、画像で表現されたところは音声読み上げソフトでは、何が書かれているか判別することができず、読み上げてくれません。その部分は読み飛ばされてしまうのです。

みなさんがよく利用するウェブサイトを思い出してください。ウェブ中で大事な情報が、大きな画像で表現されているケースが多いことに気が付くと思います。

つまり、音声読み上げソフトを使って、ウェブを利用している視覚障害者は、画像で表現された大事な情報を知ることができないのです。画像に書かれた文字は認識しません

WCAG1.0における14のガイドライン

  1. 聞くための内容や見るための内容には、同等の役割を果たす代わりのものを提供する
  2. 色だけに依存しない
  3. 正しくタグ付けし、適切にスタイルシートを使う
  4. 自然言語の取り扱い方に関する情報を明確に示す
  5. うまく変換されるテーブルを作る
  6. 新しい技術を利用したページは、うまく変換されるようにしておく
  7. 時間とともに変化する内容については、ユーザーが制御できるようにする
  8. ページ中に組み込まれたもののユーザーインターフェイスは、それ自体がアクセシブルなものにする
  9. 装置に依存しないように設計する
  10. 暫定的な解決策をとる
  11. W3Cのテクノロジーとガイドラインを使用する
  12. 前後関係や位置を表す情報を提供する
  13. はっきりとわかるナビゲーションのための仕組を提供する
  14. 文書は明瞭で簡潔なものにする

(出所)大藤氏によるWCAG1.0の日本語訳(http://www.zspc.com/)より

WCAG1.0チェックポイントの優先度と適合度について

WCAG1.0では、14個のガイドラインごとに複数のチェックポイントが挙げられており、合計65個のチェックポイントがあります。それぞれのチェックポイントは、アクセシビリティに与える影響に基づく「優先度」が指定してあり、[優先度1]から[優先度3]までの3種類があります。

WCAG1.0の優先度
優先度 重要性 WCAG1.0での位置づけ
優先度1 高い コンテンツ制作者が満たさねばならない優先度
優先度2 やや高い コンテンツ制作者が満たすべき優先度
優先度3 やや低い コンテンツ制作者が満たすべき事を望まれる優先度

そのうえでWCAG1.0では、それぞれの優先度を満たしているコンテンツに対して、3段階の「適合度」を規定しています。

WCAG1.0での位置づけ
適合度 WCAG1.0での位置づけ
A 優先度1のすべてのチェックポイントに適合
ダブルA(AA) 優先度1と2のすべてのチェックポイントに適合
トリプルA(AAA) 優先度1〜3のすべてのチェックポイントに適合

ウェブアクセシビリティ診断ツール

富士通アクセシビリティ・アシスタンスの紹介

インターネットなどの技術を基盤としたコミュニケーションや、 公共サービス等がますます快適に便利になってきています。

誰にも分かりやすく使いやすい、 そして親しみやすいサイトづくり・・・このユニバーサルデザインの思想を基本にデザイン活動のひとつとして、 視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群「Fujitsu Accessibility Assistance 」をホームページ作成担当者やデザイナーに向けて無償ダウンロードにて提供いたします。

Fujitsu Accessibility AssistanceはWebInspectorColorSelectorColorDoctorの3つのツール群で構成されています。

WebInspectorチェック済みバナーColorSelectorチェック済みバナー ColorDoctorチェック済みバナー

チェックに使用した指針
指針番号 チェック項目
8 <head>に<title>を指定しているか?
9 <html>にlang属性またはxml:langを指定しているか?
9 <html>のlang属性またはxml:langにjaを指定しているか?
10 文字色と背景色のコントラストは十分か?
10 弱視者(白内障者)の基準で十分か?
10 色覚特性(第一色覚-赤)の違いを考慮した基準で十分か?
10 色覚特性(第ニ色覚-緑)の違いを考慮した基準で十分か?
10 色覚特性(第三色覚-青)の違いを考慮した基準で十分か?
13 <blink>を使って文字を点滅させていないか?
13 <marquee>を使って文字を自動的にスクロールさせていないか?
14 window.status (JavaScript)でステータスバーに情報を表示していないか?
24 <embed>を利用している場合、<noembed>も指定しているか?
24 <script>を利用している場合、<noscript>も指定しているか?
24 <object>に代替情報を指定しているか?
28 <table>に<th>を指定しているか?(border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。)
28 <table>に<caption>を指定しているか?(border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。

30 ページを5フレーム以上に分割してないか?
30 <frameset>に<noframes>を指定しているか?
32 <frame>のscrolling属性にnoを指定していないか?
33 <object>を使用していないか?
33 <embed>を使用していないか?
33 <applet>を使用していないか?
33 ondblclick(JavaScript)を使用していないか?
33 onchange(JavaScript)を使用していないか?
33 onclick(JavaScript)を使用していないか?
33 ondragdrop(JavaScript)を使用していないか?
34 <a>のtarget属性に_blankを指定していないか?
34 <a>のtarget属性に_newを指定していないか?
34 <area>のtarget属性に_blankを指定していないか?
34 <area>のtarget属性に_newを指定していないか?
47 <input type=radio>にid属性を指定しているか?
47 <input type=checkbox>にid属性を指定しているか?
54 リンクのない<img>にalt属性(代替テキスト)を指定しているか?
54 alt属性(代替テキスト)で画像の内容を表現しているか("スペース"などを指定していないか)?
54 リンクのある<img>にalt属性(代替テキスト)を指定しているか?
54 imageタイプの<input>にalt属性(代替テキスト)を指定しているか?
55 <area>にalt属性(代替テキスト)を指定しているか?
55 <img>にismap属性を指定し、サーバサイドイメージマップを使用していないか?
59 取消し線(<s>)を使用していないか?
59 取消し線(<strike>)を使用していないか?
59 取消し線(<del>)を使用していないか?
60 font-size:で文字のサイズを固定していないか?
60 line-height:で行間を固定していないか?
60 line-height:で行間が110%以上か?
60 overflowにhiddenを指定していないか?
61 「yy/mm/dd」という文字列で、日付を表現していないか?
61 全角の¥と全角の$を使用していないか?
61 全角の「yy/mm/dd」という文字列で、日付を表現していないか?
61 「※n」という文字列を、「注釈」の意味で使用していないか?
61 「nn千」「nn百万」のように数字の0を省略していないか?
69 <bgsound>を使用していないか?
69 <embed>のautostart属性がtrueのとき、hidden属性がtrueになっていないか?

戻る