HTMLでリストのキャプション、タイトル、またはラベルを意味的に提供する方法

HTMLリストにセマンティックキャプションを提供する適切な方法は何ですか？たとえば、次のリストには「タイトル」/「キャプション」があります。

フルーツ

• 林檎
• 梨
• オレンジ

「果物」という単語は、リスト自体に意味的に関連付けられるように、どのように処理する必要がありますか？

マークアップを効果的に構成するキャプションまたは見出し要素はありませんが、同じ効果があります。ここにいくつかの提案があります：

ネストされたリスト

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

リストの前の見出し

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

定義リスト

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

オプション1

HTML5にはfigureandfigcaption要素があります。これは非常にうまく機能します。

例：

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

これらはCSSで簡単にスタイル設定できます。

オプション2

CSS3の:: before疑似要素を使用すると、優れた解決策になる可能性があります。

HTML：

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS：

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

もちろん、ul[title];とは異なるセレクターを使用できます。たとえば、「title-as-header」クラスを追加してul.title-as-header::before代わりに使用したり、必要なものを使用したりできます。

これには、リスト全体のツールチップが表示されるという副作用があります。このようなツールチップが必要ない場合は、代わりにデータ属性（、、<ul data-title="fruit">などul[data-title]::before { content: attr(data-title); }）を使用できます。

私の知る限り、現在のHTML仕様には、テーブルの場合のように、リストのキャプションを提供するための規定はありません。今のところ、クラス化された段落またはヘッダータグのいずれかを使用し続けます。

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

将来、HTML5が広く採用されるようになる<legend>と、<figure>タグとタグを使用して、これをもう少し意味的に実現できるようになります。

詳細については、W3Cメーリングリストのこの投稿を参照してください。

スクリーンリーダーがリストを関連する見出しに確実にaria-labelledby接続するには、次のidように見出しに接続して使用できます。

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

前の回答で述べたように、見出しレベルがドキュメントの見出し順序に従っていることを確認してください。

テーブルのようなリストには、キャプションのようなタグはありません。だから私はそれに<Hx>（あなたの以前に使用したヘッダーに応じてx）を与えるだけです。

私はこれが古いことを知っていますが、将来の人々のために見つけた答えを追加したいと思いました：https： //www.w3.org/MarkUp/html3/listheader.html

<lh>要素を使用します：

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

古いブラウザをサポートするソリューションを見つけようとしていたので、単純化しすぎたソリューションがあるかもしれません。テーブル表示スタイルとID /クラスの使用：

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

次にdisplay: table-row;、CSSの要素にスタイルを適用します。

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

説明リストを使用している場合、これははるかにうまく機能します。これは、同じ質問があったときに行っていたものです。その場合、div要素がdlリスト内でサポートされている<div>ため、HTMLおよびdisplay: table-caption;CSSで使用できます。

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

CSSでは、キャプションにさまざまなスタイルを適用できます。

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

これはブロック要素として扱われ、テキストが垂直方向に配置table-captionさul/olれるため、うまく機能しないことに注意してください。これはおそらく望ましくありません。

FirefoxとChromeの両方でこれをテストしました。

<label/>ラベルをリスト要素に関連付けるためにいつでも使用できます。

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>