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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Meacham, Steve - FSA, Kansas City, MO
> Sent: Monday, March 06, 2017 12:48 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc: Stewart, Shirley - FSA, Kansas City, MO < <EMAIL REMOVED> >;
> Selleck, George - FSA, Kansas City, MO < <EMAIL REMOVED> >;
> Garrison, Karen - FSA, Kansas City, MO < <EMAIL REMOVED> >;
> OBrien, Pamela - FSA, Kansas City, MO < <EMAIL REMOVED> >
> Subject: [WebAIM] Best way to present a semantic row of name/value pairs
>
> Is it possible to present a semantically correct list of names and values
> that appear on a single line like this?
>
> "Program Year: 2016 State: Iowa (06) County: Adair (001)"
>
> This is a very simple example. Sometimes we have many more fields that span
> additional lines, or may be split into a left and right column of
> name/values. The data is static - not form controls.
>
> I see three options:
>
> - Use semantically neutral elements like <div> and <span> and add
> semantics with ARIA - but how?
>
> - Use <dl> and <dt> elements, but how can it be styled like this, or
> into multiple columns?
>
> - Use a non-layout <table> element, but can it be styled like this
> and still work with JAWS' table mode, recognizing heading and data cells?
>
> - Use a <form> element with <labels>. Styling is easy. But are
> semantics maintained with nothing but static text (CDATA) instead of
> controls?
>
> - Use a layout <table> element, but it loses semantics and table
> mode.
>
> - Use <ol> and <li> elements; put the name, value, or both into
> <span> or other non-block elements; and use ARIA to associate the two -
> maybe aria-label? This will style, but not into columns, and loses
> field-by-field navigation.
>
> Steven Meacham, ICT Accessibility Program Manager
> +1 (816) 926-1942<tel:+18169261942>
> FSA Section 508 Program<https://wiki.tools.fsa.usda.gov/x/AgCoAw>
>
>
>
>
>
> This electronic message contains information generated by the USDA solely
> for the intended recipients. Any unauthorized interception of this message
> or the use or disclosure of the information it contains may violate the law
> and subject the violator to civil or criminal penalties. If you believe you
> have received this message in error, please notify the sender and delete the
> email immediately.
> > > > > > > > >


--
Work hard. Have fun. Make history.