Das Alt-Attribut für Logos und Schaltflächen wird anders behandelt als der Alt-Text für andere Arten von Bildern. Google erklärt, wie man es richtig macht.
- Für Logos und Schaltflächen gelten andere Best Practices als für andere Arten von Bildern
- Es gibt keinen SEO-Wert für Logo und Button-Alt-Text
- Korrekte Alt-Texte für Logos und Schaltflächen können langfristige Vorteile für Nutzer und Website-Betreiber haben
In einem Google Search Off the Record-Podcast erörtern Lizzi Sassman und John Mueller von Google den besten Umgang mit Alt-Text für Logos und bildbasierte Schaltflächen.
Es gibt bewährte Verfahren für das Hinzufügen von Alt-Attributen zu Logos und Schaltflächen.
Die Regeln können auf den ersten Blick etwas kompliziert erscheinen, aber sie sind eigentlich einfach zu verstehen.
Die richtigen Alt-Attribute sind gut für die Nutzer und auf lange Sicht auch gut für die Einnahmen.
Alt-Text zu Funktionsbildern hinzufügen
Lizzi Sassman beginnt die Diskussion mit einem Verweis auf funktionale Bilder, d.h. Bilder, die einen funktionalen Zweck auf der Webseite erfüllen.
Sie fragt, ob der Alt-Text beschreiben sollte, was die Schaltfläche tut, oder was das Bild auf der Schaltfläche ist, wenn es sich bei der Schaltfläche um ein Symbol handelt.
Schließlich fragt sie, ob es einen SEO-Zweck hat, Alt-Text zu funktionalen Bildern wie Schaltflächen hinzuzufügen.
„Lizzi Sassman:
…Das Maß an Sorgfalt, das wir auf das visuelle Gut verwenden, sollten wir auch auf die Worte verwenden, die dieses Gut beschreiben. Das finde ich großartig.Eine andere Kategorie von Bildern ist die der funktionalen Dinge, die manchmal eine Schaltfläche sein kann.
Als ob es eine Grafik wäre, die auch eine Funktion hat.
Sollte mir der Alt-Text also sagen, was gleich passieren wird?
Wenn du darauf klickst, kommst du dann hierher?
Es könnte ein Bild von etwas sein, das dann auch als Schaltfläche fungiert.
Und beschreiben Sie die Funktion, oder war es auch, ich weiß nicht… wie ein Pfeilbild?
Und spielt es auch eine Rolle für die Suchmaschinenoptimierung?
John Mueller:
Ja. Ich denke…Lizzi Sassman:
Es könnte wie ein Logo sein.John Mueller:
Im Hinblick auf die Zugänglichkeit ist es wahrscheinlich sinnvoll, einfach etwas in dieser Richtung zu tun.Aber aus SEO-Gründen werden die Leute nicht nach der Schaltfläche „Kasse“ oder Ähnlichem suchen.
Alt-Text auf Schaltflächen sind für die Zugänglichkeit nicht SEO
John Mueller stellt klar, dass das Hinzufügen von Alt-Text zu Schaltflächen keinen SEO-Zweck hat.
Er stellte aber auch fest, dass der Alt-Text für diese Art von Bildern hauptsächlich aus Gründen der Zugänglichkeit erforderlich ist.
Lizzi setzte die Diskussion fort:
„Lizzi Sassman:
…Aber vielleicht für das Logo, oder etwas ähnliches wie das Logo. Wenn man es anklickt, kommt man auf die Homepage oder so.Aber es heißt auch: „Oh, das ist ein Logo“.
Sagen Sie also: „Dies ist das Logo für Google Search Central“.
John Mueller:
Sicher.Lizzi Sassman:
Oder wie wäre es mit einem beschreibenden Text.Es ist Googlebot im Logo, aber ist die Tatsache, dass es sich um ein Logo handelt, das Wichtigste, was man über dieses Bild wissen muss?
Oder wie das Logo aussieht?
Unter diesem Gesichtspunkt suchen die Leute wahrscheinlich nach dem Logo.
John Mueller:
Ja.Lizzi Sassman:
Wie sieht zum Beispiel das Logo der Firma X aus?
John Mueller:
Ja. Ich meine, es geht zurück zu der Strategie, die wir zu vermeiden versuchen.Wofür wollen Sie gefunden werden?
Lizzi Sassman:
Ja, aber das ist die wichtigste Frage, schätze ich, denn dann steuert sie sozusagen…Ich kann mich von all diesen Kaninchenlöchern mitreißen lassen, so dass ich, ich weiß nicht, Prioritäten setze, was die Dinge sind, an die wir denken sollten, weil man nicht unbedingt alle Dinge für diese Dinge schreiben muss, denke ich.
Die korrekte Verwendung von Alt-Text bei Logos und Schaltflächen
Die richtige Verwendung von Alt-Text für Bilder wie Logos hängt davon ab, ob es sich bei dem Bild um einen Link oder einen Nicht-Link handelt.
Wenn das Logobild als Link zurück zur Homepage fungiert, dann ist es richtig, das Bild mit dieser Funktion zu beschriften, so dass ein Website-Besucher, der ein Bildschirmlesegerät verwendet, erkennen kann, dass dieses Logo ein Link zur Homepage ist.
Das World Wide Web Consortium (W3C), das offizielle Gremium für die Erstellung von HTML-Standards, veröffentlicht einen Leitfaden für den Umgang mit Logos.
Logo Homepage Link
Ein Logo, das als Homepage-Link fungiert, sollte einen Alt-Text enthalten, der einem Bildschirmleser mitteilt, dass das Logo ein Homepage-Link ist.
<a href="https://www.w3.org/"> <img src="w3c.png" alt="W3C home"> </a>
Der obige Code ist für ein Logo, das man oben auf der Seite sehen kann und das auch als Link zurück zur Homepage dient.
Der vom W3C zur Verfügung gestellte Beispiel-Alt-Text lautet einfach „W3C home“, kann aber auch aussagekräftiger sein, wenn Sie möchten.
Logo und Text Homepage-Link
Es gibt andere Arten von Logo-Links, bei denen ein Bild-Logo und ein Text direkt daneben oder darunter stehen und sowohl das Bild als auch der Text im selben Link-Code kodiert sind.
Mit anderen Worten, es gibt nicht zwei Links, z. B. einen Link für das Logo und einen für den Text, sondern nur einen Link für das Logo und den Text zusammen.
Da der Text die Funktion des Links beschreibt, wäre es in diesem Fall eine Wiederholung, die Funktion des Logolinks zu wiederholen.
In diesem Fall ist es also am besten, einen leeren Alt-Text zu verwenden.
Dies ist das Beispiel, das das W3C liefert:
<a href="https://www.w3.org/"> <img src="w3c.png" alt=""> W3C Home </a> Beachten Sie, wie das alt-Attribut für das Bild kodiert ist:
img src="w3c.png" alt=""
Die leeren Anführungszeichen für den Alt-Text werden als null alt-Attribut (oder null alt-Text) bezeichnet. Ein Bildschirmlesegerät überspringt es einfach.
Der Grund, warum ein Null-Alt-Text gut ist, liegt darin, dass es einen Text gibt, der die Funktion des Links beschreibt:
W3C Startseite
Alt-Text für einen Icon-Link
Manchmal hat ein Link die Form eines Symbols, ohne Text, der erklärt, was er tut, z. B. ein Symbol in Form eines Briefumschlags (der eine E-Mail oder Nachricht darstellt) oder eines Druckers (der anzeigt, dass der Link einen Drucker aktiviert).
In diesem Fall ist es eine schlechte Praxis zu beschreiben, was das Bild ist (wie ein Umschlag oder ein Drucker).
Am besten ist es, zu beschreiben, was das Bild bewirkt (eine E-Mail auslösen oder eine Webseite drucken).
Das W3C verwendet das Beispiel eines Druckersymbols mit dem folgenden Code und Alt-Text:
<a href="javascript:print()"> <img src="print.png" alt="Diese Seite drucken"> </a>
Wie Sie sehen können, hat das Symbol in Form eines Druckers die Worte „Diese Seite drucken“ als Alt-Text. Er gibt an, was das Symbol bewirkt. Das ist sehr hilfreich.
Alt-Text für eine Schaltfläche
Ähnlich wie bei dem Beispiel des Symbols sollte der Alt-Text für ein Schaltflächenbild beschreiben, was das Bild bewirkt.
Das W3C verwendet das Beispiel eines Suchfeldes, das eine Lupe als Schaltfläche zum Absenden enthält.
Der schlechte Weg ist, den Alt-Text zu verwenden, um zu beschreiben, dass das Bild eine Lupe ist.
Am besten ist es, den Alt-Text zu verwenden, um zu beschreiben, was das Bild bewirkt.
Dies ist der Beispielcode, den das W3C als Beispiel zeigt:
<input type="image" src="searchbutton.png" alt="Suche">
Wie Sie sehen können, besteht der Alt-Text für die Suchschaltfläche aus dem Wort „Search“, das die Funktion der Schaltfläche beschreibt.
Alt-Text für Schaltflächen und Logos
Lizzi und John sind nicht im Detail darauf eingegangen, wie die verschiedenen Szenarien für Logos und Schaltflächen zu handhaben sind.
John wies jedoch darauf hin, dass der Alt-Text für Schaltflächen und Logos keinen SEO-Wert hat, sondern der Zugänglichkeit dient.
Es ist eine bewährte Praxis, Webseiten so zu gestalten, dass sie für Benutzer, die mit Bildschirmlesegeräten auf die Seiten zugreifen, funktional sind.
Wie bereits erwähnt, können Menschen, die Bildschirmlesegeräte benutzen, Kunden oder Fürsprecher für Ihr Unternehmen oder Ihre Website sein.
Es ist also gut für das Endergebnis, bewährte Verfahren für die Barrierefreiheit anzuwenden.
Zitate
Erfahren Sie mehr über Barrierefreiheit für Schaltflächen und Logos beim W3C
Kombination von benachbarten Bild- und Textlinks für dieselbe Ressource
Alt-Attribute für Bilder, die als Übermittlungsschaltflächen verwendet werden
Hören Sie sich den Search Off the Record Podcast ab 15:57 Minuten an: