## Alles

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

Auf dieser Seite: Überschriften Bilder Verknüpfungen Tische Andere Probleme

## Ü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

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

Verlinktes Bild mit Alt-Text.

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

Verlinktes Bild alt, das zu lang ist.

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.

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

Beschriftungstext der Abbildung.

Abbildungsbild mit unterschiedlichem Alternativ- und Beschriftungstext.

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

Abbildungselement hat doppelten Alt- und Beschriftungstext.

Hyperlinked figure element ohne figcaption.

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.

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

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

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

diese Seite
Mehr "
Erfahren Sie mehr >

#### Passieren

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

Erfahre mehr über Sa11y

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

mehr erfahren (Externer Link)

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

Klicken Sie hier, um unsere Programme anzuzeigen
Weiter >
< Zurück

#### Lange URLs

Nur lange URLs werden gekennzeichnet.

https://sa11y.netlify.app/developers/custom-checks/

Erwartet:Warnung

https://sa11y.netlify.app

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

Erfahren Sie mehr

#### Kind mit ARIA-Label

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

Erfahren Sie mehr

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

Erfahren Sie mehr

#### Einzelnes ARIA-labelledby-Attribut

Äpfel

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

Erfahren Sie mehr

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

Lerne mehr über

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

Lerne mehr über

#### ARIA versteckt

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

Erfahren Sie mehr

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

- Download the Admissions Handbook (PDF)
- Course Outline (PDF)
- Cheatsheet (PDF)
- Google Docs link

### 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 `id`Attribut.

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