Ziel: Bieten Sie Textalternativen für alle Nicht-Text-Inhalte an, damit diese in andere Formen umgewandelt werden können, die Menschen lesen können, einschließlich Großdruck, Braille, Sprache, Symbole oder einfachere Sprache.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht blinden oder sehbehinderten Menschen, den Inhalt von Bildern und grafischen Elementen über Screenreader zu verstehen.
• Ermöglicht Benutzern mit kognitiven Beeinträchtigungen, Informationen in einem einfacheren, anpassbaren Textformat zu verarbeiten.
• Verbessert SEO (Suchmaschinenoptimierung) und die Bildindizierung durch Suchmaschinen.

Was zu überprüfen / Wie umzusetzen ist:

• Informative Bilder: Für jedes Bild, das eine Bedeutung vermittelt, muss das `alt`-Attribut eine prägnante und aussagekräftige Beschreibung seines Inhalts oder seiner Funktion enthalten.

  <img src="grafico.png" alt="Quartalsumsatzdiagramm mit einem Anstieg von 15 % im 4. Quartal">

• Dekorative Bilder: Wenn ein Bild rein ästhetisch ist und keine Informationen hinzufügt (z.B. Ränder, Hintergründe), muss das `alt`-Attribut leer gelassen werden (`alt=""`).

  <img src="sfondo.jpg" alt="">

• Symbole/Bildschaltflächen: Wenn ein Symbol anklickbar ist, muss das `alt`-Attribut (oder `aria-label`) die Aktion der Schaltfläche beschreiben, nicht nur das Bild (z.B. `alt="Suchen"` für eine Lupe).
• Komplexe Diagramme/Schemata: Zusätzlich zum Alt-Text eine "lange Beschreibung" bereitstellen (z.B. über `aria-describedby` oder einen Link zu einer separaten Seite), die den informativen Inhalt detailliert erklärt.
• Audio-/Videoinhalte: Bieten Sie vollständige Transkripte (für Audio) und/oder detaillierte Beschreibungen (für stille oder nur visuelle Videos) an.

Häufige Fehler, die vermieden werden sollten:

• Vollständiges Weglassen des `alt`-Attributs.
• Verwendung generischer oder redundanter `alt`-Texte (z.B. `alt="Bild"`, `alt="foto.jpg"`, `alt="hier klicken"`).
• `alt`-Text, der zu lang ist oder für den Kontext unnötige Details enthält.
• Keine Bereitstellung von Transkripten oder Beschreibungen für wichtige Multimedia-Inhalte.

Nützliche Tools zum Testen:

• Browser-Erweiterungen: Axe DevTools, Lighthouse, WAVE, Web Developer (zum Anzeigen von Alt-Text).
• Screenreader: Navigieren Sie die Seite mit einem Screenreader (z.B. NVDA, JAWS, VoiceOver), um zu hören, wie Textalternativen gelesen werden.
• Bilder deaktivieren: Deaktivieren Sie in den Browsereinstellungen das Laden von Bildern, um den Alternativtext an deren Stelle zu sehen.

Ziel: Stellen Sie eine Alternative für vorgezeichnete Nur-Audio- oder Nur-Video-Inhalte bereit, sodass alle vermittelten Informationen für diejenigen zugänglich sind, die sie nicht wahrnehmen können.

Warum es wichtig ist (Nutzen für den Benutzer):

• Gehörlose oder stark hörgeschädigte Benutzer können Audioinhalte über ein Texttranskript aufrufen.
• Blinde oder sehbehinderte Benutzer können auf visuelle Inhalte über eine Textbeschreibung zugreifen.
• Ermöglicht die Konsultation in Umgebungen, in denen Audio/Video nicht nutzbar ist (z.B. öffentliche Orte, langsame Verbindungen).

Was zu überprüfen / Wie umzusetzen ist:

• Nur-Audio-Inhalte: Bieten Sie ein vollständiges Texttranskript des Dialogs und aller wichtigen Geräusche (z.B. Musik, wichtige Soundeffekte) im Audio an. Das Transkript sollte leicht zugänglich und mit dem Audio verbunden sein (z.B. unter dem Player oder über einen Link).
• Nur-Video-Inhalte: Geben Sie eine detaillierte Textbeschreibung aller wichtigen visuellen Ereignisse und Informationen, die im Video dargestellt werden (z.B. Aktionen, Objekte, Text auf dem Bildschirm).

Häufige Fehler, die vermieden werden sollten:

• Keine Textalternative für Audio oder Video bereitzustellen.
• Unvollständige Transkripte oder solche, die wichtige Geräusche weglassen.
• Generische Videobeschreibungen, die die visuelle Bedeutung nicht erfassen.

Nützliche Tools zum Testen:

• Manuelle Überprüfung: Vergleichen Sie Audio/Video sorgfältig mit dem Transkript/der Beschreibung, um Vollständigkeit und Genauigkeit zu überprüfen.
• Benutzerbeteiligung: Lassen Sie Personen mit Seh- oder Hörbehinderungen testen.

Ziel: Bieten Sie synchronisierte Untertitel für alle vorgezeichneten Audioinhalte in Videos an, einschließlich Dialoge und wichtiger nicht-verbaler Geräusche.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht gehörlosen oder schwerhörigen Menschen den Zugriff auf Audioinhalte von Videos.
• Nützlich in lauten Umgebungen oder wenn Audio nicht hörbar ist.
• Erleichtert das Verständnis für Nicht-Muttersprachler oder Menschen mit kognitiven Schwierigkeiten.

Was zu überprüfen / Wie umzusetzen ist:

• Synchronisierte Untertitel: Stellen Sie sicher, dass Untertitel verfügbar und perfekt mit Audio und Video synchronisiert sind.
• Vollständiger Inhalt: Untertitel müssen alle gesprochenen Dialoge und, wo wichtig, nicht-verbale Geräusche (z.B. `[dramatische Musik]`, `[Applaus]`) enthalten.
• Geeignetes Format: Verwenden Sie unterstützte Untertitelformate (z.B. WebVTT, SRT) und stellen Sie sicher, dass der Videoplayer die Aktivierung/Deaktivierung und Anpassung (falls möglich) zulässt.

Häufige Fehler, die vermieden werden sollten:

• Völliges Fehlen von Untertiteln.
• Ungenaue, unvollständige oder fehlerhafte Untertitel.
• Falsche Synchronisation (Untertitel erscheinen zu früh oder zu spät).
• Weglassen wichtiger nicht-verbaler Geräusche.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Sehen Sie sich das Video ohne Ton an und überprüfen Sie das Verständnis anhand der Untertitel.
• Screenreader: Überprüfen Sie, ob der Player zugänglich ist und Untertitel nicht stören.

Ziel: Für vorgezeichnete Videos mit einer Audiospur eine Audiodeskription bereitstellen, die wesentliche visuelle Inhalte für blinde Benutzer beschreibt, oder eine vollständige Textalternative.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht blinden oder sehbehinderten Menschen, visuelle Informationen zu verstehen, die im Audiodialog nicht erklärt werden.
• Bietet allen Benutzern ein vollständiges Multimedia-Inhaltserlebnis.

Was zu überprüfen / Wie umzusetzen ist:

• Audiodeskription: Integrieren Sie eine zusätzliche Audiospur, die visuelle Szenen, Aktionen, Text auf dem Bildschirm und andere relevante visuelle Details beschreibt, die nicht bereits im Hauptdialog vorhanden sind.
• Text-Medienalternative: Alternativ bieten Sie ein vollständiges Texttranskript an, das sowohl Dialoge als auch eine detaillierte Beschreibung des visuellen Inhalts enthält.

Häufige Fehler, die vermieden werden sollten:

• Fehlen einer Audiodeskription für Videos, die eine benötigen.
• Unvollständige oder zu kurze Audiodeskription.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Sehen Sie sich das Video mit geschlossenen Augen an und überprüfen Sie, ob die Audiodeskription es Ihnen ermöglicht, alle wichtigen visuellen Informationen zu verstehen.

Ziel: Bieten Sie synchronisierte Untertitel für alle Live-Audioinhalte in Videos an.

Warum es wichtig ist (Nutzen für den Benutzer):

• Wesentlich für gehörlose oder stark hörgeschädigte Menschen, um auf Live-Events zuzugreifen.
• Ermöglicht die Echtzeit-Teilnahme an Webinaren, Live-Übertragungen, Konferenzen.

Was zu überprüfen / Wie umzusetzen ist:

• Echtzeit-Untertitel: Implementieren Sie eine Lösung für die Echtzeit-Untertitelgenerierung (z.B. über menschliche Transkriptoren, Spracherkennungstechnologien mit Überprüfung).
• Genauigkeit und Synchronisation: Stellen Sie sicher, dass Untertitel so genau und synchron wie möglich sind, unter Berücksichtigung der Herausforderungen von Live-Inhalten.

Häufige Fehler, die vermieden werden sollten:

• Fehlen von Untertiteln für Live-Inhalte.
• Automatisch generierte Untertitel mit hohem Fehleranteil.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Überwachen Sie die Qualität und Aktualität der Untertitel während eines Live-Events.

Ziel: Bieten Sie eine Audiodeskription für alle vorgezeichneten Videoinhalte an. Dieses Kriterium ist eine strengere Anforderung als 1.2.3, da es eine Audiodeskription für alle Videos anfordert, auch wenn bereits eine Hauptaudiospur vorhanden ist.

Warum es wichtig ist (Nutzen für den Benutzer):

• Stellt sicher, dass blinde Menschen alle wichtigen visuellen Informationen erhalten.

Was zu überprüfen / Wie umzusetzen ist:

• Einbeziehung der Audiodeskription: Stellen Sie sicher, dass alle vorgezeichneten Videos eine Audiodeskriptionsspur haben, auch wenn sie kurz ist, die wichtige visuelle Inhalte beschreibt.

Häufige Fehler, die vermieden werden sollten:

• Fehlen einer Audiodeskription.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Hören Sie sich das Video mit aktivierter Audiodeskription an, um deren Vollständigkeit zu bewerten.

Ziel: Sicherstellen, dass die Struktur, Beziehungen und Bedeutung von Inhalten nicht nur visuell, sondern auch programmatisch (über Code) verständlich sind. Dies ermöglicht Hilfstechnologien, die Hierarchie und Rolle von Seitenelementen korrekt zu interpretieren.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verbesserte Navigation: Ermöglicht Screenreader-Benutzern eine effiziente Navigation auf der Seite (z.B. durch Springen von Überschrift zu Überschrift oder das Erkunden von Listen).
• Kontextuelles Verständnis: Hilft allen Benutzern, die Beziehung zwischen verschiedenen Seitenelementen zu verstehen (z.B. Beschriftungen vs. Formularfelder, Zellen vs. Tabellenüberschriften).
• Konsistenz und Personalisierung: Stellt sicher, dass Inhalte konsistent und aussagekräftig präsentiert werden, und erleichtert auch die Benutzeranpassung.

Was zu überprüfen / Wie umzusetzen ist:

• Überschriftenhierarchie (<h1> - <h6>):
  • Verwenden Sie Überschriften-Tags für eine logische Struktur (nur ein <h1> pro Seite).
  • Überspringen Sie keine Überschriftenebenen (z.B. von <h1> zu <h3>).
• Listen (<ul>, <ol>, <dl>):
  • Verwenden Sie semantische Elemente für alle Listen.
  • Vermeiden Sie die Simulation von Listen mit einfachen divs oder Absätzen.
• Formulare:
  • Verbinden Sie immer <label> mit jedem Eingabesteuerelement mit `for` und `id`.
  • Gruppieren Sie verwandte Steuerelemente (z.B. Radio-Buttons) mit <fieldset> und <legend>.
• Datentabellen (<table>, <th>, <caption>):
  • Verwenden Sie Tabellen nur für tabellarische Daten, niemals für das Layout.
  • Identifizieren Sie Kopfzeilen (<th> mit `scope`) und geben Sie eine <caption> an.
• ARIA-Rollen (Accessible Rich Internet Applications):
  • Verwenden Sie ARIA-Attribute, um Rollen, Eigenschaften und Zustände komplexer oder benutzerdefinierter UI-Komponenten zu definieren.

Häufige Fehler, die vermieden werden sollten:

• Irreführende visuelle Hierarchie: Nur visuelle Stile (Fettdruck, Schriftgröße) für Überschriften verwenden, ohne <h1>-<h6>-Tags zu verwenden.
• Fehlende oder nicht zugeordnete Beschriftungen: Formularfelder ohne <label> oder mit nicht korrekt verknüpfter `label`.
• Tabellen für das Layout verwendet: Missbrauch des <table>-Elements für die visuelle Positionierung.
• Nicht-semantische Struktur: Erstellen von Listen oder anderen Strukturelementen nur mit <div> oder <p> ohne die korrekten semantischen Elemente.

Nützliche Tools zum Testen:

• Barrierefreiheits-Browser-Erweiterungen: Axe DevTools, Lighthouse, WAVE Evaluation Tool.
• Screenreader: NVDA, JAWS (Windows), VoiceOver (macOS).
• HTML-Validator: W3C Markup Validation Service.

Ziel: Sicherstellen, dass, wenn die Reihenfolge des Inhalts (visuelle Präsentation) seine Bedeutung beeinflusst, die programmatische Lese- und Interaktionsreihenfolge ebenfalls sinnvoll und logisch ist. Dies ist entscheidend für Benutzer, die auf Inhalte in einer anderen Reihenfolge als der visuellen zugreifen (z.B. mit Screenreadern).

Warum es wichtig ist (Nutzen für den Benutzer):

• Logische Konsistenz: Stellt sicher, dass Inhalte sinnvoll sind, unabhängig davon, wie sie wahrgenommen werden (visuell, über Screenreader, Tastaturnavigation).
• Effiziente Navigation: Hilft Benutzern von Hilfstechnologien, dem logischen Fluss des Dokuments ohne Verwirrung oder unerwartete Sprünge zu folgen.
• Verbesserte Benutzererfahrung: Verhindert Frustration und Desorientierung für alle Benutzer, insbesondere bei komplexen Layouts.

Was zu überprüfen / Wie umzusetzen ist:

• Logische Lesereihenfolge: Die DOM-Sequenz (Document Object Model) muss die vom Autor beabsichtigte logische Inhaltsreihenfolge widerspiegeln. Was visuell zuerst erscheint, sollte im Code im Allgemeinen auch zuerst stehen.
• Verwandte Inhalte: Wenn Inhalte miteinander verbunden sind (z.B. eine Frage und ihre Antwortoptionen), stellen Sie sicher, dass sie im HTML-Code nahe beieinander liegen, um ihre Beziehung aufrechtzuerhalten.
• CSS-Layout: Vermeiden Sie es, CSS zu verwenden, um Elemente so neu anzuordnen, dass die visuelle Reihenfolge drastisch von der DOM-Reihenfolge abweicht, insbesondere bei interaktiven oder informativen Elementen. Wenn Sie dies tun, überprüfen Sie die Barrierefreiheit sorgfältig.
• Test von linearisiertem Inhalt: Stellen Sie sich vor, Sie lesen die Seite ohne CSS; ergibt der Inhalt immer noch Sinn? Folgt das Tastaturscrollen (Tabulatoren) einem logischen Pfad?

Häufige Fehler, die vermieden werden sollten:

• Diskrepanz zwischen visueller und DOM-Reihenfolge: Die Reihenfolge der Elemente im HTML-Code stimmt nicht mit der logischen oder visuellen Reihenfolge überein, was zu Verwirrung bei Screenreadern führt.
• Verstreute Inhalte: Verwandte Informationen (z.B. eine Warnung und die Schaltfläche zum Schließen) sind im HTML-Code weit voneinander entfernt positioniert.
• Extreme Neuanordnung über CSS/JavaScript: Missbrauch von CSS-Eigenschaften wie `order` in Flexbox/Grid oder JavaScript-Manipulationen, die die visuelle Reihenfolge im Verhältnis zum DOM stark verändern, ohne die Tabulatorreihenfolge oder Lesereihenfolge zu berücksichtigen.

Nützliche Tools zum Testen:

• Tastaturnavigation: Navigieren Sie die gesamte Seite nur mit der Tabulatortaste (und Umschalt+Tab, um zurückzugehen), um zu überprüfen, ob der Fokus in einer logischen und sinnvollen Reihenfolge verschoben wird.
• Screenreader: Hören Sie sich den Inhalt mit einem Screenreader an (z.B. NVDA, JAWS, VoiceOver), um sicherzustellen, dass die Lesereihenfolge wie erwartet und verständlich ist.
• Code-Inspektion: Überprüfen Sie die Reihenfolge der Elemente im DOM (mit den Browser-Entwicklertools) und vergleichen Sie sie mit der visuellen Reihenfolge.

Ziel: Anweisungen zum Verständnis und zur Bedienung von Inhalten dürfen sich nicht ausschließlich auf die sensorischen Merkmale von Komponenten (Form, Größe, Farbe, Position, Ausrichtung oder Klang) verlassen.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht Menschen mit Blindheit, Farbenblindheit oder kognitiven Beeinträchtigungen, Anweisungen zu verstehen, auch wenn sie bestimmte sensorische Merkmale nicht wahrnehmen.
• Stellt sicher, dass Anweisungen für jeden klar und eindeutig sind.

Was zu überprüfen / Wie umzusetzen ist:

• Redundante Anweisungen: Wenn Informationen über Farbe vermittelt werden (z.B. Rot für Fehler), fügen Sie immer einen Textindikator oder ein Symbol hinzu (z.B. "Erforderliches Feld fehlt" oder ein Warnsymbol).
• Formen/Größen: Wenn Anweisungen sich auf Formen oder Größen beziehen ("Klicken Sie auf die runde Schaltfläche"), fügen Sie eine Textalternative hinzu ("Klicken Sie auf die Schaltfläche 'Bestellung absenden'").
• Position/Ausrichtung: Vermeiden Sie Anweisungen wie "Klicken Sie auf das Symbol rechts" oder "Schauen Sie sich das Menü oben an", ohne eine spezifische Textalternative für das Element bereitzustellen.

Häufige Fehler, die vermieden werden sollten:

• Sagen Sie "klicken Sie auf die rote Schaltfläche", ohne den Text der Schaltfläche anzugeben.
• Erforderliche Felder nur mit einem roten Sternchen zu kennzeichnen, ohne einen Satz wie "(erforderlich)".

Nützliche Tools zum Testen:

• Manuelle Prüfung: Versuchen Sie, die Anweisungen zu verstehen, ohne auf Farben oder Formen zu achten.
• Simulation von Farbenblindheit: Verwenden Sie Browser-Erweiterungen, um verschiedene Formen von Farbenblindheit zu simulieren, um die Klarheit der Informationen zu überprüfen.

Ziel: Farbe darf nicht das einzige visuelle Mittel sein, um Informationen zu übermitteln, eine Aktion anzuzeigen, eine Antwort anzufordern oder ein visuelles Element zu unterscheiden.

Warum es wichtig ist (Nutzen für den Benutzer):

• Farbenblinde Menschen oder solche mit Farbsehstörungen können alle Informationen verstehen.
• Verbessert die Klarheit und Benutzerfreundlichkeit für alle Benutzer, selbst bei schlechten Lichtverhältnissen oder auf Bildschirmen geringer Qualität.

Was zu überprüfen / Wie umzusetzen ist:

• Redundanz: Wenn Informationen über Farbe übermittelt werden, muss es einen weiteren Indikator geben (z.B. Text, Symbol, Unterstreichung für Links). * *Beispiel:* Statt "Rote Felder sind Pflichtfelder" verwenden Sie "Rote Felder mit einem Sternchen (*) sind Pflichtfelder."
• Links: Links sollten einen zusätzlichen Indikator neben der Farbe haben, wenn sie nicht im Fließtext stehen (z.B. Unterstreichung oder ein Symbol beim Hover/Fokus).
• Diagramme: Verwenden Sie in Diagrammen zusätzlich zu den Farben Muster, Textbeschriftungen oder Symbole, um verschiedene Datenreihen zu unterscheiden.

Häufige Fehler, die vermieden werden sollten:

• Eine Fehlermeldung nur durch Einfärben des Nachrichtentextes oder Feldes rot anzuzeigen.
• Farbe zur Anzeige des Status (z.B. ausgewähltes Element) ohne einen weiteren visuellen Indikator zu verwenden.

Nützliche Tools zum Testen:

• Erweiterungen zur Simulation von Farbenblindheit: Colorblinding, NoCoffee.
• Manuelle Prüfung: Konvertieren Sie die Seite in Graustufen, um zu sehen, ob alle Informationen noch klar sind.

Ziel: Wenn Audio auf einer Webseite länger als 3 Sekunden automatisch abgespielt wird, muss ein Mechanismus zum Anhalten, Stoppen oder unabhängigen Steuern der Lautstärke vom gesamten Systemvolumen verfügbar sein.

Warum es wichtig ist (Nutzen für den Benutzer):

• Benutzer, die Screenreader oder andere Hörhilfen verwenden, könnten unerwartete Audios als störend empfinden oder ihre Hilfsmittel-Audios überdecken.
• Verbessert die allgemeine Benutzerfreundlichkeit und verhindert plötzliche Geräusche, die Benutzer erschrecken oder nerven könnten.

Was zu überprüfen / Wie umzusetzen ist:

• Sichtbare Bedienelemente: Stellen Sie sicher, dass klare und sichtbare Schaltflächen (Pause, Stopp, Stummschalten) für automatisch abgespielte Audios vorhanden sind.
• Kein Autoplay: Die beste Praxis ist es, die automatische Audiowiedergabe ganz zu vermeiden. Lassen Sie den Benutzer entscheiden, wann das Audio gestartet werden soll.

Häufige Fehler, die vermieden werden sollten:

• Audio, das automatisch startet und nicht angehalten oder stummgeschaltet werden kann.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Besuchen Sie die Seite und überprüfen Sie sofort, ob das Audio startet und ob Sie es einfach steuern können.

Ziel: Stellen Sie ein ausreichendes Kontrastverhältnis zwischen Text (und Text in Bildern) und deren Hintergrund sicher, um die Lesbarkeit für Menschen mit Sehbehinderungen oder Farbenblindheit zu gewährleisten.

Warum es wichtig ist (Nutzen für den Benutzer):

• Erhöht die Lesbarkeit für Menschen mit geringem Sehvermögen oder Farbenblindheit.
• Verbessert die Lesbarkeit für alle Benutzer bei widrigen Lichtverhältnissen (z.B. intensives Sonnenlicht) oder auf Bildschirmen geringer Qualität.

Was zu überprüfen / Wie umzusetzen ist:

• Normaler Text: Das Kontrastverhältnis muss für normalen Text mindestens 4.5:1 betragen.
• Großer Text: Für großen Text (mindestens 18pt / 24px oder 14pt / 18.66px und fett) muss das Kontrastverhältnis mindestens 3:1 betragen.
• Logos und dekorative Elemente: Gilt nicht für Logos oder Text, der Teil eines rein dekorativen Bildes ist.

Häufige Fehler, die vermieden werden sollten:

• Heller Text auf hellem Hintergrund oder dunkler Text auf dunklem Hintergrund mit unzureichendem Kontrast.
• Hintergründe mit Mustern oder Bildern, die den Textkontrast reduzieren.

Nützliche Tools zum Testen:

• Kontrastanalysatoren: Contrast Checker (online), Colour Contrast Analyser (Desktop-Anwendung), Browser-Erweiterungen wie Axe DevTools oder Lighthouse.

Ziel: Sicherstellen, dass Text ohne Verlust von Inhalt oder Funktionalität um bis zu 200 % in der Größe geändert werden kann und keine horizontale Bildlaufleiste erforderlich ist.

Warum es wichtig ist (Nutzen für den Benutzer):

• Wesentlich für Menschen mit geringem Sehvermögen, die größere Texte zum Lesen benötigen.
• Verbessert die Benutzerfreundlichkeit für alle Benutzer auf verschiedenen Geräten und Bildschirmgrößen.

Was zu überprüfen / Wie umzusetzen ist:

• Browser-Zoom: Testen Sie die Seite, indem Sie den Browser auf bis zu 200 % zoomen (z.B. Strg + Plus oder Cmd + Plus).
• Relative Einheiten: Verwenden Sie relative Einheiten für Schriftgrößen (z.B. `em`, `rem`, `%`, `vw`) anstelle fester Pixeleinheiten (`px`).
• Responsive Design: Stellen Sie sicher, dass sich das Layout korrekt anpasst und keine horizontale Bildlaufleiste erforderlich ist.

Häufige Fehler, die vermieden werden sollten:

• Text überlappt oder verschwindet bei 200 % Zoom.
• Horizontales Scrollen ist erforderlich, um den gesamten Text zu lesen.

Nützliche Tools zum Testen:

• Browser-Zoom: Testen Sie direkt in der Zoomfunktion des Browsers.

Ziel: Vermeiden Sie die Verwendung von Textbildern, es sei denn, der Text ist rein dekorativ oder Teil eines Logos/Markennamens. Wenn Textbilder notwendig sind, stellen Sie eine Textalternative für alle visuell im Bild dargestellten Inhalte bereit.

Warum es wichtig ist (Nutzen für den Benutzer):

• Text in Bildern kann nicht in der Größe geändert, angepasst oder von Screenreadern gelesen werden.
• Verbessert die SEO, da Text direkt durchsuchbar ist.

Was zu überprüfen / Wie umzusetzen ist:

• Echter Text: Bevorzugen Sie nach Möglichkeit echten Text, der mit CSS gestaltet ist.
• Alt-Text: Wenn die Verwendung eines Textbildes unvermeidlich ist, stellen Sie sicher, dass ein umfassendes `alt`-Attribut vorhanden ist, das den Text im Bild repliziert.

Häufige Fehler, die vermieden werden sollten:

• Verwendung von Bildern für Überschriften, Absätze oder wichtige Anweisungen.

Nützliche Tools zum Testen:

• Bilder deaktivieren: Deaktivieren Sie die Bildanzeige im Browser, um Textbilder zu identifizieren.

Ziel: Inhalt muss ohne Informations- oder Funktionsverlust und ohne erforderliche zweidimensionale Bildlaufleisten dargestellt werden können, wenn er auf 400 % Breite oder Höhe skaliert wird, ohne die Zeilenlänge zu erhöhen (responsives Design).

Warum es wichtig ist (Nutzen für den Benutzer):

• Entscheidend für Benutzer mit geringem Sehvermögen, die Inhalte erheblich vergrößern.
• Verbessert die Benutzerfreundlichkeit auf kleinen Bildschirmen oder bei der Verwendung von Bildschirmlupen.

Was zu überprüfen / Wie umzusetzen ist:

• Zoom 400 %: Testen Sie die Seite, indem Sie auf 400 % zoomen (entspricht typischerweise einer Viewport-Breite von 320 CSS-Pixeln für einen Desktop-Browser).
• Kein horizontaler Bildlauf: Stellen Sie sicher, dass bei 400 % Zoom keine horizontale Bildlaufleiste angezeigt wird. Vertikales Scrollen ist erlaubt.
• Responsives Layout: Implementieren Sie ein flüssiges und responsives Layout, das sich elegant an verschiedene Bildschirmgrößen und Zoomstufen anpasst.
• Inhaltsumbruch: Text und Inhaltsblöcke sollten sich an die verfügbare Breite anpassen.

Häufige Fehler, die vermieden werden sollten:

• Layouts mit fester Breite, die beim Zoomen kaputt gehen oder horizontale Bildlaufleisten erfordern.
• Inhalte, die bei hohen Zoomstufen über Container hinauslaufen oder sich überlappen.

Nützliche Tools zum Testen:

• Browser-Zoom: Verwenden Sie die native Zoomfunktion des Browsers.
• Entwicklertools: Verwenden Sie die Browser-Entwicklertools, um verschiedene Viewports zu simulieren (z.B. Viewport-Breite auf 320px einstellen).

Ziel: Sicherstellen, dass die visuelle Darstellung von Benutzeroberflächenkomponenten (z.B. Schaltflächen, Eingabefelder, Kontrollkästchen, Schieberegler) und grafischen Objekten (z.B. Teile von Diagrammen oder Infografiken) ein Kontrastverhältnis von mindestens 3:1 zu benachbarten Farben aufweist.

Warum es wichtig ist (Nutzen für den Benutzer):

• Hilft Benutzern mit geringem Sehvermögen oder Farbenblindheit, interaktive Elemente und wesentliche Grafiken wahrzunehmen und zu verstehen.
• Verbessert die Auffindbarkeit und Benutzerfreundlichkeit von Steuerelementen.

Was zu überprüfen / Wie umzusetzen ist:

• Interaktive Komponenten:
  • Standardzustand: Stellen Sie einen Kontrast von 3:1 für Ränder oder visuelle Indikatoren interaktiver Komponenten sicher (z.B. ein grauer Schaltflächenrand auf weißem Hintergrund).
  • Fokus-/Hover-Zustand: Wenn ein Element gehovert oder fokussiert wird, muss seine visuelle Änderung ebenfalls den 3:1-Kontrast erfüllen.
• Grafische Objekte:
  • Wesentliche grafische Informationen (z.B. unterschiedliche Teile eines Diagramms, bedeutungstragende Symbole) müssen einen Kontrast von 3:1 zu benachbarten Farben aufweisen.

Häufige Fehler, die vermieden werden sollten:

• Schaltflächen oder Formularfelder, die aufgrund unzureichenden Kontrasts zu stark mit dem Hintergrund verschmelzen.
• Symbole, die vor ihrem Hintergrund kaum sichtbar sind.

Nützliche Tools zum Testen:

• Farbkontrastanalysatoren: Dieselben Tools wie für Textkontrast (Colour Contrast Analyser, Axe DevTools).
• Designtools: Verwenden Sie Designtools (z.B. Figma, Sketch) mit Barrierefreiheits-Plugins, um den Kontrast während des Designs zu überprüfen.

Ziel: Sicherstellen, dass Benutzer den Textabstand (Zeilenhöhe, Buchstabenabstand, Wortabstand, Absatzabstand) anpassen können, ohne Inhalt oder Funktionalität zu verlieren und ohne horizontale Bildlaufleisten zu benötigen.

Warum es wichtig ist (Nutzen für den Benutzer):

• Entscheidend für Benutzer mit Legasthenie, kognitiven Beeinträchtigungen oder geringem Sehvermögen, die von größeren Abständen zur Verbesserung der Lesbarkeit profitieren.
• Unterstützt persönliche Stylesheets und Browser-Erweiterungen, die die Textdarstellung ändern.

Was zu überprüfen / Wie umzusetzen ist:

• Relative Einheiten: Verwenden Sie relative CSS-Einheiten (z.B. `em`, `rem`) für Zeilenhöhe, Buchstabenabstand, Wortabstand und Absatzabstand. Vermeiden Sie feste Pixelwerte.
• Kein Abschneiden/Überlappen: Wenn der Textabstand erhöht wird (z.B. über eine Browser-Erweiterung oder ein benutzerdefiniertes Stylesheet), stellen Sie sicher, dass Text nicht überlappt, abgeschnitten wird oder verschwindet.
• Kein horizontaler Bildlauf: Das Layout sollte umbrechen, ohne horizontalen Bildlauf einzuführen.

Spezifische Abstandsbedingungen (aus Verständnis von WCAG 2.1):

• Zeilenhöhe (Zeilenabstand) auf mindestens das 1,5-fache der Schriftgröße.
• Abstand nach Absätzen auf mindestens das 2-fache der Schriftgröße.
• Buchstabenabstand (Spationierung) auf mindestens das 0,12-fache der Schriftgröße.
• Wortabstand auf mindestens das 0,16-fache der Schriftgröße.

Häufige Fehler, die vermieden werden sollten:

• Verwendung von absoluten Einheiten (`px`) für Abstände, die eine Benutzeranpassung verhindern.
• Enge Layouts, die keine erhöhten Abstände zulassen, was zu Überlappungen führt.

Nützliche Tools zum Testen:

• Browser-Entwicklertools: Ändern Sie CSS-Eigenschaften für Textabstände manuell, um den Effekt zu beobachten.
• Browser-Erweiterungen: Text Spacing Bookmarklet oder Erweiterungen, die das Einfügen von benutzerdefiniertem CSS ermöglichen, um erhöhte Abstände zu simulieren.

Ziel: Sicherstellen, dass zusätzliche Inhalte, die bei Hover oder Fokus angezeigt werden (z.B. Tooltips, Untermenüs, Pop-ups), ausgeblendet werden können, wahrnehmbar sind und lange genug sichtbar bleiben, damit Benutzer mit ihnen interagieren können.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht Benutzern mit motorischen Beeinträchtigungen, die Maus wegzubewegen, ohne den Inhalt zu verlieren.
• Stellt sicher, dass reine Tastaturbenutzer auf den Inhalt zugreifen und mit ihm interagieren können.
• Gibt Benutzern mit kognitiven Beeinträchtigungen oder geringem Sehvermögen genügend Zeit, die Informationen wahrzunehmen und zu verarbeiten.

Was zu überprüfen / Wie umzusetzen ist:

• Ausblendbar: Der Inhalt muss ausgeblendet werden können, ohne den Hover oder Tastaturfokus zu bewegen, es sei denn, er übermittelt einen Eingabefehler oder verdeckt keinen anderen Inhalt. Beispiele: Drücken der Esc-Taste oder eine Schließen-Schaltfläche.
• Überfliegbar (Bei Hover/Fokus beibehalten): Wenn das Bewegen der Maus oder des Fokus vom auslösenden Element dazu führt, dass der zusätzliche Inhalt verschwindet, muss dieser Inhalt überfliegbar sein, damit der Benutzer seinen Zeiger darüber bewegen kann, um ihn sichtbar zu halten und mit ihm zu interagieren.
  * Persistent: Der Inhalt muss sichtbar bleiben, bis der Benutzer ihn explizit schließt oder bis er den Fokus oder Zeiger vom Trigger *und* dem Inhalt selbst wegbewegt.

Häufige Fehler, die vermieden werden sollten:

• Tooltips, die verschwinden, sobald die Maus vom Trigger bewegt wird, was die Interaktion verhindert.
• Untermenüs, die zu schnell schließen.
• Inhalt bei Fokus nicht über Tastatur zugänglich.

Nützliche Tools zum Testen:

• Tastaturnavigation: Verwenden Sie nur die Tastatur, um auf Elemente zuzugreifen und mit ihnen zu interagieren, die Inhalte bei Hover/Fokus anzeigen.
• Maus-Test: Bewegen Sie die Maus langsam, um zu sehen, ob der Inhalt bestehen bleibt und ob Sie mit ihm interagieren können.

Ziel: Die gesamte Funktionalität des Inhalts muss über eine Tastaturschnittstelle bedienbar sein, ohne dass bestimmte Zeitvorgaben für einzelne Tastendrücke erforderlich sind. Dies ist für Benutzer, die keine Maus oder andere Zeigegeräte verwenden können, unerlässlich.

Warum es wichtig ist (Nutzen für den Benutzer):

• Wesentlich für Benutzer mit motorischen Einschränkungen, die keine Maus verwenden können.
• Ermöglicht die Navigation für Screenreader-Benutzer und diejenigen, die die Tastaturinteraktion bevorzugen.
• Verbessert die Effizienz für fortgeschrittene Benutzer, die sich auf Tastaturkürzel verlassen.

Was zu überprüfen / Wie umzusetzen ist:

• Alle interaktiven Elemente: Stellen Sie sicher, dass alle interaktiven Elemente (Schaltflächen, Links, Formularfelder, Pop-ups, Menüs, Karussells, Mediaplayer) ausschließlich mit der Tastatur (Tab, Enter, Leertaste, Pfeiltasten) aktiviert und bedient werden können.
• Logische Tab-Reihenfolge: Die Reihenfolge des Tastaturfokus (beim Drücken von Tab) muss logisch und intuitiv sein und dem visuellen Fluss der Seite folgen.
• Keine Tastaturfallen: Benutzer müssen den Fokus von jeder Komponente ausschließlich über eine Tastaturschnittstelle verschieben können. Vermeiden Sie Situationen, in denen der Fokus in einem Widget "gefangen" wird.
• Standard-HTML-Elemente: Bevorzugen Sie Standard-HTML-Elemente (<button>, <a>, <input>), da diese eine integrierte Tastaturzugänglichkeit besitzen.
• ARIA-Attribute für benutzerdefinierte Komponenten: Für benutzerdefinierte UI-Komponenten, die mit nicht-semantischen Elementen (z.B. <div>) erstellt wurden, verwenden Sie geeignete ARIA-Rollen (role), Zustände (aria-expanded) und Eigenschaften (tabindex), um sie tastaturbedienbar zu machen und ihre Funktionalität für assistive Technologien zugänglich zu machen.

Häufige Fehler, die vermieden werden sollten:

• Interaktive Elemente, die nur mit der Maus anklickbar sind (z.B. ein <div> mit einem `onclick`-Ereignis, aber ohne `tabindex`).
• Unlogische Tab-Reihenfolge, die auf der Seite springt.
• Modale oder benutzerdefinierte Widgets, die den Tastaturfokus einfangen und Benutzer daran hindern, sie zu schließen oder mit anderen Teilen der Seite zu interagieren.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Navigieren Sie die gesamte Seite ausschließlich mit der `Tab`-Taste (und `Umschalt+Tab` zum Zurückgehen). Verwenden Sie `Enter` und `Leertaste`, um Elemente zu aktivieren.
• Browser-Erweiterungen: Axe DevTools, Lighthouse (können einige Probleme bei der Tastaturbedienbarkeit identifizieren).
• Screenreader: Testen Sie mit einem Screenreader (z.B. NVDA, JAWS, VoiceOver), um sicherzustellen, dass Navigation und Interaktion wie erwartet funktionieren.

Ziel: Wenn der Tastaturfokus über eine Tastaturschnittstelle auf eine Komponente der Seite verschoben werden kann, dann kann der Fokus auch ausschließlich über eine Tastaturschnittstelle von dieser Komponente wegbewegt werden, und, falls dies mehr als unmodifizierte Pfeil- oder Tabulatortasten oder andere Standardausgangsmethoden erfordert, wird der Benutzer über die Methode zum Wegbewegen des Fokus informiert.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verhindert, dass Benutzer, die sich ausschließlich auf die Tastatur verlassen, in bestimmten Teilen der Seite stecken bleiben, was zu Frustration und der Unfähigkeit führt, Aufgaben zu erledigen.
• Gewährleistet ein reibungsloses und vorhersehbares Navigationserlebnis.

Was zu überprüfen / Wie umzusetzen ist:

• Escape-Taste: Stellen Sie bei modalen Dialogen, Pop-ups oder temporären Overlays sicher, dass die `Esc`-Taste diese schließt und den Fokus auf das vorherige Element zurücksetzt.
• Tab/Umschalt+Tab: Wenn der Fokus auf eine Komponente gelangt (z.B. ein komplexes Menü, ein Karussell mit internen Steuerelementen), stellen Sie sicher, dass das Drücken von `Tab` (oder `Umschalt+Tab`) den Fokus schließlich aus dieser Komponente heraus auf das nächste (oder vorherige) fokussierbare Element auf der Seite verschiebt.
• Anweisungen: Wenn eine benutzerdefinierte Komponente eine bestimmte Tastenkombination (außer den Standard-Tab/Esc/Pfeiltasten) zum Verlassen erfordert, informieren Sie den Benutzer deutlich (z.B. "Drücken Sie Strg+E, um diesen Abschnitt zu verlassen").

Häufige Fehler, die vermieden werden sollten:

• Ein modaler Dialog öffnet sich und der Benutzer kann durch die Elemente darin navigieren, kann aber nicht *aus* ihm heraus navigieren oder ihn mit `Esc` schließen.
• Benutzerdefinierte Widgets, die interne Tab-Zyklen haben, aber keine Möglichkeit, aus ihnen heraus auf den Rest der Seite zu gelangen.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Verwenden Sie nur die Tastatur, um mit allen Komponenten zu interagieren, insbesondere mit denen, die Overlays öffnen oder den internen Fokus verwalten. Versuchen Sie, "stecken zu bleiben" und überprüfen Sie die Ausgangsmethoden.
• Browser-Entwicklertools: Untersuchen Sie die `tabindex`-Werte und JavaScript-Ereignis-Listener für die Fokusverwaltung.

Ziel: Stellen Sie sicher, dass, wenn eine Benutzeroberflächenkomponente den Tastaturfokus erhält, eine sichtbare Anzeige dieses Fokus vorhanden ist.

Warum es wichtig ist (Nutzen für den Benutzer):

• Entscheidend für sehende Tastaturbenutzer (einschließlich Personen mit geringem Sehvermögen oder kognitiven Einschränkungen), um zu wissen, wo sie sich auf der Seite befinden und mit welchem Element sie gerade interagieren.
• Unterstützt die Navigation und reduziert Frustration.

Was zu überprüfen / Wie umzusetzen ist:

• Sichtbarer Fokusindikator: Jedes interaktive Element (Links, Schaltflächen, Formularfelder usw.) muss einen deutlich sichtbaren Fokusindikator haben, wenn es mit der Tastatur (z.B. mit der `Tab`-Taste) angesteuert wird.
• Benutzerdefinierte Fokusstile: Es ist akzeptabel, den Standard-Fokusrahmen des Browsers zu entfernen, sofern ein benutzerdefinierter Fokusindikator bereitgestellt wird, der ebenso oder stärker sichtbar ist.
• Fokusstil: Der Fokusstil sollte prominent sein (z.B. dicker Rand, kontrastierende Farbe, Schatten). Vermeiden Sie Fokusstile, die zu subtil sind oder sich mit dem Hintergrund vermischen.

Häufige Fehler, die vermieden werden sollten:

• Verwendung von `outline: none;` in CSS ohne eine sichtbare Alternative bereitzustellen.
• Fokusindikatoren, die einen unzureichenden Kontrast aufweisen.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Navigieren Sie die gesamte Seite mit der `Tab`-Taste und beobachten Sie den Fokusindikator genau.
• Browser-Erweiterungen: Axe DevTools, Lighthouse (können das Fehlen eines Fokusstils erkennen).

Ziel: Die Standard-Sprache jeder Webseite kann programmatisch ermittelt werden.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht Screenreadern, den Inhalt in der entsprechenden Sprache korrekt auszusprechen.
• Verbessert das Erlebnis für Benutzer, die Übersetzungstools verwenden.

Was zu überprüfen / Wie umzusetzen ist:

• `lang`-Attribut: Stellen Sie sicher, dass das `lang`-Attribut im `<html>`-Tag mit dem korrekten Sprachcode (z.B. `<html lang="de">`) gesetzt ist.
• Konsistenz: Das `lang`-Attribut muss die tatsächliche primäre Sprache des Seiteninhalts widerspiegeln.

Häufige Fehler, die vermieden werden sollten:

• Das `lang`-Attribut vollständig weglassen.
• Das `lang`-Attribut auf eine falsche Sprache setzen (z.B. `lang="en"` für eine deutsche Seite).

Nützliche Tools zum Testen:

• Browser-Erweiterungen: Axe DevTools, Lighthouse (kennzeichnen fehlende oder falsche `lang`-Attribute).
• Manuelle Code-Inspektion: Zeigen Sie den Quellcode der Seite an, um das `<html lang="...">`-Tag zu überprüfen.

Ziel: Die menschliche Sprache jedes Abschnitts oder jeder Phrase im Inhalt kann programmatisch ermittelt werden.

Warum es wichtig ist (Nutzen für den Benutzer):

• Ermöglicht Screenreadern, die Aussprache für Fremdwörter oder -phrasen innerhalb des Haupttextes zu wechseln.
• Verbessert die Genauigkeit von Übersetzungstools für Inhalte in gemischten Sprachen.

Was zu überprüfen / Wie umzusetzen ist:

• `lang`-Attribut für spezifische Elemente: Wenn ein Textabschnitt, ein Wort oder eine Phrase in einer anderen Sprache als der primären Sprache der Seite ist, schließen Sie es in ein HTML-Element (z.B. `<span>`, `<p>`, `<div>`) ein und wenden Sie das `lang`-Attribut mit dem korrekten Sprachcode an.

  <p>Das Restaurant bietet ein köstliches <span lang="fr">Coq au Vin</span> an.</p>

Häufige Fehler, die vermieden werden sollten:

• Die Sprache von Fremdwörtern oder -phrasen nicht deklarieren, was zu einer falschen Aussprache durch Screenreader führt.

Nützliche Tools zum Testen:

• Screenreader: Testen Sie Phrasen in verschiedenen Sprachen, um die korrekte Aussprache sicherzustellen.
• Manuelle Code-Inspektion: Suchen Sie nach Instanzen von Fremdsprachentext und überprüfen Sie, ob das `lang`-Attribut korrekt angewendet wird.

Ziel: Das Ändern der Einstellung einer Benutzeroberflächenkomponente darf nicht automatisch eine Änderung des Kontexts verursachen, es sei denn, der Benutzer wurde vor der Verwendung der Komponente über das Verhalten informiert.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verhindert unerwartete Änderungen und Desorientierung, insbesondere für Benutzer mit kognitiven oder motorischen Einschränkungen oder solche, die Screenreader verwenden.
• Bietet eine vorhersehbare und stabile Benutzererfahrung.

Was zu überprüfen / Wie umzusetzen ist:

• Kein automatisches Senden: Senden Sie ein Formular oder navigieren Sie nicht automatisch zu einer neuen Seite, wenn ein Formularfeld den Fokus erhält oder sein Wert geändert wird (z.B. sollte die Auswahl eines Elements aus einem Dropdown-Menü das Formular nicht sofort ohne eine "Senden"-Schaltfläche absenden).
• Klare Warnungen: Wenn eine Komponente eine Kontextänderung beim Fokus- oder Wertwechsel *verursachen muss* (z.B. ein "Sprungmenü"-Dropdown), informieren Sie den Benutzer im Voraus klar über dieses Verhalten (z.B. "Die Auswahl einer Option führt Sie zu einer neuen Seite").
• Dedizierte Steuerelemente für Aktionen: Interaktive Elemente, die Aktionen auslösen (wie "Go"-Schaltflächen für Dropdowns oder "Filter anwenden"), sollten eine explizite Benutzeraktion (Klick, Enter) erfordern und nicht implizite Änderungen beim Fokus.

Häufige Fehler, die vermieden werden sollten:

• Dropdown-Menüs, die das Formular automatisch absenden, wenn eine Option ausgewählt wird.
• Formularfelder, die beim Erhalt des Fokus automatisch JavaScript auslösen, um eine Aktion durchzuführen (z.B. das Anzeigen eines ausgeblendeten Abschnitts, der den Inhalt unerwartet verschiebt).

Nützliche Tools zum Testen:

• Manuelle Prüfung: Navigieren Sie mit der Tastatur (Tab-Taste) durch Formularfelder und interaktive Elemente und beobachten Sie, ob unerwartete Kontextänderungen auftreten.
• Maus-Test: Klicken Sie auf verschiedene Formularfelder und Steuerelemente, um sicherzustellen, dass keine unerwarteten Aktionen beim Erhalt des Fokus ausgelöst werden.

Ziel: Das Ändern der Einstellung einer Benutzeroberflächenkomponente darf nicht automatisch eine Änderung des Kontexts verursachen, es sei denn, der Benutzer wurde vor der Verwendung der Komponente über das Verhalten informiert.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verhindert unerwartete Änderungen und Desorientierung, insbesondere für Benutzer mit kognitiven oder motorischen Einschränkungen oder solche, die Screenreader verwenden.
• Bietet eine vorhersehbare und stabile Benutzererfahrung.

Was zu überprüfen / Wie umzusetzen ist:

• Kein automatisches Senden bei Eingabe: Senden Sie ein Formular oder navigieren Sie nicht automatisch zu einer neuen Seite, wenn sich der Wert eines Formularfelds ändert (z.B. sobald der Benutzer ein Zeichen in ein Textfeld eingibt oder eine Option in einem Dropdown-Menü auswählt).
• Klare Warnungen: Wenn eine Komponente eine Kontextänderung bei der Eingabe *verursachen muss* (z.B. ein "Sprungmenü"-Dropdown), informieren Sie den Benutzer im Voraus klar über dieses Verhalten (z.B. "Die Auswahl einer Option führt Sie zu einer neuen Seite").
• Dedizierte Aktionsschaltflächen: Aktionen, die Kontextänderungen verursachen (wie das Absenden von Formularen, das Filtern von Ergebnissen oder die Navigation), sollten durch explizite Benutzeraktionen ausgelöst werden, z.B. durch Klicken auf eine "Senden"-Schaltfläche oder Drücken der Eingabetaste.

Häufige Fehler, die vermieden werden sollten:

• Suchfelder, die die Abfrage nach jedem eingegebenen Zeichen automatisch absenden.
• Filteroptionen, die Ergebnisse automatisch aktualisieren oder die Seite sofort nach der Auswahl umleiten, ohne eine "Filtern"- oder "Anwenden"-Schaltfläche.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Interagieren Sie mit allen Formularfeldern und Eingabesteuerelementen, indem Sie Werte eingeben oder auswählen, und beobachten Sie, ob unerwartete Kontextänderungen ohne explizite Benutzeraktion auftreten (z.B. das Drücken einer Absende-Schaltfläche).

Ziel: Navigationsmechanismen, die auf mehreren Webseiten innerhalb eines Satzes von Webseiten wiederholt werden, erscheinen jedes Mal in derselben relativen Reihenfolge, es sei denn, eine Änderung wird vom Benutzer initiiert.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verbessert die Vorhersehbarkeit und reduziert die kognitive Belastung, sodass Benutzer (insbesondere solche mit kognitiven Einschränkungen oder Screenreader-Benutzer) die Navigation lernen und antizipieren können.
• Fördert die Effizienz, indem Benutzer schnell gewünschte Navigationslinks finden können.

Was zu überprüfen / Wie umzusetzen ist:

• Primäre Navigation: Menüs (z.B. globale Navigation, Seitenleistennavigation) sollten auf allen Seiten, auf denen sie vorhanden sind, in derselben relativen Reihenfolge erscheinen.
• Fußzeilennavigation: Links in der Fußzeile sollten eine konsistente Reihenfolge auf allen Seiten beibehalten.
• Navigation überspringen: Wenn ein Benutzer die Navigation neu anordnet oder anpasst (z.B. durch eine personalisierte Ansicht), ist dies zulässig. Die Standarddarstellung muss jedoch konsistent sein.

Häufige Fehler, die vermieden werden sollten:

• Die Reihenfolge der Hauptmenüpunkte von einer Seite zur anderen ohne Benutzerinitiierung ändern.
• Die Reihenfolge der Links in der Fußzeile in verschiedenen Abschnitten der Website durcheinanderbringen.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Durchsuchen Sie mehrere Seiten der Website und überprüfen Sie visuell die Reihenfolge der wiederholten Navigationselemente. Verwenden Sie auch einen Screenreader, um die programmatische Reihenfolge zu überprüfen.

Ziel: Komponenten, die innerhalb eines Satzes von Webseiten dieselbe Funktionalität haben, werden konsistent identifiziert.

Warum es wichtig ist (Nutzen für den Benutzer):

• Reduziert die kognitive Belastung und Verwirrung, indem sichergestellt wird, dass vertraute Funktionalitäten immer ähnlich beschriftet und präsentiert werden.
• Verbessert die Vorhersehbarkeit und Lernfähigkeit, insbesondere für Benutzer mit kognitiven Einschränkungen.
• Hilft Benutzern, die sich auf Muskelgedächtnis oder visuelle Hinweise verlassen, Funktionen zu finden.

Was zu überprüfen / Wie umzusetzen ist:

• Textbeschriftungen: Wenn eine Schaltfläche dieselbe Aktion ausführt (z.B. "Suchen"), sollte ihre Textbeschriftung auf allen Seiten konsistent "Suchen" lauten, nicht "Finden" auf einer Seite und "Nachschlagen" auf einer anderen.
• Symbole: Symbole, die für dieselbe Funktionalität verwendet werden, sollten konsistent sein (z.B. eine Lupe für die Suche). Wenn ein Symbol eine Textbeschriftung hat, sollte diese Beschriftung ebenfalls konsistent sein.
• Alternativer Text: Der alternative Text (z.B. `alt`-Attribut für Bilder, `aria-label`) für funktional identische Komponenten sollte konsistent sein.

Häufige Fehler, die vermieden werden sollten:

• Verwendung unterschiedlicher Begriffe für dieselbe Aktion (z.B. "In den Warenkorb legen" auf der Produktseite, "Jetzt kaufen" auf der Kategorieseite, "Bestellung aufgeben" auf der Kassenseite für im Wesentlichen dieselbe "Kauf"-Aktion).
• Variierende Symbole für dieselbe Funktion ohne klare Gründe.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Überprüfen Sie alle Seiten der Website und vergleichen Sie systematisch Textbeschriftungen, Symbole und alternative Texte für ähnliche Funktionalitäten.

Ziel: Wenn ein Eingabefehler automatisch erkannt wird, wird das fehlerhafte Element identifiziert und der Fehler dem Benutzer in Textform beschrieben.

Warum es wichtig ist (Nutzen für den Benutzer):

• Hilft Benutzern mit kognitiven Einschränkungen, Sehschwäche oder Screenreader-Benutzern, schnell zu erkennen und zu verstehen, was schief gelaufen ist und wie es behoben werden kann.
• Reduziert Frustration und verbessert die Erfolgsquote bei Formularübermittlungen.

Was zu überprüfen / Wie umzusetzen ist:

• Klare Textbeschreibung: Stellen Sie eine klare und prägnante Fehlermeldung in Textform bereit, die die Art des Fehlers erklärt (z.B. "E-Mail-Adresse ist erforderlich", "Passwort muss mindestens 8 Zeichen lang sein").
• Programmatische Zuordnung: Die Fehlermeldung sollte programmatisch mit dem fehlerhaften Feld verknüpft sein (z.B. mithilfe von `aria-describedby`, um das Eingabefeld mit seiner Fehlermeldung zu verknüpfen, oder `aria-invalid="true"` am Feld selbst).
• Visuelle Identifizierung: Heben Sie das fehlerhafte Feld zusätzlich zur Textnachricht visuell hervor (z.B. mit einem roten Rahmen). Farbe allein darf jedoch nicht der einzige Indikator sein (WCAG 1.4.1).
• Platzierung: Fehlermeldungen sollten nahe am zugehörigen Feld platziert werden, vorzugsweise direkt darunter oder daneben.

Häufige Fehler, die vermieden werden sollten:

• Generische Fehlermeldungen wie "Fehler beim Absenden des Formulars".
• Fehler nur durch Farbe hervorheben (z.B. nur das Feld rot färben ohne Textnachricht).
• Fehlermeldungen, die visuell weit vom relevanten Feld entfernt sind.

Nützliche Tools zum Testen:

• Browser-Erweiterungen: Axe DevTools, Lighthouse (hervorragend zum Erkennen fehlender Fehlermeldungen und programmatischer Zuordnungen).
• Screenreader: Testen Sie das Absenden von Formularen mit Fehlern, um sicherzustellen, dass die Fehlermeldungen vorgelesen und korrekt ihren Feldern zugeordnet werden.

Ziel: Beschriftungen oder Anweisungen werden bereitgestellt, wenn Inhalte Benutzereingaben erfordern.

Warum es wichtig ist (Nutzen für den Benutzer):

• Hilft allen Benutzern (einschließlich Personen mit kognitiven Einschränkungen, Screenreader-Benutzern und neuen Benutzern), zu verstehen, welche Eingaben in jedem Formularfeld erwartet werden.
• Wesentlich für Benutzer, die sich nicht auf visuelle Hinweise verlassen können (z.B. Platzhaltertext, der oft bei Eingabe oder Fokus verschwindet).

Was zu überprüfen / Wie umzusetzen ist:

• Explizite Beschriftungen: Jedes Eingabefeld (Textfelder, Kontrollkästchen, Optionsfelder, Dropdowns) muss ein klar zugeordnetes `<label>`-Element haben.

  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email">

• Programmatische Zuordnung: Das `for`-Attribut des `<label>` muss mit der `id` des Eingabefeldes übereinstimmen.
• Anweisungen/Beispiele: Geben Sie klare Anweisungen oder Beispiele für komplexe Eingaben (z.B. "Datumsformat: TT-MM-JJJJ", "Passwort muss mindestens einen Großbuchstaben und eine Zahl enthalten").
• Platzhaltertext: Platzhaltertext (der Text in einem Eingabefeld, der beim Tippen verschwindet) sollte *nicht* als einzige Beschriftung verwendet werden, da er nicht allen Benutzern konsistent zur Verfügung steht.

Häufige Fehler, die vermieden werden sollten:

• Formularfelder ohne `<label>`-Element.
• Nur Platzhaltertext als Beschriftung verwenden.
• Beschriftungen, die visuell vorhanden, aber nicht programmatisch mit der Eingabe verknüpft sind (fehlende `for`/`id`-Übereinstimmung).

Nützliche Tools zum Testen:

• Browser-Erweiterungen: Axe DevTools, Lighthouse, WAVE (hervorragend zum Erkennen fehlender oder falsch zugeordneter Beschriftungen).
• Screenreader: Navigieren Sie Formulare mit einem Screenreader, um zu bestätigen, dass der Zweck jedes Feldes über seine Beschriftung klar angekündigt wird.
• Tastatur-Test: Klicken Sie auf Beschriftungen. Wenn sie korrekt zugeordnet sind, sollte das Klicken auf die Beschriftung den Fokus auf das entsprechende Eingabefeld legen.

Ziel: Wenn ein Eingabefehler automatisch erkannt wird und ein Korrekturvorschlag bekannt ist, wird der Vorschlag dem Benutzer bereitgestellt, es sei denn, dies würde die Sicherheit oder den Zweck des Inhalts gefährden.

Warum es wichtig ist (Nutzen für den Benutzer):

• Hilft Benutzern (insbesondere solchen mit kognitiven Einschränkungen oder Legasthenie), Fehler schneller und effizienter zu beheben.
• Reduziert Frustration und erhöht die Wahrscheinlichkeit eines erfolgreichen Abschlusses der Aufgabe.

Was zu überprüfen / Wie umzusetzen ist:

• Spezifische Vorschläge: Für häufige Fehler, bei denen eine Korrektur offensichtlich ist, geben Sie einen spezifischen Vorschlag (z.B. "Meinten Sie example@domain.com?" bei einer falsch geschriebenen E-Mail-Adresse oder "Passwort benötigt mindestens einen Großbuchstaben", falls dieser fehlt).
• Passwortfehler: Aus Sicherheitsgründen sollten keine spezifischen Passwortkorrekturen vorgeschlagen werden (z.B. keine Teile des Passworts wiederholen oder Hinweise wie "Ihr Passwort ist zu kurz, Sie müssen 'xyz' hinzufügen" geben). Geben Sie stattdessen die fehlende Anforderung an (z.B. "Passwort muss mindestens 8 Zeichen lang sein", "Passwort muss eine Zahl enthalten").
• Autokorrektur/Autovervollständigung: Implementieren Sie Autokorrektur- oder Autovervollständigungsfunktionen, wo dies angemessen und vorteilhaft ist, solange der Benutzer die Kontrolle behält.

Häufige Fehler, die vermieden werden sollten:

• Nur "Ungültige Eingabe" ohne Hinweis zur Behebung des Problems.
• Zu vage oder nutzlose Vorschläge machen.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Führen Sie absichtlich häufige Eingabefehler herbei (z.B. falsch geschriebene E-Mail, falsches Datumsformat) und überprüfen Sie, ob hilfreiche Vorschläge bereitgestellt werden.

Ziel: Für Webseiten, die rechtliche Verpflichtungen oder finanzielle Transaktionen für den Benutzer verursachen oder benutzersteuerbare Daten in Datenspeichersystemen ändern oder löschen, trifft mindestens eines der folgenden zu:

• Reversibel: Übermittlungen sind reversibel.
• Geprüft: Vom Benutzer eingegebene Daten werden auf Eingabefehler geprüft und dem Benutzer wird die Möglichkeit zur Korrektur gegeben.
• Bestätigt: Ein Mechanismus zum Überprüfen, Bestätigen und Korrigieren von Informationen vor dem Abschluss der Übermittlung ist verfügbar.

Warum es wichtig ist (Nutzen für den Benutzer):

• Verhindert schwerwiegende oder irreversible Folgen für Benutzer aufgrund von Fehlern bei kritischen Transaktionen (z.B. finanzielle, rechtliche, Datenlöschung).
• Baut Vertrauen in das System auf.
• Behebt potenzielle Probleme für Benutzer mit kognitiven, motorischen oder visuellen Einschränkungen, die möglicherweise anfälliger für Fehler sind.

Was zu überprüfen / Wie umzusetzen ist:

• Überprüfen/Bearbeiten: Ermöglichen Sie Benutzern, Informationen vor der endgültigen Übermittlung zu überprüfen und zu korrigieren.
• Bestätigung: Fordern Sie eine explizite Bestätigung der Übermittlung an (z.B. "Sind Sie sicher, dass Sie fortfahren möchten?").
• Abbrechen: Bieten Sie die Möglichkeit, die Transaktion oder Änderung abzubrechen.
• Automatische Validierung: Verwenden Sie nach Möglichkeit eine Echtzeitvalidierung, um Fehler vor der Übermittlung zu verhindern.

Häufige Fehler, die vermieden werden sollten:

• Irreversible Transaktionen, die keine Möglichkeit zur Überprüfung oder Stornierung bieten.

Nützliche Tools zum Testen:

• Manuelle Prüfung: Simulieren Sie wichtige Transaktionen und überprüfen Sie das Vorhandensein und die Funktionalität der Fehlervermeidungsmechanismen.

Ziel: In Inhalten, die mit Auszeichnungssprachen implementiert werden, haben Elemente vollständige Start- und End-Tags, Elemente sind gemäß ihren Spezifikationen verschachtelt, es gibt keine doppelten IDs, und jede ID ist einzigartig, außer wenn die Spezifikationen dies zulassen.

Warum es wichtig ist (Nutzen für den Benutzer):

• Stellt sicher, dass alle Browser und assistiven Technologien den Inhalt korrekt parsen und interpretieren können.
• Verhindert unvorhersehbares Verhalten oder Anzeige-/Funktionalitätsfehler.

Was zu überprüfen / Wie umzusetzen ist:

• **HTML/XML-Gültigkeit:** Stellen Sie sicher, dass der HTML-Code gültig und wohlgeformt ist, ohne Syntaxfehler.
• **Eindeutige IDs:** Jedes `id`-Attribut muss innerhalb der Seite eindeutig sein.
• **Korrekte Verschachtelung:** Elemente müssen korrekt verschachtelt sein (z.B. `` darf kein weiteres `` enthalten).

Häufige Fehler, die vermieden werden sollten:

• Nicht geschlossene oder falsch geöffnete Tags.
• Doppelte IDs auf derselben Seite.

Nützliche Tools zum Testen:

• **HTML-Validatoren:** W3C Markup Validation Service, Browser-Erweiterungen wie Axe DevTools oder Lighthouse (erkennen oft Parsing-Probleme).