制作者の活動(PR)。

ホームページリーダ対策。

音声ブラウザとしてもっとも良く利用されている『ホームページリーダ』での問題点と対策を解説します。

ホームページリーダは、インターネットエクスプローラのパーサを拝借しております。

このため、CSSスタイル定義ファイルは「screenメディア」向けのものを使う事になります。

本来は音声ブラウザには「auralメディア」用のスタイル定義ファイルを適用する事になっているのですが、インターネットエクスプローラは「screenメディア」向けでないスタイル定義ファイルを読む事は無いようです。

この結果、音声ブラウザでは有効なアンカーやナヴィゲーションなどを「display: none;」プロパティで非表示にした場合、ホームページリーダでも非表示、すなわち読上げられないという事態になってしまいます。

このため、ホームページリーダでも問題無く読めるようにするには、「display: none;」プロパティで非表示にするのではなく、グラフィカルなメディアでは隠してしまうと言う手法を用いる事になります。

このテクニックをオフ・レフトと言います。

オフ・レフトとは、画面の左端から遙か離れた箇所に追いやる事で、グラフィカルな環境では表示させる必要の無いコンテンツを隠してしまうテクニックです。

グラフィカルなブラウザでは画面の外に配置されるため見えませんが、非表示扱いではないので、音声ブラウザでは読上げの対象になります。

具体的にはいろいろな方法がありますが、最も簡単な方法は以下のようなものでしょう。

.forAural {
    position: absolute;
    top: 0em;
    left: -1000em;
    width: 900em;
    }

「position: absolute;」プロパティは、絶対座標で表示させるプロパティです。
次の「left: -1000em;」プロパティで、絶対座標で画面の左端から1,000文字分左の位置に左端を合せるようにしております。
最後の「width: 900em;」プロパティは、コンテンツが大き過ぎる場合に画面の左端に侵食して来ないようにするため、ボックスの大きさを900文字分に制限します。このブロックは画面の左端から1,000文字分左に置かれているのでボックスの右端が画面の左端に侵食する可能性が無くなると言う訳です。
- ボックスの幅がずらした幅に近い場合、稀に左端に隠した筈のテキストがはみ出る事があるため、ボックスの幅には余裕を持たせた方が良いでしょう。
オペラ 7以降ではtopプロパティを設定していないとオフ・レフトした要素のパディングがクライアント領域の最下部に現れる事があるので忘れずに設定しておきましょう。値はオフ・レフトする各要素の中に極端に大きなものが無ければ0でいいでしょう。(平成17年 9月 2日)

実際にこのオフ・レフトを利用した例を『モバイル向けフルブラウザ対策』の「段組カラムには適切なナヴィゲーションを付けましょう」で実際に用いておりますのでご参照下さい。

この他にも「text-indent: -1000em;」プロパティを当てる事で、やはり画面に左端の更に左に追いやる事も出来ます(この方法はブロックレヴェル方式のスタイルを当てている場合のみ有効)。

但し、この方法では背景画像, マージン, ボーダ, パディング, テキストの行の高さなどのプロパティの影響が画面に残るため、故意にそういう効果を狙う場合以外にはお勧め出来ません。

故意に効果を狙う場合とは、例えば背景画像にロゴ画像を指定しておいて、グラフィカルな環境には当該ロゴを、音声環境にはテキストを読ませると言う事をしたい場合などです。CSS非対応環境や音声環境では画像関連の情報を読み込まない事が期待出来ますので、<img>要素より効率の良いものとなると考えられております。
上述のポジショニングを用いたオフ・レフトは、positionプロパティの仕様によりオフ・レフトされたボックスは前後のボックスの配置に影響を与えなくなるため、跡形も無く画面から隠し去る事が出来るようになります。