What would be prefered semantic and accessible markup for this iOS contact like divider list?
What would be prefered semantic and accessible markup for this divider list?
I'm using jQuery mobile for a project and it uses this mark-up
<ul data-role="listview" data-dividert开发者_如何学Pythonheme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
</ul>
I think for dividers (A,B,C...) HTML Heading tags should be used.
Definately not ul
since it is aplhabetical it should be either ol
with list-style-type:upper-alpha;
with nested list.
I would go with a html something like:
<ol>
<li>
<ul>
<li>Adam</li>
<li>Alan</li>
</ul>
</li>
</ol>
Sample: http://jsfiddle.net/easwee/8UUbh/5/
I would use a definition list
<dl data-role="listview" data-dividertheme="d" data-inset="true">
<dt data-role="list-divider">A</dt>
<dd>blblblaba</dd>
</dl>
I know that the titles are not definition titles, but its clear what elements are the dividers and what elements are the contents.
edit i think @easwee's solution is much better in a semantic point of view.
精彩评论