![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.3ベストアンサー
- 回答日時:
h1はページのタイトル、captionは表のタイトルですので、私も両方書くのが良いと思います。
ですが、h1とcaptionが同じになる場合は、音声ブラウザでは同じ文章が2度読まれる事になり、聞き手の混乱を招く事がありますので、
No.2さんとは逆になりますが、私はcaptionを省略し、h1だけにするのが良いかと思います。
captionではなくh1にする理由ですが、
ページの要約や目次を取得する機能を使った場合、ページの要約を表示できない事になってしまいますから。
リーダーでの読み上げを考慮する場合、display:noneは論外だと思います。
一応、cssにはauralという音声ブラウザ向けのルールもありますが、
利用者の多い無料・安価なcssに対応していないリーダー・音声ブラウザを優先的に考慮すべきかと思います。
No.2
- 回答日時:
最も基本的なことなのですが、迷ったときは必ず仕様書をチェックしましょう。
11.4 非視覚系ユーザエージェントによる表のレンダリング( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )
非視覚系ユーザーエージェント(読み上げブラウザ/検索エンジン等)を考慮するなら、まずtableには、summary=""を書くこと、captionを書いておく、見出しに当たる行はscope=""や abbr=""を書いておくとか。
表だけの場合であっても、当然titleは書くわけですから、<h1></h1>については、特に必要ないでしょう。【仕様書上は必須項目ではない】
いずれかを記載しておけば問題ないでしょう。
スタイルシートですが、私は外部スタイルシートとしていますので、必ず適用するmediaTypeを指定しています。
<link rel="stylesheet" type="text/css" media="screen" href="" />
<link rel="stylesheet" type="text/css" media="screen" href="" title="" />
<link rel="stylesheet" type="text/css" media="screen" href="" title="" />
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="" title="汎用">
<link rel="Stylesheet" type="text/css" media="print" href="" />
などのように・・
要は、検索エンジンを含め、非視覚系ブラウザを考慮してページを作成し、その上で、視覚系ブラウザ用にデザインするというスタンスでページを構成しています。
No.1
- 回答日時:
captionはあくまで表題です。
h1はそのページの見出しです。
2つが同じ文章になることは、表がメインのページでは当然有り得ることですし、むしろ無理に片方だけにはしない方が良いと思います。
cssに関しては、できるだけdisplay:none;はしない方がいいのではないでしょうか。読み上げブラウザは基本display:none;は無視するはずなので、表だけ表題を特別に読み上げる機能があることをあまり期待しない方がいいです。
captionのcssに関してはwebkit系のバグが目だった記憶があります。あまり細かいチェックをしていないのですが、できるだけtext-indent:-9999px;やoverflow:hidden;などで見えなくする方が無難な気がします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- その他(学校・勉強) この中で間違ってある説明はありますか?詳しい方に教えていただきたいです。 A. 1つのプログラムが複 2 2023/07/14 01:15
- 大学受験 資格試験などの勉強で過去問題集の解説を理解する時、分からない用語を調べてどうするのが良いですか? 問 3 2023/06/18 17:18
- 英語 提示した名言について(並列表現の文法規則) 4 2023/06/02 09:41
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/10 13:21
- 日本語 https://eprints.lib.hokudai.ac.jp/dspace/bitstream 6 2022/05/22 18:54
- iPhone(アイフォーン) Phone7Plusについて 下記②点の問題はなにが問題だとおもいますか? ①ネットの場合、ページ表 4 2022/10/29 21:30
- その他(インターネット接続・インフラ) ブラウザにIPアドレス入力した時 1 2022/06/16 19:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
縦書きのcssについて質問です。...
-
マイクロ(μ)の文字を半角で出...
-
outlook 文字を揃えたい。tab...
-
教えてください。
-
「MS Pゴシック」と同じ幅の...
-
入力規則のリストの文字の大き...
-
タイ語と日本語混在のサイトを...
-
Illustratorで作成、pngで保存...
-
ACCESS VBA レポートプレビュー...
-
alertで表示させる文字サイズは...
-
cssファイルの名称付け
-
テーブル内の文字サイズを変更...
-
MsgBoxについて
-
PDFファイルを開かずに印刷...
-
パスワード欄の"●"文字を小さく...
-
テキストエリア内の文字の装飾
-
<pre>タグ内のフォントサイズに...
-
外国語版メイリオはある?
-
ユーザーフォーム スクロール...
-
ページ内の画像印刷について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
safari でcssがききません!
-
オンラインとオフラインでのcss...
-
cssでリンク先のurlを表示させ...
-
macで見るとホームページが真っ...
-
NN(Netscape)だけに適用され...
-
外部cssのパーミッション?
-
contentプロパティの初期化?
-
このサイトのようにhタグをし...
-
メールソフトBecky!のHTMLメー...
-
インターネットのHTMLが圧縮形...
-
Chromeでcssを表示させると、cs...
-
スクロールバーをカスタマイズ...
-
ホームページビルダーでcssのサ...
-
携帯では指定のタグを無効化す...
-
ユーザビリティ、アクセシビリ...
-
表だけのページにおける表題の...
-
cssが触ってないのに崩れていま...
-
文字の色、大きさを変えるWe...
-
WinIE5にだけCSSを適用させない...
-
CSS、Bootstrapについて contai...
おすすめ情報