Alternative Text
Alternativer Text
Alternativtext erklärt die nützliche Bedeutung eines Bildes, wenn jemand das Bild nicht sehen kann. Er sollte der Funktion des Bildes auf dieser Seite entsprechen.
Ein weiteres Beispiel
Ein Wetterdiagramm sagt: „Die Regenwahrscheinlichkeit ist um 16:00 Uhr mit 70 % am höchsten.“ Eine dekorative Wolkentextur verwendet einen leeren Alt-Wert. Ein verlinktes Logo benennt sein Ziel, anstatt seine Pixel zu beschreiben.
Hauptteile
- 01Zweck im Kontext
- 02Prägnantes Äquivalent
- 03Rückfall bei komplexen Daten
Verwenden Sie es, wenn
Beschreiben Sie, was das Bild im Kontext seiner Seite bedeutet. Geben Sie komplexe Diagramme oder Grafiken mit denselben Daten in einer anderen Form wieder.
Nutze es nicht, wenn
Beginne nicht mit „Bild von“, wiederhole die Bildunterschrift nicht und beschreibe keine Dekoration, die keine Informationen hinzufügt.
In Code verwendeter Name
img alt, accessible name, or adjacent long-form equivalent Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Alternativer Text (Alternative Text). User context: Ein Wetterdiagramm sagt: „Die Regenwahrscheinlichkeit ist um 16:00 Uhr mit 70 % am höchsten.“ Eine dekorative Wolkentextur verwendet einen leeren Alt-Wert. Ein verlinktes Logo benennt sein Ziel, anstatt seine Pixel zu beschreiben. Recommended pattern: Alternativer Text (Alternative Text). Why it fits: Beschreiben Sie, was das Bild im Kontext seiner Seite bedeutet. Geben Sie komplexe Diagramme oder Grafiken mit denselben Daten in einer anderen Form wieder. Do not use it when: Beginne nicht mit „Bild von“, wiederhole die Bildunterschrift nicht und beschreibe keine Dekoration, die keine Informationen hinzufügt. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Der Standard deckt nur den aufgeführten Umfang ab. Er wählt nicht den visuellen Stil, die Produktentscheidung oder das Vibulary-Beispiel aus. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Alternativer Text (Alternative Text) is used now. Definition: Alternativtext erklärt die nützliche Bedeutung eines Bildes, wenn jemand das Bild nicht sehen kann. Er sollte der Funktion des Bildes auf dieser Seite entsprechen. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.