表だけのページにおける表題のマークアップは？

質問

表だけのページがあり、その上部に表題を表示しようと思います。
その場合、その表題は<h1>タグでマークアップすべきか<caption>タグでマークアップすべきかで迷っています。
要素の必須度からすれば恐らく<h1>なのだろうと思うのですが、リーダで読み上げられた場合などに問題が発生したりしないか気になります。
両方とも記述してどちらか一方のdisplayプロパティをnoneにするというのも考えられると思うのですが、どうするのが良いのでしょうか？

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

h1はページのタイトル、captionは表のタイトルですので、私も両方書くのが良いと思います。

ですが、h1とcaptionが同じになる場合は、音声ブラウザでは同じ文章が2度読まれる事になり、聞き手の混乱を招く事がありますので、
No.2さんとは逆になりますが、私はcaptionを省略し、h1だけにするのが良いかと思います。

captionではなくh1にする理由ですが、
ページの要約や目次を取得する機能を使った場合、ページの要約を表示できない事になってしまいますから。

リーダーでの読み上げを考慮する場合、display:noneは論外だと思います。
一応、cssにはauralという音声ブラウザ向けのルールもありますが、
利用者の多い無料・安価なcssに対応していないリーダー・音声ブラウザを優先的に考慮すべきかと思います。

回答No.2

ORUKA1951

最も基本的なことなのですが、迷ったときは必ず仕様書をチェックしましょう。
　11.4 非視覚系ユーザエージェントによる表のレンダリング( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.4 )

　非視覚系ユーザーエージェント(読み上げブラウザ/検索エンジン等)を考慮するなら、まず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

noname#83877

captionはあくまで表題です。
h1はそのページの見出しです。
2つが同じ文章になることは、表がメインのページでは当然有り得ることですし、むしろ無理に片方だけにはしない方が良いと思います。

cssに関しては、できるだけdisplay:none;はしない方がいいのではないでしょうか。読み上げブラウザは基本display:none;は無視するはずなので、表だけ表題を特別に読み上げる機能があることをあまり期待しない方がいいです。
captionのcssに関してはwebkit系のバグが目だった記憶があります。あまり細かいチェックをしていないのですが、できるだけtext-indent:-9999px;やoverflow:hidden;などで見えなくする方が無難な気がします。