Alles

Naja, fast alles. Nur eine Seite mit vielen Fehlern und Warnungen. 🤠

Überschriften

Leere Überschriften

Erwartet:Fehler

Ignorierte Überschriften

Verwenden von prop, headerIgnoreum diese Überschrift zu ignorieren.

Erwartet: keine Anmerkung und wird nicht in der Seitengliederung angezeigt.

Dieses H6 wird ignoriert.

Visuell versteckte Überschrift

Übersprungene Überschriften

Erwartet:Fehler

Dies sollte eine Überschrift 4 sein!

Zu lange Überschriften

Erwartet:Warnung

Ist eine Überschrift wirklich eine Überschrift, wenn es sich um einen langen Satz handelt? Oder strebt ein Inhaltsautor nur nach visueller Ästhetik? Überschriften mit mehr als 160 Zeichen werden als Warnung gekennzeichnet.

Blockzitate als Überschriften verwendet

Wenn ein Blockzitat weniger als 25 Zeichen hat, wird es als Warnung gekennzeichnet.

Erwartet:Warnung

Über die Mannschaft
"Sein oder Nichtsein, das ist hier die Frage."

Eine leere Überschrift enthält ein dekoratives Bild

Erwartet:FehlerUndWarnung

Überschrift enthält ein Bild ohne Alt-Text

Erwartet:Fehler

Die Überschrift enthält ein Bild mit Alt-Text

Erwartet:Passieren

Ein schöner Platz.

Fettgedruckter Text wird als Überschrift verwendet

Auf der Suche nach<p><strong>Some text</strong></p>

Erwartet:Warnung

Über uns

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

Dies sollte nicht markiert werden, da es lang und nicht unbedingt eine Überschrift ist. Es könnte einfach ein großer Block fettgedruckten Textes sein. Es ist über 120 Zeichen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

Als Überschrift verwendeter fetter Text mit Zeilenumbrüchen

Suchen nach etwas wie... Diese Prüfung wurde so konzipiert, dass sie etwas nachsichtig ist, um zu viele Warnungen zu vermeiden.<p><strong>Fake heading<br></strong> Followed by some text.</p>

Warnung

Erwartet:Warnung

Dies wird markiert!
Weil es ein ziemlich umfangreicher Absatz ist. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

Passieren

Über uns
Wird nicht markiert, da es sich um einen kleinen Absatz handelt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh.

Adresse
105 Bond Street
Toronto, ON
M5B 2K3

Dies wird auch nicht gekennzeichnet, da dieser fettgedruckte Text lang und nicht unbedingt eine Überschrift ist. Es könnte einfach ein großer Block fettgedruckten Textes sein. Es ist über 120 Zeichen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.


Bilder

Bilder ohne Links

Passieren

Große Sandberge in der Nambischen Wüste.

Bild hat alternativen Text.

Warnungen

Ein Bild eines Vogels.

Alternativtext enthält verdächtiges Stoppwort.

Bild ist dekorativ.

Das Bild ist dekorativ mit Leerzeichen (alt=" ").

Zebras sind mehrere Arten afrikanischer Equiden (Pferdefamilie), die durch ihre charakteristischen schwarz-weiß gestreiften Mäntel vereint sind.  Ihre Streifen gibt es in verschiedenen Mustern, die für jede Person einzigartig sind.  Sie sind im Allgemeinen soziale Tiere, die in kleinen Harems bis hin zu großen Herden leben.  Im Gegensatz zu ihren nächsten Verwandten, Pferden und Eseln, wurden Zebras nie wirklich domestiziert.  Quelle: Wikipedia.

Alt-Text ist zu lang.

Fehler

Fehlender Alt-Text.

Vogel.jpg

Alt-Text hat die Dateierweiterung.

Bild

Alt-Text enthält Platzhaltertext.

Verlinkte Bilder

Passieren

Erfahren Sie mehr über Tiger

Verlinktes Bild mit null Alt-Text, aber umgebendem Linktext unter dem Bild.

Erfahren Sie mehr über Tiger

Verlinktes Bild mit null Alt-Text, aber umgebendem Linktext über dem Bild.

Warnungen

Große Sandberge in der Nambischen Wüste.

Verlinktes Bild mit Alt-Text.

Ein Bild eines Vogels.

Hyperlink-Bild hat alternativen Text, der ein Stoppwort enthält.

Zebras sind mehrere Arten afrikanischer Equiden (Pferdefamilie), die durch ihre charakteristischen schwarz-weiß gestreiften Mäntel vereint sind.  Ihre Streifen gibt es in verschiedenen Mustern, die für jede Person einzigartig sind.  Sie sind im Allgemeinen soziale Tiere, die in kleinen Harems bis hin zu großen Herden leben.  Im Gegensatz zu ihren nächsten Verwandten, Pferden und Eseln, wurden Zebras nie wirklich domestiziert.  Quelle: Wikipedia.

Verlinktes Bild alt, das zu lang ist.

Repariere es wieder Tony!Erfahren Sie mehr über Fiat.

Hyperlink-Bild, das sowohl Alternativtext als auch Linktext enthält.

Fehler

Hyperlink-Bild mit fehlendem Alt-Text.

Verlinktes Bild, das dekorativ ist.

Verlinktes Bild, das dekorativ ist und Leerzeichen verwendet (alt=" ").

Erfahren Sie mehr über Dahlien

Hyperlink-Bild mit fehlendem Alt und enthält umgebenden Linktext.

Bild

Hyperlink-Bild enthält Alt-Text, der Platzhaltertext enthält.

Verlinktes Bild, bei dem der Anker aria-hidden="true" hat.

28: Der Alt-Text des verlinkten Bildes enthält eine Dateierweiterung.

<Abbildung> Bilder

Alternativtext für Abbildung.
Beschriftungstext der Abbildung.

Abbildungsbild mit unterschiedlichem Alternativ- und Beschriftungstext.

zwei Zebras schwarz und weiß

Abbildungsbild ohne Bildunterschrift.

Dekoratives Bild innerhalb eines <figur>-Elements.

Abb. 1: Nambische Wüste (Quelle: unbekannt)

Dekoratives Bild innerhalb eines <figure>-Elements mit einer <figcaption>.

zwei Zebras
Zwei Zebras

Abbildungselement hat doppelten Alt- und Beschriftungstext.

zwei Zebras schwarz und weiß

Hyperlinked figure element ohne figcaption.

zwei Zebras schwarz und weiß
Schwarz-Weiß-Foto von zwei Zebras.

Verlinktes figure-Element mit figcaption.

Andere

Hyperlink-Bild, bei dem Anker aria-hidden="true" und tabindex="-1" hat

Hyperlink-Bild, bei dem Anker aria-hidden="true" und tabindex="-1" hat und das Bild Alt-Text hat.

Erfahren Sie mehr über die Kanarischen Inseln

Hyperlink-Bild enthält übersprungene Überschrift. Fehler wird nach dem Hyperlink angehängt, um zu verhindern, dass die Schaltfläche innerhalb des Hyperlinks verschachtelt wird.

Repariere es wieder Tony!

Das verlinkte Bild wird in einem neuen Tab geöffnet.

Zwei Zebras.  Öffnet in neuem Tab.

Das verlinkte Bild wird in einem neuen Tab geöffnet. Alt-Text zeigt an, dass der Link in einem neuen Fenster geöffnet wird.

prüfen

Fehlertests. Ignorieren Sie <noscript>-Tags.


Verknüpfungen

Partielle Stoppwörter

Fehler

Die Verwendung eines der obigen Wörter allein führt zu einem Fehler, da es nicht beschreibend genug ist.

Erwartet:3 Fehler

Passieren

Bei Verwendung mit zusätzlichem Text wird dies jedoch nicht als Fehler gekennzeichnet.

Teilweise Stoppwörter mit Ausschlüssen

Manchmal kann ein Website-Design automatisch Text an einen Link anhängen. Beispielsweise wird "(Externer Link)" ignoriert, wodurch dieser Link korrekterweise als Fehler gekennzeichnet wird, weil er nicht ausreichend beschreibend ist.

Erwartet:Fehler

Leere Hyperlinks

Erwartet:4 Fehler

  • Leerer Hyperlink:
  • Leerer Hyperlink mit Leerzeichen:
  • Einzelzeichen: .
  • Geschütztes Leerzeichen: 

Leere Hyperlinks mit Kindern

Erwartet:4 Fehler

  • Leerer Hyperlink mit Symbolschrift:
  • Leerer Hyperlink mit Symbolschrift (öffnet neuen Tab):
  • Leerer Hyperlink mit SVG:
  • Leerer Hyperlink mit SVG (öffnet neuen Tab):

Leere Hyperlinks mit zugänglichem Namen über das Titelattribut

  • Leerer Hyperlink mit Titel:
  • Leerer Hyperlink mit Leerzeichen und Titel:
  • Geschütztes Leerzeichen und Titel: 
  • Leerer Hyperlink mit Symbolschrift und Titel:
  • Leerer Hyperlink mit Symbolschrift (öffnet neuen Tab) und Titel:
  • Leerer Hyperlink mit SVG und Titel:
  • Leerer Hyperlink mit SVG (öffnet neuen Tab):

Best Practices für Linktexte

Schluss mit Worten

Link enthält: "hier klicken", ">", "<"

Erwartet:3 Warnungen

Lange URLs

Nur lange URLs werden gekennzeichnet.

Links mit demselben Namen, aber unterschiedlicher URL

Erwartet:Warnung

irgendein Link oder irgendein Link

Erwartet:Warnung

verwendet Arienlabel oder erfahren Sie mehr

Hyperlinks mit ARIA

ARIA-Label

  • Code: <a href="#" aria-label="Learn more about Sa11y">Learn more</a>
  • Erwartetes Ergebnis: Erfahren Sie mehr über Sa11yPassieren

Kind mit ARIA-Label

  • Code: <a href="#">Learn more <span aria-label="about Sa11y"></span></a>
  • Erwartetes Ergebnis: Erfahren Sie mehr über Sa11yPassieren

Mehrere Kinder mit ARIA-Label

  • Code: <a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>
  • Erwartetes Ergebnis: Weitere Informationen zu Sa11y (Extern)Passieren

Einzelnes ARIA-labelledby-Attribut

  • Referenz ID: <span id="app">apples</span>
  • Code: <a href="#" aria-labelledby="app">Learn more</a>
  • Erwartetes Ergebnis: ÄpfelPassieren

Mehrere ARIA-labelledby-Attribute

  • Referenz-IDs: sich selbst, <span id="app">apples</span>, xdie nicht existiert,<span id="ban">bananas</span>
  • Code: <a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>
  • Erwartetes Ergebnis: Erfahren Sie mehr über Äpfel und BananenPassieren

Kind mit ARIA-labelledby-Attributen

  • Referenz-ID: <span id="app">apples</span> , xdie nicht existiert,<span id="ban">bananas</span>
  • Code: <a href="#">Learn more <span aria-labelledby="app x ban"></span></a>
  • Erwartetes Ergebnis: Erfahren Sie mehr über Äpfel und BananenPassieren

ARIA versteckt

  • Code: <a href="#" aria-hidden="true">Learn more</a>
  • Erwartetes Ergebnis:

Tische

Richtiger Tisch

Veranstaltungsname Zeit Standort
Grundsatzrede 9:00 MORGENS Auditorium
Mittagessen 12.00 Skyline-Zimmer
Abschlussessen 5.00 Metropolitanraum

Fehlende Tabellenüberschriften

Erwartet:Fehler

Veranstaltungsname Zeit Standort
Grundsatzrede 9:00 MORGENS Auditorium
Mittagessen 12.00 Skyline-Zimmer
Abschlussessen 5.00 Metropolitanraum

Tabelle mit leerer Kopfzeile

Erwartet:Fehler

Zeit Standort
Grundsatzrede 9:00 MORGENS Auditorium
Mittagessen 12.00 Skyline-Zimmer
Abschlussessen 5.00 Metropolitanraum

Tabelle mit semantischen Überschriften

Erwartet:3 Fehler

Fall

Zeit

Standort

Grundsatzrede 9:00 MORGENS Auditorium
Mittagessen 12.00 Skyline-Zimmer

gefälschte Überschrift

Abschlussessen 5.00 Metropolitanraum

Andere Probleme

Pdf

A warning is added to any hyperlinks that have a .pdf file extension. A warning icon is only appended to the first PDF detected on the page to avoid overwhelming a content author. All other PDF links are visually highlighted.

Expected: Warning

Uppercase text

This warning is to discourage the use of uppercase text. This is not a WCAG 2.1 requirement, however is a discouraged practice for readability. Secondly, some capitalized words may be mistaken for an acronym and ready out character by character with a screen reader. This condition uses regex to find uppercase words that are at least 3 characters in length, however it will only be indicated as a warning if at least 5 uppercase words within an element is found. It only checks for uppercase words within the following elements: h1, h2, h3, h4, h5, h6, p, li, blockquote.

Expected: 3 warnings

FOR EXAMPLE, THIS WILL BE FLAGGED.

FOR EXAMPLE, this WILL NOT be flagged.

  • UPPERCASE TEXT WITHIN BULLETS will be flagged too.

LET'S NOT FORGET ABOUT HEADINGS TOO!

Underlined text

This warning is to discourage the use of underlined text as it is easily confused with links. This condition checks for underlined text created with <u> markup and css styles within the following elements: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

Expected: Warning

This will be flagged.

Expected: Warning

<u>underlined</u> this way will be flagged.

Expected: Warning

  • Underlined text wihin lists will be flagged too.

Expected: Warning

This heading will be flagged.

Expected: Warning

What about a span within a paragraph.

Linked text will not be flagged.

Non-semantic lists

Expected: 2 warnings

a) Sometimes people will manually create a list
b) using fake list prefixes
c) instead of using a semantic list.

1. Bananas

2. Pears

3. Apples

Duplicate IDs

Expected: Error

Element 1 und Element 2 haben das gleiche idAttribut.

Tiefgestellte und hochgestellte Formatierung

Erwartet:2 Warnungen

Ein tiefgestellter oder hochgestellter Index ist ein Zeichen, das etwas unterhalb bzw. oberhalb der normalen Textzeile gesetzt wird. Es ist normalerweise kleiner als der Rest des Textes. Tiefgestellte Zeichen erscheinen an oder unter der Grundlinie, während hochgestellte Zeichen darüber stehen. Wikipedia.

Ein tiefgestellter oder hochgestellter Index ist ein Zeichen, das etwas unterhalb bzw. oberhalb der normalen Textzeile gesetzt wird. Es ist normalerweise kleiner als der Rest des Textes. Tiefgestellte Zeichen erscheinen an oder unter der Grundlinie, während hochgestellte Zeichen darüber stehen. Wikipedia.