HTML5 Semantik: TOC und <details>

[Gunther]

Hallo werte Selfgemeinde!

Ich tue mich immer noch etwas schwer mit den neuen HTML5 Elementen und dem Thema "Semantik".
Aktuell suche ich nach der/ einer "Lösung" für die Auszeichnung der TOC (table of content).

Bei meinen Recherchen bin ich u.a. auf die Verwendung des details Elementes gestoßen.

Das hat ja durchaus einige Vorteile, aktuell zumindest in den Browsern (Chrome + Safari 6+), die es bereits unterstützen.

Ein möglicher Aufbau sähe wie folgt aus:

<details id="toc" role="directory" aria-label="Table of contents">  
	<summary>Auf dieser Seite (TOC)</summary>  
		<ol>  
			<li><a href="#">...</a></li>  
			<li><a href="#">...</a></li>  
			<li><a href="#">...</a></li>  
		</ol>  
</details>

Das ist auch valide.

Mit diesem Markup wird kein Eintrag in der Outline erzeugt.
Dazu müsste man das Details-Element also z.B. noch in ein Section-Element stecken.

Oder, und das ist mein derzeitiger Favorit, man umschließt die Liste noch mit einem Nav-Element:

<details id="toc" role="directory" aria-label="Table of contents">  
	<summary>Auf dieser Seite (TOC)</summary>  
	<nav>  
		<h1>Table of contents</h1>  
		<ol>  
			<li><a href="#">...</a></li>  
			<li><a href="#">...</a></li>  
			<li><a href="#">...</a></li>  
		</ol>  
	</nav>  
</details>

Hierbei stellt sich mir dann u.a. die Frage, wohin dann mit WAI-ARIA Role-Attribut - zu dem Detail-Element, oder zu dem Nav-Element?

Meinungen, Vorschläge?

Gruß Gunther