Search code examples
csshtmlsemantic-markup

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?

enter image description here

I'm using jQuery mobile for a project and it uses this mark-up

<ul data-role="listview" data-dividertheme="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.


Solution

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