WCAG：如何正确地对具有多个键值的项目列表进行分组如何正确使用 <dl>

问题描述

我想知道如何正确构建关于 WCAG 和屏幕阅读器的项目列表。 我有一个项目列表，其中每个项目都有其属性列表。假设它是购物车中的杂货清单：

My cart:

What: Apple,How many: 4,Category: Fruit,What: Oranges,How many: 2,What: Chickenbreast,How many: 1,Category: Meat,

我想为这个购物车中的每件商品显示一张卡片，就像这样，其中“什么”只是屏幕阅读器：

Apple
How many: 4    Category: Fruit

Oranges
How many: 2    Category: Fruit   

Chickenbreast
How many: 1    Category: Meat

购物车中的每件商品的 dd 中的 dl 是否应该是这样的？

<dl>
  <dt><div class="sr-only">What</div>Apple</dt>
  <dd>
    <dl>
      <dt>How many:<dt>
      <dd>4</dd>
      <dt>Category:<dt>
      <dd>4</dd>
    </dl>
  </dd>
  <dt><div class="sr-only">What</div>Oranges</dt>
  <dd>
    <dl>
      <dt>How many:<dt>
      <dd>2</dd>
      <dt>Category:<dt>
      <dd>Fruit</dd>
    </dl>
  </dd>
  <dt><div class="sr-only">What</div>Chickenbreast</dt>
  <dd>
    <dl>
      <dt>How many:<dt>
      <dd>1</dd>
      <dt>Category:<dt>
      <dd>Meat</dd>
    </dl>
  </dd>
<dl>

我很想知道这是如何正确完成的！谢谢大家的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）