How to markup a ladder/draw

Question

I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.

Any ideas?

Answer 1

I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.

Answer 2

I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible

eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">

<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
    <li class="gameOne>
        <ol class="teams">
            <li class="home">Teamname1</li>
            <li class="visitors">Teamname2</li>  
        </ol> 
    </li>
</ul>

</li>
<li id="roundTwo">

</li>


<li id=final">
</li>

</ol>