5.01 Webコンテンツを構成する素材

POINT
■Webサイトを構成する情報形態は、テキスト、画像、映像、音声の4つがあります。
■音声ブラウザなど一部の環境では、画像、映像、音声が利用できないので、 適切な代替情報を指定しておきます。
■多様なユーザー環境で情報が取得できるように配慮しながらWebサイトを制作することが大切です。

【Webコンテンツを構成する素材とは】
テキストは、HTMLで用いられた最初の情報形態であり、文字情報はWebブラウザを通して視覚要素としてユーザーに情報を伝えられるだけでなく、音声ブラウザを利用することで聴覚要素に変換して情報を提供できる情報伝達形態です。HTMLタグによって文書構造や内容の前後文脈を伝えることも可能です。インターネットの情報を目で理解している私たちがWebブラウザを通じて見るテキストには、HTMLで表現されているテキストと画像で表現されているテキストがあります。通常のWebブラウザでは画像、音声、映像を表示または再生できますが、音声ブラウザなど一部の環境やユーザー側の設定によっては利用できない場合があり、代替内容が表示(再生)されることになります。ですから、制作者が適切な代替内容を指定しておくことが、多様なユーザーの利便性につながります。

画像には大別して2つの扱い方があり、適切な方法を選択する必要があります。1つは写真や図表など、画像そのものが意味を示す画像です。もう1つは背景や、見出しの見栄えを整えるなど、装飾を目的とした画像です。画像はあくまで視覚的な情報にすぎないので、代替テキスト(alt属性)を指定し、音声ブラウザや画像が表示できない環境でも文字情報が提供されるようにします。一方、背景画像などコンテンツとして不可欠ではない装飾画像は、HTMLに記述せずに、CSSで表示させるのが望ましいでしょう。ただし、HTMLのみの表示を前提にする場合や印刷出力を考える場合には、装飾画像もHTMLに記述し、代替テキストを空(無指定)にしておく方法もあります。映像や音声も、視覚や聴覚に障害のある人には情報伝達ができないため、テキストを用いた代替情報を提供するなどの配慮が必要です。
インターネットの理念の1つである「あらゆる人がインターネット上で情報を入手できること」を実現させるための技術や取り組みを、Webアクセシビリティと呼びます。Webサイトで提供する情報を、可能な限り多様な環境で取得できるように配慮することが、アクセシビリティを高めるために不可欠です。

【補足】
■意味のある画像、意味のない画像

意味のある画像、意味のない画像

意味のある画像、意味のない画像

 

■視覚要素に配慮した表現と文字による結果説明

視覚要素に配慮した表現と、文字による結果説明

視覚要素に配慮した表現と、文字による結果説明

 

■音声ブラウザ対応(滋賀県ホームページ制作外部委託手順書の例)

音声ブラウザによるアクセシビリティチェック

音声ブラウザによるアクセシビリティチェック