Servus!

@Matthias Apsel Vielen Dank! Mit :focus-within funktioniert es jetzt so gut, wie es mit CSS halt geht.

@Felix Riesterer

ich habe jetzt nicht verstanden, wie diese Dinger auf mobilen Endgeräten zu bedienen sind, da ich dort weder Tab- noch sonstige Tasten nutzen kann - und hovern geht bekanntlich auch nicht.

Viele mobile Browser simulieren bei tap ein hover.

wenn also der Menüpunkt selbst kein Link ist, dann mag das alles wunderbar sein. Wenn nun aber der Menüpunkt selbst gleichzeitig ein Link ist, dann komme ich nicht an die weiteren Menüpunkte dran.

Ja, das und die fehlende Möglichkeit Tabs zu überspringen, sind der Nachteil von CSS-basierten Lösungen. Trotzdem habe ich dieses Tutorial lieber überarbeitet, um hier die Grundlagen zu erklären, anstatt ihn, wie Gunnar in seinem bewährt freundlichen Ton vorschlug vom Netz zu nehmen. Auch bei einer JavaScript-basierten Lösung wird die grundlegende Präsentation ja mit CSS erreicht.

Trotzdem freut es mich, dass du und Gunnar mal einer Meinung seid! :-)

Der Artikel verlinkt mehrfach auf das JavaScript-Tutorial, dass seit Dez. 2105 ein ToDo ist. Hier werde ich (jemand anderes findet sich ja wohl nicht mehr) die Problematik versuchen zu lösen. Danke an @Gunnar Bittersmann für den Link, da wird das Problem von Links mit aria-haspopup="true" gut erklärt.

Apropos jQuery: In Practical ARIA examples hatte auch Heydon jQuery verwendet.

@JürgenB Das mit den Aria-Attributen scheint auf den ersten Blick wegen der Vielzahl der möglichen Attribute verwirrend zu sein. Ich habe sie als Ersatz für Klassen schätzen gelernt. Die sollten ja nach ihrer Funktionalität benannt werden, und dass ist mit Aria-Attributen imho halt standardisiert worden. Man kann sie über den Attribut-Selektor genauso zum Styling heranziehen.

Was mir im Tutorial noch fehlt, ist der Hinweis, dass es gerade für mobile Seiten, aber auch am Desktop immer wichtiger wird, eine gute Struktur mit einfachen Menüpunkten anzustreben. Deshalb habe ich das Beispiel zum Flyout-Menü dringelassen, dass diese Problematik imho gut anspricht. Über die Platzierung lässt sich streiten

Den Exkurs des Ausblendens von Elementen würd ich lieber zum Image-Replacement / bzw. in einen eigenen Artikel packen; da fehlt imho noch ein Verweis auf hidden. @Gunnar Bittersmann In einer JS-basierten Lösung könnte ich die Submenüs ja mit hidden ausblenden - ausgeblendete Elemente sollen / müssen von Screenreadern ja erst gelesen werden, wenn sie eingeblendet werden. Heydon Pickering macht das auch so. (Wichtig ist, dass das hidden erst mit JS hinzugefügt wird).

Herzliche Grüße

Matthias Scharwies