2

私は少し見回して、区切り記号が意味を持つリストに区切り記号を挿入する最もセマンティックな方法を探しています。

アイテムのリストはメニューであり、2 つの個別のリストに分けるには十分な長さではありませんが、グループ化の追加レイヤーがあることを示す方法が必要です。

<h1>Our menu:
<ul>
 <li> Duck ala orangé
 <li> Chicken ala Banana
 <li> Beef
 <!-- Some kind of separator here -->
 <li> Chocolate mousse
 <li> Wafer thin mints
</ul>

これをスクリーン リーダーに適したものにしたいのでborder-bottom、"Beef" アイテムに a を追加するような CSS のみのソリューションは実際には機能しません。HTML を変更することはできますが、最終的に 2 つのリストが別の要素でラップされるような解決策は望んでいませんが、そうでなければ納得できます。

リスト内のセマンティックセパレータを示す、セマンティック/WCAG準拠の優れた方法はありますか?

4

2 に答える 2

0

anには要素ulのみを含めることができますli(およびscript/template要素ですが、この質問には関係ありません)。

セパレーターはほとんど「リスト項目」ではないため、セパレーターに追加を使用するliことは適切ではないようです。

リストを複数のグループ (またはリスト) に分割できる場合は、複数のul要素を使用し、必要に応じて見出しを付けます。

<h1>Our menu</h1>

<h2>Meat</h2>
<ul>
  <li>Duck ala orangé</li>
  <li>Chicken ala Banana</li>
  <li>Beef</li>
</ul>

<h2>Dessert</h2>
<ul>
  <li>Chocolate mousse</li>
  <li>Wafer thin mints</li>
</ul>

見出しのおかげで、ユーザー エージェント (たとえば、アウトラインにアクセスできるスクリーン リーダー) は、関心のあるリストに直接ジャンプできます。
明示的な見出しを提供したくない場合は、sectionアウトライン エントリがまだあるように使用できます (ただし、ラベルはありません) (および/または見出しを視覚的に非表示にします)。

<h1>Our menu</h1>

<section>
  <ul>
    <li>Duck ala orangé</li>
    <li>Chicken ala Banana</li>
    <li>Beef</li>
  </ul>
</section>

<section>
  <ul>
    <li>Chocolate mousse</li>
    <li>Wafer thin mints</li>
  </ul>
</section>

リストを 1 つだけ使用することも確かに可能です ( Oriol の提案による):

<h1>Our menu</h1>

<ul>

  <li>
    <ul>
      <li>Duck ala orangé</li>
      <li>Chicken ala Banana</li>
      <li>Beef</li>
    </ul>
  </li>

  <li>
    <ul>
      <li>Chocolate mousse</li>
      <li>Wafer thin mints</li>
    </ul>
  </li>

</ul>

しかし、個人的には、これらのラベルのないトップレベルを持つことはエレガントではありませんli。

見出しを使用できる場合は、必ず明示的なsection要素を使用する必要があります (そうしないと、見出しの範囲に次のリスト項目の先頭が含まれます)。

<h1>Our menu</h1>

<ul>

  <li>
    <section>
      <h2>Meat</h2>
      <ul>
        <li>Duck ala orangé</li>
        <li>Chicken ala Banana</li>
        <li>Beef</li>
      </ul>
    </section>
  </li>

  <li>
    <section>
      <h2>Dessert</h2>
      <ul>
        <li>Chocolate mousse</li>
        <li>Wafer thin mints</li>
      </ul>
    </section>
  </li>

</ul>

しかし、なぜ？これにより、最初のレベルにカテゴリのリストが表示されます (実際のアイテムは 2 番目のレベルにあります)。しかし、これは役に立ちますか？おそらくコンテキストに依存しますが、一般的には、見出し/セクション (カテゴリごと) + 個別のリストを使用することを好みます。

それはおそらくほとんど個人的な好みです。

于 2014-03-29T06:03:57.553 に答える