Alles
Naja, fast alles. Nur eine Seite mit vielen Fehlern und Warnungen. 🤠
Überschriften
Leere Überschriften
Erwartet:Fehler
Ignorierte Überschriften
Verwenden von prop, headerIgnore
um 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
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
Bild hat alternativen Text.
Warnungen
Alternativtext enthält verdächtiges Stoppwort.
Bild ist dekorativ.
Das Bild ist dekorativ mit Leerzeichen (alt=" ").
Alt-Text ist zu lang.
Fehler
Fehlender Alt-Text.
Alt-Text hat die Dateierweiterung.
Alt-Text enthält Platzhaltertext.
Verlinkte Bilder
Passieren
Verlinktes Bild mit null Alt-Text, aber umgebendem Linktext unter dem Bild.
Verlinktes Bild mit null Alt-Text, aber umgebendem Linktext über dem Bild.
Warnungen
Hyperlink-Bild, das sowohl Alternativtext als auch Linktext enthält.
Fehler
Hyperlink-Bild mit fehlendem Alt und enthält umgebenden Linktext.
Verlinktes Bild, bei dem der Anker aria-hidden="true" hat.
28: Der Alt-Text des verlinkten Bildes enthält eine Dateierweiterung.
<Abbildung> Bilder
Abbildungsbild mit unterschiedlichem Alternativ- und Beschriftungstext.
Abbildungsbild ohne Bildunterschrift.
Dekoratives Bild innerhalb eines <figur>-Elements.
Dekoratives Bild innerhalb eines <figure>-Elements mit einer <figcaption>.
Abbildungselement hat doppelten Alt- und Beschriftungstext.
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.
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
Leere Hyperlinks mit zugänglichem Namen über das Titelattribut
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 LinkErwartet:Warnung
verwendet Arienlabel oder erfahren Sie mehrHyperlinks 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
Äpfel- Referenz ID:
<span id="app">apples</span>
- Code:
<a href="#" aria-labelledby="app">Learn more</a>
- Erwartetes Ergebnis: ÄpfelPassieren
Mehrere ARIA-labelledby-Attribute
und Bananen- Referenz-IDs: sich selbst,
<span id="app">apples</span>
,x
die 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>
,x
die 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
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.