开发者

What would be prefered semantic and accessible markup for this iOS contact like divider list?

开发者 https://www.devze.com 2023-03-23 12:12 出处:网络
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

What would be prefered semantic and accessible markup for this divider list?

What would be prefered semantic and accessible markup for this iOS contact like 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.

0

精彩评论

暂无评论...
验证码 换一张
取 消