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>

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

1 个答案: