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