Zugänglichkeit
100  / 100

Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich

Wenn Tastaturnutzer sich wiederholende Inhalte umgehen können, sorgt das für eine effizientere Navigation. Weitere Informationen.

Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend

Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Weitere Informationen.

Dokument verfügt über ein <title>-Element

Anhand des Titels wissen Screenreader-Nutzer, worum es auf der Seite geht, während Nutzer von Suchmaschinen auf der Grundlage des Titels entscheiden, ob eine Seite für ihre Suche relevant ist. Weitere Informationen.

[id]-Attribute auf der Seite sind eindeutig

Der Wert eines ID-Attributs muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden. Weitere Informationen.

Für das <html>-Element ist ein [lang]-Attribut angegeben

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 gar nicht die Standardsprache ist, gibt der Screenreader den Inhalt der Seite möglicherweise nicht korrekt aus. Weitere Informationen.

Für das [lang]-Attribut des <html>-Elements ist ein gültiger Wert angegeben

Durch Angabe einer gültigen Sprache gemäß BCP 47 kann der Text von einem Screenreader korrekt wiedergegeben werden. Weitere Informationen.

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. Weitere Informationen.

Listen enthalten nur <li>-Elemente und Elemente zur Skriptunterstützung (<script> und <template>)

Screenreader sagen Listen auf bestimmte Art und Weise an. Eine korrekte Listenstruktur hilft dem Screenreader bei der Ausgabe. Weitere Informationen.

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. Weitere Informationen.

[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. Weitere Informationen.

[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. Weitere Informationen.

[aria-*]-Attribute entsprechen ihren Rollen

Jede ARIA-Rolle unterstützt eine bestimmte Auswahl an "aria-"-Attributen. Im Falle einer fehlerhaften Zuordnung werden die "aria-"-Attribute ungültig. Weitere Informationen.

[role]-Elemente weisen alle erforderlichen [aria-*]-Attribute auf

Für einige ARIA-Rollen sind Attribute erforderlich, die Screenreadern den Status des Elements beschreiben. Weitere Informationen.

Elemente mit [role], die bestimmte untergeordnete Rollen erfordern, sind vorhanden

Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, damit sie die beabsichtigten Hilfsfunktionen erfüllen können. Weitere Informationen.

[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 wie vorgesehen erfüllen können. Weitere Informationen.

[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. Weitere Informationen.

Für [aria-*]-Attribute sind gültige Werte angegeben

Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Werten nicht interpretieren. Weitere Informationen.

[aria-*]-Attribute sind gültig und nicht falsch geschrieben

Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Namen nicht interpretieren. Weitere Informationen.

<audio>-Elemente enthalten ein <track>-Element mit [kind="captions"]

Durch Untertitel sind Audioelemente auch für Gehörlose und Hörgeschädigte nutzbar, da sie wichtige Informationen zur sprechenden Person und zum Inhalt des Gesprächs sowie andere nonverbale Informationen enthalten. Weitere Informationen.

Die Namen der Schaltflächen sind für Screenreader zugänglich

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. Weitere Informationen.

<dl>-Elemente enthalten nur in der richtigen Reihenfolge angeordnete <dt>- und <dd>-Gruppen sowie <script>- oder <template>-Elemente.

Wenn Definitionslisten nicht korrekt mit Markup versehen sind, geben Screenreader unter Umständen verwirrende oder falsche Inhalte aus. Weitere Informationen.

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. Weitere Informationen.

Für <frame>- oder <iframe>-Elemente ist ein Titel vorhanden

Nutzer von Screenreadern sind auf Frametitel angewiesen, die die Frameinhalte beschreiben. Weitere Informationen.

Für Bildelemente sind [alt]-Attribute vorhanden

Informative Elemente sollten einen kurzen, beschreibenden alternativen Text haben. Dekorative Elemente können mit einem leeren alt-Attribut ignoriert werden. Weitere Informationen.

Für <input type="image">-Elemente ist [alt]-Text vorhanden

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. Weitere Informationen.

Formularelemente sind mit Labels verknüpft

Durch Labels wird sichergestellt, dass Steuerelemente für Formulare von Hilfstechnologien wie Screenreadern richtig angesagt werden. Weitere Informationen.

<table>-Präsentationselemente verhindern die Nutzung von <th>, <caption> oder des [summary]-Attributs

Eine für Layoutzwecke verwendete Tabelle sollte keine Datenelemente wie "th"- oder "caption"-Elemente oder das "summary"-Attribut enthalten, weil dies für Nutzer von Screenreadern verwirrend sein kann. Weitere Informationen.

<meta http-equiv="refresh"> wird vom Dokument nicht verwendet

Nutzer erwarten nicht, dass eine Seite automatisch aktualisiert wird. Dadurch wird der Fokus wieder auf den Seitenanfang verschoben. Das kann für den Nutzer frustrierend oder verwirrend sein. Weitere Informationen.

[alt]-Text ist für <object>-Elemente vorhanden

Screenreader können lediglich Textinhalte interpretieren. Wenn Sie <object>-Elementen alt-Text hinzufügen, kann den Nutzern ihre Bedeutung vermittelt werden. Weitere Informationen.

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, für Nutzer, die auf Hilfstechnologien angewiesen sind, ist dies jedoch häufig frustrierend. Weitere Informationen.

Zellen in einem <table>-Element, die das [headers]-Attribut verwenden, verweisen nur auf andere 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. Weitere Informationen.

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. Weitere Informationen.

[lang]-Attribute weisen einen gültigen Wert auf

Durch Angabe einer gültigen Sprache gemäß BCP 47 in Elementen wird sichergestellt, dass der Text von einem Screenreader korrekt ausgesprochen wird. Weitere Informationen.

<video>-Elemente enthalten ein <track>-Element mit [kind="captions"]

Bei einem Video mit Untertitel können gehörlose und hörgeschädigte Nutzer einfacher auf die zugehörigen Informationen zugreifen. Weitere Informationen.

<video>-Elemente enthalten ein <track>-Element mit [kind="description"]

Audiobeschreibungen enthalten relevante Informationen für Videos, die aus dem Dialog nicht ersichtlich sind, zum Beispiel Gesichtsausdrücke und Schauplätze. Weitere Informationen.

Deine Seite hat eine logische Tabulatorreihenfolge

Das Durchsuchen der Seite folgt dem visuellen Layout. Benutzer können keine Elemente fokussieren, die sich nicht im Bildschirm befinden. Weitere Informationen.

Interaktive Steuerelemente sind auf der Tastatur fokussierbar

Benutzerdefinierte interaktive Steuerelemente sind auf der Tastatur fokussierbar und zeigen eine Fokusanzeige an. Weitere Informationen.

Interaktive Elemente zeigen ihren Zweck und Zustand an

Interaktive Elemente wie Links und Schaltflächen sollten ihren Zustand anzeigen und von nicht interaktiven Elementen unterscheiden. Weitere Informationen.

Der Benutzer konzentriert sich auf neuen Inhalt, der zur Seite hinzugefügt wird

Wenn der Seite neuer Inhalt hinzugefügt wird, z. B. ein Dialogfeld, wird der Fokus des Benutzers darauf gerichtet. Weitere Informationen.

Der Benutzerfokus ist nicht versehentlich in einer Region eingeschlossen

Ein Benutzer kann in ein beliebiges Steuerelement oder in einen Bereich wechseln, ohne versehentlich seinen Fokus einzufangen. Weitere Informationen.

Benutzerdefinierte Steuerelemente weisen Beschriftungen auf

Benutzerdefinierte interaktive Steuerelemente verfügen über zugeordnete Beschriftungen, die von aria-label oder aria-label byby bereitgestellt werden. Weitere Informationen.

Benutzerdefinierte Steuerelemente verfügen über ARIA-Rollen

Benutzerdefinierte interaktive Steuerelemente verfügen über entsprechende ARIA-Rollen. Weitere Informationen.

Die visuelle Reihenfolge auf der Seite folgt der DOM-Reihenfolge

Die DOM-Reihenfolge entspricht der visuellen Reihenfolge und verbessert die Navigation für die unterstützende Technologie. Weitere Informationen.

Offscreen-Inhalte sind vor assistiver Technologie verborgen

Offscreen-Inhalte werden mit der Anzeige ausgeblendet: none oder aria-hidden=true. Weitere Informationen.

Überschriften überspringen keine Ebenen

Überschriften werden zum Erstellen einer Gliederung für die Seite verwendet. Überschriftenebenen werden nicht übersprungen. Weitere Informationen.

HTML5-Orientierungspunkte werden zur Verbesserung der Navigation verwendet

Landmark-Elemente (<main>, <nav> usw.) werden verwendet, um die Tastaturnavigation der Seite für assistive Technologie zu verbessern. Weitere Informationen.