Hallo Tassilo,
wie gesagt - ich weiß nicht wo diese ul/li/ul/li Hierarchie herkommt. Wenn Dir das jemand anderes empfohlen hat, dann gibt's sicherlich Gründe dafür. Ich habe nicht alle Threads mitgelesen, die hier zur Sturm-Eremitage gelaufen sind, und darum erzähle ich jetzt vielleicht etwas, das im Widerspruch zu Aussagen von anderen steht.
Vielleicht verstehe ich das ja auch nicht richtig, Accessibility lerne ich noch. Im Zweifelsfall könnten die Anderen deshalb kompetenter sein...
Aber soweit ich das verstanden habe, ist es so, dass role="tree" bedeutet: Das ist ein Baum. Dein äußerer Ulli ist aber ein Extrastiel, an dem der Baum wächst. Deswegen (und auf Grund von Beispielen, die Onkel Bing Googlesby mir zeigt) meine ich, dass der Stiel weg und die tree-Rolle ein Ebene nach unten kann, also dahin, wo Du derzeit role="group" hast. Übrigens: role="tree-item" finde ich nirgends, muss das eventuell role="treeitem" heißen?
Derzeit hast Du ein ul mit role="tree" und darunter zwei Ebenen von group Rollen. Dein Menü ist aber nicht dreistufig, sondern zweistufig. Deswegen müsste es so machbar sein:
<nav id="main-nav">
<button id="menu-button" aria-expanded="true">...</button>
<ul role="tree">
<li role="treeitem">
<a href="...">Aktuelles</a><button aria-expanded="..."></button>
<ul role="group">
<li role="treeitem"><a href="...">aktuelle Ausstellungen</a></li>
<li role="treeitem"><a href="...">Blog</a></li>
</ul>
</li>
<li role="treeitem">
<a href="...">Arbeiten</a><button aria-expanded="..."></button>
<ul role="group">
...
</ul>
</li>
</ul>
</nav>
Ganz wichtig finde ich, dass die Untermenüs kein div sind, sondern ebenfalls ein ul, und die Einträge darin li. Weil nur dann ein Screenreader daraus eine saubere Listenstruktur abliest.
Was mir zuerst nicht ganz klar war, ist dein aria-expanded am menu-button. Nach etwas Recherche habe ich aber gefunden, dass das ok ist, es fehlt aber was. Der Button selbst ist nicht expanded/collapsed, sondern der Menü-Baum. Deswegen musst Du dem Menü-Baum eine id geben und am Button mit aria-controls="id" angeben, welches Element expanded ist. Das ist etwas, das man gemäß W3C machen SOLL. Sie haben sogar ein Beispiel dazu. Wenn Du aria-controls nicht nutzen willst, dann müsstest Du das aria-expanded für die Submenüs auf die li Elemente legen. Den expanded-Zustand für den ganzen Baum würde ich auf das nav-Element legen, bin aber nicht sicher. Am nav Element hätte es den Vorteil, dass Du es zum Stylen des Hamburger-Buttons nutzen kannst. @Gunnar Bittersmann? Gehört der expanded-Zustand für's ganze Menü an den Baum oder an die Navigation?
Die class Zuweisungen KANN man machen, muss man aber nicht. Das tree-ul kannst Du im CSS mit #main-nav [role=tree] identifizieren, die li Elemente mit #main-nav [role=treeitem], die Untergruppen mit #main-nav [role=group]. Es würde etwas schwieriger, wenn Du zwei group-Ebenen hättest, dann KANN man mit class-Attributen arbeiten, es geht aber auch mit gezieltem Einsatz von Child-Kombinatoren (z.B. #main-nav > ul > li > [role=group] für die erste Group-Ebene). Diesen Kopf musst Du Dir aber nicht machen solange Du nur eine group-Ebene hast.
Rolf
--
sumpsi - posui - clusi
einsiedler
Rolf B
MudGuard
Gunnar Bittersmann
Matthias Apsel