あなたが作ったページが、うまく伝わっていなかったりする場合もあります。
このページでは、何をどうしたらどうなるのか？を、例を挙げながら紹介します。
建築マップは建物の画像を載せることがメインですから、画像の枚数を減らす必要はありません。しかし、画質のレベルを下げて、1枚1枚のバイト数を下げることは出来ます。以下に、エッフェル塔を下から見上げた画像を2枚用意しました。特に画質の差はありません。しかし、ファイルの大きさは一方では20.7キロバイト、もう一方では7.62キロバイトと約3倍の差があります。これが圧縮率の差です。
画質を悪くする必要はありません。しかし、画質を維持しながら圧縮率を変更し、ファイルの大きさをダイエットさせる努力は必要です。この積み重ねはとても大きな差になります。特にサムネイル画像は、高画質を期待するものでもありませんし、他の参加者のサムネイルと並ぶときに、いつまで経ってもあなたの画像が表示せず、その後の画像の読み込みにまで影響を及ぼします。
alt属性とは、その画像と等価の情報を用意するためのものです。一般的なWebブラウザでは、alt属性が記述された画像の上にマウスカーソルを持って行くと、小さなチップとしてalt属性の内容をバルーン表示します。これは、画像を表示できないブラウザや音声ブラウザが、どんな画像がそこにあるのかを伝えるための目的で用意するものであって、隠し文字として使うものではありません。
同じ画像2枚を用いて、それぞれ異なるalt属性を入れてみました。
望ましい例。望ましくない例。
潔癖なまでに、alt属性に等価な情報を詰め込む必要はありません。通常の文章内にその画像が何であるかを指し示す記述があれば良いと思います。
また、文字が画像になっている場合もあります。以下には建築マップのタイトル名を画像にしたものを用意しています。alt属性にはARCHITECTURAL Mapと記述しています。そのあとに続けて「ARCHITECTURAL Map」というテキストも用意しています。これは、音声ブラウザだと画像のalt属性ARCHITECTURAL Mapを読み上げた後で、テキスト「ARCHITECTURAL Map」を重複して読み上げることになり、いささか過剰な対応です。
ARCHITECTURAL Map
テキストが用意されているのであれば、alt属性をわざと空白にしておくこともまた親切な対応かと思います。この場合ならば、テキストで用意した「ARCHITECTURAL Map」を削除するか、alt属性のARCHITECTURAL Mapを削除してアスタリスク*を入れておけば重複読み上げを防ぐことが出来ます。バナー画像とリンクテキストが並んで置かれているときには、上記の方法で過剰な対応をせずに済みます。
では、補足説明をするテキストも無く、alt属性も用意されていなかったらどうなるのでしょうか。画像を表示できないブラウザでは、そこに何の画像があるのかを知ることができません。音声ブラウザでは、その画像のファイル名を読み上げます。画像がリンクと連携している場合には、そのリンク先のファイル名を読み上げます。ファイル名を読み上げることで、一体誰が恩恵を受けるのでしょうか。この問題は、alt属性にその画像と等価なテキストを用意することで、簡単に解決できます。
建物名を強調したり建物情報を用意するときに、テキスト同士の帳尻を合わせる目的で連続した空白を入れる行為は、音声ブラウザだとじつに不思議な読み上げかたをします。
建 物 名： 京都タワー
設 計 者： 山田守
用 途： 塔
最終更新日： 2001年5月2日
1行目だと、たて、もの、な、5個のスペース、きょうとタワー。と読み上げられます。見栄えの調整の為に空白を入れてしまうと、音声ブラウザでは単語を認識できなくなります。この問題は、スタイルシートの導入や適切な要素のマークアップをすることで簡単に解決できます。
| 建物名： 設計者： 所在地： |
光の教会 安藤忠雄 大阪府茨木市 |
上に用意したテーブルは、建物名 設計者 所在地 光の教会 安藤忠雄 大阪府茨木市の順に読み上げられます。テーブルは1セルごとに左から順に読まれるためです。ならば、以下のテーブルはどうでしょうか。
| 建物名： | 光の教会 |
| 設計者： | 安藤忠雄 |
| 所在地： | 大阪府茨木市 |
これは、建物名 光の教会 設計者 安藤忠雄 所在地 大阪府茨木市の順に読み上げます。見栄えの維持をするためには、ここまで考えて用意してあれば構わないと思います。しかし、そこまでしてテーブルにこだわる必要があるのでしょうか。table要素は、本当に表として使いたい時に用いるべきです。もっと単純明快な方法で見せることができるはずです。この問題は、スタイルシートの導入や適切な要素のマークアップをすることで簡単に解決できます。
見る人によって、字が小さすぎたり大きすぎたりする場合があります。ブラウザには、文字サイズの変更をする機能がついていますが、ポイント指定もしくはピクセル指定された文字サイズはIEでは大きさを変更することが出来ません。
この文字は、7ポイントで書かれています。これが平気で読めるあなたは、ひょっとしてノートパソコンで見ていませんか。しかもIEではフォントサイズの変更が出来ないような設定で指定してあります。見る側に文字サイズを変更する選択肢を奪い取っていることになるのです。そもそも、読む気になれますか。
フォントサイズを変更できる選択を、ユーザー側に与えてください。この問題は、%（
パーセント）単位やem（イーエム）単位でフォントサイズを指定すれば解決できます。
特にtable要素でページ幅を固定（決め幅）にしている場合や、フォントサイズの決め打ちをしているページ作成者が、連鎖的にやってしまいがちな問題です。以下に用意したテーブルは、テーブル幅200ピクセル、セル幅を100ピクセルに固定したものです。幅を固定したことで、テキストまでも意図した場所に配置させようとフォントサイズ決め打ちを施し、見栄えのための強制改行br要素を入れた例です。
| 暖かくなってくると旅 行をしたくなりません か。 |
このサイトは、旅を中 心に取り上げないと思 っております。 |
音声ブラウザでは、あたたかくなってくるとたび、ぎょうをしたくなりません、か。このサイトは、たびをなか、こころにとりあげたいとし、っております。と読み上げられます。
テーブル幅を固定し、フォントサイズを固定していれば、確かにこの見栄えで視覚的に意味は通じますが、あなたの意図した設定が思わぬ弊害を起こしてしまっていることを忘れないで下さい。ちなみに、ネットスケープでは、全てのテキストのフォントサイズを変更できます。そのときには、音声ブラウザだけでなく、一般Webブラウザですら読みにくい状態になります。
いまどき、フレームに対応していないブラウザがあるのか？と、思うかたもおられるでしょうが、まだまだあります。IEやネットスケープ以外のブラウザでは、フレームに対応していない、もしくは、わざとフレームを表示させない設定ができるブラウザもあります。音声ブラウザの最新版では、フレームに対応していますが、半年前のバージョンだとフレームに対応していません。すると、Web作成ソフトが自動的に用意するこのブラウザは、フレームに対応していません。というメッセージを残して、そのあと先に進めなくなります。フレームに対応していないブラウザの為に、noframesという要素があります。その要素を使って各フレームページのリンクを用意すれば簡単に解決できる話なのですが、それすらわからない人が、Web作成ソフトの機能に任せて、安易にフレームページを導入することに問題があるのです。
今回挙げた例は、ちょっと修正をすることで、すぐに改善できるものだと思います。改めて、自分の作ったページをいろいろな視点から再検証し、誰もが利用しやすいページ作りを意識するきっかけとなれば、嬉しく思います。HTML講座サイトは世の中にたくさんありますから、そちらを利用する事で、より適切な情報を入手することができるでしょう。
最後に、ページ作成のヒントになるサイトを紹介して、このページを終わります。