Die Seite enthält eine Überschrift, einen Skip-Link oder einen Orientierungspunkt

Durch das Hinzufügen von Möglichkeiten, sich wiederholende Inhalte zu umgehen, können Tastaturbenutzer auf der Seite effizienter navigieren. Weitere Informationen.

bypass
accessibility

Hintergrund- und Vordergrundfarben haben ein ausreichendes Kontrastverhältnis

Text mit niedrigem Kontrast kann von vielen Benutzern nur schwer oder gar nicht gelesen werden. Weitere Informationen.

color-contrast
accessibility

Das Dokument hat ein Element <title>

Der Titel gibt Benutzern des Bildschirmlesegeräts einen Überblick über die Seite, und Suchmaschinenbenutzer verlassen sich stark darauf, um festzustellen, ob eine Seite für ihre Suche relevant ist. Weitere Informationen.

document-title
accessibility

[id] Attribute auf der Seite sind eindeutig

Der Wert eines id-Attributs muss eindeutig sein, um zu verhindern, dass andere Instanzen von assistiven Technologien übersehen werden. Weitere Informationen.

duplicate-id
accessibility

Das Element hat ein Attribut [lang]

Wenn für eine Seite kein lang-Attribut angegeben wird, geht ein Screenreader davon aus, dass die Seite in der Standardsprache vorliegt, die der Benutzer beim Einrichten des Screenreaders ausgewählt hat. Wenn die Seite nicht tatsächlich in der Standardsprache vorliegt, kann der Bildschirmleser den Text der Seite möglicherweise nicht korrekt anzeigen. Weitere Informationen.

html-has-lang
accessibility

Das Element hat einen gültigen Wert für das Attribut [lang]

Durch die Angabe einer gültigen BCP 47-Sprache können Bildschirmleser den Text richtig anzeigen. Weitere Informationen.

html-lang-valid
accessibility

Links haben einen erkennbaren Namen

Verknüpfen Sie Text (und alternativen Text für Bilder, wenn er als Verknüpfungen verwendet wird), der erkennbar, eindeutig und fokussierbar ist und die Navigation für Benutzer von Bildschirmleseprogrammen verbessert. Weitere Informationen.

link-name
accessibility

Listen enthalten nur <li> - Elemente und Skript-unterstützende Elemente (<script> und <template>).

Screenreader haben eine bestimmte Möglichkeit, Listen anzukündigen. Die Sicherstellung der richtigen Listenstruktur unterstützt die Ausgabe des Bildschirmleseprogramms. Weitere Informationen.

list
accessibility

Listenelemente (<li>) sind in den übergeordneten Elementen <ul> oder <ol> enthalten

Bildschirmleseprogramme setzen voraus, dass Listenelemente (<li>) in einem übergeordneten <ul> oder <ol> enthalten sind, um ordnungsgemäß angekündigt zu werden. Weitere Informationen.

listitem
accessibility

[user-scalable =" no "] wird im Element nicht verwendet, und das Attribut [maximaler Maßstab] ist nicht kleiner als 5.

Das Deaktivieren des Zoomens ist problematisch für Benutzer mit eingeschränktem Sehvermögen, die auf die Bildschirmvergrößerung angewiesen sind, um den Inhalt einer Webseite richtig zu sehen. Weitere Informationen.

meta-viewport
accessibility

[accesskey] Werte sind eindeutig

Durch Zugriffstasten können Benutzer schnell einen Teil der Seite fokussieren. Für eine ordnungsgemäße Navigation muss jeder Zugriffstaster eindeutig sein. Weitere Informationen.

accesskeys
accessibility

[aria - *] Attribute entsprechen ihren Rollen

Jede ARIA-Rolle unterstützt eine bestimmte Untermenge von Aria- * Attributen. Wenn diese nicht übereinstimmen, werden die Attribute aria- * ungültig. Weitere Informationen.

aria-allowed-attr
accessibility

[role] s hat alle erforderlichen [aria - *] - Attribute

Einige ARIA-Rollen verfügen über erforderliche Attribute, die den Status des Elements für Bildschirmlesegeräte beschreiben. Weitere Informationen.

aria-required-attr
accessibility

Elemente mit "[Rolle]", die bestimmte Kinder "[Rolle]" erfordern, sind vorhanden

Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, um die beabsichtigten Zugriffsfunktionen ausführen zu können. Weitere Informationen.

aria-required-children
accessibility

[role] s sind in ihrem erforderlichen übergeordneten Element enthalten

Einige untergeordnete ARIA-Rollen müssen in bestimmten übergeordneten Rollen enthalten sein, um die beabsichtigten Zugriffsfunktionen ordnungsgemäß ausführen zu können. Weitere Informationen.

aria-required-parent
accessibility

[role] Werte sind gültig

ARIA-Rollen müssen gültige Werte haben, um die beabsichtigten Zugriffsfunktionen ausführen zu können. Weitere Informationen.

aria-roles
accessibility

[aria - *] Attribute haben gültige Werte

Assistive Technologien können, wie Bildschirmlesegeräte, ARIA-Attribute nicht mit ungültigen Werten interpretieren. Weitere Informationen.

aria-valid-attr-value
accessibility

[aria - *] Attribute haben gültige Werte

Assistive Technologien können, wie Bildschirmlesegeräte, ARIA-Attribute nicht mit ungültigen Werten interpretieren. Weitere Informationen.

aria-valid-attr
accessibility

Elemente des Typs

Bildunterschriften machen Audioelemente für taube oder hörgeschädigte Benutzer nutzbar und liefern wichtige Informationen, z. B. wer spricht, was sie sagen, und andere Nicht-Sprachinformationen. Weitere Informationen.

audio-caption
accessibility

Schaltflächen haben einen zugänglichen Namen

Wenn eine Schaltfläche keinen Namen hat, wird dieser von Bildschirmlesern als "Schaltfläche" angezeigt, was sie für Benutzer unbrauchbar macht, die sich auf Bildschirmleseprogramme verlassen. Weitere Informationen.

button-name
accessibility

<dl> s enthält nur ordnungsgemäß geordnete <dt> - und <dd> - Gruppen, <script> oder <template> - Elemente.

Wenn Definitionslisten nicht richtig markiert sind, können Bildschirmleseprogramme verwirrende oder ungenaue Ausgaben erzeugen. Weitere Informationen.

definition-list
accessibility

Definitionslistenelemente sind in <dl> Elemente eingeschlossen

Definitionslistenelemente (<dt> und <dd>) müssen in ein übergeordnetes <dl> Element eingeschlossen werden, um sicherzustellen, dass Bildschirmleseprogramme sie ordnungsgemäß ankündigen können. Weitere Informationen.

dlitem
accessibility

<frame> oder <iframe> Elemente haben einen Titel

Benutzer des Bildschirmlesegeräts verlassen sich auf Frame-Titel, um den Inhalt von Frames zu beschreiben. Weitere Informationen.

frame-title
accessibility

Bildelemente haben [alt] Attribute

Informative Elemente sollten auf kurzen, beschreibenden Alternativtext abzielen. Dekorative Elemente können mit einem leeren alt-Attribut ignoriert werden. Weitere Informationen.

image-alt
accessibility

<input type =" image "> Elemente haben [alt] Text

Wenn ein Bild als -Taste verwendet wird, kann der Benutzer des Bildschirmlesegeräts den alternativen Zweck der Schaltfläche erkennen, wenn Sie alternativen Text angeben. Weitere Informationen.

input-image-alt
accessibility

Formularelemente haben Beschriftungen zugeordnet

Etiketten stellen sicher, dass Formularsteuerelemente von assistiven Technologien wie Bildschirmlesegeräten ordnungsgemäß angekündigt werden. Weitere Informationen.

label
accessibility

Präsentationselemente von <table> vermeiden die Verwendung von <th>, <caption> oder des [summary] - Attributs.

Eine Tabelle, die zu Layoutzwecken verwendet wird, darf keine Datenelemente enthalten, wie z. B. die Elemente th oder caption oder das Attribut summary, da dies für Benutzer des Bildschirmleseprogramms verwirrend sein kann. Weitere Informationen.

layout-table
accessibility

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

Benutzer erwarten nicht, dass eine Seite automatisch aktualisiert wird. Dadurch wird der Fokus wieder an den Anfang der Seite verschoben. Dies kann zu einer frustrierenden oder verwirrenden Erfahrung führen. Weitere Informationen.

meta-refresh
accessibility

<object> Elemente haben [alt] Text

Screenreader können keine Nicht-Textinhalte übersetzen. Durch Hinzufügen von altem Text zu den <object> -Elementen können Bildschirmleser den Benutzern eine Bedeutung vermitteln. Weitere Informationen.

object-alt
accessibility

Kein Element hat einen Wert von [tabindex], der größer als 0 ist

Ein Wert größer als 0 impliziert eine explizite Navigationsreihenfolge. Obwohl technisch gültig, schafft dies oft frustrierende Erfahrungen für Benutzer, die auf unterstützende Technologien angewiesen sind. Weitere Informationen.

tabindex
accessibility

Zellen in einem Element <table>, die das Attribut [headers] verwenden, beziehen sich nur auf andere Zellen derselben Tabelle.

Screenreader verfügen über Funktionen, die das Navigieren in Tabellen erleichtern. Wenn Sie sicherstellen, dass Zellen, die das Attribut [[Header]] verwenden, nur auf andere Zellen in derselben Tabelle verweisen, kann dies die Benutzererfahrung für Bildschirmleseprogramme verbessern. Weitere Informationen.

td-headers-attr
accessibility

<th> Elemente und Elemente mit [role =" columnheader "/" rowheader "] haben Datenzellen, die sie beschreiben.

Screenreader verfügen über Funktionen, die das Navigieren in Tabellen erleichtern. Wenn Sie sicherstellen, dass sich Tabellenkopfzeilen immer auf einen bestimmten Satz von Zellen beziehen, kann dies für Benutzer des Bildschirmlesegeräts das Erlebnis verbessern. Weitere Informationen.

th-has-data-cells
accessibility

Attribute haben einen gültigen Wert

Durch Angabe einer gültigen BCP 47-Sprache für Elemente kann sichergestellt werden, dass der Text von einem Bildschirmleseprogramm korrekt ausgesprochen wird. Weitere Informationen.

valid-lang
accessibility

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

Wenn ein Video eine Bildunterschrift enthält, ist es für taube und hörgeschädigte Benutzer leichter, auf ihre Informationen zuzugreifen. Weitere Informationen.

video-caption
accessibility

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

Audiobeschreibungen enthalten relevante Informationen für Videos, die Dialoge nicht bieten können, beispielsweise Gesichtsausdrücke und Szenen. Weitere Informationen.

video-description
accessibility

Die 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.

logical-tab-order
accessibility

Interaktive Steuerelemente sind auf der Tastatur fokussierbar

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

focusable-controls
accessibility

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.

interactive-element-affordance
accessibility

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.

managed-focus
accessibility

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.

focus-traps
accessibility

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.

custom-controls-labels
accessibility

Benutzerdefinierte Steuerelemente verfügen über ARIA-Rollen

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

custom-controls-roles
accessibility

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.

visual-order-follows-dom
accessibility

Offscreen-Inhalte sind vor assistiver Technologie verborgen

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

offscreen-content-hidden
accessibility

Überschriften überspringen keine Ebenen

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

heading-levels
accessibility

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.

use-landmarks
accessibility
Zugänglichkeit
100  / 100