WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best way to present a semantic row of name/value pairs

for

From: Birkir R. Gunnarsson
Date: Mar 6, 2017 2:36PM

You can do some things with ARIA, others not so well.
ARIA list markup is airly well supported across browsers/a.t.
To build a list you:
* Put role="list" on the list container.
* role="listitem" on container for each list item.

Same semantic rules apply to an ARIA list that apply to an HTML list
(i.e. a list role can only contain list item roles).
example:
<div role="list">
<div role="listitem">
<span> year</span>
<span>2006</span>
</div>
<div role="listitem">
<span>County</span>
<span>Orange</span>
</div>
..
</div>

You can build a read only ARIA grid for a two-column table
<div role="grid" aria-readonly="true">
<div role="row">
<div role="columnheader">column header 1</div>
<div role="columnheader">Column header 2</div>
</div>
<div role="row">
<div role="rowheader">Year</div>
<div role="gridcell">2016</div>
</div>
..
</div>

ARIA 1.1 introduced the table and cell roles to build static tables using ARIA.
In the example above, swap role="grid" and aria-readonly="true" out
for rol="table"
Then swap out any instance of roe="gridcell" for role="cell" and you
follow the ARIA 1.1 table construct.
I have not seen any support for the ARIA table construct yet, and it
will take a few months (or maybe longer) to emerge.

Anyway, I think some sort of a <ul> or table construct might work
best, depending on your needs and styling.
Cheers
-B



On 3/6/17, Tim Harshbarger < <EMAIL REMOVED> > wrote:
> Another option might be to semantically include each name-value pair inside
> a list item and then style the list and list items however you wish with
> CSS.I think there are quite a few articles available online that discuss how
> to style lists and list items different ways.
>
>