IT関連FAQ アクセシビリティについて
Webサイト制作
画像素材の加工
動画ファイルについて
アクセスカウンタ設置について
HPビルダーのスタンダードモード活用
写真の効果的な見せ方
個人情報保護についての記載
メールやアンケート等の入力フォームの仕組み。
各ページにナビバーをつける
掲示板設置についての考え方
会員(特定読者)専用ページの作成
ユーザビリティ・HPの使いやすさ
アクセシビリティについて
TOPページ作成の注意点
写真の加工

FAQトップへ

質問 視聴覚障害者や高齢者へ向けた HP 作成について、注意点をお願いします。

回答

「ホームページ(ウェブ)を利用するすべての人が、年齢や身体的条件等に関係なく、提供されている情報に問題なくアクセスし、利用できること」は『ウェブアクセシビリティ』と呼ばれ、ホームページ作成時の必須事項になりつつあります。
また、「ウェブアクセシビリティ」に注意してページを作成することで、携帯端末や PDA など非パソコンからのアクセスにも必要な情報を提供することができるようになります。障害者や高齢者のためだけでなく、 健常者も含めた より多くの利用者からの利用を促進することにつながります。

以下に主な注意点を挙げますので、参考にしてください。

1.HTML を正しい文法で記述する。
W3C(World Wide Web Consortium) が勧告として公開している HTML の仕様に沿う(文法を守ること)ことにより、アクセシビリティ上の 問題の多くは解決します。
以下の文法チェックのサービスサイトも利用されると良いでしょう。
Another HTML-lint gateway

2. 画像には適切な代替テキストを
視覚障害者は、文字で書かれたウェブサイトを、音声読み上げソフトと呼ばれる補助ソフトを使って、 “読んで”います。ところが、画像で表現されたところは、何が書かれているかを音声読み上げソフトは判別できず、読み上げてくれません。よく利用するウェブサイトを思い出してください。ウェブ中で大事な情報が、大きな画像で表現されているケースが多いことに気が付くと思います。つまり、音声読み上げソフトを使って、ウェブを利用している視覚障害者は、画像で表現された大事な情報を知ることができないのです。そこで、画像には、「代替テキスト」をつけることをお勧めします。
この代替テキスト(「 alt=" ○○○ " 」で指定するテキスト)は、テキスト用ブラウザや音声・点字などの画像を表示できない環境で、画像の代わりとして利用することを目的としています。
ブラウザで画像を非表示にする設定にして見てみると、一目瞭然です。

千葉県産業振興センターのHPを画像非表示で見た図 千葉県産業振興センターのHPを画像非/示で見てみる。
 
代替テキストが入力されていると、マウスをポイントした時に表示される。 代替テキストが入力されていると、マウスをポイントした時に/示される。

 

3. テキストの途中に空白や改行を入れない
幅調整のために文字の間に空白や改行を入れると、音声ブラウザ(視覚障害者のための音声読み上げブラウザ)では、正しく読み上げられなくなってしまいますし、検索エンジンにも正しく検索してもらえなくなってしまいます。テキストの幅を調整する場合には、 CSS ( Web ページのレイアウトを定義する規格)を使用すると良いです。

4. 機種依存文字と記号に注意する
OS とフォントの種類によっては、数番号などが正しく表示されない・読み上がられない場合もありますので、注意してください。代表的なものをあげます。

Windowsで普通に使う文字が、Macintosh上ではこのように文字化けする。
Windows
Macintosh
Windowsではこのような/示 Macでは、文字化けしてしまう。

また、文字が点滅・移動していると、読みづらいだけでなく、音声ブラウザでの読み上げ ない 場合がありますので、点滅・移動のタグは使用しない方がよいでしょう。

その他アクセシビリティの指針については、以下のサイトを参考にされるとよいでしょう。
富士通アクセシビリティ指針のページ

また、ウェブアクセシビリティの自動チェックプログラムが無償で配布されておりますので、ご使用になってみては如何でしょうか。
情報通信研究機構 ウェブヘルパーのページ

 

このページのトップへ