Beim Aufbau unserer Website setzen wir auf eine saubere, semantisch korrekte HTML-Struktur. Überschriften, Absätze, Listen, Tabellen und Navigationsbereiche sind sinnvoll ausgezeichnet. So können assistive Technologien wie Screenreader die Inhalte zuverlässig interpretieren und die Seitenstruktur verständlich vermitteln.

Wir achten auf ausreichende Farbkontraste zwischen Texten und Hintergründen, sodass Inhalte auch bei eingeschränktem Sehvermögen gut lesbar bleiben. Unsere Gestaltung orientiert sich an den Kontrastanforderungen der WCAG 2.1 (Level AA), um eine optimale Zugänglichkeit für alle Nutzer:innen zu gewährleisten.

Alle relevanten Bilder und grafischen Bedienelemente auf unserer Website sind mit sinnvollen Alternativtexten versehen. Dadurch können auch Nutzer:innen mit Screenreader oder bei deaktivierter Bildanzeige die Inhalte vollständig erfassen. Dekorative Bilder sind korrekt als solche gekennzeichnet und werden von assistiven Technologien ignoriert, um die Verständlichkeit nicht zu beeinträchtigen.

Einsatz von ARIA-Attributen
Zur Verbesserung der Zugänglichkeit verwenden wir gezielt ARIA-Attribute (Accessible Rich Internet Applications), um interaktive Komponenten wie Akkordeons, Modale oder dynamische Inhalte für Screenreader verständlich zu machen. Dabei achten wir darauf, dass alle aria-label, aria-labelledby und aria-expanded-Attribute korrekt eingesetzt und mit vorhandenen Elementen verknüpft sind.

Unsere Seiten verwenden das lang-Attribut korrekt, um die Sprache der Inhalte eindeutig zu kennzeichnen (z. B. lang="de" für Deutsch). Dadurch können Screenreader und Suchmaschinen die Inhalte richtig interpretieren und vorlesen. Auch bei mehrsprachigen Inhalten verwenden wir gezielte Sprachangaben innerhalb einzelner Abschnitte, um Missverständnisse zu vermeiden.

Alle Formulare auf unserer Website enthalten einen deutlich erkennbaren Submit-Button, mit dem sich die Eingaben abschicken lassen. Damit stellen wir sicher, dass auch Nutzer:innen mit assistiven Technologien – wie Screenreadern oder alternativen Eingabegeräten – die Formulare vollständig ausfüllen und erfolgreich absenden können.

Alle Formularfelder auf unserer Website sind mit zugehörigen <label>-Elementen versehen, die über das for-Attribut eindeutig auf die jeweilige id des Eingabefeldes verweisen. Diese klare Zuordnung verbessert die Nutzerfreundlichkeit und sorgt dafür, dass assistive Technologien wie Screenreader die Beschriftungen korrekt vorlesen.

Alle interaktiven Elemente auf unserer Website – wie Links, Buttons oder Formularfelder – zeigen klar sichtbar an, wenn sie per Tastatur ausgewählt werden. So ermöglichen wir eine vollständige Bedienung auch ohne Maus.

Die Fokusreihenfolge auf unserer Website ist logisch und entspricht dem visuellen Aufbau der Seite. Beim Navigieren mit der Tabulatortaste werden interaktive Elemente in einer nachvollziehbaren Reihenfolge durchlaufen, sodass Nutzer:innen mit Tastatur oder Screenreader effizient und ohne Verwirrung durch die Inhalte geführt werden.

Links sind bei uns klar vom Fließtext unterscheidbar – etwa durch Farbe und Unterstreichung. Dadurch bleiben sie auch für Nutzer:innen mit Sehbeeinträchtigungen gut erkennbar.

Unsere Website verwendet keine automatischen Weiterleitungen mit Zeitverzögerung über Meta-Refresh. Nutzer:innen behalten jederzeit die Kontrolle über Navigation und Seitenwechsel.

Alle Listen auf unserer Website sind korrekt aufgebaut: <ul>– und <ol>-Elemente enthalten ausschließlich <li>-Einträge. Dadurch können Screenreader die Struktur zuverlässig erfassen und ansagen.

Interne Links auf Ankerpunkte (z. B. #inhalt) verweisen bei uns immer auf existierende Ziele im Dokument. So wird sichergestellt, dass die Navigation auch für Tastatur- und Screenreader-Nutzer:innen zuverlässig funktioniert.

Alle aria-labelledby-Attribute auf unserer Website verweisen auf vorhandene und sinnvolle Beschriftungselemente. So erhalten Nutzer:innen mit Screenreader stets verständliche Kontextinformationen.

Bildbasierte Buttons auf unserer Website enthalten stets einen aussagekräftigen alt-Text, der die jeweilige Funktion des Buttons klar beschreibt (z. B. „Suche starten“ oder „Zurück zur Übersicht“). So stellen wir sicher, dass auch Nutzer:innen mit Screenreader die Bedeutung und Funktion der Bedienelemente vollständig erfassen können.

Jede Unterseite unserer Website enthält eine klar definierte Hauptüberschrift (<h1>), die das zentrale Thema der Seite widerspiegelt. Dadurch erhalten Nutzer:innen – insbesondere mit Screenreader – sofort Orientierung über den Inhalt und Aufbau der jeweiligen Seite.

Jede Seite unserer Website verfügt über einen klar formulierten und eindeutigen <title>-Tag im Kopfbereich. Dieser Titel wird im Browser-Tab angezeigt und hilft Screenreader-Nutzer:innen sowie Suchmaschinen, den Inhalt der Seite schnell zu erkennen und einzuordnen.

Unsere Website erlaubt das Vergrößern der Inhalte um bis zu 200 % mithilfe der Browser-Zoomfunktion. Wir unterbinden diese Möglichkeit nicht bewusst, damit Nutzer:innen mit Sehbeeinträchtigungen Inhalte flexibel an ihre Bedürfnisse anpassen können.