Zum Hauptinhalt springen

Für unterschiedliche Formen der Interaktion gestaltet

Barrierefreiheit ist Teil der Architektur.

Barrierefreiheit ist hier eine technische Anforderung daran, wie das Portfolio navigiert, bedient und dargestellt wird – getragen von gemeinsamen Komponenten und bei jeder Änderung mitgeprüft, nicht als abschließende Pflichtübung. Diese Seite beschreibt, was das umfasst, wie es geprüft wird und wo es noch Grenzen gibt.

Zuletzt geprüft: September 2026

Ziel

Ein Maßstab, kein Zertifikat

WCAG 2.1 auf Stufe AA ist der Maßstab, an dem neue Oberflächen entworfen und geprüft werden. Ein Ziel zu nennen ist etwas anderes, als es zu erfüllen – deshalb stehen hier beide Seiten.

WCAG 2.1Stufe AAEngineering-Ziel

Was das bedeutet

  • Oberflächen werden anhand der Erfolgskriterien von WCAG 2.1 Stufe AA entworfen und geprüft.
  • Gemeinsame Komponenten tragen diese Entscheidungen, sodass eine neue Oberfläche Tastatur-, Fokus- und Dialogverhalten übernimmt, statt es neu zu bauen.
  • Findet eine automatisierte Prüfung einen Verstoß, wird er als Fehler mit Verantwortlichkeit festgehalten – nicht stillschweigend aus der Prüfung ausgenommen.

Was es nicht bedeutet

  • Es ist keine Aussage über WCAG-Konformität. Eine vollständige, unabhängige Konformitätsprüfung wurde nicht durchgeführt.
  • Es ist weder eine Zertifizierung noch eine gesetzlich vorgeschriebene Erklärung zur Barrierefreiheit.
  • Es bedeutet nicht, dass jede Kombination aus Browser, assistiver Technologie und Einstellung getestet wurde.

Interaktion

Mehr als ein Weg, dieselbe Oberfläche zu bedienen

Jede der folgenden Bedienformen entspricht einer konkreten Umsetzung im Portfolio, nicht einer allgemeinen Absicht.

Tastatur

Der erste Tab-Stopp jeder Seite ist ein Link, der die Kopfzeile überspringt und direkt zum Hauptinhalt führt. Bedienelemente sind native Schaltflächen, Links und Formularfelder. Dialoge und Menüs schließen mit Escape, und in der Fokusansicht blätterst du mit den Pfeiltasten durch die Fotos.

Touch

Gesten sind Abkürzungen, nie der einzige Weg. Wischen blättert neben den Schaltflächen „Zurück“ und „Weiter“ durch die Fotos; das mobile Menü, das per Wischgeste schließt, schließt auch über seine Schaltfläche, mit Escape oder mit einem Tipp daneben. Schaltflächen haben die Mindesthöhe von 48 Pixeln aus KERN; eigene Touch-Elemente sind mindestens 44 Pixel groß.

Zeiger

Hover ist nie Voraussetzung. Die Aktionen, die beim Überfahren eines Galeriefotos erscheinen, erscheinen auch, wenn es den Tastaturfokus erhält.

Screenreader

Seiten verwenden die Bereiche Kopf, Hauptinhalt und Fußzeile sowie Abschnitte mit Überschriften. Gespräche mit den Assistenten sind als Protokoll ausgezeichnet; Fortschritt und Fehler werden über Statusbereiche angesagt.

Reduzierte Bewegung

Wenn dein System weniger Bewegung anfordert, fallen die gemeinsamen Animationszeiten weg, weiches Scrollen wird abgeschaltet und Einblendungen entfallen. Wischgesten funktionieren weiter, nur ohne animiertes Nachführen.

Zoom und Umbruch

Das Vergrößern per Fingergeste wird nie gesperrt. Layouts brechen bis zu 320 Pixel breiten Bildschirmen ohne seitliches Scrollen um.

Sprache

Die Assistenten nehmen Fragen auch gesprochen entgegen; ein Spracherkennungsmodell in deinem Browser schreibt sie mit. Eine Antwort wird erst vorgelesen, wenn du „Anhören“ wählst oder das automatische Vorlesen einschaltest.

In der Oberfläche

Wo es sichtbar wird

Konkrete Beispiele dafür, wie diese Bedienformen in den Komponenten stecken, die das ganze Portfolio nutzt.

Navigation

Unterhalb der Desktop-Breite öffnet sich die Navigation als nativer modaler Dialog: Die Seite dahinter ist inaktiv, der Fokus bleibt im Dialog, und beim Schließen kehrt er zur Menü-Schaltfläche zurück. Die aktuelle Seite wird angesagt, nicht nur hervorgehoben.

Dialoge

Modale Oberflächen bauen über die Dialogkomponenten von KERN auf dem nativen dialog-Element auf, sodass Fokusführung und Escape von der Plattform kommen statt aus eigenem Code.

Fokusansicht der Fotografie

Die Vollbildansicht eines Fotos ist ein nativer modaler Dialog mit benannten Schaltflächen für Zurück, Weiter und Schließen. Die aktuelle Position wird angesagt, und jedes Foto wird durch kuratierten Alternativtext beschrieben – ersatzweise durch Bildunterschrift und Titel.

KI-Gespräche

Die Gespräche zu Engineering und Fotografie teilen sich eine Hülle. Abgeschlossene Fragen und Antworten bilden ein Gesprächsprotokoll; die entstehende Antwort wird über einen einzigen höflichen Statusbereich angesagt, nicht als zweite Kopie.

Bewegung

Einblendungen sind progressiv: Inhalte stehen im Dokument, bevor eine Animation läuft. Nichts braucht JavaScript oder Bewegung, um sichtbar zu werden.

Sichere Bereiche

Fest positionierte Bedienelemente – die Navigationsinsel, das mobile Menü, die Steuerung der Fokusansicht und das Gesprächsfenster – sind so gebaut, dass sie auf Geräten mit gemeldeten sicheren Bereichen abgerundete Ecken und den Home-Indikator freihalten. Die randlose Darstellung auf diesen Geräten ist noch nicht eingeschaltet; sie wartet auf Tests mit echten Geräten.

Nachweise

Was geprüft wurde – und was nicht

Eine Erklärung zur Barrierefreiheit ist nur so glaubwürdig wie die Prüfungen dahinter. Das ist der aktuelle Stand, einschließlich der Lücken.

  • Statische Analyse

    Vorhanden

    Die empfohlenen Regeln von Biome, einschließlich seiner Barrierefreiheitsregeln, und die strikten Prüfungen von TypeScript laufen vor jedem Commit und bei jedem Pull Request.

  • axe-core-Prüfungen im Browser

    Teilweise

    Ein Prüfwerkzeug für gerenderte Zustände führt die Regeln von axe-core für WCAG 2 A und AA auf einer festen Auswahl von Seiten und Zuständen aus – Startseite, Fotogalerie und eine Engineering-Route – jeweils in mobiler und Desktop-Größe, und lässt auf keiner davon einen Verstoß zu. Es deckt diese Oberflächen ab, nicht die ganze Website, und läuft bei Bedarf statt bei jeder Änderung.

  • Repository-Tests

    Vorhanden

    Unit-Tests sichern Interaktionsverträge ab: Dialogsemantik, Platzierung von Live-Regionen, Fokusverhalten und Zweige für reduzierte Bewegung. Sie prüfen die Logik hinter der Oberfläche, nicht den gerenderten Barrierefreiheitsbaum.

  • Browser und Emulation

    Teilweise

    Layout, Überlauf, Tastatur und reduzierte Bewegung werden während der Entwicklung in Chromium in Smartphone-, Tablet- und Desktop-Größe geprüft. Emulation kann nicht alles nachbilden, was ein echtes Gerät tut.

  • Screenreader und echte Geräte

    Noch nicht

    Es gibt keine dokumentierte Testmatrix für Screenreader wie VoiceOver, NVDA oder TalkBack und keine dokumentierten Tests auf echten Smartphones und Tablets.

  • Unabhängige Prüfung

    Noch nicht

    Eine unabhängige Prüfung der WCAG-Konformität wurde nicht durchgeführt.

Bekannte Einschränkungen

  • Die Foto-Konstellation und die Karte sind visuelle, canvasbasierte Zugänge. Dieselben Fotos sind über Galerie, Suche und Fokusansicht erreichbar, die Visualisierungen selbst werden assistiven Technologien aber nicht vollständig beschrieben.
  • Fotobeschreibungen stammen aus kuratierten Metadaten und können visuelle Details weniger vollständig wiedergeben als das Bild selbst.
  • KI-Antworten können unvollständig oder falsch sein. Ihre Struktur ist barrierefrei; ihr Inhalt ist nur so gut wie die Belege dahinter.

Kontakt

Eine Barriere gefunden?

Wenn sich etwas in diesem Portfolio schwer oder gar nicht bedienen lässt, sag mir bitte Bescheid. Nenne die Seite, dein Vorhaben und – falls hilfreich – den verwendeten Browser oder die assistive Technologie.

Barriere per E-Mail melden

Rechtlicher Kontext

Dies ist ein persönliches und berufliches Portfolio. Es enthält weder Shop noch Checkout, Zahlungsabwicklung oder einen Dienst zum Abschluss von Verbraucherverträgen und scheint daher keine Dienstleistung im elektronischen Geschäftsverkehr im Sinne des Barrierefreiheitsstärkungsgesetzes (BFSG) anzubieten. Diese technische Einschätzung ist keine Rechtsberatung.

Diese Seite dokumentiert freiwillig den Ansatz des Portfolios zur Barrierefreiheit und bekannte Einschränkungen. Sie ist weder eine gesetzlich vorgeschriebene Erklärung zur Barrierefreiheit noch eine Zertifizierung oder Zusage rechtlicher Konformität.

Amtlicher Gesetzestext des BFSG

Weiterlesen