Alt Attribute

Wenn ein Bild oder ein Dokument nicht angezeigt werden kann, hilft das Alt Attribut! Es bietet einen beschreibenden alternativen Text, damit die Benutzer wissen, was sie verpassen.

Was sind Alt Attribute?

Ein Alt Attribut ist ein wichtiger Bestandteil von Webseiten und stellt visuelle Beschreibungen für Personen zur Verfügung, die keine Bilder sehen können. Dies hat das Potential, die Benutzererfahrung erheblich zu verbessern, indem sichergestellt wird, dass alle Besucher ohne Einschränkungen oder Barrieren auf den Inhalt der Website zugreifen und verstehen können.

Alt Attribute, auch bekannt als «Alt Tags» oder «Alt Beschreibungen», werden verwendet, um den Inhalt einer Bilddatei in HTML zu beschreiben. Sie werden am häufigsten im HTML-img-Element als Alt-Attribut verwendet, um eine Textbeschreibung des Bildes zu liefern.

Dies ist besonders wichtig für Bilder, die als Links verwendet werden, da der Alt-Text anstelle des Bildes angezeigt wird, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann.

Alt-Text wird auch von Suchmaschinen verwendet, um den Inhalt einer Webseite zu verstehen und bessere Suchresultate zu liefern. Es ist eine gute Praxis, Alt-Attribute immer für Bilder zu verwenden, da sie das SEO einer Webseite verbessern können.

Warum sind Alt-Attribute wichtig?

Es gibt einige Vorteile, Alt-Attribute für Ihre Bilder zu verwenden, wie zum Beispiel:

• Verbesserung der User Experience: die Bereitstellung einer Bildbeschreibung, wenn das Bild nicht angezeigt werden kann. Alt-Tags können dabei helfen, den Kontext eines Bildes zu verstehen und wie es sich auf den Inhalt der Webseite bezieht. Dies kann die Gesamtbenutzererfahrung verbessern und die Webseite angenehmer zum Durchstöbern machen.
• Suchmaschinenoptimierung durch Ermöglichung des Durchsuchens und Indizierens von Bildern durch Suchmaschinen. Sie erhöhen nicht nur die Benutzerfreundlichkeit, sondern liefern Suchmaschinen auch wichtige Informationen über den Inhalt eines Bildes und seinen Kontext innerhalb einer Webseite. Wenn keine Browserunterstützung vorliegt, können Benutzer dank dieser alternativen Texte immer noch verstehen, was angezeigt werden sollte!
• Erhöhte Zugänglichkeit für sehbehinderte Benutzer, da der Text von einem Leseprogramm vorgelesen wird. Der Zugriff auf Ihre Website muss für jeden möglich sein, egal welchen Gerätetyp, welche Internetverbindungsstärke oder welchen Standort er hat. Alt-Tags stellen sicher, dass auch sehbehinderte Menschen teilhaben können, indem sie eine kurze Beschreibung des Bildinhalts bereitstellen, die von Text-to-Speech-Software laut vorgelesen werden kann. Alt-Tags schliessen die Lücke zwischen visuellen und auditiven Benutzern – es ist noch nie so einfach gewesen, für Menschen den Zugriff auf Bilder online zu ermöglichen!
• Verbesserte Benutzerfreundlichkeit: Alt-Tags können Benutzern dabei helfen, den Zweck eines Bildes zu identifizieren, insbesondere wenn das Bild als Link verwendet wird. Dies kann die Webseite benutzerfreundlicher und einfacher zu navigieren machen.

Häufige Fehler bei der Verwendung von Alt-Attributen

Die häufigsten Fehler, die bei den Alt-Tags gemacht werden, sind:

• Alt-Tags überhaupt nicht zu verwenden, da sie ein wichtiges Element der Webzugänglichkeit sind.
• Die Verwendung desselben Alt-Tags für alle Bilder: Die Verwendung desselben Alt-Tags für alle Bilder ist nicht nur für Benutzer unbrauchbar, sondern kann auch von Suchmaschinen als spammy gesehen werden. Es ist wichtig, für jedes Bild einzigartige und beschreibende Alt-Tags zu schreiben.
• Die Verwendung von nicht relevanten Alt-Tags: Alt-Tags sollten den Inhalt des Bildes genau und effektiv beschreiben. Die Verwendung von Alt-Tags, die nicht relevant für das Bild oder den Kontext, in dem es verwendet wird, sind verwirrend für Benutzer und können die Zugänglichkeit und das SEO einer Webseite negativ beeinflussen.

Best Practices für Alt Attribute

Prüfen Sie Ihre Website auf fehlende Alt-Attribute

Hier sind einige Schritte, die Sie befolgen können, um eine Website auf fehlende Alt-Tags zu überprüfen:

• Verwenden Sie einen Website-Crawler: Es gibt viele Tools, die eine Website durchsuchen und Bilder ohne Alt-Tags identifizieren können. Einige beliebte Optionen sind: Screaming Frog, SEMrush und Sistrix.
• Überprüfen Sie den HTML-Quellcode: Sie können den HTML-Quellcode einer Webseite manuell überprüfen, um zu sehen, ob Alt-Tags für Bilder vorhanden sind. Dazu klicken Sie mit der rechten Maustaste auf ein Bild und wählen «Inspektieren» oder «Seitenquelltext anzeigen» aus. Suchen Sie nach dem img-Element und prüfen Sie, ob es ein Alt-Attribut hat.
• Überprüfen Sie die Bilder manuell: Sie können auch die Bilder auf einer Webseite manuell überprüfen, um zu sehen, ob sie Alt-Tags haben. Wenn ein Bild kein Alt-Tag hat, können Sie eines hinzufügen, indem Sie den HTML-Quellcode bearbeiten oder ein Bildbearbeitungstool verwenden.

Es ist wichtig zu beachten, dass die Überprüfung einer Website auf fehlende Alt-Tags nur ein Aspekt einer Gesamtwebsite-Überprüfung ist. Es könnten auch andere Probleme vorliegen, die behoben werden müssen, um die Zugänglichkeit und das SEO einer Website zu verbessern.

Keyword-Stuffing vermeiden

Keyword Stuffing bezieht sich auf die Praxis, Keywords in übermässigem Masse zu verwenden, um das Ranking einer Website in den Suchergebnissen von Suchmaschinen zu manipulieren. Verwenden Sie nur Keywords, die relevant für den Inhalt des Bildes und den Kontext, in dem es verwendet wird, sind und vermeiden Sie es, das gleiche Keyword immer wieder zu wiederholen. Verwenden Sie stattdessen Variationen Ihrer Keywords, um Abwechslung zu schaffen.

Sehr wichtig: Verwenden Sie eine angemessene Anzahl von Keywords in Ihren Alt-Tags. Die Übernutzung von Keywords kann von Suchmaschinen als spammy gesehen werden und kann das Ranking negativ beeinflussen

Halten Sie Ihre Alt-Tags kurz

Alt-Attribute sollten kurz und prägnant sein, nicht länger als ein paar Wörter. Die Länge eines Alt-Tags kann je nach Kontext, in dem das Bild verwendet wird, und dem Inhalt des Bildes selbst variieren. Im Allgemeinen ist es am besten, Alt-Tags so kurz wie möglich zu halten, während sie den Inhalt des Bildes noch immer genau und effektiv beschreiben.

Als allgemeine Richtlinie sollten Alt-Tags zwischen 2 und 4 Wörtern lang sein. Wenn Sie längere Phrasen verwenden müssen, um das Bild genau zu beschreiben, ist das in Ordnung, aber versuchen Sie, übermässig lange Alt-Tags zu vermeiden.

Es ist auch wichtig zu beachten, dass der primäre Zweck von Alt-Tags darin besteht, eine Textbeschreibung des Bildes für Benutzer bereitzustellen, die es nicht sehen können. Daher sollte die wichtigste Überlegung beim Schreiben von Alt-Tags darin bestehen, sicherzustellen, dass sie den Inhalt des Bildes genau und effektiv beschreiben.

Alt Attribute Beispiele

Sehen Sie unten ein Beispiel für Alt Attribute von unserer Website.

<src=»https://www.mikgroup.ch/wp-content/uploads/2021/03/MIK-Team-scaled.jpg» alt=»MIK Team«>

Ein schlechtes Beispiel für die Nutzung von Alt Tags wäre: <src=»https://www.mikgroup.ch/wp-content/uploads/2021/03/MIK-Team-scaled.jpg» alt=»Das MIK Team mit 20 Mitarbeitern im Büro«>

Wie implementiert man Alt-Tags in WordPress?

Da WordPress das beliebteste CMS ist, werden wir kurz erklären, wie man Alt-Attribute in WordPress hinzufügt:

• Melden Sie sich in Ihrem WordPress-Dashboard an und gehen Sie zum Bereich «Medien»
• Suchen Sie das Bild, dem Sie ein Alt-Tag hinzufügen möchten, und klicken Sie darauf, um den Bildschirm «Medien bearbeiten» zu öffnen.
• Auf dem Abschnitt «Medien bearbeiten» sehen Sie ein Feld mit der Bezeichnung «Alternativer Text». Hier können Sie das Alt-Tag für das Bild eingeben.
• Geben Sie Ihr Alt-Tag ein und klicken Sie auf die Schaltfläche «Aktualisieren», um Ihre Änderungen zu speichern.

Sie können Alt-Tags auch zu Bildern hinzufügen, wenn Sie sie in Ihre Beiträge oder Seiten einfügen. Klicken Sie dazu auf die Schaltfläche «Medien einfügen» und wählen Sie das zu einfügende Bild aus. Auf dem «Medien einfügen» sehen Sie ein Feld mit der Bezeichnung «Alternativer Text». Geben Sie hier Ihr Alt-Tag ein und klicken Sie auf die Schaltfläche «In Seite einfügen», um das Bild mit dem Alt-Tag in Ihren Beitrag oder Ihre Seite einzufügen.

Es ist wichtig zu beachten, dass es eine gute Praxis ist, immer Alt-Tags für Bilder zu verwenden, da sie die Zugänglichkeit und SEO Ihrer Website verbessern können.