表格外的字段/值对是否具有正确的ARIA属性?

问题描述

我们需要布置大量数据.一个简单的表可以很好地工作，但是我们要使其完全具有响应性，因此对于简单的字段/值对，我们试图避免对表标记太过疯狂以使事情重排变得更容易.

We need to layout a large amount of data. A simple table would work well, but we're making this entirely responsive so for simple field/value pairs, we're trying to avoid going too crazy with table markup to make things reflow a bit easier.

过去，我会先定义一个列表:

In the past, I would have first gone with a definition list:

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

但是...它们也有缺点...即该标记的语义值并不总是被屏幕阅读器等识别，因此经常被人们皱眉.

but...they also had drawbacks...namely that the semantic value of this markup wasn't always recognized by screen readers and the like, so was often frowned upon.

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

In terms of semantics and accessibility (as well as HTML5), are there a specific set of ARIA attributes that could make this better?

如果是，我应该使用哪个?我在网上找到的示例通常用于a)标签/字段对或b)使用ARIA标签显示不可见标签.两者都不适合这种情况.

If so, which ones should I use? The examples I'm finding online typically are for either a) label/field pairs or b) using ARIA labels for non-visible labels. Neither of which fit this scenario.

这就是我在想我们需要的:

Here's what I'm thinking we need:

<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可以使其变得可访问?

Is there an ARIA attribute designed specifically for this? Is there a better solution that ARIA attributes to make this accessible?

推荐答案

首先-如果两列中的数据属于同一类，并且第一个值是第二个的标签，则这是语义上的表格数据，并且表将是适当的.您可以对表单元格使用aria-labelledby，这样就不必具有可见的表头.

Firstly - if the data in the two columns is of the same sort and the first value is the label for the second, then this is semantically tabular data and a table would be appropriate. You could use aria-labelledby for the table cells so that you do not have to have visible table headers.

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

如果您不想要表，则应该使用:

If you do not want tables, then what you should use is:

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

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

You could also use the same trick as the first markup example to add column headers if you think those make the table easier to understand

<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属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！