Legislations

Kategorien (1)
Technical

26 Schritte zur ADA-Website-Compliance: Bedeutung, Anforderungen und Checkliste

Casandra Visser

Autor

Ritvik Shrivastava

Forscher

Nolan Klein

Experte

Juli 24, 2024

10 Minuten

Unsere Methodik

Our unique research methodology for digital accessibility combines user testing, feature analysis, and hands-on experience. We review various remediation software and platforms to provide top recommendations.

Von Menschen für Menschen geschrieben und recherchiert

Casandra Visser

Autor

Ritvik Shrivastava

Forscher

Nolan Klein

Fachmännisch überprüft von

Kommentare: 10

Das Americans with Disabilities Act (ADA) von 1990 schreibt Barrierefreiheit für Menschen mit Behinderungen vor. Obwohl das ursprüngliche Gesetz das Internet nicht einschloss, haben Gerichte zunehmend Titel III so ausgelegt, dass er auch für Websites gilt, was zu Klagen und Strafen bei Nichteinhaltung führte.

Titel III verpflichtet private Unternehmen, sowohl physisch als auch online Barrierefreiheit sicherzustellen. Um Ihnen die Navigation durch diese Anforderungen zu erleichtern, haben wir einen umfassenden Leitfaden zur ADA-Compliance für Websites im Jahr 2025 erstellt.

Wenn Sie sicherstellen möchten, dass Ihre Website ADA-konform ist, sind Sie hier genau richtig. Lassen Sie uns loslegen.

Wir werden über Folgendes sprechen:

Das ADA erklärt
Was bedeutet ADA-Compliance?
Was bedeutet ADA-Compliance für Websites?
Welche Anforderungen gibt es für die ADA-Website-Compliance?
Wo kann ich die Checkliste für ADA-Anforderungen für Websites herunterladen?
Welche ADA-Tools machen Ihre Website ADA-konform?
Zusammenfassung
Häufig gestellte Fragen (FAQs)

Das ADA erklärt

Das Americans with Disabilities Act (ADA), das 1990 von Präsident George H.W. Bush verabschiedet wurde, ist ein wegweisendes Bürgerrechtsgesetz, das Diskriminierung von Menschen mit Behinderungen in allen Bereichen des öffentlichen Lebens verbietet. Dazu gehören Arbeitsplätze, Schulen, Verkehrsmittel sowie öffentliche und private Räume.

Das ADA bietet hauptsächlich Menschen mit unterschiedlichen Behinderungen Vorteile, darunter:

Sehbehinderungen: Beispielsweise nutzen blinde Menschen Screenreader, um Websites zu navigieren.
Hörbehinderungen: Menschen mit Hörbeeinträchtigungen profitieren von barrierefreien Kommunikationsdiensten.
Mobilitätseinschränkungen: Personen mit Erkrankungen wie Spina bifida verwenden alternative Eingabegeräte.
Kognitive Beeinträchtigungen: Menschen mit Lern- oder Konzentrationsschwierigkeiten benötigen klare und verständliche Inhalte.

Das ADA besteht aus fünf Haupttiteln, die verschiedene Aspekte der Rechte von Menschen mit Behinderungen abdecken:

Titel I: Beschäftigung
Titel I verbietet die Diskriminierung von qualifizierten Menschen mit Behinderungen in allen Bereichen der Beschäftigung. Dies umfasst den Einstellungsprozess, Arbeitsaufgaben, Beförderungen und Kündigungen.
Titel II: Dienstleistungen staatlicher und kommunaler Behörden
Titel II schützt vor Diskriminierung durch staatliche und lokale Behörden. Er stellt sicher, dass Menschen mit Behinderungen gleichberechtigten Zugang zu öffentlichen Dienstleistungen, Programmen und Aktivitäten haben. Dies umfasst den öffentlichen Nahverkehr, öffentliche Schulen, Behördengebäude und andere staatlich finanzierte Dienstleistungen.
Titel III: Öffentliche und kommerzielle Einrichtungen
Titel III verpflichtet Unternehmen und öffentlich zugängliche Einrichtungen, ihre Räumlichkeiten barrierefrei zu gestalten. Dazu gehören insbesondere Geschäfte, Restaurants, Hotels, Kinos und andere Dienstleistungsunternehmen.
Titel IV: Telekommunikation
Titel IV verpflichtet Telefon- und Internetanbieter, Relay-Dienste für Menschen mit Hör- und Sprachbehinderungen bereitzustellen. Dies gewährleistet gleichberechtigten Zugang zu Telekommunikationsdiensten.
Titel V: Verschiedene Bestimmungen
Titel V enthält verschiedene Regelungen, darunter:
- Das Verhältnis zwischen dem ADA und anderen Gesetzen
- Durchsetzungsverfahren
- Schutzmaßnahmen gegen Vergeltungsmaßnahmen für Personen, die ihre Rechte nach dem ADA geltend machen.

Barrierefreiheit gilt nicht nur für physische Räume, sondern auch für den digitalen Raum.

Das bedeutet, dass Websites, mobile Anwendungen und andere Online-Plattformen für Menschen mit Behinderungen zugänglich sein müssen.

In diesem Leitfaden bieten wir Ihnen eine umfassende Checkliste für die ADA-Website-Compliance, die alle wesentlichen Anforderungen und Überlegungen abdeckt. Zusätzlich erhalten Sie eine herunterladbare PDF-Checkliste, die als praktisches Nachschlagewerk für Website-Besitzer und Entwickler dient, die sich für Barrierefreiheit und Inklusion einsetzen.

Hier finden Sie eine kurze Video-Zusammenfassung der ADA-Compliance im Jahr 2025.

Was bedeutet ADA-Compliance?

ADA-Compliance bezieht sich auf die Einhaltung der Standards und Vorschriften des Americans with Disabilities Act (ADA), insbesondere der Standards für barrierefreies Design (ADAAG) (1). Dieses umfassende Regelwerk stellt sicher, dass Menschen mit Behinderungen gleichberechtigten Zugang zu verschiedenen Bereichen des öffentlichen Lebens haben, einschließlich Beschäftigung, Transport und geschäftlicher Dienstleistungen.

Invisible Disabilities

In der Arbeitswelt verpflichtet die ADA-Compliance Arbeitgeber, Menschen mit Behinderungen angemessene Vorkehrungen anzubieten, damit sie ihre wesentlichen Arbeitsaufgaben erfüllen können. Dies kann Anpassungen des Arbeitsumfelds, Änderungen der Arbeitsaufgaben oder spezielle Arbeitsgeräte umfassen, um Barrierefreiheit und Chancengleichheit am Arbeitsplatz sicherzustellen.

Auch öffentliche und private Verkehrsdienste müssen die ADA-Vorgaben erfüllen, um den barrierefreien Zugang für Menschen mit Behinderungen zu gewährleisten. Dies umfasst barrierefreie Fahrzeuge, Verkehrseinrichtungen und Dienste wie Rollstuhlrampen, Hebebühnen und gut lesbare Beschilderungen.

Unternehmen, die der Öffentlichkeit zugänglich sind, einschließlich Restaurants, Geschäfte, Hotels und Unterhaltungsstätten, müssen ADA-konform sein, um sicherzustellen, dass ihre Einrichtungen und Dienstleistungen für Menschen mit Behinderungen zugänglich sind. Dies umfasst den Einbau von Rollstuhlrampen, barrierefreien Toiletten sowie Hilfsmittel für die barrierefreie Kommunikation und den Zugang zu Waren und Dienstleistungen.

Da viele alltägliche Aktivitäten heute online stattfinden, gilt die ADA-Compliance auch für Websites und digitale Plattformen. Websites, die sich auf Beschäftigung, Transportdienste oder geschäftliche Dienstleistungen beziehen, müssen den ADA-Standards entsprechen, um einen barrierefreien Zugang für alle zu gewährleisten.

Durch die Einhaltung der ADA-Standards in allen Bereichen des öffentlichen Lebens – einschließlich Arbeitswelt, Transport und Geschäftsdienstleistungen – tragen wir zu einer inklusiveren und barrierefreien Gesellschaft bei, in der Menschen mit Behinderungen gleichberechtigten Zugang zu essenziellen Dienstleistungen und Ressourcen haben.

Was bedeutet ADA-Compliance für Websites?

ADA-Compliance für Websites bedeutet, dass Websites und digitale Inhalte gemäß dem Americans with Disabilities Act (ADA) und den zugehörigen Richtlinien, wie den Web Content Accessibility Guidelines (WCAG) (2), barrierefrei gestaltet werden.

Die WCAG wurde vom World Wide Web Consortium erstellt und dient als Maßstab für die Barrierefreiheitsanforderungen von Websites in verschiedenen internationalen Behindertenschutzgesetzen.

Gemäß den WCAG müssen Websites die folgenden Prinzipien erfüllen:

Wahrnehmbar: Informationen und Bedienelemente müssen so dargestellt werden, dass sie von Nutzern unabhängig von ihren Sinnesfähigkeiten wahrgenommen werden können. Dies umfasst die Bereitstellung von Alternativtexten für Bilder, Untertiteln für Videos und eine klare Inhaltsstruktur.
Bedienbar: Inhalte und Navigationsfunktionen müssen mit verschiedenen Eingabemethoden, wie Tastaturnavigation, Sprachbefehlen oder Assistenztechnologien wie Screenreadern, steuerbar sein. Dies ermöglicht es den Nutzern, die Website effektiv zu bedienen und zu navigieren.
Verständlich: Inhalte und Funktionen müssen für alle Nutzer verständlich sein, auch für Menschen mit kognitiven oder Lernbehinderungen. Dies erfordert die Verwendung klarer Sprache, das Bereitstellen von Anleitungen und Feedback sowie die Vermeidung komplexer oder mehrdeutiger Designelemente.
Robust: Websites sollten mit einer Vielzahl von Assistenztechnologien und Geräten kompatibel sein. Dazu gehören die Verwendung von semantischem HTML, eine saubere Dokumentenstruktur und Tests zur Kompatibilität mit Screenreadern und anderen Hilfsmitteln.

Infographic: WCAG website compliance principles

Die Einhaltung der neuesten Anforderungen an die digitale Barrierefreiheit kommt Menschen mit unterschiedlichen Behinderungen zugute, darunter:

Menschen mit Sehbehinderungen oder Blindheit,
Menschen, die gehörlos oder schwerhörig sind,
Menschen mit Mobilitätseinschränkungen,
Menschen mit neurologischen oder kognitiven Behinderungen wie ADHS und Epilepsie.

Unternehmen und Organisationen aus verschiedenen Sektoren müssen die Standards zur Barrierefreiheit im Web einhalten, um sicherzustellen, dass ihre digitalen Inhalte für Menschen mit Behinderungen zugänglich sind. Dies gilt für:

Staatliche Institutionen,
Bildungseinrichtungen,
Gemeinnützige Organisationen,
Kommerzielle Unternehmen,
E-Commerce-Websites,
Gesundheitsdienstleister,
Finanzinstitute.

Ein schneller und effizienter Weg, um die Richtlinien zur Barrierefreiheit im Web einzuhalten

Unsere Top-Empfehlung für eine barrierefreie Website ist accessiBe. Dieses fortschrittliche, KI-gestützte Tool erleichtert die Umsetzung der neuesten WCAG-Standards auf Ihrer Website – und das durch das einfache Hinzufügen einer einzigen Codezeile im Backend.

Probieren Sie accessiBe aus

Was sind die Anforderungen für die ADA-Website-Compliance?

Nachdem wir die Grundlagen des ADA (Americans with Disabilities Act) und dessen Bedeutung für die Website-Compliance behandelt haben, werfen wir nun einen genaueren Blick auf die verschiedenen Bereiche, auf die sich Website-Besitzer und Entwickler konzentrieren sollten, um eine zugänglichere und inklusivere Nutzererfahrung zu bieten.

1. Sicherstellen, dass alle Website-Interaktionen per Tastatur zugänglich sind

Die Navigation per Tastatur ist eine Grundvoraussetzung für die Einhaltung der ADA-Webzugänglichkeitsanforderungen, da sie Menschen mit Behinderungen einen gleichberechtigten Zugang zu digitalen Inhalten ermöglicht.

Die Tastaturnavigation ist eine wesentliche Barrierefreiheitsfunktion, die es Nutzern ermöglicht, sich durch Webseiten zu bewegen, interaktive Elemente zu bedienen und Inhalte zu erreichen – und das ohne Maus oder andere Zeigegeräte.

Indem Unternehmen die Tastaturnavigation sicherstellen, demonstrieren sie ihr Engagement für Inklusivität und Barrierefreiheit. Dies trägt nicht nur zur Verbesserung der Benutzererfahrung bei, sondern erweitert auch den Kundenkreis und reduziert das Risiko rechtlicher Konsequenzen aufgrund von ADA-Verstößen.

Von der Tastaturnavigation profitieren Menschen mit verschiedenen Behinderungen, darunter:

Bewegungseinschränkungen: Menschen, die aufgrund von Erkrankungen wie Arthritis, Lähmungen oder feinmotorischen Störungen keine Maus oder andere Zeigegeräte verwenden können.
Sehbehinderungen: Nutzer, die auf Screenreader oder Vergrößerungssoftware angewiesen sind und Webseiten mithilfe von Tastenkombinationen oder der Tabulatortaste navigieren.
Kognitive Beeinträchtigungen: Menschen, die Schwierigkeiten haben, komplexe oder dynamische Inhalte zu verarbeiten, und die Tastaturnavigation als einfacher und intuitiver empfinden als die Maussteuerung.

Wenn eine Website nicht per Tastatur bedienbar ist, stoßen Menschen mit Behinderungen, die auf Tastatureingaben angewiesen sind, auf erhebliche Barrieren. Sie können möglicherweise nicht auf Inhalte zugreifen, durch Seiten navigieren oder interaktive Elemente bedienen.

Ohne Tastaturzugänglichkeit sind essenzielle Aktionen wie das Ausfüllen von Formularen, die Auswahl von Optionen in Dropdown-Menüs oder das Klicken auf Links und Schaltflächen nicht möglich. Dies schließt betroffene Nutzer effektiv von den Inhalten und Dienstleistungen Ihrer Website aus.

keyboard accessibility

Testen der Tastaturnavigation

Sie können überprüfen, ob Ihre Website per Tastatur bedienbar ist, indem Sie durch Ihre Website navigieren, ohne eine Maus oder ein anderes Zeigegerät zu verwenden. Achten Sie dabei auf folgende Punkte:

Verwenden Sie die Tabulatortaste (Tab), um durch Links, Schaltflächen, Formularfelder und interaktive Elemente auf der Seite zu navigieren.
Stellen Sie sicher, dass jedes interaktive Element den Fokus erhält, wenn Sie mit der Tabulatortaste navigieren, und der Fokusindikator sichtbar ist.
Nutzen Sie Tastenkombinationen, wie Enter oder Leertaste, um Schaltflächen und Links zu aktivieren.
Überprüfen Sie, dass alle interaktiven Elemente über die Tastatureingabe zugänglich und nutzbar sind, einschließlich Dropdown-Menüs, Slider und interaktiver Widgets.
Testen Sie, ob die Tastaturnavigation einer logischen Reihenfolge folgt, sodass die Tab-Reihenfolge der visuellen Struktur der Seite entspricht.

Behebung von Barrieren auf Ihrer Website

Um Ihre Website für die Tastaturnavigation zu optimieren, sind Änderungen am Code erforderlich.

Wenn Sie beispielsweise sicherstellen möchten, dass interaktive Elemente den Fokus erhalten und per Tastatur aktiviert werden können, sollten Sie folgenden Code implementieren:

Codebeispiel

<button tabindex="0">Klicke mich</button> Kopieren

In diesem Beispiel hat das <button>-Element das tabindex-Attribut auf „0“ gesetzt. Dadurch kann es beim Navigieren mit der Tabulatortaste den Fokus erhalten. Nutzer können anschließend die Enter-Taste drücken, um die Schaltfläche zu aktivieren, sodass sie über die Tastatureingabe zugänglich ist.

Zusätzlich gewährleistet die Verwendung von semantischem HTML und korrektem Markup, dass interaktive Elemente für assistive Technologien zugänglich sind und den Web-Zugänglichkeitsstandards entsprechen.

2. Alt-Attribute für alle Bilder bereitstellen

Unternehmen sollten Alt-Tags zu ihren Bildern hinzufügen, um die ADA-Vorgaben (Americans with Disabilities Act) zu erfüllen. Alt-Tags bieten alternative Textbeschreibungen, die von Screenreadern laut vorgelesen werden, um blinden oder sehbehinderten Nutzern den Inhalt der Bilder zu vermitteln.

Durch das Einfügen beschreibender Alt-Texte stellen Unternehmen sicher, dass Personen, die Bilder nicht sehen können, dennoch den Inhalt und Kontext der Bilder verstehen. Dies verbessert ihre gesamte Browser-Erfahrung und gewährleistet einen gleichberechtigten Zugang zu Informationen.

Alt-Tags kommen hauptsächlich Menschen mit Sehbehinderungen oder Blindheit zugute, die auf Screenreader angewiesen sind, um digitale Inhalte zu konsumieren. Doch auch Nutzer mit kognitiven Beeinträchtigungen profitieren, wenn Alt-Tags zusätzliche Erklärungen oder Kontexte zu den Bildern liefern. Diese Tags machen Inhalte verständlicher und verringern die kognitive Belastung.

Fehlen Alt-Tags, stoßen Menschen, die auf unterstützende Technologien angewiesen sind, auf Schwierigkeiten beim Zugriff auf bildbasierte Inhalte. Screenreader können dann keine aussagekräftigen Bildbeschreibungen liefern. Nutzer mit Sehbehinderungen können den Inhalt und Kontext der Bilder nicht erfassen, wodurch ihnen wichtige Informationen oder Funktionen der Website entgehen. Dies führt zu einer weniger inklusiven und barrierefreien Nutzererfahrung.

Testen auf Alt-Tags:

Sie können prüfen, ob Ihre Website Alt-Tags enthält, indem Sie den HTML-Code der Bilder inspizieren und auf die alt-Attribute achten. Alternativ können Sie Web-Zugänglichkeits-Tools oder Browser-Erweiterungen verwenden, die Webseiten auf Barrierefreiheitsprobleme wie fehlende Alt-Attribute analysieren.

Behebung auf Ihrer Website:

Das Hinzufügen von Alt-Tags erfolgt auf Code-Ebene. Ein Bild mit alternativem Text sieht im HTML-Code wie folgt aus:

Codebeispiel

<img src="example.jpg" alt="Beschreibung des Bildes"> Kopieren

In diesem Beispiel enthält das <img>-Element ein alt-Attribut mit einer beschreibenden Textangabe (“Beschreibung des Bildes”). Dieser Alt-Text wird von Screenreadern vorgelesen und bietet Menschen mit Sehbehinderungen eine textliche Beschreibung des Bildinhalts.

3. Sicherstellen, dass der Text ausreichenden Farbkontrast aufweist

Um den neuesten ADA-Webzugänglichkeitsstandards zu entsprechen, sollten Unternehmen sicherstellen, dass der Text auf ihrer Website einen ausreichenden Farbkontrast aufweist.

Farbkontrast macht Inhalte für alle Benutzer lesbar und verständlich, einschließlich Personen mit Sehbehinderungen oder Farbsehschwächen. Ein angemessener Farbkontrast verbessert die Lesbarkeit und Erkennbarkeit, insbesondere für Benutzer mit eingeschränktem Sehvermögen oder anderen Sehbehinderungen, stellt sicher, dass sich der Text deutlich vom Hintergrund abhebt und leicht erkennbar ist.

Zusätzlich zu den Vorteilen für Personen mit Sehbehinderungen, Farbsehschwächen oder anderen visuellen Einschränkungen ermöglichen hohe Farbkontrastverhältnisse auch Menschen mit kognitiven Beeinträchtigungen, Inhalte leichter zu lesen und zu verstehen.

Ohne ausreichenden Farbkontrast könnten Menschen mit Behinderungen Schwierigkeiten haben, die Inhalte auf Ihrer Website zu lesen oder zu verstehen. Ein geringer Farbkontrast kann es erschweren, den Text vom Hintergrund zu unterscheiden, was zu Augenbelastung, Ermüdung und verminderter Lesbarkeit führt.

Infolgedessen könnten Benutzer mit Sehbehinderungen nicht in der Lage sein, Informationen zu finden oder Ihre Website effektiv zu navigieren, was ihre gesamte Benutzererfahrung einschränkt und sie daran hindert, sich mit Ihren Inhalten zu beschäftigen.

Testen des Farbkontrasts

Sie können den Farbkontrast auf Ihrer Website mithilfe verschiedener Online-Tools oder Browser-Erweiterungen für Barrierefreiheitstests überprüfen, wie z. B. unseren kostenlosen Color Contrast Checker.

Diese Tools analysieren die Farbwerte von Text- und Hintergrundelementen und berechnen das Farbkontrastverhältnis. Sie zeigen an, ob der Kontrast die Mindestanforderungen der Barrierefreiheitsstandards erfüllt, wie sie in den Web Content Accessibility Guidelines (WCAG) festgelegt sind.

Die WCAG gibt an, dass Websites ein Mindestfarbkontrastverhältnis von 4,5:1 zwischen Text und Hintergrund haben sollten. Für größeren Text sollte der Kontrast 3:1 betragen.

Infographic: color contrast check for websites

Behebung des Farbkontrasts auf Ihrer Website

Entwickler können den Farbkontrast auf einer Website durch Änderungen in den CSS-Stilen anpassen. Hier ist ein Beispiel für eine Codeänderung, um den Farbkontrast auf Ihrer Website zu verbessern:

Codebeispiel

/* Textfarbkontrast erhöhen */
body {
color: #333; /* Dunkle Textfarbe */
}/* Sicherstellen, dass die Hintergrundfarbe ausreichenden Kontrast bietet */
.content {
background-color: #fff; /* Helle Hintergrundfarbe */
}/* Linkfarbe für bessere Sichtbarkeit anpassen */
a {
color: #007bff; /* Linkfarbe für ausreichenden Kontrast anpassen */
}

Kopieren

In diesem Beispiel werden CSS-Stile verwendet, um die Textfarbe, Hintergrundfarbe und Linkfarbe so anzupassen, dass ein ausreichender Farbkontrast für eine bessere Lesbarkeit und Barrierefreiheit gewährleistet ist. Eine dunkle Textfarbe (#333) wird auf einem hellen Hintergrund (#fff) verwendet, und die Linkfarbe wird so angepasst, dass sie sich deutlich vom Hintergrund abhebt. Es ist entscheidend, Farben zu wählen, die die empfohlenen Kontrastverhältnisse erfüllen, um die Zugänglichkeit für alle Benutzer zu verbessern.

4. Aussagekräftige Seitentitel einfügen

Unternehmen sollten aussagekräftige Titel für ihre Webseiten verwenden, um die ADA-Webzugänglichkeitsstandards einzuhalten. Dies verbessert die Navigation und Benutzerfreundlichkeit für alle Nutzer, einschließlich Menschen mit Behinderungen.

Ein aussagekräftiger Seitentitel bietet den Nutzern relevante Informationen über den Inhalt einer Webseite, wodurch der Zweck und Kontext der Seite leichter verständlich wird. Dies trägt zur Barrierefreiheit bei, da Benutzer – insbesondere jene, die unterstützende Technologien wie Screenreader verwenden – effizienter durch die Website navigieren können.

Vorteile aussagekräftiger Seitentitel für Menschen mit Behinderungen:

Sehbehinderungen: Nutzer, die Screenreader verwenden, profitieren von aussagekräftigen Seitentiteln, da diese akustischen Hinweise über den Inhalt und Kontext der Seite liefern.
Kognitive Beeinträchtigungen: Nutzer mit kognitiven Einschränkungen finden es einfacher, sich auf Webseiten zurechtzufinden, da klare und informative Titel ihnen helfen, die Struktur und Organisation der Website besser zu verstehen.

Ohne aussagekräftige Seitentitel kann es für Menschen mit Behinderungen schwierig sein, den Zweck und Kontext jeder Webseite zu erkennen. Dies kann zu Verwirrung, Frustration und ineffizienter Navigation führen.

Testen aussagekräftiger Seitentitel

Sie können überprüfen, ob eine Website aussagekräftige Seitentitel verwendet, indem Sie die Title-Tags auf Ihrer gesamten Website analysieren. Stellen Sie sich folgende Fragen:

Sind die Titel klar und relevant für den Inhalt der jeweiligen Seite?
Wird den Nutzern sofort deutlich, welche Inhalte sie auf der Seite erwarten können?

Behebung auf Ihrer Website

Hier sind einige Beispiele für aussagekräftige Seitentitel:

„Über uns – Unternehmensname“: Der Titel zeigt deutlich den Zweck der Seite (Informationen über das Unternehmen) und enthält den Unternehmensnamen zur Markenbildung und Wiedererkennung.
„Kontakt – Kundenservice“: Der Titel macht deutlich, dass die Seite dazu dient, Kontaktinformationen für den Kundensupport bereitzustellen.

„Produktkatalog – Kategoriename“: Der Titel gibt die Art des Inhalts (Produktkatalog) an und spezifiziert die Kategorie (z. B. Elektronik, Kleidung), um die Navigation zu erleichtern.

Benutzergesteuerte Website-Anpassungen mit accessWidget ermöglichen

accessWidget von accessiBe ermöglicht es Menschen mit Behinderungen, das Erscheinungsbild Ihrer Webseiten individuell nach ihren speziellen Vorlieben anzupassen.

Testen Sie accessiBe

5. Klare Beschriftungen für alle Formulareingaben bereitstellen

Das Bereitstellen expliziter Beschriftungen für Formulareingaben ist eine weitere Anforderung zur Einhaltung der ADA-Webzugänglichkeitsstandards.

Beschriftungen helfen den Nutzern, den Zweck und die Funktion von Formularfeldern zu verstehen, wodurch das Ausfüllen von Formularen genauer und effizienter wird. Sie bieten Kontext und Anleitungen, insbesondere für Menschen mit Behinderungen, die auf unterstützende Technologien wie Screenreader angewiesen sind, um sich auf Websites zu orientieren und mit Inhalten zu interagieren.

Beschriftungen für Formulareingaben sind besonders hilfreich für Menschen mit verschiedenen Behinderungen, darunter:

Sehbehinderungen: Nutzer, die auf Screenreader oder Vergrößerungssoftware angewiesen sind, profitieren von klaren Beschriftungen, da sie akustische oder visuelle Hinweise zur Art der erforderlichen Informationen erhalten.
Kognitive Beeinträchtigungen: Nutzer mit kognitiven Einschränkungen können Formulare mit klaren und aussagekräftigen Beschriftungen leichter verstehen und ausfüllen, was Verwirrung und kognitive Belastung reduziert.

Fehlende oder unklare Beschriftungen erschweren es den Nutzern, den Zweck und die Anforderungen jedes Formularfelds zu verstehen. Dies führt zu Fehlern, Frustration und ineffizientem Ausfüllen von Formularen. Infolgedessen könnten Menschen mit Behinderungen möglicherweise keine Formulare absenden oder nicht auf die benötigten Informationen und Dienstleistungen zugreifen, wodurch ihre Interaktion mit Ihrer Website eingeschränkt wird.

accessible online forms

Testen von Formulareingaben

Um zu überprüfen, ob Ihre Formulare die erforderlichen Webzugänglichkeitsstandards erfüllen, sollten Sie den HTML-Code Ihrer Formularelemente inspizieren. Dadurch können Sie sicherstellen, dass für jedes Formularfeld ein zugehöriges label-Element vorhanden ist. Zudem können Sie die Formularfelder visuell auf Ihrer Website überprüfen, um sicherzustellen, dass jedes Feld eine sichtbare und beschreibende Beschriftung hat.

Korrekturmaßnahmen für Ihre Website

Neben der Gewährleistung sichtbarer Beschriftungen in Ihren Formularen, sollten die folgenden Formularelemente in Ihrem HTML-Code vorhanden sein:

Codebeispiel

<label for="name">Name:</label><label for="email">E-Mail:</label><label for="password">Passwort:</label><label for="birthdate">Geburtsdatum:</label>

Kopieren

6. Verknüpfen Sie Formularanweisungen mit Eingaben

Businesses should associate form instructions with inputs for web accessibility because clear and concise instructions help users understand how to complete forms correctly, reducing errors and improving usability.

Unternehmen sollten Formularanweisungen mit Eingabefeldern verknüpfen, um die Barrierefreiheit im Web zu gewährleisten. Klare und präzise Anweisungen helfen den Nutzern, Formulare korrekt auszufüllen, Fehler zu minimieren und die Benutzerfreundlichkeit zu verbessern.

Durch die Verknüpfung von Formularanweisungen mit Eingaben erhalten Nutzer Kontext und Anleitung, wodurch die Navigation und Interaktion mit Webformularen erleichtert wird – insbesondere für Menschen, die auf unterstützende Technologien wie Screenreader angewiesen sind.

Formularanweisungen sind besonders vorteilhaft für Menschen mit folgenden Einschränkungen:

Kognitive Beeinträchtigungen: Nutzer mit kognitiven Einschränkungen können Anweisungen leichter verstehen und befolgen, wodurch Verwirrung reduziert wird.
Sehbehinderungen: Nutzer, die auf Screenreader angewiesen sind, profitieren von klaren und beschreibenden Anweisungen, die akustische Hinweise zur Formularstruktur und den Anforderungen geben.
Lernbehinderungen: Nutzer mit Lernschwierigkeiten benötigen möglicherweise zusätzliche Unterstützung beim Ausfüllen von Formularen. Klare Anweisungen helfen ihnen, die Anforderungen und den Prozess besser zu verstehen.

Fehlende Anweisungen erschweren es den Nutzern, den Zweck und die Anforderungen jedes Formularfelds zu verstehen, was zu Frustration führt. Es kann auch verhindern, dass Nutzer ihre Daten absenden oder auf wichtige Informationen und Dienstleistungen auf Ihrer Website zugreifen.

Testen von Formularanweisungen

Ähnlich wie bei Beschriftungen für Eingabefelder können Entwickler visuell überprüfen, ob Anweisungen in den Formularen vorhanden sind. Dies ist jedoch nur der erste Schritt – auch der HTML-Code sollte überprüft werden.

Entwickler können HTML-Label-Elemente oder aria-label-Attribute verwenden, um Anweisungen mit Formulareingaben zu verknüpfen und sicherzustellen, dass sie für unterstützende Technologien zugänglich sind. Es ist auch wichtig, eine klare und prägnante Sprache zu verwenden, Fachjargon zu vermeiden und gegebenenfalls Beispiele oder zusätzlichen Kontext bereitzustellen.

Darüber hinaus sollten Formulare mit einer vielfältigen Nutzergruppe, einschließlich Menschen mit Behinderungen, getestet werden, um sicherzustellen, dass die Anweisungen verständlich und effektiv sind.

Korrekturmaßnahmen für Ihre Website

Um Formularanweisungen in HTML hinzuzufügen, gibt es verschiedene Methoden. Eine Möglichkeit ist, beschreibenden Text direkt neben den Formulareingaben zu platzieren oder das <label>-Element zu verwenden.

Codebeispiel

<label for="name">Name:</label><input type="text" id="name" name="name" aria-describedby="name-instructions"><span id="name-instructions">Bitte geben Sie Ihren vollständigen Namen ein.</span>

Kopieren

In diesem Beispiel befindet sich der beschreibende Text „Bitte geben Sie Ihren vollständigen Namen ein.“ direkt neben dem Namensfeld. Das aria-describedby-Attribut stellt sicher, dass der Text mit dem Eingabefeld verknüpft ist, um die Barrierefreiheit zu verbessern.

7. Sicherstellen, dass Multimedia-Inhalte über angemessene Untertitel und Audiobeschreibungen verfügen

Wenn Ihre Website Multimedia-Inhalte (4) enthält, ist es für die Einhaltung der ADA-Webzugänglichkeitsanforderungen erforderlich, entsprechende Untertitel und Audiobeschreibungen hinzuzufügen.

Untertitel und Audiobeschreibungen machen Multimedia-Inhalte für ein breiteres Publikum verständlicher und zugänglicher. Diese Inklusivität hilft Unternehmen nicht nur, Barrierefreiheitsstandards und Vorschriften einzuhalten, sondern verbessert auch die Benutzererfahrung und schafft eine integrative Online-Umgebung.

Untertitel helfen vorwiegend Menschen, die gehörlos oder schwerhörig sind, indem sie eine textbasierte Alternative zu gesprochenen Dialogen und Soundeffekten bieten.
Audiobeschreibungen unterstützen blinde oder sehbehinderte Nutzer, indem sie visuelle Elemente und Aktionen in Multimedia-Inhalten beschreiben.
Beide Formate sind auch für Menschen mit kognitiven oder Lernschwierigkeiten nützlich, da sie von mehreren Informationsformen profitieren.

Ohne diese alternativen Inhalte könnten gehörlose oder schwerhörige sowie blinde Nutzer wichtige Dialoge, Soundeffekte oder andere akustische Hinweise verpassen, was zu einem Missverständnis der Inhalte führen kann.

Korrekturmaßnahmen für Ihre Website

Wenn Sie feststellen, dass keine Untertitel oder Audiobeschreibungen mit Ihren Multimedia-Inhalten verknüpft sind, müssen Sie diese hinzufügen.

Untertitel: Es gibt verschiedene Tools und Dienste zur Erstellung synchronisierter Texttranskriptionen von gesprochenem Dialog und Soundeffekten. Diese können direkt in Ihre Multimedia-Inhalte eingebettet oder als separate Textdateien bereitgestellt werden.
Audiobeschreibungen: Erstellen Sie kurze, beschreibende Erzählungen über visuelle Elemente, Aktionen und den Kontext Ihrer Multimedia-Inhalte. Diese können als separate Audiospuren hinzugefügt oder direkt in die Multimedia-Dateien integriert werden.

Prüfung der Barrierefreiheit: Überprüfen Sie, ob die von Ihnen verwendeten Multimedia-Player oder Plattformen Untertitel und Audiobeschreibungen unterstützen. Testen Sie die Barrierefreiheit Ihrer Multimedia-Inhalte mit Screenreadern und anderen unterstützenden Technologien, um sicherzustellen, dass sie für Menschen mit Behinderungen nutzbar sind.

Multimedia-Inhalte barrierefrei machen

Mithilfe von accessiBe können Sie Ihre Multimedia-Inhalte einfach optimieren, um sicherzustellen, dass jeder – unabhängig von seinen Fähigkeiten – darauf zugreifen kann.

Probieren Sie accessiBe aus!

8. Sicherstellen, dass Tabellen über korrekte Kopf- und Spaltenattribute verfügen

Korrekte Kopf- und Spaltenattribute in Tabellen sind entscheidend für die Einhaltung der Webzugänglichkeitsstandards, da sie eine sinnvolle Struktur und Kontext für unterstützende Technologien wie Screenreader bieten.

Diese Attribute kommen insbesondere Menschen mit Sehbehinderungen zugute, einschließlich blinder oder stark sehbeeinträchtigter Nutzer. Sie ermöglichen es Screenreadern, die Struktur und Zusammenhänge innerhalb von Tabellen zu vermitteln, sodass Nutzer den präsentierten Inhalt verstehen können.

Darüber hinaus profitieren auch Menschen mit kognitiven oder Lernbehinderungen von einer klaren und gut organisierten Tabellenstruktur, die durch richtige Kopf- und Spaltenattribute bereitgestellt wird.

Ohne korrekte Kopf- und Spaltenattribute kann es für sehbehinderte Personen schwierig sein, die Informationen in Tabellen auf einer Website zu interpretieren. Screenreader sind auf diese Attribute angewiesen, um die Tabellenstruktur, Überschriften und Datenbeziehungen zu vermitteln.

Fehlen diese Attribute, können Nutzer Schwierigkeiten haben, Inhalte zu verstehen, durch Zeilen und Spalten zu navigieren und relevante Informationen zu finden, was zu Frustration und einer schlechten Benutzererfahrung führt.

Testen von Tabellenattributen

Sie können überprüfen, ob Ihre Website über Tabellen mit den richtigen Kopf- und Spaltenattributen verfügt, indem Sie:

Zugänglichkeitstools oder Browser-Erweiterungen verwenden, die die Barrierefreiheit von Webinhalten analysieren und Tabellen ohne die erforderlichen Attribute identifizieren.
Den HTML-Code Ihrer Tabellen manuell inspizieren, um sicherzustellen, dass <th>-Elemente (Tabellenüberschriften) für Spalten- und Zeilenüberschriften vorhanden sind und die passenden scope– und id-Attribute verwendet werden, um Überschriften mit Datenzellen zu verknüpfen.

Korrekturmaßnahmen für Ihre Website

Die Barrierefreiheit Ihrer Tabellen kann durch einige Änderungen im HTML-Code verbessert werden. Hier ist ein Beispiel für eine Tabelle vor und nach der Optimierung:

Codebeispiel

<!-- Vor der Optimierung: --><table><tr>
<td>Monat</td>
<td>Umsatz</td>
</tr><tr>
<td>Januar</td>
<td>1000 €</td>
</tr><!-- Weitere Zeilen --></table><!-- Nach der Optimierung: --><table><tr>
<th scope="col">Monat</th>
<th scope="col">Umsatz</th>
</tr><tr>
<th scope="row">Januar</th>
<td>1000 €</td>
</tr><!-- Weitere Zeilen --></table>

Kopieren

Im optimierten Beispiel zeigen die <th>-Elemente mit den passenden scope-Attributen die Spaltenüberschriften an und verbessern die Zugänglichkeit für Nutzer, die unterstützende Technologien verwenden. Zusätzlich stellt das scope=”row”-Attribut sicher, dass die Zeilenüberschrift mit den entsprechenden Daten in der ersten Spalte verknüpft wird, was die Barrierefreiheit weiter verbessert.

9. Eine logische Tabulator-Reihenfolge sicherstellen

Eine logische Tab-Reihenfolge ist essenziell für die Einhaltung der ADA-Webzugänglichkeitsstandards, da sie sicherstellt, dass Nutzer mit der Tastatur oder assistiven Technologien effizient durch Ihre Website navigieren können.

Eine logische Tab-Reihenfolge erleichtert die Navigation und ermöglicht es Nutzern, interaktive Elemente, Links und Formularfelder in einer vorhersehbaren und sinnvollen Reihenfolge zu erreichen.

Von einer gut strukturierten Tab-Reihenfolge profitieren insbesondere:

Menschen mit motorischen Einschränkungen oder eingeschränkter Fingerfertigkeit, die auf Tastaturnavigation angewiesen sind, um Webinhalte zu nutzen.
Sehbehinderte Nutzer, die Screenreader oder andere unterstützende Technologien verwenden, um sich systematisch und effizient durch Website-Elemente zu bewegen.

Ohne eine logische Tab-Reihenfolge haben Menschen mit Behinderungen möglicherweise Schwierigkeiten, sich in einer vorhersehbaren Reihenfolge durch die Website zu bewegen. Dies kann zu Orientierungslosigkeit und Frustration führen.

Fehlender Zugang zu interaktiven Elementen, Links oder Formularfeldern kann zudem verhindern, dass Nutzer wichtige Aufgaben erledigen oder auf wesentliche Informationen zugreifen können.

website tab order

Testen der logischen Tab-Reihenfolge

Um zu überprüfen, ob Ihre Website über eine logische Tab-Reihenfolge verfügt, können Sie:

Mit der Tastaturnavigation testen: Navigieren Sie ausschließlich mit der Tabulator-Taste durch Ihre Website und beobachten Sie, ob der Fokus sich in einer sinnvollen und intuitiven Reihenfolge durch interaktive Elemente, Links und Formularfelder bewegt.
Die HTML-Struktur inspizieren: Überprüfen Sie den HTML-Code Ihrer Website, um sicherzustellen, dass interaktive Elemente in einer logischen Reihenfolge angeordnet sind und die tabindex-Attribute eine konsistente und sinnvolle Reihenfolge haben.

Korrekturmaßnahmen für Ihre Website

Um eine logische Tab-Reihenfolge sicherzustellen, können Sie folgende Maßnahmen ergreifen:

Saubere HTML-Struktur verwenden: Nutzen Sie semantische HTML-Elemente und eine korrekte Verschachtelung, um eine logische Hierarchie der Webinhalte zu erstellen.
tabindex-Attribute sparsam einsetzen: Verwenden Sie tabindex nur dort, wo es unbedingt notwendig ist, beispielsweise für benutzerdefinierte interaktive Elemente oder spezielle Navigationsanforderungen.
Tastaturnavigation regelmäßig testen: Überprüfen Sie kontinuierlich die Tab-Reihenfolge Ihrer Website, um sicherzustellen, dass Nutzer Inhalte in einer logischen und effizienten Reihenfolge durchlaufen können.

Nutzerfeedback einholen: Ermutigen Sie Rückmeldungen von Nutzern, insbesondere von Menschen mit Behinderungen, um Navigationsprobleme zu identifizieren und die Tab-Reihenfolge auf Ihrer Website bei Bedarf zu verbessern.

10. Einzigartige und kontextbezogene Links verwenden

Unternehmen sollten einzigartige und kontextbezogene Links bereitstellen, um die Barrierefreiheit im Web zu gewährleisten. Dadurch wird sichergestellt, dass alle Nutzer, einschließlich Menschen mit Behinderungen, den Zweck und das Ziel jedes Links verstehen können.

Einzigartige und kontextbezogene Links verbessern die Benutzerfreundlichkeit und Navigation, indem sie klare und beschreibende Linktexte bieten. So können Nutzer bereits im Voraus einschätzen, welche Inhalte sie erwarten, wenn sie auf den Link klicken.

Ohne klare Links müssen sich Nutzer auf Versuch-und-Irrtum-Methoden verlassen, um sich auf einer Website zurechtzufinden. Dies ist zeitaufwendig, frustrierend und erschwert es, die Relevanz von Links anhand des umgebenden Inhalts zu verstehen, was die Navigation erheblich erschwert.

Von einzigartigen und kontextbezogenen Links profitieren vorwiegend:

Menschen mit kognitiven Beeinträchtigungen, da sie sich durch verständliche Linktexte besser orientieren können.
Sehbehinderte Nutzer, die auf Screenreader angewiesen sind, um den Inhalt der Links zu erfassen.
Menschen, die unterstützende Technologien nutzen, um eine effiziente Navigation und Interaktion mit Ihrer Website zu gewährleisten.

Testen einzigartiger und kontextbezogener Links

Sie können überprüfen, ob Ihre Website über einzigartige und kontextbezogene Links verfügt, indem Sie:

Den HTML-Code inspizieren: Überprüfen Sie die <a>-Elemente in Ihrem HTML-Code, um sicherzustellen, dass jeder Link einen aussagekräftigen und relevanten Linktext enthält, der das Ziel oder den Zweck des Links klar vermittelt.
Barrierefreiheitstools verwenden: Nutzen Sie automatische Barrierefreiheitstools oder Browser-Erweiterungen, die die Linktexte analysieren und Feedback zu ihrer Klarheit, Relevanz und Einzigartigkeit geben.

Korrekturmaßnahmen für Ihre Website

Überprüfen Sie Ihre Website, um sicherzustellen, dass die Links verständlich sind und das Ziel klar beschreiben. Hier sind einige Beispiele für kontextbezogene Linktexte:

„Erfahren Sie mehr über die Nachhaltigkeitsinitiativen unseres Unternehmens“
„Laden Sie den neuesten Produktkatalog (PDF) herunter“
„Kontaktieren Sie uns, um einen Beratungstermin zu vereinbaren“
„Besuchen Sie unseren FAQ-Bereich, um Antworten auf häufige Fragen zu erhalten“
„Lesen Sie unseren Blog für Branchen-News und Updates“

11. Textuelle Hinweise neben Farbmarkierungen verwenden

Das Verwenden von textuellen Hinweisen bei farbigen Texten ist entscheidend, um Barrierefreiheit und Inklusivität auf Websites sicherzustellen. Solche Hinweise bieten zusätzlichen Kontext und Klarheit, insbesondere für Nutzer, die Schwierigkeiten haben, Farben wahrzunehmen oder zu unterscheiden.

Textuelle Hinweise bei farbigen Texten kommen insbesondere folgenden Gruppen zugute:

Menschen mit Farbsehschwächen (z. B. Farbenblindheit), die Schwierigkeiten haben, bestimmte Farben zu unterscheiden.
Sehbehinderte Nutzer, die auf Screenreader oder andere assistive Technologien angewiesen sind.

Herausforderungen ohne textuelle Hinweise bei farbigen Texten

Ohne zusätzliche Hinweise können folgende Probleme auftreten:

Missverständnisse oder Fehlinterpretationen von Inhalten, die sich ausschließlich durch Farbe unterscheiden.
Schwierigkeiten, wichtige Informationen oder visuelle Hinweise zu erfassen, die ausschließlich durch Farbe vermittelt werden.
Eingeschränkter Zugang zu relevanten Inhalten oder Funktionen, wenn Farbe allein zur Unterscheidung verwendet wird.

Testen von textuellen Hinweisen neben Farbmarkierungen

Um zu überprüfen, ob Ihre Website textuelle Hinweise neben Farbmarkierungen verwendet, können Sie:

Den Inhalt Ihrer Website überprüfen: Untersuchen Sie Textelemente wie Überschriften, Labels oder Anweisungen und prüfen Sie, ob sie zusätzliche beschreibende Texte enthalten, anstatt sich ausschließlich auf Farbe als Unterscheidungsmerkmal zu verlassen.
Barrierefreiheitstools verwenden: Nutzen Sie Testwerkzeuge, die Kontrast und Lesbarkeit von Textelementen analysieren und Feedback dazu geben, ob textuelle Hinweise neben Farben vorhanden sind.

Korrekturmaßnahmen für Ihre Website

Um sicherzustellen, dass Farbe nicht das einzige Mittel zur Informationsvermittlung ist, können Sie Anpassungen in Ihrem HTML-Code vornehmen.

Codebeispiel

<!-- Vor der Optimierung: --><p style="color: red;">Wichtige Nachricht</p><!-- Nach der Optimierung: --><p style="color: red;">Wichtige Nachricht <span aria-hidden="true">(Wichtig)</span></p>

Kopieren

In diesem Beispiel wurde ein visuell verstecktes <span>-Element mit dem beschreibenden Text „(Wichtig)“ hinzugefügt, um eine textuelle Ergänzung zur roten Farbmarkierung bereitzustellen.

Dadurch wird sichergestellt, dass die Nachricht für alle Nutzer verständlich ist – einschließlich Menschen mit Farbsehschwächen oder Sehbehinderungen.

12. Verwenden Sie das <img>-Tag für alle relevanten Bilder

Das <img>-Tag ist für alle relevanten Bilder erforderlich, um die Barrierefreiheit für Nutzer mit Behinderungen sicherzustellen. Mit dem <img>-Tag kann ein alternativer Text (alt-Text) eingefügt werden, der eine textliche Beschreibung des Bildinhalts bietet.

Ohne <img>-Tags für alle Bilder können für Menschen mit Behinderungen mehrere Barrieren entstehen:

Screenreader-Nutzer erhalten möglicherweise keine Informationen über den Inhalt oder die Bedeutung der Bilder, was zu Verwirrung oder Frustration führen kann, wenn sie auf rein bildbasierte Inhalte stoßen.
Nutzer mit eingeschränktem Sehvermögen können die Details oder Bedeutung von Bildern möglicherweise nicht erkennen, wenn kein alternativer Text bereitgestellt wird, was ihre Fähigkeit einschränkt, Inhalte vollständig zu erfassen.
Menschen mit kognitiven oder Lernbehinderungen profitieren ebenfalls von Alt-Texten, da diese ihnen helfen, den Kontext und die Relevanz von Bildern innerhalb des Inhalts besser zu verstehen.

Testen von <img>-Tags

Sie können überprüfen, ob Ihre Website <img>-Tags für alle relevanten Bilder verwendet, indem Sie den HTML-Code Ihrer Website inspizieren.

Allerdings fügen die meisten CMS-Plattformen automatisch Bild-Tags hinzu, wenn Bilder hochgeladen werden, sodass das Fehlen von <img>-Tags nur in seltenen Fällen vorkommt.

Korrekturmaßnahmen für Ihre Website

Hier ist ein Beispiel, wie ein <img>-Tag in Ihrem HTML-Code aussehen sollte:

Codebeispiel

<img src="example.jpg" alt="Eine Gruppe von Menschen genießt ein Picknick im Park"> Kopieren

In diesem Beispiel wird das <img>-Tag verwendet, um ein Bild (example.jpg) in die Webseite einzubinden. Das alt-Attribut bietet eine textliche Beschreibung (“Eine Gruppe von Menschen genießt ein Picknick im Park”) des Bildinhalts.

Dieser Alt-Text stellt sicher, dass das Bild für Nutzer, die es nicht visuell wahrnehmen können – wie Screenreader-Nutzer – zugänglich bleibt.

Ermöglichen Sie Nutzern, Bilder auszublenden

Mit accessWidget von accessiBe können Website-Besucher die Option zum Ausblenden von Bildern nutzen. Dies stellt sicher, dass Screenreader-Nutzer nicht unnötig mit Alt-Texten überladen werden.

Probieren Sie accessiBe aus!

13. Überschriften logisch verschachteln

Die logische Verschachtelung von Überschriften ist ein wichtiger Bestandteil der Webzugänglichkeit, da sie die Struktur und Hierarchie des Inhalts auf einer Webseite verdeutlicht.

Korrekt verschachtelte Überschriften bieten eine klare Gliederung der Informationen auf einer Seite. Dies erleichtert es allen Nutzern, einschließlich Menschen mit Behinderungen, den Inhalt zu verstehen und zu navigieren. Eine logische Struktur verbessert die Lesbarkeit, Organisation und Benutzerfreundlichkeit von Webseiten und trägt so zu einer besseren Nutzererfahrung bei.

Von logischer Überschriften-Struktur profitieren:

Sehbehinderte Nutzer, die auf Screenreader angewiesen sind, um den Inhalt der Seite in der richtigen Reihenfolge zu erfassen.
Menschen mit kognitiven Beeinträchtigungen, da eine klare Struktur das Verständnis erleichtert.
Alle Nutzer von assistiven Technologien, da sie durch eine logische Reihenfolge einfacher durch den Inhalt navigieren können.

Testen der Überschriften-Struktur

Überprüfen Sie den HTML-Code Ihrer Website, um sicherzustellen, dass die Überschriften logisch verschachtelt sind.

Ihre Inhalte sollten korrekt H1-, H2- und H3-Überschriften verwenden, wobei jede Überschriften-Ebene die wichtigsten Abschnitte in einer sinnvollen Reihenfolge widerspiegelt.

Korrekturmaßnahmen für Ihre Website

Hier ist ein HTML-Beispiel für die richtige Reihenfolge von Überschriften-Tags:

Codebeispiel

<h1>Hauptüberschrift</h1><h2>Unterüberschrift 1</h2><h3>Unterunterüberschrift 1.1</h3><h3>Unterunterüberschrift 1.2</h3><h2>Unterüberschrift 2</h2><h3>Unterunterüberschrift 2.1</h3>

Kopieren

In diesem Beispiel sind die Überschrifts-Elemente logisch hierarchisch verschachtelt:

H1 stellt die Hauptüberschrift dar.
H2 bezeichnet die wichtigsten Unterüberschriften.
H3 repräsentiert weitere Unterpunkte innerhalb der jeweiligen H2-Abschnitte.

Diese klare Struktur hilft dabei, die Organisation und Zusammenhänge des Inhalts verständlich darzustellen und verbessert die Navigation auf der Seite.

14. Ermöglichen Sie die Anpassung der Textgröße und Zoom-Funktion

Die Möglichkeit, die Textgröße anzupassen und die Zoom-Funktion zu nutzen, ist essenziell für die Barrierefreiheit im Web. Sie ermöglicht es Nutzern, die Darstellung von Inhalten individuell anzupassen, um ihren spezifischen Bedürfnissen und Vorlieben gerecht zu werden.

Durch die Anpassung der Textgröße und Zoom-Funktion können Nutzer die Größe von Texten und anderen Elementen auf einer Webseite vergrößern oder verkleinern, wodurch die Lesbarkeit und Benutzerfreundlichkeit für Menschen mit Sehbehinderungen, eingeschränktem Sehvermögen oder altersbedingten Sehveränderungen verbessert wird.

Dieser inklusiv gestaltete Ansatz stellt sicher, dass alle Nutzer problemlos auf Website-Inhalte zugreifen und mit ihnen interagieren können, ohne auf Hindernisse wie zu kleine Schriftgrößen oder fehlende Vergrößerungsoptionen zu stoßen.

Ohne die Möglichkeit, die Textgröße oder den Zoom anzupassen, können Nutzer mit Sehbehinderungen oder eingeschränktem Sehvermögen Schwierigkeiten haben, kleine oder kontrastarme Texte zu lesen, was zu Augenbelastung, Ermüdung oder eingeschränktem Zugang zu Informationen führt.

Auch ältere Menschen oder Nutzer mit altersbedingten Sehveränderungen könnten Schwierigkeiten haben, kleine Texte oder feine Details auf einer Webseite zu erkennen. Dies kann ihre Fähigkeit zur Navigation und Interaktion mit den Inhalten erheblich beeinträchtigen.

Schließlich benötigen Menschen mit bestimmten kognitiven Beeinträchtigungen oder Lernschwierigkeiten möglicherweise größere Schriftgrößen oder vereinfachte Layouts, um Inhalte besser zu verstehen und die Navigation zu erleichtern – was ohne anpassbare Textgröße und Zoom-Funktion nicht möglich wäre.

text zoom on website

Testen der Textgrößenanpassung und Zoom-Funktion

Sie können überprüfen, ob eine Website die Anpassung der Textgröße und Zoom-Funktion unterstützt, indem Sie deren Funktionalität testen.

Verwenden Sie Standard-Browserfunktionen, um die Textgröße anzupassen (Strg + “+” oder Strg + “-“ unter Windows, Cmd + “+” oder Cmd + “-“ auf einem Mac).
Nutzen Sie die Zoom-Funktion (Strg + Mausrad oder Pinch-to-Zoom auf Touch-Geräten), um zu sehen, ob Änderungen konsistent angewendet werden, ohne dass Inhalte oder Funktionen beeinträchtigt werden.
Überprüfen Sie die Barrierefreiheits-Einstellungen Ihrer Website, um festzustellen, ob es integrierte Optionen zur Anpassung der Textgröße oder des Zoom-Levels gibt.

Korrekturmaßnahmen für Ihre Website

Hier ist ein Beispiel für CSS-Code, der die Standard-Schriftgröße auf 16px setzt und es Nutzern ermöglicht, die Textgröße über ihre Browsereinstellungen zu ändern.

Zusätzlich werden Responsive-Design-Techniken angewendet, um sicherzustellen, dass sich das Layout an verschiedene Bildschirmgrößen anpasst, sodass Nutzer zoomen können, ohne dass Inhalte verloren gehen oder Funktionen beeinträchtigt werden.

Codebeispiel

/* CSS zur Aktivierung der Textgrößenanpassung */body {
font-size: 16px; /* Standard-Schriftgröße */
}/* CSS zur Unterstützung der Zoom-Funktion */@media screen and (max-width: 767px) {
/* Anpassung des Layouts für kleinere Bildschirme */
/* Beispiel: Responsives Design für mobile Geräte */
}

Kopieren

15. Die Sprache der Webseite festlegen

Unternehmen sollten die Sprache einer Webseite festlegen, um die Barrierefreiheit zu verbessern. Dadurch können assistive Technologien und sprachverarbeitende Algorithmen den Inhalt einer Webseite korrekt interpretieren und präsentieren.

Das Festlegen der Sprache Ihrer Website oder einzelner Webseiten stellt sicher, dass Screenreader, Übersetzungstools und andere unterstützende Technologien den Text genau aussprechen oder übersetzen können. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für Menschen, die auf diese Tools angewiesen sind.

Nutzer, die Screenreader verwenden, profitieren besonders davon, wenn die Sprache einer Seite korrekt festgelegt ist. Dadurch kann ein Screenreader die richtigen Aussprache-Regeln und sprachspezifischen Funktionen nutzen, um den Inhalt vorzulesen.

Selbst Menschen mit kognitiven Beeinträchtigungen profitieren davon, wenn Inhalte in ihrer bevorzugten oder muttersprachlichen Sprache dargestellt werden. Dies verbessert das Verständnis und erleichtert die Verarbeitung von Informationen.

Testen der Spracheinstellungen

Sie können überprüfen, ob Ihre Website eine Sprache für jede Seite festgelegt hat, indem Sie den HTML-Code Ihrer Website inspizieren.

Suchen Sie nach dem lang-Attribut innerhalb des <html>-Elements, das die Sprache des Dokuments angibt.
Einige Webbrowser und Barrierefreiheits-Tools können ebenfalls Informationen über die Spracheinstellungen einer Webseite bereitstellen.

Korrekturmaßnahmen für Ihre Website

Um die Sprache für eine Webseite festzulegen, können Sie folgende Schritte ausführen:

Bestimmen Sie die Hauptsprache Ihres Inhalts.
Fügen Sie das lang-Attribut zum öffnenden <html>-Tag Ihrer Webseite hinzu:

Codebeispiel

<!DOCTYPE html><html lang="de"><head>
<meta charset="UTF-8">
<title>Beispielseite</title>
</head><body>
<!-- Inhalt der Webseite -->
</body></html>

Kopieren

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Beispielseite</title>
</head>

<body>
     <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/de/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.accessibilitychecker.org/de/wp-content/litespeed/js/4/55f34b8a47e3362be7a85d77b9f599bb.js?ver=1fdcb"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:)?$/gm,"$1"))}return d}</script></body>

</html>

Setzen Sie den Wert des lang-Attributs auf den entsprechenden Sprachcode (z. B. “de” für Deutsch, “en” für Englisch, “es” für Spanisch).
Optional: Sie können auch das xml:lang-Attribut für XHTML-Dokumente verwenden, um die Sprache zusätzlich festzulegen.
Stellen Sie sicher, dass das lang-Attribut die tatsächliche Hauptsprache widerspiegelt, die in den Inhalten der jeweiligen Webseite verwendet wird.

16. Festlegen der Sprache für Abschnitte auf einer Seite, die sich von der Hauptsprache unterscheiden

Entwickler müssen die Sprache für Abschnitte auf einer Seite festlegen, die sich von der Hauptsprache der Website unterscheiden. Dies stellt sicher, dass assistive Technologien und sprachverarbeitende Algorithmen den Inhalt korrekt interpretieren und präsentieren können.

Das Festlegen einer bestimmten Sprache für einzelne Abschnitte hilft assistiven Technologien dabei:

Die richtigen Aussprache-Regeln und sprachspezifischen Funktionen anzuwenden.
Passende Text-to-Speech-Einstellungen zu verwenden, um die Barrierefreiheit und Benutzerfreundlichkeit zu verbessern.

Screenreader-Nutzer profitieren am meisten davon, wenn Sprachabschnitte richtig gekennzeichnet sind, da dies eine korrekte Aussprache und sprachspezifische Interpretation des Inhalts gewährleistet.

Auch Nutzer mit kognitiven Beeinträchtigungen profitieren von dieser Einstellung, da sie Inhalte dadurch leichter verstehen und verarbeiten können.

Testen der Spracheinstellungen für spezifische Abschnitte

Sie können überprüfen, ob Ihre Website für Abschnitte mit einer anderen Sprache als der Hauptsprache eine Sprachkennzeichnung gesetzt hat, indem Sie den HTML-Code Ihrer Website inspizieren.

Suchen Sie nach dem lang-Attribut innerhalb spezifischer Elemente wie Überschriften (<h1>), Absätze (<p>) oder Abschnitte (<section>), um die Sprache der einzelnen Abschnitte zu identifizieren.

Korrekturmaßnahmen für Ihre Website

Hier ist ein Beispiel für HTML-Code, der zeigt, wie die Sprache für einen bestimmten Abschnitt einer Webseite festgelegt werden kann:

Codebeispiel

<!DOCTYPE html><html lang="de">
<head>
<title>Beispielseite</title>
</head>
<body>
<h1 lang="fr">Bienvenue</h1> <!-- Diese Überschrift ist auf Französisch --><p lang="es">Hola, bienvenido a nuestro sitio web.</p> <!-- Dieser Absatz ist auf Spanisch -->
<!-- Weitere Inhalte -->
</body>
</html>

Kopieren

<!DOCTYPE html>

<html lang="de">
  
<head>
    <title>Beispielseite</title>
</head>
  
<body>
    <h1 lang="fr">Bienvenue</h1>

<p lang="es">Hola, bienvenido a nuestro sitio web.</p> 
     <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.accessibilitychecker.org/de/wp-content/litespeed/js/4/55f34b8a47e3362be7a85d77b9f599bb.js?ver=1fdcb"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:)?$/gm,"$1"))}return d}</script></body>
  
</html>

In diesem Beispiel ist:

Das <h1>-Element auf Französisch (lang=”oft”) gesetzt, um anzuzeigen, dass die Überschrift auf Französisch ist.
Das <p>-Element auf Spanisch (lang=”es”) gesetzt, um anzuzeigen, dass der Absatz auf Spanisch ist.

Dies hilft Screenreadern, den Inhalt korrekt auszusprechen, und verbessert die Benutzerfreundlichkeit für mehrsprachige Webseiten.

17. Frames angemessen benennen

Unternehmen sollten Frames sinnvoll benennen, um die Anforderungen der ADA-Webzugänglichkeit zu erfüllen (5). Dies hilft, Kontext- und Navigationshinweise für Nutzer bereitzustellen, insbesondere für diejenigen, die auf assistive Technologien angewiesen sind.

Richtig benannte Frames helfen Nutzern dabei:

Den Zweck und Inhalt jedes Frames zu verstehen.
Die Navigation zu erleichtern und die Benutzerfreundlichkeit zu verbessern.

Neben der Unterstützung von Screenreader-Nutzern profitieren auch Menschen mit kognitiven Beeinträchtigungen von korrekt benannten Frames, da sie ihnen helfen, Informationen besser zu verarbeiten.

Nicht definierte oder unklare Frame-Namen erschweren es Nutzern, den Zweck und Kontext der einzelnen Frames zu verstehen. Dies kann zu Verwirrung, Frustration und eingeschränkter Zugänglichkeit für Menschen mit Behinderungen führen.

accessible web development

Testen von Frame-Namen

Sie können überprüfen, ob Ihre Website korrekt benannte Frames verwendet, indem Sie den HTML-Code jeder Webseite inspizieren.

Suchen Sie nach <frame>– oder <iframe>-Elementen und stellen Sie sicher, dass jedes Frame-Element über ein aussagekräftiges title– oder name-Attribut verfügt.
Einige Barrierefreiheits-Tools können ebenfalls Informationen über die Frame-Namen und deren Zugänglichkeit bereitstellen.

Korrekturmaßnahmen für Ihre Website

Hier ist ein Beispiel für korrekt benannte Frames in einem HTML-Code:

Codebeispiel

<!DOCTYPE html><html>
<head>
<title>Beispielseite mit Frames</title>
</head>
<frameset cols="25%,75%">
<frame src="menu.html" title="Hauptmenü">
<frame src="content.html" title="Hauptinhalt">
</frameset>
</html>

Kopieren

In diesem Beispiel enthält das <frameset>-Element zwei Frames, die jeweils mit einem beschreibenden title-Attribut versehen sind:

title=”Hauptmenü” für das Navigationsmenü
title=”Hauptinhalt” für den Hauptinhalt

Diese Titel ermöglichen es Nutzern – insbesondere Screenreader-Nutzern – den Zweck und Inhalt jedes Frames zu verstehen und erleichtern so die Navigation.

18. Einhaltung der Richtlinien für blinkende Elemente sicherstellen

Die WCAG-Richtlinien für blinkende Elemente helfen Unternehmen dabei, Auslöser für epileptische Anfälle und andere sensorische Reaktionen bei Nutzern mit fotosensitiver Epilepsie oder anderen sensorischen Empfindlichkeiten zu vermeiden.

Durch die Einhaltung dieser Richtlinien zeigen Unternehmen ihr Engagement für eine sichere und inklusive Online-Umgebung, die für alle Nutzer zugänglich ist – unabhängig von ihren individuellen Bedürfnissen oder Einschränkungen.

Von den Richtlinien für blinkende Elemente profitieren vorwiegend Nutzer mit sensorischen Empfindlichkeiten, die auf flackernde oder blinkende Inhalte reagieren. Doch auch Nutzer mit kognitiven Beeinträchtigungen oder Aufmerksamkeitsstörungen profitieren indirekt, da die Reduzierung von Ablenkungen und visuellen Barrieren den Zugriff auf Webinhalte erleichtert.

Testen der Einhaltung der Richtlinien für blinkende Elemente

Um zu überprüfen, ob Ihre Website den erforderlichen WCAG-Richtlinien für blinkende Elemente entspricht, sollten Sie Ihre Webseiten auf flackernde oder schnell wechselnde Inhalte untersuchen.

Korrekturmaßnahmen für Ihre Website

Im folgenden Beispiel wird ein Blinkeffekt mithilfe von CSS-Animationen erzeugt.

Um jedoch den WCAG-Richtlinien zu entsprechen, sollten Entwickler sicherstellen, dass blinkende oder sich schnell ändernde Inhalte nicht die empfohlenen Schwellenwerte für Blitz- und Rotlichtblitze überschreiten, die in den Richtlinien festgelegt sind.

Codebeispiel

<style>.flashing-element {
animation: pulse 1s infinite alternate;
}@keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}</style><div class="flashing-element">
<!-- Inhalt des blinkenden Elements -->
</div>

Kopieren

Bieten Sie nutzerfreundliche Anfallschutz-Profile an

Mit dem accessWidget von accessiBe können Sie Nutzern ermöglichen, ein anfallssicheres Profil zu aktivieren, das blinkende Elemente automatisch entfernt.

Probieren Sie accessiBe aus!

19. Unerwartete Timeouts auf Ihrer Website vermeide

Unternehmen sollten unerwartete Timeouts auf ihrer Website vermeiden, um die Barrierefreiheit zu gewährleisten. Dies stellt sicher, dass alle Nutzer – einschließlich Menschen mit Behinderungen – ausreichend Zeit haben, um mit der Website zu interagieren und Aufgaben zu erledigen.

Unerwartete Timeouts können erhebliche Barrieren schaffen, insbesondere für Nutzer, die mehr Zeit benötigen, um durch Inhalte zu navigieren, Formulare auszufüllen oder Transaktionen abzuschließen.

Die Vermeidung unerwarteter Timeouts kommt besonders folgenden Nutzergruppen zugute:

Nutzer mit motorischen Beeinträchtigungen: Personen mit eingeschränkter Mobilität benötigen möglicherweise mehr Zeit, um sich durch eine Website zu bewegen und Aktionen auszuführen. Erweiterte Zeitlimits ermöglichen es ihnen, Aufgaben ohne Zeitdruck oder Stress zu erledigen.
Nutzer mit kognitiven Beeinträchtigungen: Menschen mit kognitiven Einschränkungen benötigen oft mehr Zeit, um Informationen zu verarbeiten, Entscheidungen zu treffen und Aufgaben abzuschließen. Die Vermeidung von unerwarteten Timeouts stellt sicher, dass sie ohne Überforderung oder Frustration auf Inhalte zugreifen und damit interagieren können.

Kurz gesagt: Websites mit unerwarteten Timeouts bieten eine schlechte Benutzererfahrung.

Timeouts können den Surfprozess unterbrechen und verhindern, dass Nutzer ihre Aufgaben innerhalb der vorgegebenen Zeit abschließen können.

Testen unerwarteter Timeouts

Um festzustellen, ob Ihre Website unerwartete Timeouts aufweist, sollten Sie:

Benutzerfreundlichkeit-Tests durchführen, um das Nutzerverhalten zu analysieren.
Feedback von Nutzern einholen, um mögliche Probleme zu identifizieren.
Ihre Website-Analysen auswerten, um Muster im Nutzungsverhalten zu erkennen.
Barrierefreiheits-Tools verwenden, um zu prüfen, ob unerwartete Timeouts auftreten.

Korrekturmaßnahmen für Ihre Website

Unerwartete Timeouts können durch folgende Maßnahmen verhindert werden:

Benutzerfreundliche Zeitlimits implementieren und Nutzern ausreichend Warnungen sowie Optionen zur Verlängerung oder Anpassung der Zeitlimits bieten.
Website-Performance optimieren, um Ladezeiten zu reduzieren und das Risiko unerwarteter Timeouts während der Interaktion mit der Website zu minimieren.
Klare Anweisungen und Fehlermeldungen bereitstellen, um Nutzern zu helfen, zeitkritische Aufgaben besser zu bewältigen und die allgemeine Benutzerfreundlichkeit der Website zu verbessern.

Diese Maßnahmen tragen dazu bei, die Zugänglichkeit und Nutzererfahrung Ihrer Website deutlich zu verbessern.

20. Vermeiden Sie das Einschließen des Tastaturfokus in Schleifen auf einer Website

Wenn der Tastaturfokus in einer Schleife auf einer Website gefangen wird, kann dies gegen die ADA-Webzugänglichkeitsanforderungen verstoßen.

Es ist wichtig, dies zu vermeiden, um sicherzustellen, dass Nutzer mithilfe der Tastatur oder assistiver Technologien durch Inhalte und interaktive Elemente navigieren können.

Das Einschließen des Tastaturfokus in einer Schleife kann verhindern, dass Nutzer auf bestimmte Bereiche der Website zugreifen können. Dies führt zu Frustration und beeinträchtigt die Möglichkeit, effektiv mit Ihrer Website zu interagieren.

Wer profitiert von der Vermeidung von Tastaturfokus-Schleifen?

Menschen mit motorischen Einschränkungen: Nutzer, die auf Tastaturnavigation angewiesen sind, profitieren davon, sich frei zwischen interaktiven Elementen bewegen zu können, ohne in einer Schleife gefangen zu werden. Dadurch können sie Inhalte effizienter navigieren und verwenden.
Menschen mit Sehbehinderungen: Nutzer, die Screenreader oder andere Tastatur-gestützte Technologien verwenden, profitieren von einer logischen und vorhersehbaren Fokusreihenfolge. Wenn der Fokus in einer Schleife gefangen ist, kann dies das Surferlebnis stören und den Zugriff auf Inhalte erschweren.

Testen auf Tastaturfokus-Schleifen

Um zu überprüfen, ob Ihre Website Tastaturfokus-Schleifen enthält:

Navigieren Sie durch die Website nur mit der Tastatur und prüfen Sie, ob der Fokus an einer Stelle stecken bleibt oder sich nicht zu anderen Teilen der Seite bewegen lässt.
Nutzen Sie die Entwicklertools Ihres Browsers, um den HTML-Code und JavaScript-Ereignishandler zu untersuchen und mögliche Fokusprobleme zu identifizieren.

Korrekturmaßnahmen für Ihre Website

Hier ist ein Beispiel für HTML-Code, der verhindert, dass der Tastaturfokus in einer Schleife gefangen wird:

Codebeispiel

<div id="modal" tabindex="-1" aria-labelledby="modal-title" role="dialog">
<div role="document">
<h2 id="modal-title">Modales Dialogfeld</h2>
<button id="close-btn">Schließen</button>
<!-- Modal-Inhalt -->
</div>
</div>

Kopieren

In diesem Beispiel hat das Modal-Dialogfeld ein tabindex=”-1″-Attribut, das es ermöglicht, programmatisch den Fokus zu erhalten, aber verhindert, dass es in der natürlichen Tabulator-Reihenfolge enthalten ist.

Wenn das Modal geschlossen wird (z. B. durch Klicken auf den „Schließen“-Button), sollte der Tastaturfokus zurück auf das richtige Element außerhalb des Modals gesetzt werden, um zu verhindern, dass Nutzer in einer Schleife gefangen sind.

Zusätzlich können JavaScript-Ereignishandler verwendet werden, um das Fokusverhalten zu steuern und eine barrierefreie Nutzererfahrung sicherzustellen.

21. Durchführung von Barrierefreiheitsprüfungen

Unternehmen sollten regelmäßige Barrierefreiheitsprüfungen durchführen, um sicherzustellen, dass ihre Websites inklusiv und für alle Nutzer zugänglich sind, unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen.

Durch Barrierefreiheitsprüfungen können Unternehmen Hindernisse identifizieren und beheben, die Menschen mit Behinderungen daran hindern, Webinhalte effektiv zu nutzen.

Die Einhaltung der Webzugänglichkeitsstandards (ADA, WCAG) verbessert nicht nur die Benutzererfahrung, sondern hilft Unternehmen auch:

Gesetzliche Anforderungen zu erfüllen und Branchenstandards einzuhalten.
Ihre Markenreputation zu verbessern.
Ihre Zielgruppe zu erweitern, indem sie mehr Nutzer einbeziehen.

Wer profitiert von Barrierefreiheitsprüfungen?

Menschen mit Sehbehinderungen: Tests stellen sicher, dass alternative Darstellungsformen (z. B. Screenreader oder Vergrößerungssoftware) funktionieren, sodass Nutzer mit Sehbehinderungen Inhalte besser wahrnehmen und verstehen können.
Menschen mit Hörbehinderungen: Eine barrierefreie Website sorgt dafür, dass gehörlose oder schwerhörige Nutzer weiterhin mit Inhalten interagieren können – beispielsweise durch Untertitel oder Transkripte für Audioinhalte.
Menschen mit motorischen Einschränkungen: Barrierefreiheitstests überprüfen, ob Webinhalte vollständig per Tastaturnavigation oder alternativen Eingabemethoden bedienbar sind, sodass Nutzer keine Maus verwenden müssen.
Menschen mit kognitiven Beeinträchtigungen: Regelmäßige Tests stellen sicher, dass Inhalte leicht verständlich und vorhersehbar strukturiert sind, um das Verständnis und die Benutzerfreundlichkeit zu verbessern.

Ohne angemessene Tests kann Ihre Website wichtige Barrierefreiheitsfunktionen wie:

Alternativtexte für Bilder fehlen.
Unterstützung für Tastaturnavigation unzureichend sein.
Fehlende semantische HTML-Struktur dazu führen, dass assistive Technologien Inhalte nicht richtig interpretieren können.

Accessibility Checker

Scannen Sie Ihre Website kostenlos auf barrierefreiheitsrelevante Probleme

Testen der Webzugänglichkeit

Es gibt zwei Hauptmethoden, um Barrierefreiheitsprüfungen durchzuführen:

Automatisierte Tests

Nutzen Sie automatische Prüftools, die Ihre Website nach bekannten Barrierefreiheitsproblemen durchsuchen.
Einige dieser Tools erstellen detaillierte Berichte mit einer Liste aller Probleme und Anleitungen zur Behebung.

Manuelle Prüfungen

Diese Methode ist detaillierter, da sie sowohl die technische Ebene des Codes als auch die tatsächliche Benutzererfahrung berücksichtigt.
Entwickler und Tester analysieren alle Aspekte der Website aus Sicht eines Nutzers mit assistiven Technologien.

22. Eine Möglichkeit zur Meldung von Barrierefreiheitsproblemen bereitstellen

Unternehmen sollten eine Möglichkeit für Nutzer bereitstellen, Barrierefreiheitsprobleme zu melden, um ihr Engagement für Inklusivität zu zeigen und sicherzustellen, dass alle Nutzer – einschließlich Menschen mit Behinderungen – eine Stimme bei der Identifizierung und Behebung von Barrieren haben.

Von Nutzern gemeldete Barrierefreiheitsprobleme liefern wertvolles Feedback, das Unternehmen dabei hilft, die Zugänglichkeit ihrer Websites zu verbessern, die Benutzererfahrung für alle zu optimieren und auf die Bedürfnisse von Menschen mit Behinderungen einzugehen.

Die Möglichkeit, Barrierefreiheitsprobleme zu melden, kommt Nutzern mit verschiedenen Behinderungen zugute, darunter:

Sehbehinderungen
Hörbehinderungen
Kognitive Beeinträchtigungen
Eingeschränkte Mobilität

Korrekturmaßnahmen für Ihre Website

Unternehmen können Nutzern verschiedene Möglichkeiten bieten, um Barrierefreiheitsprobleme zu melden, darunter:

Kontaktformulare: Fügen Sie ein spezielles Kontaktformular auf Ihrer Website hinzu, über das Nutzer Barrierefreiheitsprobleme melden können.
E-Mail: Ermöglichen Sie Nutzern, E-Mails an eine spezielle Barrierefreiheits-Kontaktadresse zu senden, um Probleme und Feedback mitzuteilen.
Live-Chat oder Support: Bieten Sie einen Live-Chat-Support oder Online-Support, bei dem Nutzer direkt mit einem Vertreter kommunizieren können, um Probleme in Echtzeit zu melden.
Barrierefreiheits-Feedback-Widget: Integrieren Sie ein Barrierefreiheits-Feedback-Widget oder eine Toolleiste auf Ihrer Website, damit Nutzer Probleme direkt von der aktuellen Webseite aus melden können.
Soziale Medien: Ermutigen Sie Nutzer, Barrierefreiheitsprobleme über Ihre Social-Media-Kanäle zu melden, indem Sie spezielle Hashtags oder Handles für barrierefreiheitsbezogene Anfragen und Feedback bereitstellen.

Infographic: Guidelines for reporting web accessibility issues

23. Multimedia-Inhalte richtig taggen

Ein weiteres ADA-Webzugänglichkeitskriterium ist, dass Multimedia-Inhalte korrekt getaggt werden müssen. Dies stellt sicher, dass Menschen mit Behinderungen Inhalte effektiv wahrnehmen und verstehen können.

Tags bieten beschreibende Textalternativen für Multimedia-Elemente, sodass assistive Technologien wie Screenreader die Informationen an Nutzer weitergeben können, die Inhalte visuell oder akustisch nicht wahrnehmen können.

Richtig getaggte Multimedia-Inhalte verbessern zudem:

Die Webzugänglichkeit für alle Nutzer
Die Suchmaschinenoptimierung (SEO)
Die allgemeine Benutzererfahrung

Wer profitiert von richtig getaggten Multimedia-Inhalten?

Blinde oder sehbehinderte Nutzer profitieren davon, wenn Screenreader alternative Textbeschreibungen für Bilder bereitstellen.
Gehörlose oder schwerhörige Nutzer profitieren von Untertiteln oder Transkripten, die ihnen den Zugang zu Audio- oder Videoinhalten ermöglichen.

Testen von Multimedia-Tags

Sie können überprüfen, ob Ihre Website Multimedia-Inhalte korrekt taggt, indem Sie:

Den HTML-Code der Webseite inspizieren und sicherstellen, dass folgende Tags vorhanden sind:

<img> für Bilder
<video> für Videos
<audio> für Audiodateien

Barrierefreiheits-Tools verwenden, um den Webinhalt auf Probleme zu analysieren. Diese Tools überprüfen, ob alternative Texte für Bilder sowie Untertitel oder Transkripte für Multimedia-Dateien vorhanden sind.

Korrekturmaßnahmen für Ihre Website

Im folgenden Beispiel sind Multimedia-Elemente korrekt getaggt:

Codebeispiel

<img src="example.jpg" alt="Beschreibung des Bildes"><video controls>
<source src="example.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video><audio controls>
<source src="example.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>

Kopieren

24. Seiten ohne CSS nutzbar machen

Unternehmen sollten Webseiten ohne CSS nutzbar machen, um die Barrierefreiheit zu gewährleisten und sicherzustellen, dass Nutzer Inhalte effektiv aufrufen und damit interagieren können, auch wenn sie Einschränkungen oder Behinderungen haben, die ihre Fähigkeit zur Wahrnehmung oder Interpretation visueller Stile beeinflussen.

Durch eine funktionale und zugängliche Gestaltung ohne ausschließliche Abhängigkeit von CSS für die Darstellung wird die Benutzerfreundlichkeit und Inklusivität für alle Nutzer verbessert, einschließlich jener, die assistive Technologien nutzen oder eingeschränkten Zugang zu visuellen Inhalten haben.

Eine Website, die nicht auf CSS angewiesen ist, bietet Vorteile für verschiedene Nutzergruppen, insbesondere für:

Sehbehinderte Nutzer: Blinde oder sehbeeinträchtigte Nutzer verlassen sich auf Screenreader oder Vergrößerungssoftware, die CSS-Stile nicht interpretieren. Wenn Inhalte ohne CSS weiterhin zugänglich und strukturiert bleiben, können diese Nutzer Webseiten effektiv navigieren und verstehen.
Nutzer mit kognitiven Beeinträchtigungen: Komplexe oder visuell überladene Layouts können für Menschen mit kognitiven Einschränkungen schwer zu verarbeiten sein. Eine vereinfachte Darstellung und eine klare inhaltliche Hierarchie ohne CSS verbessern das Verständnis und reduzieren die kognitive Belastung.

Testen der Nutzbarkeit ohne CSS
Um zu testen, ob eine Website ohne CSS nutzbar bleibt, sollten CSS-Stile im Webbrowser deaktiviert werden. Dabei kann beobachtet werden, wie sich Inhalte und Funktionen verändern. Barrierefreiheits-Tools können ebenfalls zur Überprüfung genutzt werden.

Optimierung der Website
Entwickler können sicherstellen, dass eine Website ohne CSS nutzbar bleibt, indem sie bewährte Methoden für semantisches HTML und progressive Verbesserungstechniken anwenden. Dazu gehört:

Verwendung semantischer HTML-Elemente zur logischen Strukturierung von Inhalten, um die Barrierefreiheit für Nutzer mit assistiven Technologien sicherzustellen.
Bereitstellung sinnvoller Textalternativen für Bilder, Links und andere nicht textbasierte Inhalte zur Verbesserung der Zugänglichkeit und Verständlichkeit.
Umsetzung responsiver Designprinzipien, damit Inhalte unabhängig von CSS-Styling auf verschiedenen Geräten und Bildschirmgrößen zugänglich bleiben.
Nutzung von CSS für visuelle Darstellung und Layoutverbesserungen, aber Sicherstellung, dass essenzielle Inhalte und Funktionen auch ohne CSS erhalten bleiben.

25. Bereitstellung von Links zu erforderlichen Plug-ins auf einer Seite

Durch die Bereitstellung von Links zu erforderlichen Plug-ins auf einer Webseite wird sichergestellt, dass alle Nutzer die notwendige Software oder Erweiterungen installieren können, um mit Multimedia-Inhalten oder anderen interaktiven Funktionen der Website zu interagieren.

Dadurch können Nutzer die erforderlichen Schritte unternehmen, um Inhalte unabhängig von ihren technischen Möglichkeiten oder assistiven Technologien zu nutzen.

Nutzer, die auf Screenreader oder Vergrößerungssoftware angewiesen sind, benötigen möglicherweise Plug-ins, um auf Multimedia-Inhalte oder interaktive Funktionen zuzugreifen, die von ihren assistiven Technologien nicht nativ unterstützt werden. Die Bereitstellung von Links zu erforderlichen Plug-ins gewährleistet, dass sehbehinderte Nutzer die Inhalte effektiv nutzen können.

Menschen mit kognitiven Beeinträchtigungen können ebenfalls zusätzliche Unterstützung oder Tools benötigen, um mit komplexen Multimedia-Inhalten oder interaktiven Elementen zu interagieren.

Testen der Verfügbarkeit von Plugin-Links
Um zu überprüfen, ob eine Website Links zu erforderlichen Plug-ins bereitstellt, sollte sie auf Referenzen oder Anweisungen zur Plug-in-Installation oder Kompatibilität untersucht werden. Dabei sollten Links, Schaltflächen oder Textaufforderungen geprüft werden, die darauf hinweisen, dass bestimmte Plug-ins zum Zugriff auf Multimedia-Inhalte oder interaktive Funktionen erforderlich sind.

Optimierung der Website
Entwickler sollten sicherstellen, dass Links zu den erforderlichen Plug-ins klar und zugänglich bereitgestellt werden, sodass die Nutzer diese problemlos finden und nutzen können. Dies kann durch folgende Maßnahmen erreicht werden:

Verwendung beschreibender Texte oder Labels, die den Zweck des Links eindeutig angeben (z. B. „Adobe Flash Player herunterladen“).
Nutzung standardisierter Hyperlink-Stile oder Schaltflächen, um die Links optisch von anderen Inhalten auf der Seite abzuheben.
Bereitstellung alternativer Texte für die Links, um die Zugänglichkeit für die Nutzer zu gewährleisten, die auf Screenreader oder andere assistive Technologien angewiesen sind.
Sicherstellung, dass die Links funktional sind und auf die richtige Download- oder Installationsseite des benötigten Plug-ins verweisen.
Platzierung der Links an gut sichtbaren Stellen auf der Seite, z. B. in unmittelbarer Nähe zu den Multimedia-Inhalten oder interaktiven Funktionen, die die Plug-ins erfordern.

26. Barrierefreie PDF-Dateien

Webzugänglichkeit umfasst alle Elemente auf einer Website, einschließlich PDF-Dokumente (6). Es ist wichtig, barrierefreie PDF-Dateien bereitzustellen, damit alle Nutzer auf die Inhalte zugreifen und diese verstehen können.

Barrierefreie PDF-Dateien fördern die Inklusivität, indem sie Funktionen wie alternative Texte, eine korrekte Dokumentenstruktur und Navigationshilfen bieten. Diese ermöglichen es Menschen mit Behinderungen, Inhalte effektiv wahrzunehmen, zu verstehen und damit zu interagieren.

Barrierefreie PDF-Dateien kommen verschiedenen Nutzergruppen zugute, darunter:

Sehbehinderte Nutzer: Blinde oder sehbeeinträchtigte Personen sind auf Screenreader oder Vergrößerungssoftware angewiesen, um digitale Inhalte zu nutzen. Barrierefreie PDF-Dateien stellen eine strukturierte Gliederung, alternative Textbeschreibungen für Bilder und eine logische Lesereihenfolge bereit, damit sehbehinderte Nutzer die Inhalte navigieren und verstehen können.
Menschen mit motorischen Beeinträchtigungen: Viele Nutzer mit motorischen Einschränkungen nutzen die Tastatur oder assistive Technologien zur Navigation in PDF-Dokumenten. Barrierefreie PDF-Dateien stellen sicher, dass interaktive Elemente wie Formularfelder oder Hyperlinks per Tastatureingabe zugänglich sind, sodass diese Nutzer problemlos mit dem Inhalt interagieren können.
Menschen mit kognitiven Beeinträchtigungen: Nutzer mit kognitiven Einschränkungen profitieren von vereinfachten Layouts, klaren Überschriften und einer konsistenten Formatierung in barrierefreien PDF-Dateien.

PDF accessibility

Testen der Barrierefreiheit von PDFs
Zur Prüfung der Barrierefreiheit von PDF-Dateien können PDF-Testtools oder Software wie Adobe Acrobat verwendet werden.

Folgende Elemente sollten überprüft werden:

Alternative Texte für Bilder
Korrekte Dokumentenstruktur mit Überschriften und Listen
Lesbare Texte mit ausreichendem Farbkontrast
Barrierefreie Formularfelder und Links

Optimierung von PDFs
PDF-Dateien können durch folgende Maßnahmen barrierefrei gemacht werden:

Alternative Textbeschreibungen für Bilder und andere nicht textuelle Inhalte hinzufügen
Eine logische Dokumentenstruktur mit Überschriften, Listen und Tabellen erstellen
Sicherstellen, dass Texte und Hintergründe ausreichenden Farbkontrast aufweisen
Beschreibende Linktexte und barrierefreie Formularfelder einfügen
Dokumenteigenschaften und Metadaten für eine bessere Navigation und Auffindbarkeit aktivieren
Barrierefreie Schriftarten und Formatierungen verwenden

Schalten Sie ein PDF-Barrierefreiheitsangebot frei in 24 Stunden oder weniger!

AccessibilityChecker.org ist spezialisiert auf PDF-Barrierefreiheit und kümmert sich um alles, von einfachen Dokumenten bis hin zu großen, komplexen Dateien. Mit der Kapazität, bis zu 20.000 Seiten pro Monat zu verarbeiten, gewährleisten wir eine gründliche Einhaltung der Barrierefreiheitsstandards. Kontaktieren Sie uns gerne, um mehr zu erfahren!

Laden Sie Ihr PDF hoch

Wo kann ich die ADA-Anforderungen-Checkliste für Websites herunterladen?

Zur besseren Übersicht über die ADA-Webzugänglichkeitsanforderungen in diesem Dokument und zur Unterstützung bei der Prüfung und Optimierung von Websites kann hier eine umfassende PDF-Checkliste heruntergeladen werden.

Diese Checkliste wird regelmäßig aktualisiert, um sicherzustellen, dass Websites den neuesten Anforderungen entsprechen. Die aktuellste Version wurde 2025 aktualisiert.

Welche ADA-Tools machen Ihre Website ADA-konform?

accessiBe

WCAG
ADA
Section 508
AODA
EAA

accessiBe ist ein führender Anbieter von Webzugänglichkeitslösungen und wird von Tausenden Website-Besitzern und Marken genutzt. Es stellt sicher, dass Unternehmen die neuesten Webzugänglichkeitsstandards einhalten.

Die KI von accessiBe analysiert und scannt Websites mithilfe kontextuellen Verständnisses und Erkennung, um sicherzustellen, dass sie wahrnehmbar, robust, verständlich und bedienbar sind. Neben der Kompatibilität mit assistiven Technologien bietet accessiBe ein Barrierefreiheits-Widget für UI- und Design-Anpassungen, das Website-Besuchern mehr Kontrolle über ihr Erlebnis gibt.

Website-Besitzer erhalten zudem eine Barrierefreiheits-Erklärung und ein Zertifikat über die Konformität.

Preise: ab 490 $ pro Jahr für Websites mit weniger als 1.000 Seiten.

Vorteile

zweiminütiger Installationsprozess auf jeder Website-Plattform
Wird von führenden Marken genutzt
Benutzerfreundliches Interface
Kostenlose Testversion verfügbar

Nachteile

Keine Unterstützung für dynamische Inhalte
Inkompatibilität mit bestimmten Web-Apps

Bestehende Kunden

Website öffnen Detaillierte Überprüfung

UserWay

WCAG
ADA
Section 508
AODA
EAA

Diese automatisierte, KI-gestützte Lösung ist eine beliebte Wahl für Unternehmen jeder Größe. Wie viele der führenden Tools stellt UserWay sicher, dass Ihre Website ADA Title III, Section 508 und WCAG 2.2-konform ist.

Das Barrierefreiheit-Monitoring von UserWay scannt Ihre Website auf ADA-Konformität und hilft Entwicklern, Probleme im Layout oder im Inhalt zu erkennen und zu beheben. Zusätzlich kann eine Barrierefreiheits-Überlagerung auf der Website integriert werden, die es Nutzern ermöglicht, ihre Erfahrung individuell anzupassen.

Nach der Optimierung der Website kann UserWay eine Barrierefreiheits-Erklärung generieren.

Preise: ab 490 $ pro Jahr für Websites mit bis zu 100.000 Seiten.

Vorteile

Auf über 1 Million Websites installiert
Bietet mehrere Barrierefreiheitslösungen
Kostenlose Testversion verfügbar
Einfache Installation
Unterstützung mehrerer Sprachen

Nachteile

Interface und Lösungen können anfangs überfordernd wirken

Bestehende Kunden

Website öffnen Detaillierte Überprüfung

Zusammenfassung

Dank technologischer Fortschritte war es noch nie so einfach, ADA–Title III-Konformität zu erreichen.

Die Einhaltung der ADA-Richtlinien eröffnet Ihrem Unternehmen neue Zielgruppen, innovative Möglichkeiten und schützt gleichzeitig vor potenziellen ADA-Klagen.

Häufig gestellte Fragen

Was bedeutet ADA-Konformität?

ADA-konform zu sein bedeutet, dass bestimmte Unternehmen gesetzlich verpflichtet sind, barrierefrei für Menschen mit Behinderungen zu sein. Dies geschieht durch die Einhaltung des Americans with Disabilities Act (ADA) von 1990.

Wann wurde der ADA verabschiedet?

Das Gesetz wurde 1990 von Präsident George H. W. Bush unterzeichnet und ist nun seit über 30 Jahren in Kraft. Sein Ziel ist es, den Zugang und die Chancen für Menschen mit Behinderungen im privaten und beruflichen Leben zu verbessern.

Wer hat Anspruch auf ADA-Schutz?

Um unter den ADA-Schutz zu fallen, muss eine Beeinträchtigung nachgewiesen werden, die eine Person daran hindert, alltägliche Aufgaben auszuführen. In Bezug auf Arbeitsplatzdiskriminierung müssen Arbeitnehmer qualifiziert sein, bestimmte Aufgaben oder Funktionen auszuführen, um von den ADA-Schutzmaßnahmen zu profitieren.

Wie wir diesen Artikel überprüft haben

Aktuelle Version
Geändert Mai 23, 2024
Was wir geändert haben
Artikel wurde von einem Experten geprüft
Erster Entwurf des Artikels Februar 7, 2024

Casandra Visser

Autor

With over 14 years of experience in digital strategy, Casandra helps global brands create accessible, user-friendly online experiences. She’s deeply passionate about web accessibility and committed to making online content inclusive for everyone, regardless of ability. Casandra has spent years studying WCAG guidelines, accessibility tools, and assistive technologies to better support businesses in building compliant websites. Her goal is to educate teams across all industries on the importance of digital inclusion and empower them to create content that truly works for everyone.

Ritvik Shrivastava

Forscher

Ritvik is a dedicated IAAP-certified Accessibility Expert with over 5 years of hands-on experience in making the digital world more inclusive. Specializing in WCAG 2.1 and 2.2, ADA, and Section 508 compliance, Ritvik has successfully completed over 150 accessibility projects. With expertise in assistive tools like JAWS, NVDA, VoiceOver, and TalkBack, Ritvik ensures comprehensive accessibility testing and provides detailed, actionable recommendations for developer teams.

Nolan Klein

Experte

10 Kommentare

10 Comments

Oldest

Newest

Inline Feedbacks

View all comments