• 締切済み

HP制作における<本文へのスキップについて>アクセシビリティへの配慮

弱小公的機関でHPの制作をしております。アクセシビリティ対策として、総務省のパンフを参考に検討していたところ、このなかで目の不自由な方への対応として、ナビゲーションをよみとばすための<本文へのスキップ>をつけるとよい、とあるのをみて、試作したのですが、この部分<本文へのスキップ>を不可視にして高さを低く設定しても、各ページ共通のナビ部分のレイアウトが下がり、見栄えがよくありません。 このgooのサイトの場合も各ページ共通のナビゲーションは多々あると思いますが、<本文へのスキップ> があるようには思えませんが、メジャーなサイトではなにかもっとクレバーな方法で対応しているのでしょうか? よい方法があったらご教授していただけると助かります。

みんなの回答

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.2

> やっぱり透明画像を使って、上端部にスキップ機能を設定するのは(ブラウザ上で見える現状の上端部の高さを変えることなく)難しいのでしょうか? いや、そんなことはありません。スタイルシートをちゃんと設定すれば余計な空白は出ません。大概は、CSS の display:none を当てはめるだけで完全に隠すことができます。 ちなみに、本文へのスキップは画像である必要はありません。どうせ見えないのですから、普通に文字を書いてリンクしておけばいいのです。 意味もなく画像を使うと、音声ブラウザで「ここに画像があります」などと読まれて逆にがっかりする可能性もあります。

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.1

音声ブラウザ利用者が「前置きのナビゲーションはいいから早く本文を」と思うのと同じように「普通」のブラウザを使っている人たちだって「ナビゲーションはいいから早く本文を」と思っています。 例えばまさにこの質問のページ http://oshiete1.goo.ne.jp/kotaeru.php3?q=1782569 ですが、ページを開いたときには画面の上半分以上がナビゲーションで占められており、その分 多くスクロールしないと質問・回答が読めません。音声ブラウザに比べればたいしたことはないかもしれませんが、それでもスクロールするのに手間が掛かっていることに変わりありません。 最初のナビゲーションは見たくない・聞きたくないので飛ばす、というくらいなら、そもそも最初からナビゲーションなんて書かなければいい、とは思いませんか? さて、goo はトップページ<http://www.goo.ne.jp/>で「本文へ飛ぶ」類のリンクを使っていますが、ダミー画像を使っている点は感心しません。 もっとも、ちゃんとした音声ブラウザなら見出しや段落単位でスキップする機能ぐらいは備えているでしょうから、内容がちゃんとマークアップされていればわざわざリンクを用意しなくても閲覧者側で対応できると思うんですけどね。

kimimy1
質問者

補足

ご多忙のなか明快なご回答ありがとうございます。  >内容がちゃんとマークアップされていればわざわざリンクを用意しなくても閲覧者側で対応できると思うんですけどね。  つまり、文法がきちんとしていれば、閲覧者側でうんざりするような、同じことの読み上げ繰り返しは回避できるのですね。ありがとうございます。  ところで。。。  やっぱり透明画像を使って、上端部にスキップ機能を設定するのは(ブラウザ上で見える現状の上端部の高さを変えることなく)難しいのでしょうか?         

関連するQ&A

  • HP制作について(アクセシビリティ関係)

     弱小公的機関でHP制作をしております。主にアクセシビリティへの配慮の視点から、基礎的なことも含めてご教授願えればたすかります。  今回、顧客に対して行ったアンケート結果を公開するよていですが、このような結果を公開しているサイトをいくつかみると、HTML形式とPDF形式の2者に分かれるように思います。  私の認識では、PDFは視覚障害者が平易に読むこができないと思うのですが、調査結果のような文書や学術的な文書の場合、やはりPDF化したものを掲載するべきなのでしょうか? それともどちらも選択できるように配慮するべきでしょうか?  このとき、当方はPDF作成のソフトを有していないのですが、フリーソフト(オープンオフィス)などでPDF化してから、それを掲載することも可能なのでしょうか? できれば簡易でけっこうなので方法を教えて下さい。(制作ソフトはビルダーです。)  また、フレームをできるだけ使わないとかのアクセシビリティへの基本的な配慮なども合わせてご教授願えれば幸いです。  何とぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • ハイブリッドレイアウトでどこまでアクセシビリティに対応する?

    こんにちは。 現在tableとcssでレイアウトしたwebサイトにアクセシビリティ対応をして欲しいと言われたのですが、皆さんでしたらどこまで対応しますか? メイン本文は<h>タグ等で構造化しalt指定はしてあるのですが、その他として大枠tableにsummaryをいれたり、文字指定を%にしたりするほかにどのようなことをされているのか、ぜひ聞いてみたくて。 よろしく御願いします。

    • ベストアンサー
    • HTML
  • HP作成アドバイスお願いします(フレーム等)

    よろしくお願いします。 1 企業などのページよくあるページ上部にある共通部分、いわゆるナビゲーションというか、サイトのどこにいてもページ内の好きなカテゴリに飛べるように表示されている部分は、どういう方法がいいのでしょうか? というのも、フレームを使ってもできるし、フレームを使わず各ページごとに画像などを配置して、ページ毎に読みこむ方法があるようだからです。どちらの方法が良いのでしょうか?メリット・デメリットがあれば教えてください。 2 HP作成関係の文章を読んでいたときに、TABLEタグを使ったページは嫌われると書かれていたのですが、なんでダメなんでしょうか?  けっこうTABLE使っているページも多いような気がしますが… 言葉足らずで申し訳ないですが、よろしくお願いします。

  • ホームページリーダーでメニュー部分を読み上げなくしたい

    ホームページリーダーでサイトを読み上げたときに、各ページ共通で使用しているナビゲーション部分を読み上げないようにするには、ソースの記述はどうすればよいでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML
  • メニューの正しい配置の仕方

     現在、テーブルを使ってページを左右に二分し、左側にサイトの目次を、右側に本文を記述しています。 <table> <tr> <td>目次部分</td> <td>本文</td> </tr> </table> しかし、この方法は良くないと聞き、CSSを使って配置をしようと考えています。  Wikipediaみたいな感じに、HTMLでは本文を先に記述し、その下にメニューの部分を記述、そしてその部分をCSSで本文の右側に配置しようと思い、Wikipediaのソースを見てみたのですが、複雑でよくわかりませんでした。  Wikipediaの方法でなくても構いませんので、どなたか、アクセシビリティを考慮したメニューの作り方をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • フレーム部分の修正のすべてのページへの反映について

    添付の図のようにヘッダー、フッター、ナビゲーション部分をすべてのページにフレームとして利用し、メイン部分のみが変わるサイトがあるとします。 そこで質問です。 (1)このようなフレーム部分を作成する方法を教えてもらえませんか。ファイルをコピーしてメイン部分だけを変更する方法しか分かりません。こうするとフレーム部分を変更する場合、全てのページを変更しなくてはなりません。詳しいことはあまりよくわからないのですが、<div>と外部スタイルシートで各フレームは設定しております。HTMLソースのフレームを使う方法もありますが、スクロールバーが入ったりして見栄えが悪くなります。これら以外のどんな方法でも結構です。 (2)ナビゲーション部分には各ページへのリンクの項目(アイコン)を並べていますが、これらの項目を追加、削除、修正したい場合に1ページを変更すれば、全てのページにその変更を反映させる方法を教えてもらえませんか。 (3)また、メイン部分の情報量によってナビゲーション部分の長さを変えたいのですが、(2)の場合にはどうすればよいのでしょうか。 ソフトはホームページビルダー15を使用しております。 ビルダーを使用しない方法でも結構です。 よろしくお願いします。

  • ナビゲーションメニュー

    ナビゲーションメニューを作ったとき、複数ページに直接記述していると面倒ですし、Webサイトの構成が変わったときの保守がしにくくなります。 そこで、ナビゲーションメニューのHTMLを別な方法で取り込んで、全ページにメニューを共通して表示させることが出来るのでしょうか? 出来るとしたらわかりやすいサイトと具体例(サンプル)があるサイトを教えてください。

  • グローバルナビゲーション等の共通領域

    グローバルナビゲーションをliで作っております。 <div id="header"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> 上記グローバルナビゲーションを、3ページで使用しております。 3ページ作成後、メニュー5が不要になったためメニュー5を消すことにしました。 当然、3ページすべてでグローバルナビゲーションの修正が必要になりました。 phpでhpを作成する場合、共通部分をheader関数で抜きだし作成し、共通部分+各ページ異なる部分を結合すれば、 グローバルナビゲーションの修正は、共通部分一か所の修正ですむと思います。 htmlとcssのみでグロバールナビゲーション(=共通部分)を使用し、HPを作成する時、 phpのheader関数のように、共通部分を抜き出し、必要時に結合させるといったことは できないのでしょうか? やはり、3ページすべてのグローバルナビゲーションの修正をするしか方法は ないのでしょうか? ご教授お願いします。

    • ベストアンサー
    • HTML
  • OutLookのメール本文への貼付の仕方

    OutLookのメール本文への貼付の仕方 色々と参考にしながらEXCELからOutlookを立ち上げてメールを作成するVBAを作っているのですが EXCELのセルに書き込んだ原文を本文へ反映させる部分で困っています。 現在は、下記のようなに書いています。 strMOJI = Worksheets("メール原文").Cells(1, 1) objMAIL.Body = strMOJI '本文の代入 これでも、文章自体は反映できるのですがフォントなどはこの方法では出来ないので 原文を入れているセルをコピーして本文へ貼り付ける方法で対応しようとしたのですが 本文への貼付方法が調べても分からず困ってます。 貼付以外でも良いので、フォントも合わせて反映させる方法はないでしょうか。 参考になるページでもよいのでよろしくお願いします。

  • フラッシュのスキップボタンの作り方 FLASH MX使用

    FLASH MXを使用してフラッシュを作成しました。 完成したのですがよくフラッシュで見かける「スキップ」の作り方がわかりません。 ダラダラとフラッシュの再生が終わるのを待つのは見る側としては「…」ということもあるので是非ボタンを作りたいのですが全く方法が解りません。 また、スキップボタンをクリックした際別のページに飛ぶためのリンクの貼り方なども併せて教えていただければありがたいです。 本は複数購入したのですが基本的な作り方というものばかりで小技などが全く解らないので詳しく掲載されているサイトなどもお教えいただければ幸いです。