Proper ARIA attribute for field/value pairs outside of a table?

Question

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.

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

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>

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

Answer 1

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>

where visuallyhidden is

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