E-mail List Archives
Thread: Best way to present a semantic row of name/value pairs
Number of posts in this thread: 5 (In chronological order)
From: Meacham, Steve - FSA, Kansas City, MO
Date: Mon, Mar 06 2017 11:48AM
Subject: Best way to present a semantic row of name/value pairs
No previous message | Next message →
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.
From: Tim Harshbarger
Date: Mon, Mar 06 2017 1:38PM
Subject: Re: Best way to present a semantic row of name/value pairs
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Meacham, Steve - FSA, Kansas City, MO
Sent: Monday, March 06, 2017 12:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: Stewart, Shirley - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >; Selleck, George - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >; Garrison, Karen - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >; OBrien, Pamela - FSA, Kansas City, MO < = EMAIL ADDRESS 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.
From: Birkir R. Gunnarsson
Date: Mon, Mar 06 2017 2:36PM
Subject: Re: Best way to present a semantic row of name/value pairs
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Meacham, Steve - FSA, Kansas City, MO
> Sent: Monday, March 06, 2017 12:48 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc: Stewart, Shirley - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >;
> Selleck, George - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >;
> Garrison, Karen - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = >;
> OBrien, Pamela - FSA, Kansas City, MO < = EMAIL ADDRESS 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.
From: Ryan E. Benson
Date: Mon, Mar 06 2017 4:59PM
Subject: Re: Best way to present a semantic row of name/value pairs
← Previous message | Next message →
Unless you have a specific need, why don't you throw it in a csv file?
--
Ryan E. Benson
On Mon, Mar 6, 2017 at 1:48 PM, Meacham, Steve - FSA, Kansas City, MO <
= EMAIL ADDRESS 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?
>
> - 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.
> > > > >
From: Patrick H. Lauke
Date: Mon, Mar 06 2017 5:59PM
Subject: Re: Best way to present a semantic row of name/value pairs
← Previous message | No next message
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 ADDRESS 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