21日目:スペーサー画像を無視する

たくさんのデザイナーが、Webサイトのビジュアルブラウザでのレイアウトをコントロールのに透過GIFを使ってる。何個でも使うのはかまわないけど、alt を意識的に1個1個に入れてほしい。そうすればビジュアルブラウザ以外のブラウザは、無視してくれるからね。

誰がトクする?

  1. マーカスLynx の初期設定では、alt 属性のついてない画像のファイル名は全部表示される。ポピュラーなブログのテンプレートって、サイト名の前にスペーサー画像が来ることさえあるものが結構多い。ビジュアルブラウザを使ってればもちろん気づかないけどさ、マーカスはこんなのを見るはめになる:

    [shim.gif] [shim.gif]
    [shim.gif]
    [shim.gif]
    私のWebサイトへようこそ
    [ciblueHeader2.gif]
    
    [ciblueCurve2.gif]
  2. ジャッキー だね。JAWSalt 属性のついてない画像のファイル名は全部読み上げる ように初期設定で設定されてるんだ。マーカスうざいだろうと思ったんだったら、ジャッキーのこれなんてさらにひどいもんだよ。こんなのが聞こえてくるんだから:

    graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif 私のWebサイトへようこそ graphic c i blue header two dot gif graphic c i blue curve two dot gif

    現実の世界でこんな自己紹介された日には、誰も二度と話しかけてくれないって。

どうしたらいい?

テンプレートで "spacer.gif" とか "shim.gif"、"1.gif なんていう <img> タグを探して。こういう名前じゃなくても、テンプレート中に違った widthheight で何度もでてくる画像は要チェック。

例えばこんなふうなスペーサー画像があるとする:

<img src="spacer.gif" width="1" height="10">

それをこう変えてみて:

<img src="spacer.gif" alt="" width="1" height="10">

同じスペーサー画像を何度もつかうなら、検索・全置換が一番ラクだと思うよ。

しちゃダメなこと

  1. alt=" " って書きかたはしないこと。alt 属性はあくまでも空であって、スペースじゃないんだ。

  2. <body> タグには alt属性は指定しない。こういう背景画像って、ビジュアルブラウザ以外には無視されるから。こんなふうになる:

    <body background="http://画像/への/URL.gif">

  3. 背景画像があったとしても、<td> タグに対して alt 属性は指定しないようにね。こういう背景画像って、ビジュアルブラウザ以外には無視されるから。こんなふうになる:

    <td background="http://画像/への/URL.gif">

さらなる情報源(英語)