Re: HTML5 DL Element vs. WCAG 2.0 Success Criteria

Hi Ramón,

Thanks for the explanation.

About styling issue, situations often varies. For example, I often have to
set each pair as an inline-block or a floated box, in such situations we
need a container for each pair, and we currently don't have that.


Kind Regards,
Ian Y.


On Tue, Feb 11, 2014 at 5:40 AM, Ramón Corominas
<listas@ramoncorominas.com>wrote:

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