Barrierefreiheitserklärung
Ich bin bestrebt, meine Website für jeden zugänglich zu machen und ein inklusives Nutzererlebnis zu bieten. Diese Website wurde mit dem Ziel entwickelt, die Richtlinien für Barrierefreiheit im Web-Content (Web Content Accessibility Guidelines, WCAG 2.2 Level AA) so weit wie möglich zu erfüllen.
Konformitätsstatus
Der Status dieser Website ist **weitgehend konform** mit den WCAG 2.2 Level AA Standards.
**Weitgehend konform** bedeutet, dass die meisten Teile des Inhalts die Barrierefreiheitsrichtlinien erfüllen; es können jedoch einige geringfügige Mängel bestehen (z.B. dekorative Elemente mit geringem Kontrast), wo strenge Konformität den Design-Stil unverhältnismäßig beeinträchtigt hätte.
Technische Spezifikationen und Standards
Folgende Technologien und Standards wurden angewandt, um die Konformität zu gewährleisten:
- Technologie: HTML5, CSS3 (Tailwind CSS, Svelte/TypeScript)
- Farbmodell: Verwendung von OKLCH-Farbräumen für präzise, augenschonende und konsistente Kontrastberechnungen in allen Farbschemata. Alle Text-Farbpaare wurden auf relative Leuchtkraft gegen die WCAG 2.2 Schwellenwerte geprüft.
- Design-Standard: Die gesamte Benutzeroberfläche (UI) wurde unter Berücksichtigung der WCAG 2.2 AA-Kriterien für Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit entwickelt.
Wichtigste umgesetzte Kriterien
| WCAG Erfolgskriterium | Level | Beschreibung | Umsetzung auf dieser Website |
|---|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | Text muss mindestens ein Kontrastverhältnis von 4.5:1 zum Hintergrund aufweisen. | Der gesamte Text der Website wurde rechnerisch geprüft (OKLCH → relative Leuchtkraft vs. 4.5:1-Schwelle) und erfüllt das Verhältnis in Light- und Dark Mode, z.B.: Fließtext auf Karte 8,3:1 (Light) / 7,3:1 (Dark), Muted-Text auf Hintergrund 7,9:1 (Light) / 7,8:1 (Dark), Haupttext auf Hintergrund 16,1:1 (Light) / 16,8:1 (Dark). |
| 1.4.11 Nicht-Text Kontrast | AA | Visuelle Komponenten von Bedienelementen und Zuständen müssen ein Kontrastverhältnis von mindestens 3:1 zum angrenzenden Hintergrund aufweisen. | Alle interaktiven Komponenten (Buttons, Links, Fokusringe) erfüllen oder überschreiten diesen Kontrastwert. |
| 2.1.1 Tastatur | A | Alle Funktionen des Inhalts müssen über eine Tastatur bedienbar sein. | Die gesamte Navigation, alle Buttons und interaktiven Elemente sind vollständig und logisch sequenziert über die Tastatur zugänglich. |
| 2.4.7 Fokus sichtbar | AA | Jede Benutzeroberfläche muss einen sichtbaren Fokusindikator aufweisen. | Beim Navigieren über die Tastatur (Tab-Taste) wird ein klar definierter outline (Fokus-Ring) um alle interaktiven Elemente angezeigt. |
| 2.5.3 Beschriftung im Namen | A | Der zugängliche Name eines UI-Elements muss den sichtbaren Text des Elements enthalten. | Redundante visuelle Informationen (z.B. Tastenkürzel neben einem Button) werden mit aria-hidden="true" ausgeblendet, um eine klare
und präzise Ausgabe für Screenreader zu gewährleisten. |
| 2.3.3 Animationen aus Interaktionen | AAA | Animationen, die durch Benutzerinteraktionen ausgelöst werden, können deaktiviert werden. | Visuelle Effekte werden über die Media Query @media (prefers-reduced-motion: reduce) für Nutzer mit Empfindlichkeiten deaktiviert. |
| 1.1.1 Nicht-Text-Inhalt | A | Alle Nicht-Text-Inhalte müssen eine Textalternative (Alt-Text) bieten. | Bilder und Avatar sind mit beschreibenden alt-Texten versehen; rein dekorative Icons sind mit aria-hidden="true" markiert. |
| 1.3.1 Info und Beziehungen | A | Informationen, Struktur und Beziehungen müssen programmatisch bestimmbar sein. | Semantische HTML-Elemente (h1-h6, section, table, blockquote) und korrekt gesetzte aria-labelledby sorgen für eine klare Struktur
für Screenreader. |
| 1.4.4 Textvorsatz | AA | Text muss ohne Verlust von Inhalt oder Funktionalität auf 200 % vergrößerbar sein. | Relative Einheiten (rem, clamp()) statt fixer Pixelgrößen
ermöglichen ein verlustfreies Zoomen. |
| 2.4.4 / 2.4.9 Linkzweck | A / AAA | Der Zweck jedes Links muss aus dem Linktext oder dem Kontext ersichtlich sein. | Links besitzen aussagekräftige Texte (z.B. „LinkedIn-Profil") sowie aria-label und werden für externe Ziele mit rel="noopener" gekennzeichnet. |
| 3.1.1 Sprache der Seite | A | Die Hauptsprache der Seite muss programmatisch bestimmbar sein. | Das <html lang>-Attribut wird
korrekt auf Deutsch bzw. Englisch gesetzt. |
| 3.2.2 Bei Eingabe | A | Das Ändern von Einstellungen darf keinen unerwarteten Kontextwechsel auslösen. | Formulare und Umschalter (z.B. Light/Dark-Mode) ändern Werte erst nach expliziter Bestätigung, nicht beim Fokus oder Tippen. |
| 4.1.2 Name, Rolle, Wert | A | Alle interaktiven Komponenten müssen semantisch korrekt programmiert sein. | Es wird auf korrekte HTML-Strukturen und die Verwendung von <button> anstelle von <div role="button"> geachtet. |
| 4.1.3 Statusmeldungen | AA | Statusmeldungen müssen von Screenreadern angesagt werden, ohne den Fokus zu verschieben. | Meldungen verwenden role="status" bzw. aria-live, damit sie automatisch vorgelesen
werden. |
Feedback und Kontakt
Ich bin ständig bemüht, die Barrierefreiheit dieser Website zu verbessern. Sollten Sie beim Navigieren oder bei der Nutzung der Inhalte auf Hindernisse stoßen oder Verbesserungsvorschläge haben, kontaktieren Sie mich bitte direkt.
Kontakt: info@ruben-sprengel.de