Lighthouse Report

The page has a logical tab order

Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more.

Interactive controls are keyboard focusable

Custom interactive controls are keyboard focusable and display a focus indicator. Learn more.

Interactive elements indicate their purpose and state

Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. Learn more.

The user's focus is directed to new content added to the page

If new content, such as a dialog, is added to the page, the user's focus is directed to it. Learn more.

User focus is not accidentally trapped in a region

A user can tab into and out of any control or region without accidentally trapping their focus. Learn more.

Custom controls have associated labels

Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more.

Custom controls have ARIA roles

Custom interactive controls have appropriate ARIA roles. Learn more.

Visual order on the page follows DOM order

DOM order matches the visual order, improving navigation for assistive technology. Learn more.

Offscreen content is hidden from assistive technology

Offscreen content is hidden with display: none or aria-hidden=true. Learn more.

HTML5 landmark elements are used to improve navigation

Landmark elements (<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more.

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

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

[aria-*]-Attribute weisen gültige Werte auf

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

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

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

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

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

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

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

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

Bildelemente verfügen über [alt]-Attribute

Informative Elemente sollten einen kurzen, beschreibenden alternativen Text haben. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert 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> sowie <template>).

Screenreader sagen Listen auf bestimmte Art und Weise an. Eine korrekte Listenstruktur gewährleistet, dass der Screenreader sie richtig ausgibt. 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.

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

button, link, and menuitem elements have accessible names

When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.

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

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

ARIA meter elements have accessible names

When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.

ARIA progressbar elements have accessible names

When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.

[role]-Elemente verfügen über alle erforderlichen [aria-*]-Attribute

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

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

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

ARIA treeitem elements have accessible names

When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.

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

ARIA-IDs sind eindeutig

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

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

<frame>- oder <iframe>-Elemente verfügen über einen Titel

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

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

Formularelemente sind mit Labels verknüpft

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

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

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

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. 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 kann der Text von einem Screenreader korrekt ausgesprochen werden. Weitere Informationen.

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