web-dev-qa-db-ja.com

<table>に<caption>があるように、<ul>または<ol>の見出し/タイトルをコーディングする最良の方法は何でしょうか？

<ul>または<ol>の見出し/タイトルをコーディングする最良の方法は何ですか？ <caption>に<table>があり、それらを太字にしたくないように。

これでいいですか？

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

または、常に見出しを使用する必要がありますか？

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
cssxhtmlaccessibilityscreen-readerswcag
52
Jitendra Vyas

見出しには常に見出しタグを使用します。手がかりは名前にあります:)

太字にしたくない場合は、CSSでスタイルを変更します。例えば：

HTML：

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

HTML5では、<section>要素を使用して、見出しとリストをより明確に関連付けることができます。 （<section>は、IE 8以前ではJavaScriptなしでは正しく動作しません。）

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

HTML 4でも同様のことができます。

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

その後、このようにスタイル：

.list-with-heading h3 {
    font-weight: normal;
}
38
Paul D. Waite

これは古いですが、後で検索するときにこの質問を見つける可能性のある他の人のために更新しています。

@ Matt Kelliher：

リストにcss：beforeおよびdata-*属性を使用するは素晴らしいアイデアですが、ハンディキャップにアクセスしやすいように少し変更することもできます：

HTML：

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS：

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

これにより、aria-label属性の値に設定されたテキストを含む「header」擬似要素を持つリストが作成されます。その後、ニーズに合わせて簡単にスタイルを設定できます。

Data- *属性を使用するよりもこの利点は、aria-labelがリストの「ラベル」としてスクリーンリーダーによって読み取られることです。これは、このデータの使用目的に対して意味的に正しいです。

注：IE8は：before属性をサポートしますが、単一のコロンバージョンを使用する必要があります（有効なdoctypeが定義されている必要があります）。 IE7は：beforeをサポートしていませんが、ModernizerまたはSelectivizrはその問題を修正する必要があります。最新のブラウザはすべて、古い：before構文をサポートしていますが、:: before構文を使用することをお勧めします。一般的にこれを処理する最良の方法は、古い形式を使用するIE7/8の外部スタイルシートと新しい形式を使用する一般的なスタイルシートを用意することですが、実際には、100％クロスであるため、ほとんどの場合、古い単一のコロン形式を使用しますCSS3の技術的に有効でない場合でも、ブラウザ。

35
Erasmus

リストに:before属性とdata-*属性を使用したい

HTML：

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS：

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

これにより、リストのdata-header属性として指定されたテキストであるヘッダーを含むリストが作成されます。その後、ニーズに合わせて簡単にスタイルを設定できます。

9
Matt Kelliher

見出しをさまざまなスタイルのリスト要素にするのはどうですか

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

cSS

ul .heading {font-weight: normal; list-style: none;}

さらに、リセットCSSを使用して、ulとliにマージンとパディングを設定します。 here's 良いリセットCSS。マージンとパディングをリセットしたら、見出しクラスのリスト要素以外のリスト要素にインデントするためのマージンを適用できます。

6
pixeltocode

<caption> 許可されている？

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
2
phonedog365

h3は、h2、h1、またはh6よりも優れたソリューションです。

  1. 特定のレベルを使用する必要があります：h1にいる場合はh2を使用し、h5にいる場合はh6を使用します（h6にいる場合...ハム、exempleにstrongまたはemを使用します）。それは義務ではなく、アクセシビリティの問題です（ ここでは、緑の部分 ）。

  2. リストにタイトルを付ける必要はありません...この要素は存在しないためです。そのため、スクリーンリーダーは特別なものを使用しません。

したがって、Hnを使用することはおそらく最適なソリューションの1つですが、特定のレベルではありません。

0
Alysko