- ベストアンサー
読み上げの音声ブラウザに親切なHPの作り方。
読み上げソフトはhtmlを上から読み上げるため、目の不自由な人が閲覧しやすいように、知りたい内容が一番最初に読み上げられるように、ヘッダーやメニューを下のほうのhtmlに書き、コンテンツをbodyのすぐ後ろに書いて構築していきたいと思ってます。 レイアウトをCSSでやる場合、position:absolute;を使ってヘッダーやメニューやコンテンツの配置を決めてあげるのが一般的な方法なのでしょうか？ このようなやり方をすると、IEでもSAFARIでも同じように見えるように作りこむのが、私には難しく、もっといい方法があるのではないかと思い質問しました。 また参考になるＨＰがあれば教えてください。 よろしくお願いいたします。
- dream_cats
- お礼率68% (26/38)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
位置指定はpositionとfloat、それにせいぜいmarginなどを併用するしか方法はありません。 細心の注意を支払うことで、どんなブラウザで見ても綺麗な表示のページになります。 > 私には難しく、もっといい方法があるのではないかと思い質問しました。 残念ながら、がんばってくださいとしか言いようがないですね(^^; スタイルシートで出来なければ、音声・テキストブラウザ用とそれ以外のブラウザ用の2種類、そのなかで<noscript>などを使用するほうが簡単だと思います。 最低限のヘッダは最初に書いておいた方が良いと思います。 そのページの内容がわかりますし、間違えて入ってきたページかどうかの判断もそこでできます。 私が音声ブラウザ対応ページを作る場合は、主にページタイトルとパンくずリストにしてます。 ページタイトルを見て（聞いて）間違えた場合は次に読まれるパンくずリストを使ってすぐに戻ってもらえますから。
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
OKWaveコミュニティー > [技術者向] コンピューター > プログラミング > HTML 現在地を示す↑これです。 英語ではtopic pathと言います。
お礼
あーこれをパンくずリストというのですね。 有り難うございます。
- suzuko
- ベストアンサー率38% (1112/2922)
ご質問への直接の回答ではありませんが、参考URLの「aDesigner」は検証するには最適ですよ。 ご存じかも知れませんが。
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
#1です。 なぜか</body>と</script>タグが入れ替わってしまいました。修正して下さい。
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
読み上げブラウザについては詳しくありませんが、JavaScriptを使うと無視されるので、こんな感じでやることも出来るのではないでしょうか。 <body> <div id="header"></div> <div id="menu"></div> <div id="contents">ここに本文が来ます。</div> <div id="copies" style="display:none"> <p>以下、ヘッダー部分です。</p> <div id="header_copy">ヘッダー部分</div> <p>以下。メニュー部分です。</p> <div id="menu_copy">メニュー部分</div> </div> <script type="text/javascript"> <!-- document.getElementById("header").innerHTML = document.getElementById("header_copy").innerHTML; document.getElementById("menu").innerHTML = document.getElementById("menu_copy").innerHTML; //--> </body> </script> copies部分はブラウザでは表示されず、JavaScriptでheaderとmenuにコピーしています。 今考えた方法なので、もっとスマートな方法はあると思いますが（笑。 参考まで。
お礼
回答有り難うございます。 ＞私が音声ブラウザ対応ページを作る場合は、主にページタイトルとパンくずリストにしてます。 パンくずリストという言葉をはじめて聞きましたが、どういうことでしか？教えていただけたらうれしいです。