RE: HTML5 DL Element vs. WCAG 2.0 Success Criteria

Hi,
Is there any way to be sure that the browsers are separately telling screen readers that a term tag is a term tag, and a definition tag is a definition tag? When I look in the information JAWS 15 and NVDA 2013.x shows, I seem to see the entire term and definition pair as one list item. I can't tell by looking at that information if the screen reader is being shown the term and the definition as two items that it is capable of splitting. I hope that that bit of rambling made sense.

Thanks.

Jim

-----Original Message-----
From: Ramón Corominas [mailto:listas@ramoncorominas.com]
Sent: Monday, February 10, 2014 4:41 PM
To: Ian Yang
Cc: w3c-wai-ig@w3.org
Subject: Re: HTML5 DL Element vs. WCAG 2.0 Success Criteria

Hi, Ian and all


 > 1) paired DT and DD have no way to be grouped so from the
 > perspective of meaningful HTML codes they aren't really "paired";

In principle, the spec clearly states how the "grouping" shoukd be
deduced by the User Agent (and therefore passed to the AT, although this
is something not so clear) [1].

Basically, any <dt> followed by <dd> assume that the <dd> elements are
associatedto it. If the <dl> starts with a <dd>, it is assummed that
this <dd> is "orfan" and has no associated "term"; and if the list ends
with a <dt>, it is assummed that this <dt> has no "definitions".

Therefore, User Agents have clear rules that can follow in order to
associate any <dt> with their corresponding <dd>. Of course, it can
happen that a UA does not follow these rules, but this is a UA bug, not
a problem in the spec. And I agree with Steve that, if screen readers
start to support <dl>, maybe it is a good structure to use in certain
situations.


 > 2) web developers are forced to use other two more inappropriate list
 > elements like UL or OL because the lack of list item inside DL causes
 > inconvenience when it comes to styling, or they have to resort to
 > javascripting to dynamically add <li role="presentation"></li> into DL
 > which doesn't work in non-javascript environment.

Maybe I haven't understood this, but I think you can do it using sibling
selectors such as ~ and +.

For example, with the following list:

<dl>
   <dt>Previous version</dt>
     <dd>http://www.w3.org...</dd>
   <dt>Editors</dt>
     <dd>Ben</dd>
     <dd>Michael</dd>
     <dd>Loretta</dd>
     <dd>Gregg</dd>
</dl>


You can use the following CSS:

dt ~ dd {
   apply styles to every <dd> that has a <dt> ("named group");
}
dt ~ dd + dd {
   apply/overwrite styles from 2nd <dd> of a named group;
}

You can also use first-child and last-child to cover those "edge cases"
mentioned in the spec (<dt> without <dd> and <dd> without <dt>):

dl dt:last-child { <dt> is the last child of the list, no <dd> }
dl dd:first-child { the first child is a <dd> with no <dt> }
dl dd:first-child + dd { siblings of the previous <dd> }


Please let me know if this solves your concerns.

Regards,
Ramón.

[1] http://www.w3.org/TR/html5/grouping-content.html#the-dl-element



________________________________

This e-mail and any attachments to it are confidential and are intended solely for use of the individual or entity to whom they are addressed. If you have received this e-mail in error, please notify the sender immediately and then delete it. If you are not the intended recipient, you must not keep, use, disclose, copy or distribute this e-mail without the author's prior permission. The views expressed in this e-mail message do not necessarily represent the views of Highmark, its diversified business, or affiliates.

Received on Tuesday, 11 February 2014 16:50:44 UTC