Bereit für den EAA? Wie Sie die 5 häufigsten Barrieren auf Websites vermeiden

Die Accessibility oder Barrierefreiheit von Online-Angeboten ist ein wichtiges Thema. Aktuell beschäftigen sich viele Unternehmen damit, ihren Webauftritt für Menschen mit körperlichen Einschränkungen zugänglicher zu gestalten.

Einer der aktuell relevantesten Gründe dafür ist wohl der European Accessibility Act (EAA). Dieser gibt bestimmte Regeln vor, die ab 28. Juni 2025 für neu auf den Markt gebrachte Produkte und Dienstleistungen gelten. Für bereits bestehende Angebote gilt eine spätere Frist. Ziel des EAAs ist es, die Barrierefreiheit von Produkten und Dienstleistungen in ganz Europa zu fördern.

Doch was sind eigentlich die häufigsten Barrieren auf Websites? Wir stellen Ihnen die fünf häufigsten Fehler vor. Außerdem erklären wir, welche Vorteile sich im Hinblick auf die Web Accessibility ergeben, wenn Sie die Barrieren bereits im Vorfeld vermeiden.

1. Fehlende ALT-Texte

Alternativtexte, auch ALT-Texte genannt, beschreiben in wenigen Worten, was auf einem Bild oder einer Grafik zu sehen ist. Sie helfen Menschen mit Sehbehinderung, den Inhalt visuell dargestellter Informationen mithilfe eines Screenreaders zu erfassen. Wenn auf einer Website wichtige Details ausschließlich über Bilder kommuniziert werden, ist das nicht barrierefrei.

Es gibt jedoch Ausnahmen: Sind Medien als rein dekorative Elemente eingebunden, braucht es keine ALT-Texte. Wichtig ist dann, Bilder entsprechend zu kennzeichnen, damit assistierende Technologien diese ignorieren.

Werden die ALT-Texte gepflegt, profitieren vor allem Menschen mit Beeinträchtigungen, aber auch Ihre Website selbst. Alternativtexte helfen nämlich Suchmaschinen wie Google, Bilder besser zu verstehen, was sich positiv auf das SEO-Ranking auswirkt.

Übrigens: Nicht nur Bilder auf Websites, sondern auch Fotos in E-Mails sowie auf Social Media erfordern ALT-Texte.

2. Mangelhafte Informationen und Beziehungen

Informationen und Strukturen auf Websites sollen optisch und technisch gleichermaßen korrekt erkennbar sein.

Dazu braucht es:

• eine saubere Überschriften-Hierarchie mit HTML-Tags (h1–h6)
• die korrekte Auszeichnung von Listen (ul, ol, li)
• die richtige Strukturierung von Tabellen (th, scope, headers)
• eindeutig beschriftete Formularelemente (Label-Zuordnung)
• die Kennzeichnung von Bereichen wie z. B. den Hauptinhalt mit entsprechenden HTML5-Tags oder role-Attributen

Fehlen diese Auszeichnungen, können assistierende Technologien die Inhalte nicht korrekt interpretieren. Wenn etwa bei einem Formularfeld die Beschriftung ausständig ist, liest der Screenreader nur „Eingabefeld“, ohne zu sagen, was dort einzugeben ist. Blinde Menschen haben dadurch keine Chance, das Formular selbstständig richtig auszufüllen.

3. Unzureichende Kontraste

Stellen Sie sich vor, Sie sitzen in der Sonne und wollen aktuelle Meldungen auf der Website Ihrer bevorzugten Tageszeitung lesen. Falsche Kontrastverhältnisse machen dieses Vorhaben unmöglich. Während Sie zu einem Schattenplatz wechseln können, sind Menschen mit Beeinträchtigung der Sehkraft hilflos − egal an welchem Ort sie sich befinden.

Die Wahl des richtigen Kontrastverhältnisses für Texte, Buttons, Symbole und Grafiken macht Website-Inhalte für alle Menschen gleichermaßen sichtbar.

Konkret bedeutet das:

• Bei User-Interface-Komponenten und grafischen Komponenten ist ein Kontrastverhältnis von mindestens 3:1 erforderlich.
• Bei Texten in normaler Schrift (kleiner als 18 pt bei normaler Schriftdicke oder kleiner als 14 pt bei fetter Schrift) gilt das Kontrastverhältnis 4,5:1.
• Texte in großer Schrift (18 pt oder größer bei normaler Schriftdicke oder 14 pt oder größer bei fetter Schrift) erfordern ein Kontrastverhältnis von 3:1.

Sie haben festgestellt, dass Ihr Unternehmenslogo die Anforderungen nicht erfüllt? In diesem Fall müssen Sie nicht gleich Ihre CI-Guideline anpassen, Logos sind von dieser Regelung nämlich ausgenommen.

4. Unschlüssige Reihenfolge bei der Tastaturbedienung

Viele Menschen nutzen Websites ausschließlich mit der Tastatur. Für sie müssen alle Inhalte der Website per Tastendruck erreichbar sein. Außerdem ist eine nachvollziehbare Reihenfolge von Überschriften, Links, Formularen und Buttons unverzichtbar. Springt der Fokus unerwartet beispielsweise vom Menü direkt ans Seitenende oder auf ein verdecktes Element, verlieren Nutzer:innen schnell die Orientierung.

Im E-Commerce kann eine fehlerhafte Fokusreihenfolge oder das Nicht-Erreichen bestimmter Funktionen wie dem Kaufen-Button zum Abbruch von Bestellungen führen – und somit zum Verlust von Umsatzpotenzial.

5. Nicht aussagekräftige Dokumententitel

Jede Website inklusive aller Unterseiten sollte klare, sprechende Titel haben. Aussagekräftige Bezeichnungen ermöglichen eine einfache Unterscheidung verschiedener Seiten – vor allem dann, wenn mehrere Tabs oder Lesezeichen im Browser geöffnet sind. Im Idealfall besteht der Dokumententitel aus der Unternehmens- oder Markenbezeichnung und sowie dem Inhalt der jeweiligen Seite. Also zum Beispiel „Content Management | valantic Austria“ anstelle von nur „Content Management“.

Präzise Titel helfen allen User:innen. Screenreader-Nutzer:innen profitieren besonders davon, da diese sich durch sinnvolle Bezeichnungen schnell orientieren können, ohne erst den Inhalt lesen zu müssen.

Wichtiger Punkt: Auch bei Dokumenten wie PDFs ist ein korrekt vergebener Titel wichtig!

Fazit: Die Vermeidung von Barrieren erhöht die Usability Ihrer Website

Barrierefreiheit auf Websites beginnt bei grundlegenden Dingen wie Alternativtexten, klarer Struktur und ausreichenden Kontrasten. Nur wenn Inhalte technisch korrekt ausgezeichnet und in sinnvoller Reihenfolge erreichbar sind, können Menschen mit Einschränkungen Ihre Website selbstständig nutzen.

Dabei profitieren nicht nur die Nutzer:innen. Vielmehr verbessert sich die Usability Ihres Webauftritts, was sich positiv auf die SEO-Performance und Conversion Rates auswirkt.