Inklusiv by Design
Barrierefreiheit
UX-Philosophie
Design fuer alle
Dieses Portfolio wurde mit einer starken Ueberzeugung gebaut: Gutes Design ist Design, das fuer alle funktioniert. Barrierefreiheit ist kein Nachgedanke oder eine Checkliste, sie ist ein grundlegendes Designprinzip, das jede Entscheidung beeinflusst.
Als UX-Designer glaube ich, dass inklusives Design zu besseren Erfahrungen fuer alle Nutzer fuehrt. Jede hier implementierte Barrierefreiheits-Funktion spiegelt die gleiche Sorgfalt wider, die ich in jedes Kundenprojekt einbringe.
Tastaturnavigation
Jedes interaktive Element ist vollstaendig per Tastatur erreichbar.
- Skip-to-Content-Link zum direkten Sprung zum Hauptinhalt
- Sichtbare Fokusindikatoren auf allen interaktiven Elementen
- Logische Tab-Reihenfolge durch Navigation, Inhalte und Formulare
Screenreader-Unterstuetzung
Semantisches HTML und ARIA-Attribute stellen sicher, dass Screenreader alle Inhalte korrekt interpretieren.
- Landmark-Rollen (Navigation, Main) fuer einfache Seitenorientierung
- Beschreibende Aria-Labels auf Icon-Buttons (Menu, Theme, Sprache)
- Dekorative Icons mit aria-hidden markiert
- Formulareingaben mit Labels ueber htmlFor/id verknuepft
Farbkontrast
Helles und dunkles Theme sind nach WCAG-AA-Kontraststandards gestaltet.
- Helle und dunkle Themes mit kalibrierten Kontrastverhaeltnissen
- Semantische Farbtokens fuer konsistentes Theming
- Visuelle Indikatoren verlassen sich nicht allein auf Farbe
Mehrsprachige Unterstuetzung
Die gesamte Seite ist in drei Sprachen verfuegbar, mit dynamisch aktualisiertem HTML-lang-Attribut.
- Vollstaendige Uebersetzungen in Englisch, Franzoesisch und Deutsch
- Dynamisches html lang-Attribut fuer korrekte Aussprache durch Screenreader
Responsive & Adaptiv
Die Oberflaeche passt sich nahtlos von Mobil bis Desktop an.
- Mobile-first responsives Layout mit klappbarer Navigation
- Beruehrungsfreundliche Interaktionsziele (mindestens 44x44px)
Standards & Referenzen