Barrierefreiheit Test

Unsere Tools in den Medien

Barrierefreiheit Test: Ist meine Webseite barrierefrei?

Mit dem EXPERTE.de Barrierefreiheit-Test ermitteln Sie, ob Ihre Webseite barrierefrei zugänglich ist. Das Tool crawlt Ihre Webseite und überprüft für jede Unterseite, ob diese von Screenreadern problemlos angezeigt werden kann. So können auch Blinde und sehbehinderte Nutzer Ihre Webseite vollständig nutzen.

Der Barrierefreiheit-Test überprüft 41 Merkmale in 8 Kategorien. Die wichtigesten Kategorien sind:

Navigation
Unser Test überprüft, ob die Navigation auf der Seite barrierefrei und konsistent ist.
ARIA
ARIA ist eine semantische Erweiterung für HTML, um Webseiten für Menschen mit Behinderungen besser zugänglich zu machen. Unser Test überprüft die korrekte Implementierung.
Namen und Labels
Unser Test überprüft unter anderem, ob Formularfelder und Buttons mit aussagekräftigen Labels ausgezeichnet sind und Bild über einen Alternativtext verfügen.
Kontrast
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Der Test überprüft, ob das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ausreichend ist.
Tabellen und Listen
Screenreader bieten Funktionen, die die Navigation in Tabellen und Listen vereinfachen. Wir überprüfen, ob beides korrekt implementiert wurde.
Audio & Video
Wenn ein Video Untertitel enthält, können gehörlose und hörgeschädigte Nutzer die Informationen im Video besser verstehen. Der Test überprüft, ob entsprechende Auszeichnungen vorhanden sind.
Internationalisierung & Lokalisierung
Durch Angabe einer gültigen Sprache kann der Text einer Webseite von einem Screenreader korrekt wiedergegeben werden. Der Test überprüft, ob eine gültige Sprache angegeben ist.

Häufige Fragen & Antworten

Was bedeutet Barrierefreiheit im Internet?

⊖

Eine barrierefreie Webseite ist so gestaltet, dass auch Menschen mit Sehbehinderung, Blinde Menschen und gehörlose Menschen das Angebot ohne Einschränkung nutzen können.

Warum sollte meine Webseite barrierefrei sein?

⊖

Mit einer barrierefreien Webseite machen Sie es allen Menschen möglich, Ihr Angebot ohne Einschränkungen zu nutzen. Sie erreichen eine größere Zielgruppe, erhöhen die Usability Ihrer Seite und tragen zur digitalen Teilhabe von Menschen mit Behinderung bei.

Wie funktioniert der Barrierefreiheit-Test?

⊖

Nach der Eingabe einer URL crawlt der EXPERTE.de Barrierefreiheit-Test Ihre Webseite und überprüft jede Unterseite auf Barrierefreiheit. Der Test basiert auf dem Open-Source-Tool Lighthouse. Es können bis zu 500 URLs überprüft werden. Der Score gibt die technische Barrierefreiheit auf einer Skala von 0-100 an.

Barrierefreiheit-Checks im Detail

Im Folgenden finden Sie die Beschreibung aller Checks, die von unserem Barrierefreiheit-Test durchgeführt werden.

Navigation


1.	[accesskey]-Werte sind eindeutig Anhand von Tastenkombinationen können Nutzer schnell einen Bereich der Seite in den Fokus rücken. Damit die Navigation wie vorgesehen funktioniert, muss jede Tastenkombination eindeutig sein.
2.	Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich Wenn Tastaturnutzer Inhalte umgehen können, die sich wiederholen, sorgt das für eine effizientere Navigation.
3.	[id]-Attribute zu aktiven, fokussierbaren Elementen sind eindeutig Für alle fokussierbaren Elemente ist ein eindeutiges `id` erforderlich, damit sie von Hilfstechnologien erkannt werden können.
4.	Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt Richtig geordnete Überschriften, die keine Ebenen überspringen, geben der Seite eine semantische Struktur. Wenn man Hilfstechnologien verwendet, ist es dadurch leichter, sich auf der Seite zurechtzufinden und die Inhalte zu verstehen.
5.	Kein Element hat einen [tabindex]-Wert größer als 0 Ein Wert größer als 0 impliziert eine explizite Navigationsanordnung. Das ist zwar technisch möglich; aber für Nutzer, die auf Hilfstechnologien angewiesen sind, ist dies häufig frustrierend.

ARIA


1.	*[aria-]-Attribute entsprechen ihren Rollen** Jede ARIA-`role` unterstützt eine bestimmte Auswahl an `aria-`-Attributen. Wenn sie jedoch falsch zugeordnet sind, werden die `aria-`-Attribute ungültig.
2.	[aria-hidden="true"] ist in dem Dokument <body> nicht vorhanden Hilfstechnologien wie Screenreader funktionieren nicht richtig, wenn für das Dokument `<body>` die Richtlinie auf `aria-hidden="true"` gestellt ist.
3.	[aria-hidden="true"]-Elemente enthalten keine fokussierbaren Unterelemente Fokussierbare Unterelemente in einem `[aria-hidden="true"]`-Element führen dazu, dass Nutzer von Hilfstechnologien wie Screenreadern solche interaktiven Elemente nicht verwenden können.
4.	ARIA-Eingabefelder haben zugängliche Namen Wenn ein Eingabefeld keinen zugänglichen Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar.
5.	*[role]-Elemente verfügen über alle erforderlichen [aria-]-Attribute** Für einige ARIA-Rollen sind Attribute erforderlich, die Screenreadern den Zustand des Elements beschreiben.
6.	Die Elemente mit einer ARIA-[role], deren untergeordnete Elemente eine bestimmte [role]`enthalten müssen, haben alle erforderlichen untergeordneten Elemente. Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, damit sie die beabsichtigten Hilfsfunktionen erfüllen können.
7.	[role]-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet Einige untergeordnete ARIA-Rollen müssen in bestimmten übergeordneten Rollen enthalten sein, damit sie die beabsichtigten Hilfsfunktionen erfüllen können.
8.	[role]-Werte sind gültig Für ARIA-Rollen müssen gültige Werte angegeben sein, damit sie die beabsichtigten Hilfsfunktionen erfüllen können.
9.	ARIA-Ein-/Aus-Schaltflächen haben zugängliche Namen Wenn eine Ein-/Aus-Schaltfläche keinen zugänglichen Namen hat, wird sie von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar.
10.	*[aria-]-Attribute weisen gültige Werte auf** Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Werten nicht interpretieren.
11.	*[aria-]-Attribute sind gültig und richtig geschrieben** Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Namen nicht interpretieren.
12.	ARIA-IDs sind eindeutig Der Wert einer ARIA-ID muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden.

Namen und Labels


1.	Schaltflächen haben einen für Screenreader zugänglichen Namen Wenn eine Schaltfläche keinen zugänglichen Namen hat, wird sie von Screenreadern als "Schaltfläche" angesagt, was sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar macht.
2.	Dokument enthält ein <title>-Element Anhand des Titels wissen Screenreader-Nutzer, worum es auf der Seite geht. Außerdem entscheiden Nutzer von Suchmaschinen auf der Grundlage des Titels, ob eine Seite für ihre Suche relevant ist.
3.	Kein Formularfeld hat mehrere Labels Formularfelder mit mehreren Labels werden von Hilfstechnologien wie Screenreadern unter Umständen missverständlich angesagt, da diese entweder das erste, das letzte oder alle Labels verwenden.
4.	<frame>- oder <iframe>-Elemente verfügen über einen Titel Nutzer von Screenreadern sind auf Frametitel angewiesen, die die Frameinhalte beschreiben.
5.	Bildelemente haben ein [alt]-Attribut Informative Elemente sollten einen kurzen, beschreibenden alternativen Text haben. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden.
6.	<input type="image">-Elemente verfügen über [alt]-Text Wenn ein Bild als <input>-Schaltfläche verwendet wird, kann die Angabe von alternativem Text Screenreader-Nutzern helfen, den Zweck der Schaltfläche besser zu verstehen.
7.	Formularelemente sind mit Labels verknüpft Durch Labels wird gewährleistet, dass Steuerelemente für Formulare von Hilfstechnologien wie Screenreadern richtig angesagt werden.
8.	Links haben einen leicht erkennbaren Namen Linktext, der leicht erkennbar, eindeutig und fokussierbar ist, verbessert die Navigation für Screenreader-Nutzer. Dies gilt auch für alternativen Text für Bilder, die als Links verwendet werden.
9.	<object>-Elemente verfügen über [alt]-Text Screenreader können lediglich Textinhalte interpretieren. Wenn Sie `<object>`-Elementen Alt-Text hinzufügen, können Screenreader-Nutzer besser verstehen, was diese Elemente darstellen.

Kontrast


1.	Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar.

Tabellen und Listen


1.	<dl>-Elemente enthalten ausschließlich Gruppen aus <dt>- und <dd>-Elementen sowie <script>-, <template>- oder <div>-Elemente, die richtig angeordnet sind. Wenn Definitionslisten nicht korrekt mit Markup versehen sind, geben Screenreader unter Umständen verwirrende oder falsche Inhalte aus.
2.	Definitionslistenelemente sind in <dl>-Elemente eingefasst Definitionslistenelemente (<dt> und <dd>) müssen in ein übergeordnetes <dl>-Element eingefasst sein, damit sie von Screenreadern richtig angesagt werden können.
3.	Listen enthalten nur <li>-Elemente und Elemente zur Skriptunterstützung (<script> sowie <template>) Screenreader sagen Listen auf bestimmte Art und Weise an. Eine korrekte Listenstruktur gewährleistet, dass der Screenreader sie richtig ausgibt.
4.	Listenelemente (<li>) befinden sich in übergeordneten <ul>- oder <ol>-Elementen Listenelemente (<li>) müssen sich in einem übergeordneten <ul>- oder <ol>-Element befinden, damit Screenreader sie richtig ansagen können.
5.	<table>-Präsentationselemente enthalten keine <th>-, <caption>- oder [summary]-Attribute Eine für Layoutzwecke verwendete Tabelle sollte keine Datenelemente wie "th"- bzw. "caption"-Elemente oder das "summary"-Attribut enthalten, weil dies für Nutzer von Screenreadern verwirrend sein kann.
6.	Zellen in einem "<table>"-Element, die das Attribut "[headers]" enthalten, verweisen auf Zellen in derselben Tabelle. Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn Sie dafür sorgen, dass <td>-Zellen, die das [headers]-Attribut verwenden, nur auf andere Zellen in derselben Tabelle verweisen, kann dies für Screenreader-Nutzer hilfreich sein.
7.	Für <th>-Elemente und Elemente mit [role="columnheader"/"rowheader"] sind Datenzellen vorhanden, die sie beschreiben Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn Sie dafür sorgen, dass Tabellenüberschriften immer auf eine Auswahl von Zellen verweisen, kann dies für Screenreader-Nutzer hilfreich sein.

Bewährte Methoden


1.	Dieses Dokument verwendet <meta http-equiv="refresh"> nicht Nutzer rechnen nicht damit, dass eine Seite automatisch aktualisiert wird. Außerdem wird dadurch der Fokus wieder auf den Seitenanfang verschoben. Das kann für den Nutzer frustrierend oder verwirrend sein.
2.	[user-scalable="no"] wird nicht im <meta name="viewport">-Element verwendet und das [maximum-scale]-Attribut ist nicht kleiner als 5 Wenn Sie die Zoomfunktion deaktivieren, haben Nutzer mit eingeschränktem Sehvermögen, die auf die Bildschirmvergrößerung angewiesen sind, Probleme, den Inhalt einer Webseite zu sehen.

Audio & Video


1.	<video>-Elemente enthalten ein <track>-Element mit [kind="captions"] Wenn ein Video Untertitel enthält, können gehörlose und hörgeschädigte Nutzer die Informationen im Video besser verstehen.
2.	<video>-Elemente enthalten ein <track>-Element mit [kind="description"] Audiobeschreibungen enthalten relevante Informationen für Videos, die aus dem Dialog nicht ersichtlich sind, z. B. Gesichtsausdrücke und Schauplätze.

Internationalisierung & Lokalisierung


1.	<html>-Element hat ein [lang]-Attribut Wenn auf einer Seite kein lang-Attribut angegeben ist, nimmt ein Screenreader an, dass es sich um die Standardsprache handelt, die der Nutzer beim Einrichten des Screenreaders ausgewählt hat. Wenn die Sprache jedoch nicht der Standardsprache entspricht, gibt der Screenreader den Inhalt der Seite möglicherweise falsch aus.
2.	Das <html>-Element hat einen gültigen Wert für sein [lang]-Attribut Durch Angabe einer gültigen Sprache gemäß BCP 47 kann der Text von einem Screenreader korrekt wiedergegeben werden.
3.	[lang]-Attribute weisen einen gültigen Wert auf Durch Angabe einer gültigen Sprache gemäß BCP 47] in Elementen kann der Text von einem Screenreader korrekt ausgesprochen werden.

Top Homepage Baukästen 2024

Gesponsert

ab 0,00 €

pro Monat

Wix

1,2

Testergebnis

sehr gut

ab 11,00 €

pro Monat

Squarespace

1,5

Testergebnis

sehr gut

ab 10,50 €

pro Monat

IONOS

1,6

Testergebnis

gut

ab 0,00 €

pro Monat

Webflow

1,7

Testergebnis

gut

alle anzeigen

Autor: Janis von Bleichert

Janis von Bleichert hat Wirtschaftsinformatik an der TU München und Informatik an der TU Berlin studiert. Er ist seit 2006 selbständig und ist der Gründer von EXPERTE.de. Er schreibt zu den Themen Hosting, Software und IT-Security.