Seiteninhalt richtig positionieren

[Rolf B]

Hallo ReinerG,

Ja, den Thread meinte ich.

Das Menu habe ich übernommen (kopiert) und etwas angepasst.

Es ist nicht unbedingt gut, was früher mal Stand der Technik war. Checkbox- oder Radiobutton-Hacks hat man früher oft verwendet, weil sie das Einblenden von Inhalten ohne JavaScript ermöglichen. Und dabei einen Teil der Seitenbesucher vielleicht nicht ganz ausgeschlossen, aber vor eine Hürde gestellt. Zugänglichkeit wird immer wichtiger und die Gesetze ändern sich. Irgendwann wird das Online stellen einer nicht barrierefreien Seite mit Gefängnis oder 3 Jahren Screenreader-Zwang vor unzugänglichen Webseiten bedroht sein…

<nav>
  <input type="checkbox" id="menuHack">
  <label for="menuHack"><!-- Menübutton-symbol --></label>
  <ul>
     <!-- Menü-Items
  </ul>
</nav>

nav ul {
   display: none;
}

nav input[type="checkbox"]:checked ~ ul {
   display: block;
}

Bei Dir ist es eine Radiogruppe, aber die Idee ist die Gleiche.

Problem ist: Assistenztechniken erkennen so keinen Zusammenhang zwischen Pseudo-Button und Menüliste, weshalb ein Nutzer von Assistenztechniken dadurch unnötig verwirrt wird. Eine Lösung mit echtem Button sowie aria-Attributen ist besser, braucht aber JavaScript. Die Popover-Lösung verspricht eine zugängliche Lösung rein mit HTML+CSS, ist aber in Safari und Firefox noch nicht fertig.

Rolf