表外字段/值对的正确 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>