WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Patrick H. Lauke
Date: Mar 6, 2017 5:59PM

On 06/03/2017 23:59, Ryan E. Benson wrote:
> Unless you have a specific need, why don't you throw it in a csv file?

Because presumably it's part of a webpage that has more content than
just that?

> <EMAIL REMOVED> > wrote:
>
>> 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?

I don't think there's any immediately obvious ARIA roles/relationships
that can be leveraged here.

>> - Use <dl> and <dt> elements, but how can it be styled like this,
>> or into multiple columns?

While <dl>/<dt>/<dd> seem nice, to my knowledge most ATs don't actually
do anything sensible like announce the relationship / the difference
between the term and description.

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

You could make a linear table, with a single row and a series of
<th>/<td> elements, giving the <th> elements unique ids and using the
headers="..." attribute in each <td> to explicitly tie it to its
relevant header. Quite laborious, and AT support *should* be reasonable.

>> - Use a <form> element with <labels>. Styling is easy. But are
>> semantics maintained with nothing but static text (CDATA) instead of
>> controls?

labels and read-only text inputs start to really bend the idea of
semantics here.

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

Or the simplest solution: just have it as a simple paragraph of plain
text, without the need to structure any relationships. It's a very small
set of pieces of information, and it feels a bit like overkill to try
any markup acrobatics in the name of semantics, when it's likely
perfectly understandable if read out by AT users as a pure sentence
without any further overhead ("List with X items", "Table with 1 row and
X columns", etc)

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke