仕事をしていますと、たまに音声ブラウザに対応したものを作ることもあります。そんな時は特にHTMLの文章構造をきちんとしておくとスムーズに進むことが多いような気がします。
普段からページのデザインをした際にページ内の要素の重要度を考えて、その重要度を参考にしつつHTMLの文章構造を決めていくとおのずと音声ブラウザの読み上げ順序などが決まっていきます。なぜサブメニューをHTML内の後ろに持っていくほうがいいのかなどがわかると思います。
もしHTML内のメイン部分よりも先にサブメニューがきている場合、音声ブラウザだと毎回サブメニューを先に読み上げます。皆さんも考えてみてください。もしあなたがひとつのサイトを見る時、毎ページごとにサブメニューを見ますか？見ませんよね。またそのページで重要なのはメインコンテンツであってサブメニューではないですよね。そう考えるとおのずとメインコンテンツはHTML内の前(上)にきます。このように考えてコーディングをすると文章構造上でも正しく、音声ブラウザに対応させるためにも都合のいい状態になる場合が多いです。
話がそれてしまいましたが、こっからが本題です。音声ブラウザ向けの内容を画面に表示させないようにする為に「display: none;」や「visibility: hidden;」を使うと、音声ブラウザが読み上げられなくなるものが多いのです。そうなるとなんの意味もなさないですよね。そんな時は「text-indent: -9999px;」を使ったりして回避します。そうすれば画面上には表示されてませんが、音声ブラウザでそこを飛ばしたりすることもありません。
このような方法があるということで紹介しましたが、そもそも特定の環境でのみ利用するテキストが本当に必要かどうかという考えがあるということもお忘れなく。