{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "sprunglinks-landmarken",
 "name": "Sprunglinks und Landmarken",
 "name_en": "Designed skip links and clear landmark regions",
 "kurz": "Gestaltete Sprunglinks erscheinen erst beim ersten Tab und führen direkt zu Inhalt, Suche oder Spendenformular; darunter ist die Seite in benannte Landmarken gegliedert, die eine Karte sichtbar macht.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "funktional",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ganz oben im Dokument stehen ein bis drei Sprunglinks („Zum Inhalt“, „Zur Suche“, „Zum Spendenformular“). Sie sind unsichtbar, bis jemand mit der Tastatur hineintabbt, und erscheinen dann gestaltet in der Markensprache. Darunter ist die Seite in klare Landmarken gegliedert: header (banner), nav mit eigenem Namen, search, main, aside (complementary), ein benanntes Formular und footer (contentinfo). Screenreader springen damit direkt zu den Bereichen, Tastaturnutzer überspringen die Navigation.",
  "warum_es_wirkt": "Wer mit Tastatur oder Schalter navigiert, muss sonst bei jeder Seite durch Logo, Menü und Suche tabben. Ein Sprunglink spart das. Landmarken geben Screenreadern ein Inhaltsverzeichnis der Seite. Gestaltet statt versteckt zeigt der Sprunglink außerdem, dass die Marke an alle gedacht hat.",
  "wann_einsetzen": "Auf jeder Seite mit wiederholtem Kopf und Navigation. Das Muster gehört zur Basis jedes Rezepts. Weitere Sprungziele nur für Bereiche, die viele direkt suchen (Suche, Spenden, Termin, Warenkorb).",
  "wann_nicht": "Nicht mehr als drei Sprungziele, sonst wird die Leiste selbst zum Hindernis; meist reicht „Zum Inhalt“. Keine Landmarken für jede Kleinigkeit: zu viele region- oder nav-Bereiche entwerten die Liste. Sprunglinks nie mit display:none oder hidden verstecken, sonst sind sie nicht mehr erreichbar.",
  "varianten": [
   "Sprungmenü mit bis zu drei Zielen als Leiste am oberen Rand",
   "Einzelner Sprunglink „Zum Inhalt“ als Pille links oben",
   "Sprunglink innerhalb eines Consent-Banners erst nach dem Banner (GOV.UK-Hinweis)",
   "Landmarken-Karte als Entwicklungs-Overlay, das Rolle und Namen jeder Landmarke einblendet"
  ],
  "umsetzung": "Erstes Element in <body>, nicht in nav oder header: ein Block mit Liste <a href=\"#inhalt\">Zum Inhalt</a>, <a href=\"#suchfeld\">Zur Suche</a>, <a href=\"#spenden\">Zum Spendenformular</a>. Versteckt per translate: 0 -120 %, sichtbar bei .sprung:focus-within (200 ms, cubic-bezier(0.645, 0.045, 0.355, 1)). Nie display:none, hidden oder visibility:hidden. Ziele: <main id=\"inhalt\" tabindex=\"-1\">, das Suchfeld selbst, <form id=\"spenden\" tabindex=\"-1\" aria-labelledby>. Ein kleines Script setzt nach dem Klick den Fokus aufs Ziel (wie GOV.UK seit v4). scroll-margin-top auf alle Ziele, damit ein fester Kopf sie nicht verdeckt; den Kopf nur fest machen, wenn genug Platz ist (min-height: 500px). Landmarken: <header>, <nav aria-label=\"Hauptnavigation\">, <search>, <main>, <form> mit Namen, <aside> mit Namen auf oberster Ebene, <footer>, zweite nav mit eigenem Namen. Die Landmarken-Karte der Demo liest Rolle und Namen aus dem DOM und ist aria-hidden; im Kundenprojekt entfällt sie.",
  "mobil": "Touch-Nutzer sehen die Sprunglinks nicht, Tastatur- und Schalternutzer auf dem Telefon schon: dann stapeln sie sich in voller Breite. Fester Kopf nur bei genug Höhe.",
  "reduzierte_bewegung": "Der Sprunglink erscheint ohne Gleiten sofort; Scrollen zum Ziel ohne smooth.",
  "barrierefreiheit": "2.4.1 Umgehen von Blöcken (A): Sprunglink zum Hauptinhalt als erstes fokussierbares Element. 1.3.1 Info und Beziehungen (A): Landmarken über native Elemente; jede nav mit eigenem Namen; aside auf oberster Ebene; form nur mit Namen eine Landmarke. 2.4.3 Fokusreihenfolge (A): Nach dem Sprung startet Tab im Ziel (tabindex=\"-1\"). 2.4.7 Fokus sichtbar (AA): 3 px outline, auch im Kontrastmodus sichtbar, weil outline statt box-shadow. 2.4.11 Fokus nicht verdeckt (AA): scroll-margin-top unter dem festen Kopf, Kopf nur fest bei genug Höhe. 1.4.3 Kontrast (AA): Sprunglink weiß auf #002e6d, Spenden-Text #222520 auf #ffca0a. 1.4.11 Nicht-Text-Kontrast (AA): Fokusrahmen #002e6d auf Weiß und Weiß auf #002e6d. 2.5.8 Zielgröße (AA): Links mindestens 44 px hoch. 3.1.2 Sprache von Teilen (AA): Link „Serbsce“ mit lang=\"hsb\". Die Landmarken-Karte ist eine reine Erklärhilfe und für Screenreader ausgeblendet."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.645, 0.045, 0.355, 1)",
  "dauer_ms": "200",
  "stagger_ms": "",
  "distanz": "translateY -120 % → 0",
  "sonstiges": "Kurve und Dauer aus dem Rezept verein-nonprofit-wirkung (Ocean Cleanup easeInOutCubic, .2s); Sprunglink-Verhalten nach GOV.UK und WebAIM",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept verein-nonprofit-wirkung (bewegung)"
 },
 "kurve": {
  "bezier": [
   0.645,
   0.045,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.645, 0.045, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Skip link",
   "url": "https://design-system.service.gov.uk/components/skip-link",
   "auszeichnung": "",
   "beobachtung": "Sprunglink bleibt unsichtbar, bis er per Tastatur fokussiert wird; steht direkt nach <body>, nicht in nav oder header; bei Cookie-Banner danach. Seit v4.0.0 verschiebt ein Script den Fokus auf das Ziel; v5.14.0 (Jan. 2026) korrigiert den Fokus-Stil im Kontrastmodus.",
   "art": "artikel"
  },
  {
   "seite": "WebAIM: Skip Navigation Links",
   "url": "https://webaim.org/techniques/skipnav/",
   "auszeichnung": "",
   "beobachtung": "Link außerhalb des Bildschirms platzieren und bei Fokus deutlich sichtbar machen; nicht display:none oder hidden; meist reicht ein einzelner Sprunglink; Ziel ist das main-Element über seine id.",
   "art": "artikel"
  },
  {
   "seite": "W3C WAI-ARIA APG: Landmark Regions",
   "url": "https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/",
   "auszeichnung": "",
   "beobachtung": "Alle wahrnehmbaren Inhalte gehören in eine Landmarke; mehrere navigation-Landmarken brauchen je einen eigenen Namen; banner und contentinfo nur auf oberster Ebene; search statt form für die Suche; form und region brauchen einen Namen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "WebAIM: Skip Navigation Links",
   "url": "https://webaim.org/techniques/skipnav/"
  },
  {
   "titel": "W3C WAI-ARIA APG: Landmark Regions",
   "url": "https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/"
  },
  {
   "titel": "GOV.UK Design System: Skip link",
   "url": "https://design-system.service.gov.uk/components/skip-link"
  }
 ],
 "kombinierbar_mit": [
  "sticky-shrink-header",
  "native-popover-dropdowns",
  "gleitender-indikator",
  "mega-footer-sitemap",
  "consent-banner-gestaltet"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Quellen am 01.11.2026 per WebFetch geprüft (GOV.UK, WebAIM, W3C APG).",
   "Kurve und Dauer stammen nicht aus einer Sprunglink-Messung, sondern aus dem Rezept verein-nonprofit-wirkung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Gestaltete Sprunglinks erscheinen erst beim ersten Tab und führen direkt zu Inhalt, Suche oder Spendenformular; darunter ist die Seite in benannte Landmarken gegliedert, die eine Karte sichtbar macht.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.645, 0.045, 0.355, 1) (easeInOutCubic aus dem Rezept verein-nonprofit-wirkung)",
   "dauer_ms": 200,
   "distanz_leiste": "translateY -120 % → 0 (Variante Drei Ziele, Leiste am oberen Rand)",
   "distanz_pille": "translateY calc(-100% - 24px) → 0 (Variante Nur „Zum Inhalt“, Pille 12 px vom Rand)",
   "ausloeser_css": ".sprung:focus-within { translate: 0 0 } (nie display:none oder visibility:hidden)",
   "fokusrahmen": "outline 3px, outline-offset 3px; auf Marke #002e6d weiß, sonst #002e6d; Sprunglinks über :focus, übrige Elemente über :focus-visible",
   "ziel": "main und form mit tabindex=\"-1\"; scroll-margin-top calc(72px + 16px); Ziel blitzt 1400 ms auf (outline-color #002e6d → transparent, Halt bis 55 %)",
   "kopf": "position: sticky nur bei (min-width: 821px) and (min-height: 500px)",
   "trefferflaeche": "Sprunglinks, Navigation und Footer-Links min-height 44px",
   "landmarken": "header (banner), nav aria-label=\"Hauptnavigation\", search aria-label=\"Website\", main#inhalt, form aria-labelledby (form), aside aria-labelledby (complementary), footer (contentinfo), nav aria-label=\"Rechtliches\"",
   "farben": "Marke #002e6d, Fläche #edf5fa, Text #222520, Signal #ffca0a nur für Spenden (Text #222520)",
   "schriften": "Big Shoulders 800 Versal (Titel), Archivo (Text), Geist Mono (Etiketten)",
   "reduziert": "Sprunglink ohne Gleiten, Ziel-Rahmen ohne Ausblenden, kein smooth scroll, Wellen stehen"
  },
  "ausloeser": "klick",
  "touch": "Touch-Nutzer sehen die Sprunglinks nie, weil sie nur bei Tastaturfokus erscheinen; mit externer Tastatur stapeln sie sich unter 520 px untereinander in voller Breite. Der Kopf ist auf dem Telefon nicht fest. Die Landmarken-Karte funktioniert auch per Tippen im Pult.",
  "reduziert": "Sprunglinks erscheinen ohne Gleiten, das Ziel behält seinen Rahmen statt ihn auszublenden, Sprünge ohne weiches Scrollen, die Wellen im Bild stehen still.",
  "korrekturen": {
   "umsetzung": "Erstes Element in <body>, nicht in nav oder header: ein Block mit Liste <a href=\"#inhalt\">Zum Inhalt</a>, <a href=\"#suchfeld\">Zur Suche</a>, <a href=\"#spenden\">Zum Spendenformular</a>. Versteckt per translate: 0 -120 %, sichtbar bei .sprung:focus-within (200 ms, cubic-bezier(0.645, 0.045, 0.355, 1)). Nie display:none, hidden oder visibility:hidden. Ziele: <main id=\"inhalt\" tabindex=\"-1\">, das Suchfeld selbst, <form id=\"spenden\" tabindex=\"-1\" aria-labelledby>. Ein kleines Script setzt nach dem Klick den Fokus aufs Ziel (wie GOV.UK seit v4). scroll-margin-top auf alle Ziele, damit ein fester Kopf sie nicht verdeckt; den Kopf nur fest machen, wenn genug Platz ist (min-height: 500px). Landmarken: <header>, <nav aria-label=\"Hauptnavigation\">, <search>, <main>, <form> mit Namen, <aside> mit Namen auf oberster Ebene, <footer>, zweite nav mit eigenem Namen. Die Landmarken-Karte der Demo liest Rolle und Namen aus dem DOM und ist aria-hidden; im Kundenprojekt entfällt sie.",
   "mobil": "Touch-Nutzer sehen die Sprunglinks nicht, Tastatur- und Schalternutzer auf dem Telefon schon: dann stapeln sie sich in voller Breite. Fester Kopf nur bei genug Höhe.",
   "barrierefreiheit": "2.4.1 Umgehen von Blöcken (A): Sprunglink zum Hauptinhalt als erstes fokussierbares Element. 1.3.1 Info und Beziehungen (A): Landmarken über native Elemente; jede nav mit eigenem Namen; aside auf oberster Ebene; form nur mit Namen eine Landmarke. 2.4.3 Fokusreihenfolge (A): Nach dem Sprung startet Tab im Ziel (tabindex=\"-1\"). 2.4.7 Fokus sichtbar (AA): 3 px outline, auch im Kontrastmodus sichtbar, weil outline statt box-shadow. 2.4.11 Fokus nicht verdeckt (AA): scroll-margin-top unter dem festen Kopf, Kopf nur fest bei genug Höhe. 1.4.3 Kontrast (AA): Sprunglink weiß auf #002e6d, Spenden-Text #222520 auf #ffca0a. 1.4.11 Nicht-Text-Kontrast (AA): Fokusrahmen #002e6d auf Weiß und Weiß auf #002e6d. 2.5.8 Zielgröße (AA): Links mindestens 44 px hoch. 3.1.2 Sprache von Teilen (AA): Link „Serbsce“ mit lang=\"hsb\". Die Landmarken-Karte ist eine reine Erklärhilfe und für Screenreader ausgeblendet."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Spreewacht e. V. aus Bautzen (Flussreinigung, Uferpatenschaften), Sprachwechsel „Serbsce“ für das sorbische Publikum. Eigene SVG-Silhouette der Stadt über der Spree mit Sammelboot. Die Vorführung schaltet die Landmarken-Karte ein, tabbt durch die Sprunglinks (simulierter Fokus, weil Vorschau-iframes keinen echten Fokus haben), springt per Enter ins Spendenformular und geht die acht Landmarken wie mit der Screenreader-Taste D der Reihe nach durch. Die Demo-Steuerung ist eine eigene region und wird in der Karte bewusst nicht gezeigt. Quellen: design-system.service.gov.uk, webaim.org, w3.org/WAI/ARIA/apg. AD-Review 02.11.2026: Note 5. Nachgebessert: Suchfeld schrumpft im Kopf (vorher 18 px Querscrollen bei 320 px), Suchen-Knopf mit Kante im Kontrastmodus, Suchfeld 16ch statt abgeschnittenem Platzhalter.",
  "varianten": [
   {
    "id": "menue",
    "name": "Drei Ziele",
    "wann": "Seiten mit Suche und einem Hauptziel, das viele direkt ansteuern (Spenden bei Vereinen, Termin bei Praxen, Warenkorb im Shop).",
    "werte": {
     "ziele": "Zum Inhalt, Zur Suche, Zum Spendenformular",
     "form": "Leiste über die volle Breite, #002e6d, Links als Pillen mit Nummer",
     "distanz": "translateY -120 % → 0"
    }
   },
   {
    "id": "einzeln",
    "name": "Nur „Zum Inhalt“",
    "wann": "Standard für die meisten Seiten (WebAIM: ein Sprunglink reicht meist), vor allem bei kurzer Navigation ohne Suche.",
    "werte": {
     "ziele": "Zum Inhalt",
     "form": "Pille 12 px vom linken oberen Rand, min-height 48px, Schatten 0 10px 30px rgba(0,20,50,.28)",
     "distanz": "translateY calc(-100% - 24px) → 0"
    }
   }
  ]
 }
}