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

Question

我们需要对大量数据进行布局。一个简单的表格可以很好地工作，但我们正在使其完全响应，因此对于简单的字段/值对，我们试图避免表格标记过于疯狂，以使事情重排更容易。

在过去，我会首先使用定义列表：

<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 认为的更好的解决方案来实现这一点？

Answer 1

首先 - 如果两列中的数据具有相同的排序并且第一个值是第二个值的标签，那么这在语义上是表格数据，并且表格将是合适的。您可以将 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>

视觉隐藏在哪里

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

如果你不想要表格，那么你应该使用的是：

<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>

您也可以使用与第一个标记示例相同的技巧来添加列标题，如果您认为这样会使表格更易于理解

<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>