Befunde
7 Optimierungspotenziale identifiziert – keine kritischen oder schwerwiegenden Fehler. Die Website ist bereits auf einem hervorragenden Niveau.
0 Kritisch
0 Schwerwiegend
3 Leicht
3 Hinweis
1 Anmerkung
Gold-Akzentfarbe verfehlt AAA-Kontrast auf weißem Hintergrund
Die Klasse .headline-accent nutzt --color-gold: #b8920e als Textfarbe auf dem hellen Seitenhintergrund (#fafbfc). Das Kontrastverhältnis beträgt ca. 4.6:1 – ausreichend für AA (Großtext), aber unter dem AAA-Minimum von 7:1 für regulären Text. Im Kommentar (Zeile 524) wird korrekt auf das niedrigere Verhältnis hingewiesen, die Farbe wird aber dennoch für den Akzent-Span in der H1 verwendet, der mit clamp() auch kleiner als 18pt rendern kann.
Empfehlung
Gold auf #8a6d00 abdunkeln (≈ 7.2:1 auf #fafbfc) oder den Akzent-Span auf Viewports < 48rem auf --color-text zurückfallen lassen, damit AAA auf allen Schriftgrößen gesichert ist.
Kontakt-Meta-Labels mit niedrigem Kontrast auf dunklem Hintergrund
Die Labels „E-Mail", „Standort", „Antwortzeit" in der Kontaktsektion nutzen rgba(255, 255, 255, 0.5) auf dem #1a252f-Hintergrund (Zeile 1177). Das ergibt ein Kontrastverhältnis von ca. 4.1:1 – unter dem AAA-Zielwert von 7:1. Da diese Labels rein dekorativ als Kategorie-Beschriftungen fungieren und die eigentliche Information (E-Mail-Adresse, Ort) in voller Farbe dargestellt wird, ist das funktional unproblematisch, verfehlt aber den eigenen AAA-Anspruch.
Empfehlung
Opacity auf 0.75 oder höher anheben → ergibt ca. 8:1 und erfüllt AAA zuverlässig.
Mobile-Navigation: Unvollständiger Focus-Trap
Die Mobile-Navigation ist als role="dialog" aria-modal="true" deklariert (Zeile 1508–1509), was korrekt ist. Allerdings fehlt ein programmatischer Focus-Trap: Ein Tastaturnutzer kann mit Tab über das letzte Element hinaus in den dahinterliegenden Seiteninhalt navigieren. Die Escape-Taste schließt den Dialog korrekt, aber WCAG 2.4.3 (Focus Order) und Best Practices für modale Dialoge verlangen, dass der Fokus innerhalb des geöffneten Dialogs zirkuliert.
Empfehlung
Focus-Trap-Logik im JS ergänzen: Alle fokussierbaren Elemente im Dialog ermitteln, beim Vorwärts-Tab am letzten Element auf das erste springen (und umgekehrt bei Shift+Tab). Alternativ das native <dialog>-Element nutzen, das den Focus-Trap browserintern handhabt.
Redundante ARIA-Landmark-Rollen
Das <header>-Element trägt ein explizites role="banner" (Zeile 1466) und das <footer>-Element ein explizites role="contentinfo" (Zeile 2285). Diese Rollen sind bei nativen HTML5-Elementen auf oberster Ebene bereits implizit vorhanden. Gemäß dem „No ARIA is better than bad ARIA"-Prinzip und der ARIA-in-HTML-Spezifikation sollten redundante Rollen entfernt werden, um die Codebasis sauber zu halten.
Empfehlung
role="banner" und role="contentinfo" ersatzlos entfernen. Die Semantik bleibt durch die nativen Elemente vollständig erhalten.
Submit-Button initial deaktiviert ohne sichtbare Erklärung
Der Submit-Button des Kontaktformulars startet mit dem Attribut disabled (Zeile 2258). Für sehende Nutzer ist der Grund nicht ersichtlich – es fehlt ein sichtbarer Hinweis wie „Bitte füllen Sie alle Pflichtfelder aus" oder die Aktivierung per JavaScript, sobald alle Pflichtfelder befüllt sind. Screenreader-Nutzer erhalten lediglich die Information, dass der Button deaktiviert ist, aber nicht warum.
Empfehlung
Entweder den Button immer aktiv lassen und die Validierung erst beim Submit auslösen (aktuelle JS-Logik unterstützt das bereits), oder einen sichtbaren Hinweistext unter dem Button ergänzen: <p class="form-hint">Bitte füllen Sie die Pflichtfelder aus, um den Button zu aktivieren.</p>
Externe Links ohne konsistenten Hinweis für Screenreader
Einige Links öffnen externe Seiten über target="_blank" (z.B. Friendly Captcha, Datenschutzseiten). Während rel="noopener noreferrer" korrekt gesetzt ist, fehlt ein konsistenter Screenreader-Hinweis, dass diese Links in einem neuen Tab öffnen. Sehende Nutzer haben keine visuelle Indikation (kein externes-Link-Icon).
Empfehlung
Screenreader-Hinweis als <span class="sr-only">(öffnet in neuem Tab)</span> an jeden target="_blank"-Link anhängen. Optional ein kleines externes-Link-Icon für sehende Nutzer ergänzen.
Ungenutzter CSS-Block: .cta-banner
Die CSS-Klassen .cta-banner, .cta-banner-inner, .cta-banner-actions etc. (Zeilen 930–973) sind im Stylesheet definiert, werden aber nirgends im HTML referenziert. Ungenutzter Code erhöht die Dateigröße (ca. 1,2 KB) und kann bei zukünftiger Wartung zu Verwirrung führen.
Empfehlung
CSS-Block entfernen oder auskommentieren, sofern die CTA-Banner-Sektion nicht in einer zukünftigen Iteration geplant ist.
