{"id":7,"date":"2025-08-06T17:01:04","date_gmt":"2025-08-06T17:01:04","guid":{"rendered":"https:\/\/d14t.nordsueddigital.de\/?p=7"},"modified":"2025-08-06T17:05:06","modified_gmt":"2025-08-06T17:05:06","slug":"der-toggle-button-fuer-ein-hamburger-menue-sollte-innerhalb-des-nav-tags-platziert-sein","status":"publish","type":"post","link":"https:\/\/d14t.nordsueddigital.de\/?p=7","title":{"rendered":"Der Toggle-Button f\u00fcr ein Hamburger-Men\u00fc sollte innerhalb des nav-Tags platziert sein"},"content":{"rendered":"\n

Navigationselemente sind wichtige Landmarks in einer Website. Screenreader k\u00f6nnen Landmarks einer Website auflisten, damit Nutzende von Assistive-Tech schneller zum gesuchten Inhalt kommen. Wenn in einer Seite nicht die richtigen semantischen Elemente verwendet werden, m\u00fcssen Keyboard-User bis zu dem Inhalt tabben, zu dem sie m\u00f6chten. Das kann nat\u00fcrlich gerade bei langen Seiten sehr umst\u00e4ndlich sein.<\/p>\n\n\n\n

Es ist also empfehlenswert passende semantische Elemente zu verwenden und diese bei Bedarf mit einem Label zu versehen.<\/p>\n\n\n\n

Problem bei schlecht strukturierten Hamburger Men\u00fcs<\/h2>\n\n\n\n

Ich sehe viele Websites, die auch Navigationselemente in Ans\u00e4tzen richtig einsetzen. Oft gibt es aber eine Einschr\u00e4nkung, die relativ leicht vermeidbar ist: Hamburger-Men\u00fcs verschwinden im eingeklappten Zustand aus der Liste der Landmarks, weil das ganze nav-Element ausgeblendet wird.<\/p>\n\n\n\n

Negatives Code-Beispiel<\/h2>\n\n\n\n

Der folgende Codeabschnitt zeigt die beschriebene Struktur:<\/p>\n\n\n\n

<button type=\"button\" aria-controls=\"menu\" aria-expanded=\"false\">Toggle Menu<\/button>\n<nav id=\"menu\" aria-label=\"Haupnavigation\" aria-hidden=\"true\" style=\"display: none;\">\n  <ul>\n    <li>\n      <a href=\"\/leistungen\">Leistungen<\/a>\n    <\/li>\n    <li>\n      <a href=\"\/ueber-uns\">\u00dcber uns<\/a>\n    <\/li>\n    <li>\n      <a href=\"\/kontakt\">Kontakt<\/a>\n    <\/li>\n  <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n
Das style-Attribut „display: none;“ sorgt daf\u00fcr, dass Screenreader die Navigation nicht in die Liste der „Orientierungspunkte“ aufnimmt.<\/p>\n\n\n\n
Screenreader Darstellung bei schlechter Umsetzung<\/h2>\n\n\n\n
Das folgende Bild zeigt das an einer echten Website:<\/p>\n\n\n\n
\"Orientierungspunkte-Liste<\/figure>\n\n\n\n
Sobald das Men\u00fc ausgeklappt wird, wird es wieder in der Liste angezeigt:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Im Idealfall w\u00fcrden Nutzende die Navigation aber auch finden, wenn sie eingeklappt ist.<\/p>\n\n\n\n
Optimierter Code<\/h2>\n\n\n\n
Das l\u00e4sst sich relativ einfach umsetzen, indem der Button zum ein- und ausklappen der Navigation innerhalb des nav-Tags platziert wird. Er steuert dann nicht mehr das Navigationselement, sondern nur noch die Liste darin. Damit bleibt die Navigation in allen Zust\u00e4nden Sichtbar und wird weiterhin als Orientierungspunkt angezeigt.<\/p>\n\n\n\n
Der folgende Code zeigt die Verbesserung:<\/p>\n\n\n\n
<nav aria-label=\"Haupnavigation\">\n  <button type=\"button\" aria-controls=\"menu\" aria-expanded=\"false\">Toggle Menu<\/button>\n  <ul id=\"menu\" aria-hidden=\"true\" style=\"display: none;\">\n    <li>\n      <a href=\"\/leistungen\">Leistungen<\/a>\n    <\/li>\n    <li>\n      <a href=\"\/ueber-uns\">\u00dcber uns<\/a>\n    <\/li>\n    <li>\n      <a href=\"\/kontakt\">Kontakt<\/a>\n    <\/li>\n  <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n
Es ist also eine relativ einfache Anpassung, um die Nutzbarkeit mit Assistive-Tech zu verbessern.<\/p>\n\n\n\n
Falls dir barrierefreie Navigation wichtig ist, empfehle ich dir auch, dich mit der richtigen Label-Vergabe bei Navigationen zu besch\u00e4ftigen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Navigationselemente sind wichtige Landmarks in einer Website. Screenreader k\u00f6nnen Landmarks einer Website auflisten, damit Nutzende von Assistive-Tech schneller zum gesuchten Inhalt kommen. Wenn in einer Seite nicht die richtigen semantischen Elemente verwendet werden, m\u00fcssen Keyboard-User bis zu dem Inhalt tabben, zu dem sie m\u00f6chten. Das kann nat\u00fcrlich gerade bei langen Seiten sehr umst\u00e4ndlich sein. Es […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-navigation"],"_links":{"self":[{"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":3,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d14t.nordsueddigital.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}