訪問者に優しいWebサイト作り

サイト内検索  

HOME作成前の予備知識編→アクセシビリティチェックを行う

アクセシビリティチェックを行う

ここでは、日本ローカルのサイトを作成した場合について説明します。他言語対応については割愛させていただきます。

Webアクセシビリティって何?

このサイトで考えるWebアクセシビリティとは、
「Webを利用する全ての方々が、Webサイトのコンテンツを利用できるようにすること」
です。 

具体的には、障害の有無に関係なく、WWWブラウザ(パソコンだけでなく、PDA、携帯電話、ゲーム機なども含める)を使えば、Webサイトのコンテンツから、必要な情報を取り出したり、サービスを受けたりする事が出来るようにすることです。

※ただし、携帯電話に関しては、1ページあたりのファイルサイズによる制限(最も厳しいのは、i-modeの5KB:推奨2KB以内)もあるので、携帯電話でも閲覧してもらうことを前提としていないサイトは、携帯電話を除外してもよいかと思います。
ファイルサイズの制限がかなり厳しいが故に、携帯でも閲覧してほしい場合は携帯電話用ページを別作成するのが現状です。
XHTMLが使えるブラウザへの移行がほぼ完了すれば、ページをXHTMLで記述して、必要な部分だけを携帯で表示させると言うことも出来ますが・・・現状ではまだ無理です。

いつ行えばよいの?

サイトを立ち上げるときは、ページごとにチェックが必要です。ページを作ったら、即チェックした方がよいでしょう。後回しにすると修正作業が大変になります。
最重要なのは、トップページです。
コンテンツ部分にひな形(テンプレート)を適用する場合は、ひな形を使って作成した1ページに対して行えば、時間短縮になります。

更新の場合、ひな形を使わない/変更を加えた場合は、やはりページを作成するごとにチェックが必要です。

アクセシビリティチェックを行おう(個人サイト)

個人レベルで、複数系統のOSを持っているという恵まれた環境をお持ちの方はそんなにいませんので、ご自分がお使いのOSでチェックすれば問題ないです。

パソコンにインストールしておきたいブラウザ

Windows:Internet Explorer4以上、Netscape4.7x、Netscpe6以上(Gecko系ブラウザ)、Opera6以上、Lynx for Win

容量に余裕がなければ、Netscape6は省いてもよいです。Lynxは、使用方法がちょっと難しいです。
Lynxのインストール及び使用方法は、姉妹サイト「Lynxでアクセシビリティチェック」を参照して下さい。

Mac:Internet Explorer4.5以上、Netscape4.7 or Netscape6以上(Gecko系)

MacのClassic環境の場合、ブックマークがおかしくなる可能性があるため。Netscape4.7とNetscape6両方のインストールは避けた方が無難。過去のブラウザとの互換を見たければ4.7を、先のことを見据えたいのなら6.xを選択。

MacOS X以上しか使えない場合は、Internet ExplorerとNetscape6以上(Gecko系)をインストール。10.2がインストールされていて、HDDの容量に余裕があれば、Safariもインストールしてみるとよいでしょう。

UNIX系:対応していればNetscape4.x、Netscape6以上(Gecko系)。加えて文字ブラウザ

アクセシビリティチェックを行う

STEP1:HTML(XHTML)の文法チェック

文法上正しくないHTML文書は、ブラウザによっては解釈できません。その結果、ブラウザ上に何も表示されなくなるといった最悪の事態になることもあります。特に、Internet Explorerは、文法の解釈が甘いので、少々間違っていても(タグの閉じ忘れでも表示する)表示してくれますが、他のブラウザではそうはいきません。

それを防ぐためにも、Another HTML-lintを使って文法チェックをしましょう。文法だけでなく、alt属性の有無を判別したり、文字ブラウザ(lynx,w3m)での見栄えもチェックできます。
Another HTML-lintのサイトへ

STEP2:グラフィカルブラウザでチェック

Internet ExplorerやNetscapeなどのグラフィカルブラウザで、以下のポイントをチェックして下さい。

1.背景色(背景画像含む)と文字色について

これは、色覚異常のある方にとってだけでなく、健常者にとっても閲覧しにくい配色になっていないかを確認しましょう。

2.文字の大きさや画像の大きさについて

特に問題なのは、文字サイズが極端に小さくなっていないかということですが・・・チェックに関してはいろいろとややこしいのです。
文字サイズがpx,ptで指定していると、解像度が高くなってしまうと閲覧時に文字が小さくなってしまうという問題があります(画像も共通)。加えて、Internet Explorerの場合、ブラウザ側での文字サイズ変更は効きません。
ptでの指定や相対指定の場合、Windows版NetscapeやMacの場合、文字サイズが一回り小さくなってしまいます(WinIEの75%になる)

アクセシビリティを考慮する場合、グラフィカルブラウザで閲覧したときに、訪問者側で文字の大きさが変更できるかという点が重要だと思います。

実際のチェックを行う場合には、ブラウザ側の文字サイズの設定をデフォルトのままにして、自分のお使いのディスプレイの解像度を変更して確認することをおすすめします。
また、横スクロールバーが出るかどうかも見ておきましょう。

3.行間隔や文字間隔についてのチェック

スタイルシートを使っている場合に必要とされるチェックです。
特にNetscape4.xに関しては、スタイルシートの実装がお粗末過ぎるにも関わらず、シェアとしては5〜10%程度あるので、Netscape4.xにもスタイルシートを適用している場合には無視は出来ないでしょう。

気をつけたいのは、文字と文字、文字と画像が重なり合った結果、読みづらくならないかという点です。念のため、フォントサイズも変更して確認した方がよいかと思います。

STEP3:文字ブラウザもしくは、そのエミュレータで確認

文字ブラウザがインストールできている場合は、姉妹サイト「Lynxでアクセシビリティチェック」を参考にするとよいでしょう。見映え面でのチェックだけでなく、操作面でのチェック(フレーム、スクリプト、ActiveX等なし)も可能です。

エミュレータを使う場合は、以下の方法があります。

  1. あなたのHTMLはLynxでどう見える? 」で確認
  2. Another HTML-lint」の出力オプション−テキストブラウザでの見え方の指定で、lynxを指定

いずれも見映え面でのチェックが出来ますが、操作面でのチェックが出来ませんので、以下の方法を使って下さい。フレーム以外のチェックは出来ます。

Netscape4.xの編集−設定−詳細で、

のチェックを外してチェック。機能をOFFにしたときに、ナビゲーション面の問題がないかを確認します。

Internet Explorerでは、ActiveX使用を許可しない設定にしてチェックすること。特にWindowsの場合、セキュリティ上の問題からActiveXをOFFにしている訪問者も数多いですので要注意です。

アクセシビリティチェックを行おう(団体・企業サイト)

公共性の高い企業・団体の場合には、特にアクセシビリティへの配慮が必要です。訪問者がどのような環境でアクセスしてくるかが全く予想できないからです。
アクセシビリティが低ければ低い分だけ客(お役所系なら住民)を門前払いしているのと同義です。

アクセシビリティチェックは個人サイトと同様の手順となりますが、複数系統のOSでのチェックは必要不可欠です。最低でも、Windows/Mac両方でのチェックは必要です。
ターゲットによっては、PDA(ビジネスマン中心の場合)やゲーム機(子供が対象の場合)での確認も必要になるでしょう。

お役所系サイトの場合は、音声ブラウザでも確認が必要です。実際に、障害をお持ちの方に見ていただくというのもよいかと思います。

©Copyright 2001-2006 FUMING fuming@neko.chan.ne.jp

リンクに関してはご自由にどうぞ。