WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Meacham, Steve - FSA, Kansas City, MO
Date: Mar 6, 2017 11:48AM

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.