/* * ============================================================ * pweg12-a11y.css * Barrierefreiheits-Ergänzung für pweg12.index01.de * CMS: TYPO3 · Template: es_template * * Einbinden im TYPO3-Backend unter: * Setup > page.includeCSS.a11y = fileadmin/a11y/pweg12-a11y.css * ODER direkt im per TypoScript-Constant: * page.headerData.100 = TEXT * page.headerData.100.value = * ============================================================ */ /* ── 0. DESIGN-TOKEN (Farben von pweg12.index01.de) ───────── */ :root { /* Fokusfarbe: kräftiges Blau – gut sichtbar auf hellem Hintergrund */ --a11y-focus-color: #005eb8; --a11y-focus-color: #f55e5e; --a11y-focus-width: 3px; --a11y-focus-offset: 3px; /* Besuchte Links: Lila – von Blau klar unterscheidbar */ --a11y-visited: #6b21a8; /* Skip-Link-Balken: Grün passend zum Paritätischen-Weg-Logo */ --a11y-skip-bg: #00703c; --a11y-skip-color: #ffffff; /* Aktiv-Indikator in der Hauptnavigation */ --a11y-nav-active: #005eb8; } /* ══════════════════════════════════════════════════════════════ * 1. SKIP-TO-CONTENT LINK * Wird per JS eingefügt (pweg12-a11y.js). * Erscheint erst, wenn der Nutzer Tab drückt. * ══════════════════════════════════════════════════════════════ */ #pweg12-skip-link { position: absolute; top: -9999px; left: 50%; transform: translateX(-50%); z-index: 9999; display: inline-block; padding: 0.65em 1.4em; background: var(--a11y-skip-bg); color: var(--a11y-skip-color) !important; font-size: 1rem; font-weight: 700; text-decoration: none !important; border-radius: 0 0 6px 6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: top 0.1s ease; } #pweg12-skip-link:focus { top: 0; outline: var(--a11y-focus-width) solid #fff; outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ * 2. GLOBALER FOKUS-RING * Gilt für alle interaktiven Elemente auf der Seite. * :focus-visible = nur Tastatur, nicht Mausklick. * ══════════════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important; outline-offset: var(--a11y-focus-offset) !important; border-radius: 3px; } /* Standard :focus für Browser ohne :focus-visible (Fallback) */ a:focus, button:focus { outline: var(--a11y-focus-width) solid var(--a11y-focus-color); outline-offset: var(--a11y-focus-offset); } /* ══════════════════════════════════════════════════════════════ * 3. INHALT-LINKS (Fließtext im Content-Bereich) * Zielt auf den TYPO3-Inhaltsbereich. * Typische TYPO3-Selektoren: .ce-bodytext, .frame, main * ══════════════════════════════════════════════════════════════ */ .ce-bodytext a, .frame-default a, main a, #content a, .content a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 2px; transition: background-color 0.12s ease; } .ce-bodytext a:hover, .frame-default a:hover, main a:hover, #content a:hover, .content a:hover { background-color: rgba(0, 94, 184, 0.08); text-decoration-thickness: 2.5px; } /* Besuchte Links deutlich hervorheben */ /* .ce-bodytext a:visited, .frame-default a:visited, main a:visited, #content a:visited, .content a:visited { color: var(--a11y-visited); } */ /* ══════════════════════════════════════════════════════════════ * 4. EXTERNE LINKS (werden per JS mit aria-label versehen) * ↗-Symbol via CSS content * ══════════════════════════════════════════════════════════════ */ /* ↗ */ /* a[data-a11y-extern]::after { content: " \2197"; font-size: 0.72em; vertical-align: super; margin-left: 1px; opacity: 0.65; pointer-events: none; } */ /* ══════════════════════════════════════════════════════════════ * 5. HAUPTNAVIGATION * TYPO3 Bootstrap-Template: nav.navbar, .navbar-nav, .nav-link * Fallback: header nav, .main-nav * ══════════════════════════════════════════════════════════════ */ /* Aktive Seite (aria-current="page" wird per JS gesetzt) */ nav a[aria-current="page"], .navbar-nav a[aria-current="page"], .nav-link[aria-current="page"] { font-weight: 700; position: relative; } /* nav a[aria-current="page"]::after, .navbar-nav a[aria-current="page"]::after, .nav-link[aria-current="page"]::after { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; background: var(--a11y-nav-active); border-radius: 3px 3px 0 0; } */ /* Hover-Zustand für Navigationlinks */ header nav a:hover, .navbar-nav a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ══════════════════════════════════════════════════════════════ * 6. SPRACHUMSCHALTER * Zweisprachig: Standardsprache / Leichte Sprache * ══════════════════════════════════════════════════════════════ */ [aria-label="Sprache wählen"] a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ══════════════════════════════════════════════════════════════ * 7. BREADCRUMB * ══════════════════════════════════════════════════════════════ */ [aria-label="Brotkrümelnavigation"] a, nav.breadcrumb a, .breadcrumb a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Trenner zwischen Breadcrumb-Einträgen (visuell, nicht Screenreader) */ [aria-label="Brotkrümelnavigation"] li + li::before, nav.breadcrumb li + li::before { content: "›"; margin: 0 6px; color: currentColor; opacity: 0.5; speak: none; } /* ══════════════════════════════════════════════════════════════ * 8. FOOTER-LINKS * ══════════════════════════════════════════════════════════════ */ footer a { text-decoration: underline; text-underline-offset: 2px; } footer a:focus-visible { outline: var(--a11y-focus-width) solid var(--a11y-focus-color); outline-offset: var(--a11y-focus-offset); } /* Scroll-to-Top-Button (Chevron SVG unten rechts) */ [aria-label="Zurück nach oben"]:focus-visible { outline: var(--a11y-focus-width) solid var(--a11y-focus-color); outline-offset: 6px; border-radius: 50%; } /* ══════════════════════════════════════════════════════════════ * 9. REDUZIERTE BEWEGUNG * ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════ * 10. DRUCK-STILE * Externe URLs beim Drucken anzeigen * ══════════════════════════════════════════════════════════════ */ @media print { a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; } a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; } }