Demo

Sehen Sie sich eine Videoeinführung in die Geschichte und Funktionen des Prüfers an, oder bearbeiten Sie den Demo-Inhalt unten, öffnen und schließen Sie Warnungen, und nutzen Sie die Symbolleiste (Screenshot der Editoria11y-Symbolleiste mit 4 Fehlern.) um die Überschriftenstruktur anzuzeigen. Diese Demo umfasst sowohl die Kerntests als auch das CSA-Paket.

Diese Demo verwendet einen TinyMCE-Editor. Editoria11y ist mit den meisten Texteditoren kompatibel und verfügt über fertige Implementierungen für CKEditor und Gutenberg in WordPress und Drupal.

Überschriften

Diese Überschrift hat eine Ebene übersprungen:

Oops

Diese Überschrift enthält überhaupt keinen Text:

Dieses kurze Blockzitat könnte eine Überschrift sein:

Ich bin eine falsche Überschrift

Dieser vollständig fett formatierte Absatz könnte eine Überschrift sein:

Ich bin eine falsche Überschrift

Diese Überschrift ist sehr lang:

Überschriften und Unterüberschriften bilden ein navigierbares Inhaltsverzeichnis für Hilfstechnologien. Die Zahlen geben die Einrückungstiefe in einer Verschachtelungsbeziehung an. Sehr lange Überschriften bedeuten wahrscheinlich, dass der Autor zu viel in der Überschrift sagt.

Textalternativen für Bilder

Diese Überschrift besteht aus einem Textbild ohne Alternativtext:

Bild ohne alt-Attribut:

Bild mit einem ungültigen alt-Attribut, z. B. alt=”'”

'

Bild mit einem Dateinamen als Alternativtext

filename.jpg

Bild mit redundantem Text im Alternativtext, z. B. „Bild von:”

Bild eines Hundes.

Verlinktes Bild mit redundantem Text im Alternativtext, z. B. „Bild von:”

Bild eines Hundes.

Bild mit Platzhalter-Alternativtext:

TBD

Verlinktes Bild mit Platzhalter-Alternativtext:

TBD

Bild mit maschinencodiertem Alternativtext:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Verlinktes Bild mit maschinencodiertem Alternativtext:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Bild mit sehr langem Alternativtext:

Schau dir diesen Hund an. Dieser Hund ist so glücklich. Dieser Hund durfte spazieren gehen, und der Spaziergang führte zu einem See, wo es alle möglichen faszinierenden Gerüche gab. Was für ein toller Tag für diesen Hund.

Bilder in Links, bei denen der Alternativtext möglicherweise das Bild statt des Links beschreibt

Dieser Link enthält Text und ein Bild.Ein schönes graues Rechteck

Hallo zusammen

Bild in einer Abbildung als dekorativ markiert:

Bildunterschrift ist vorhanden.

Bild in einer Abbildung mit einem Alternativtext, der mit der Bildunterschrift identisch ist:

Bildunterschrift ist identisch mit Alternativtext
Bildunterschrift ist identisch mit Alternativtext

Bild in einem Karussell ohne Alternativtext:

Kontrast

Unleserliche Farbkombination:

Sehr gut lesbar.

Farbe erfordert eine manuelle Prüfung:

Und nicht berechenbar.

SVG-Grafik mit zu geringem Kontrast

SVG-Grafik, bei der der Kontrast manuell geprüft werden muss

Einbettungen & Medien

Video, das zur manuellen Prüfung der Untertitelung markiert wurde:

Wiedergabe deaktiviert, um Cookies zu verhindern.

Audio benötigt ein Transkript:

Iframe ohne Titel, der zudem eine manuelle Prüfung erfordert:

Nicht fokussierbarer Iframe:

Verschachtelte interaktive Komponenten

Accordion
AccordionSurprise!

Tabellen

Tabellen ohne gültige Kopfzeilen

Eine Tabelle ohne TH-Kopfzeile ist ungültig

Gliederungsüberschriften zählen nicht

Inhaltsüberschriften-Test in Tabellen sollte deaktiviert sein

Leere Kopfzellen
Ich habe gefunden 700 Videos über Schildkröten
Jedes 2 Sekunden lang

Lesbarkeit

MEHRERE AUFEINANDERFOLGENDE WÖRTER IN GROSSBUCHSTABEN LÖSEN EINE MANUELLE PRÜFWARNUNG AUS.

Unterstrichener Text

Etwas Kursivschrift ist in Ordnung, aber große Blöcke hervorgehobenen Textes sind nicht sehr gut lesbar. Ein wenig ist natürlich akzeptabel, aber es gibt Grenzen, und ein ganzer Absatz ist viel zu viel. Dies ist zum Beispiel ein ganzer Absatz. Es ist ein wenig schwer zu lesen, nicht wahr? Aber dieser Test wird erst bei dieser Länge ausgelöst, sodass Sie in Ihrem Inhalt keine falsch positiven Ergebnisse sehen sollten, es sei denn, Sie schreiben regelmäßig so lange Absätze.

Blocksatz-Text

Übermäßige Hoch- oder Tiefstellung; Tiefstellung sollte für kleine Referenzen und Fußnoten verwendet werden, nicht für ganze Sätze oder Absätze.

Winzige Schriftarten

* Falsche Listen mit gängigen Zeichen,

* Buchstaben, Zahlen und Emoji.

  • Fehlendes UL-Tag

    • Formulare

    Schaltfläche ohne Beschriftung

    Eingabefelder mit einer unsichtbaren Beschriftung – Frage, ob auch eine sichtbare Beschriftung vorhanden ist.

    Eingabefelder mit nur einer Platzhalter-Beschriftung – Frage, ob auch eine sichtbare Beschriftung vorhanden ist.

    Schaltfläche mit einer barrierefreien Beschriftung, die von der sichtbaren Beschriftung abweicht.

    Schaltfläche mit einem ungültigen aria-labelledby-Attribut.

    Schaltfläche mit redundanter Beschriftung.

    Zurücksetzen-Schaltfläche.

    Tab-Reihenfolge durcheinanderbringen