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.
- 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 | Beschreibung | Umsetzung auf dieser Website |
|---|---|---|
| 1.4.3 Kontrast (Minimum) | Text muss mindestens ein Kontrastverhältnis von 4.5:1 zum Hintergrund aufweisen. | Der gesamte Text der Website wurde geprüft, um dieses Verhältnis in Light- und Dark Mode sicherzustellen. |
| 1.4.11 Nicht-Text Kontrast | 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 | 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 | 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 | 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 | 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. |
| 4.1.2 Name, Rolle, Wert | 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. |
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