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

Received on Monday, 10 February 2014 21:41:37 UTC