Html 表外字段/值对的正确ARIA属性？

我们需要布置大量的数据。一个简单的表可以很好地工作，但我们正在使其完全响应，因此对于简单的字段/值对，我们正试图避免对表标记过于疯狂，从而使回流变得更容易

在过去，我会首先列出一个定义列表：

<dl>
    <dt>Label</dt>
    <dd>Value</dd>
</dl>

标签
价值

但是……它们也有缺点……也就是说，这种标记的语义价值并不总是被屏幕阅读器等识别出来，因此常常受到反对

就语义和可访问性（以及HTML5）而言，是否有一组特定的ARIA属性可以使其更好

如果是，我应该使用哪些？我在网上找到的示例通常是a）标签/字段对或b）使用ARIA标签作为不可见标签。两者都不符合这种情况

以下是我认为我们需要的：

<div class="datawrapper">
    <div class="label" **some-ARIA-attribute-to-attach-this-to**="value1">Label</div>
    <div class="value" id="value1">Value</div>
</div>

标签
价值

---

是否有专门为此设计的ARIA属性？是否有更好的解决方案可以使用ARIA属性来访问此数据？

首先-如果两列中的数据具有相同的排序，并且第一个值是第二个值的标签，那么这是语义上的表格数据，使用表格是合适的。可以对表格单元格使用aria labelledby，这样就不必有可见的表格标题

<table>
<tr class="visuallyhidden">
<th id="firstheader">
</th>
<th id="secondheader">
</th>
</tr>
<tr>
<th aria-labelledby="firstheader" id="row1header">
Label
</th>
<td aria-labelledby="secondheader row1header">
Value
</td>
</tr>
</table>

如果不需要表，则应使用：

<div role="grid">
    <div role="row">
        <div role="gridcell" class="label" id="label1">Alfa Romeo</div>
        <div role="gridcell"  class="value" id="value1" aria-labelledby="label1">Infatuation</div>
    </div>
    <div role="row">
        <div role="gridcell" class="label" id="label2">TT</div>
        <div role="gridcell" class="value" id="value1" aria-labelledby="label2">Trusty old steed</div>
    </div>
</div>

阿尔法罗密欧
迷恋
TT
可靠的老马

如果您认为列标题使表更容易理解，那么也可以使用与第一个标记示例相同的技巧添加列标题

<div role="grid">
    <div role="row" class="visuallyhidden">
        <div role="columnheader" class="label" id="firstheader">Automobile</div>
        <div role="columnheader"  class="value" id="secondheader">Description</div>
    </div>
    <div role="row">
        <div role="gridcell" class="label" id="label1" aria=labelledby="firstheader">Alfa Romeo</div>
        <div role="gridcell"  class="value" id="value1" aria-labelledby="label1 secondheader">Infatuation</div>
    </div>
    <div role="row">
        <div role="gridcell" class="label" id="label2" aria=labelledby="firstheader">Audi TT</div>
        <div role="gridcell" class="value" id="value1" aria-labelledby="label2 secondheader">Trusty old steed</div>
    </div>
</div>

汽车用品
描述
阿尔法罗密欧
迷恋
奥迪
可靠的老马

正如现在所写的，这个问题相当广泛，并没有真正提出具体的问题。它读起来更像是一个什么是最佳实践、当前思维、推荐做事方式的问题。每当我在一个问题中看到“什么是最佳实践？”时，它通常会向我发出一个离题的、以观点为基础的信号。如果你能发布一个更具体的例子，说明你正在处理什么，你尝试了什么，以及你遇到的具体问题，你可能会得到一些很好的答案。我觉得你不想仅仅因为表格就是表格就使用表格。但是，表格正是您所需要的，因为您希望显示表格数据。@AlexanderRavikovich这是真的，但鉴于我们在不同视口大小上进行的内容回流和重新格式化的数量，表格不会对其进行剪切。另外，对于简单的标签/值对，我通常会发现表过于复杂。与其说它是一组表格数据，不如说它更像是一个表格（是的，可以说一个表格也是表格数据…@j08691我认为解决方案很可能是基于ARIA的。让我知道编辑是否更具体。我喜欢后一个选项！这可以很好地与响应网格配合使用。

<div role="grid">
    <div role="row" class="visuallyhidden">
        <div role="columnheader" class="label" id="firstheader">Automobile</div>
        <div role="columnheader"  class="value" id="secondheader">Description</div>
    </div>
    <div role="row">
        <div role="gridcell" class="label" id="label1" aria=labelledby="firstheader">Alfa Romeo</div>
        <div role="gridcell"  class="value" id="value1" aria-labelledby="label1 secondheader">Infatuation</div>
    </div>
    <div role="row">
        <div role="gridcell" class="label" id="label2" aria=labelledby="firstheader">Audi TT</div>
        <div role="gridcell" class="value" id="value1" aria-labelledby="label2 secondheader">Trusty old steed</div>
    </div>
</div>