Good Mood

Page Content

Terminologie

Es gibt mehrere Begriffe, die häufig verwendet werden, um ALT-Text zu beschreiben. Sie können in verschiedenen Kontexten verwendet werden, auch innerhalb dieser Website.,

• ALT text-das Konzept des Hinzufügens eines bildschirmleserfreundlichen Textes alternative Beschreibung eines Bildes. Dies kann über Dokumenttypen hinweg unterschiedlich implementiert werden.
• ALT-Attribut (HTML) – In HTML wird der ALT-Text in das ALT-Attribut innerhalb des IMG-Tags eingefügt.
• ALT “ Tag “ – Kurzreferenz auf das ALT-Attribut.

Demo von ALT-Text

Zweck

Der ALT-Text fügt einem Bild auf einer Webseite eine Textbeschreibung hinzu und sollte für alle verwendet werden Bilder, grafische Aufzählungszeichen und grafische horizontale Regeln.,

Auf ALT-Text wird von Screenreader-Benutzern zugegriffen, um ihnen ein Textäquivalent von Bildern zur Verfügung zu stellen. In visuellen Browsern wie Firefox wird der ALT-Text angezeigt, wenn ein Bild beschädigt ist oder wenn alle Bilder deaktiviert wurden.

WCAG-Richtlinie

WCAG 2.0 Richtlinie 1.1.1.—“Alle Nicht-Textinhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die dem entsprechenden Zweck dient.“

Bildschaltflächenbeispiele

Betrachten Sie die Bilder für Abschnitte einer hypothetischen Bildungsseite, unter denen alle dekorativen Text enthalten.,
Hinweis: Jeder Text in einem Bild verwendet wird, sollte Lesbarkeit und Kontrast Richtlinien folgen.

Screen Reader Ausgabe Mit ALT Tag

Wenn Bilder nicht geladen werden können, zeigt ALT-Text an, was die Bilder in einem Browser wie Firefox gesagt hätten.

Bildschirmleserausgabe ohne ALT-Tag

Ohne den ALT-Text kann niemand wissen, wie der Inhalt des Bildes gewesen wäre.

Implementierung des ALT Attributs

Nachfolgend finden Sie einige Beispiele, wie ALT-Text je nach Kontext implementiert werden kann.

George Washington Malerei

Code Anzeigen

Implementieren Sie den ALT-text als Attribut im IMG-tag. Siehe Beispiel unten.

Hinweis: Eine empfohlene ALT-Textlänge beträgt etwa 125 Zeichen. Dies entspricht dem JAWS Screen Reader ALT Textfeld. Dies entspricht jedoch nicht den WCAG-Richtlinien.

Bildunterschriften vs. ALT-Text

Alle Informationen zum Bild, z. B. Copyright-Informationen, Bildquelle oder zusätzliche Informationen, sollten im Beschriftungstext unter dem Bild und nicht im ALT-Text platziert werden. Siehe das Beispiel unten.

Beschriftung: das Gemälde „Washington and Lafayette at Valley Forge“ von John Ward Dunsmore aus dem Jahre 1907. Bild mit freundlicher Genehmigung der Library of Congress.,

Logos

Für Logos, insbesondere Logos, die wiederholt werden, genügt es zu identifizieren, um welches Logo es sich handelt, nicht unbedingt vollständig zu beschreiben

Unsachgemäße Verwendung von ALT-Text

Es sollte NICHT verwendet werden, um:

• einführung tooltip text,
• bieten copyright oder quelle informationen über ein bild oder
• vermitteln supplementaty informationen über die grafik.,
• Führen Sie Suchbegriffe ein (dies kann über eine gute Verwendung von Überschriften erfolgen).

Leerer Alt-Text für dekorative Bilder

Einige Bilder werden ausschließlich zu Layoutzwecken oder zur Verbesserung des Inhalts für sehende Benutzer verwendet und bieten keinen Inhalt.

Das ALT-Tag für diese Bilder kann leer sein ( alt= „“ > oder alt= „“>), sodass Bildschirmleser sie vollständig ignorieren.,

Im folgenden Beispiel wird ein Beispielbild einer Regenbogen-Symbolleiste verwendet, gefolgt von einigen zugänglichen und unzugänglichen Codebeispielen.

Regenbogen-Werkzeugleiste

Angenommen, eine Webseite wurde mit einer Regenbogen-Symbolleiste zum Trennen von Textteilen erstellt.

Hinweis: Das ALT-Attribut mit dem Leerzeichen wird als weniger korrekt angesehen, ist jedoch möglicherweise die einzige Option, die in einigen Content-Management-Systemen zulässig ist.

Prägnanter Alt-Text

Wenn bereits eine Textbeschreibung für ein Bild im Haupttext der Seite bereitgestellt wird, kann das ALT-Tag nur eine Zusammenfassung des Bildes und keine vollständige Beschreibung bereitstellen.,

Siehe Komplexe Bilder für Beispiele, wie dies in verschiedenen Situationen verwendet werden kann.

Beispieltext mit Bild

Unten ist ein Bild eines gesättigten Fettmoleküls mit 18 Kohlenstoffmolekülen. Beachten Sie, dass die einzelnen Bindungen zwischen Elementen die Kohlenstoffkette relativ gerade machen.,

Links zu erweiterten Beschreibungen

In einigen Fällen kann es erforderlich sein, einen Link zu einer erweiterten Beschreibung eines Bildes hinzuzufügen, insbesondere in Fällen, in denen Bilder verwendet werden, um signifikante Inhalte zu vermitteln. Es gibt verschiedene Möglichkeiten, wie dies erreicht werden kann—einschließlich eines LONGDESC-Tags, eines D-Links oder eines offeneren Links zur längeren Beschreibung. Siehe unten für Beispiele

Link zum Beschriftungstext

Wenn die Informationen kritisch sind, ist möglicherweise ein offener Beschriftungslink die beste Lösung. Diese Methode liefert den deutlichsten Hinweis darauf, dass eine längere Beschreibung verfügbar ist.,

Erweiterte Textbeschreibung anzeigen

D-Links

Einige Experten befürworten die Verwendung eines D-Links, um das Vorhandensein einer erweiterten Textbeschreibung zu signalisieren. Einige Benutzer sind sich der Konvention jedoch möglicherweise nicht bewusst. Diese Methode wird am besten verwendet, um Informationen bereitzustellen, die rein ergänzend sind.

D

LONGDESC Attribut

Dies ist ein Attribut, das in visuellen Browsern verborgen ist, aber von einigen Bildschirmlesern erkannt wird. LONGDESC eignet sich am besten für zusätzliche Details, die den Inhalt verbessern, aber nicht kritisch sind., Es sollte beachtet werden, dass LONGDESC sowohl visuelle Browser als auch Bildschirmleser unvollständig unterstützt und in HTML5 veraltet ist.

Links und Schaltflächen

Für Bilder, die als Navigationselemente zum Auslösen von Funktionen wie Drucken, Hochladen oder Speichern verwendet werden, sollte der ALT-Text das Ziel oder die Funktion beschreiben, nicht das Bild.

Anklickbar vs. nicht anklickbar Penn State Shield

Wenn ein Penn State Shield auf einer Webseite verwendet wird, hängt der verwendete ALT-Text davon ab, ob er anklickbar ist (dh Links zur Penn State Homepage) oder nicht.,

Wenn ein Penn State Shield-Bild verwendet wird, um einen anklickbaren Link zur Startseite bereitzustellen, sollte der ALT-Text das Ziel angeben (dh ALT=“ Penn State Home Page“) Beachten Sie, dass das IMG-Tag in ein A-Tag für den Link eingebettet ist.

Hinweis: Wenn der Schild NICHT anklickbar ist, kann der ALT-Text „Penn State“ oder „Penn State shield“ sein.

Titelattribut für Tooltips

Mit dem Titelattribut eines IMG-Textes kann ein Tooltip für sehende Benutzer generiert werden. Aber bitte beachten Sie das.,

• Das Titelattribut wird in den meisten Bildschirmlesegeräten STANDARDMÄßIG NICHT vorgelesen.
• Der ALT-Text wird in den meisten Browsern normalerweise nicht als Tooltip angezeigt.

Wenn für sehende Benutzer ein Tooltip benötigt wird, können sowohl ein TITLE-als auch ein ALT-Attribut mit denselben Informationen verwendet werden, um sicherzustellen, dass beide Zielgruppen dieselben Informationen erhalten.

Siehe dieses Beispiel unten

Favorites Heart Button with Tool Tip

Betrachten Sie eine Version des Herzbildes unten, die in einer Schnittstelle verwendet werden kann, um Lieblingsartikel auszuwählen (z. B. Lieblingssongs oder E-Books).,

Sowohl der ALT-Text als auch das Titelattribut sind „Favoriten“

Zeigen Sie den Code an