WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Tim Harshbarger
Date: Mar 6, 2017 1:38PM

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.