In einem Google Search Off-the-Record-Podcast, Googles Lizzi Sassman und John Mueller erörtern den besten Weg, Alt-Text für Logos und bildbasierte Schaltflächen zu handhaben.
Es gibt Best Practices für das Hinzufügen von Alt-Attributen zu Logos und Schaltflächen.
Die Regeln können erscheinen auf den ersten Blick etwas kompliziert, sind aber eigentlich einfach zu verstehen.
Die richtigen Alt-Attribute zu verwenden, ist gut für die Benutzer und auf lange Sicht ist es großartig für die Einnahmen.
Contents
Hinzufügen von Alt-Text zu funktionalen Bildern
Lizzi Sassman beginnt die Diskussion mit einem Verweis auf funktionale Bilder, Bilder, die einen funktionalen Zweck auf der Webseite haben.
Sie fragt, ob der Alt-Text dies tun sollte Beschreiben Sie, was die Schaltfläche tut oder was das Bild auf der Schaltfläche in der Situation ist, in der eine Schaltfläche ein Symbol ist.
Zuletzt fragt sie, ob es einen SEO-Zweck gibt, Alt-Text zu funktionalen Bildern hinzuzufügen, wie z Schaltflächen.
„Lizzi Sassman:
…Das Maß an Sorgfalt, das wir für das visuelle Gut aufwenden, wir sollten auch das gleiche Maß an Energie in die Worte stecken, die dieses Gut beschreiben. Was ich großartig finde.Eine andere Kategorie von Bildern sind funktionale Dinge, die manchmal eine Schaltfläche sein könnten.
Wie eine Grafik, die auch als etwas fungiert.
Wie eine Grafik, die auch als etwas fungiert.
Sollte mir der Alt-Text also mitteilen, was passieren wird?
Wenn Sie darauf klicken, werden Sie dann hierher geführt?
Es könnte wie ein Bild von etwas sein, das dann auch als Schaltfläche funktioniert.
Und beschreibst du die Funktion, oder wie es auch war, ich weiß nicht… wie ein Pfeilbild?
Und spielt es auch eine Rolle für SEO?
John Mueller:
Ja. Ich denke…Lizzi Sassman:
Es könnte wie ein Logo sein.John Mueller:
Für die Barrierefreiheit ist es wahrscheinlich sinnvoll, einfach etwas darum herum zu tun .Aber für SEO suchen die Leute nicht nach dem Checkout-Button oder so etwas.“
Alt-Text auf Schaltflächen dient der Barrierefreiheit, nicht der Suchmaschinenoptimierung
John Mueller macht deutlich, dass es keinen SEO-Zweck gibt, Alt-Text zu Schaltflächen hinzuzufügen.
Aber er beobachtete auch, dass der Alt-Text für diese Art von Bildern dient hauptsächlich der Zugänglichkeit.
Lizzi setzte die Diskussion fort:
“Lizzi Sassman:
…Aber vielleicht würden sie für das Logo oder so etwas wie das Logo. Wenn Sie darauf klicken, gelangen Sie zur Homepage oder so.Aber es ist auch „Oh, es ist ein Logo.“ Mueller:
Sicher.Lizzi Sassman:
Oder was wäre ein beschreibender Text.Im Logo steht Googlebot, aber das Ding ist es Am wichtigsten ist es, über das Bild zu wissen, dass es sich um ein Logo handelt?
Oder wie das Logo aussieht?
Ich denke, aus diesem Blickwinkel suchen die Leute wahrscheinlich nach dem Logo.
John Mueller:
Ja.Lizzi Sassman:
Wie lautet vielleicht das Logo der Firma X?
John Mueller:
Ja . Ich meine, es geht auf eine Art Strategie zurück, die wir zu vermeiden versuchen.Wofür willst du gefunden werden?
Lizzi Sassman:
Ja, aber das ist wohl die wichtigste Frage, denn dann lenkt es irgendwie…Ich kann mich von all diesen Kaninchenlöchern mitreißen lassen, also priorisiert es irgendwie, ich weiß nicht, was die Dinge sind, an die wir denken sollten, weil Sie nicht unbedingt alle Dinge für diese Dinge schreiben müssen, Vermutlich.“
Die richtige Verwendung von Alternativtext auf Logos und Schaltflächen
Die richtige Verwendung von Alternativtext auf Bildern wie Logos hängt tatsächlich davon ab, ob das Bild verwendet wird ist ein Link oder kein Link.
Wenn das Logobild als Link zurück zur Startseite fungiert, ist es richtig, dieses Bild mit der Funktion zu kennzeichnen, die es hat, damit ein Website-Besucher, der einen Screenreader verwendet, erkennen kann, dass dieses Logo ein Link zur Startseite ist .
Das World Wide Web Consortium (W3C), das offizielle Gremium zur Erstellung von HTML-Standards, veröffentlicht eine Erläuterung zum Umgang mit Logos.
Link zur Logo-Homepage
A Logo, das als Homepage-Link fungiert, sollte alternativen Text enthalten, der einem Screenreader-Benutzer mitteilt, dass das Logo ein Homepage-Link ist.
Das W3C verwendet dieses Beispiel für den Code:
<a href=“https://www.w3.org/“> <img src=“w3c.png“ alt=“W3C-Startseite“> </a>
Der obige Code ist für ein Logo, das man oben auf der Seite finden könnte und das auch als Link zurück zur Homepage dient.
Der vom W3C bereitgestellte Beispiel-Alt-Text lautet einfach: „W3C Startseite“ aber es könnte 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 stehen oder darunter und sowohl das Bild als auch der Text sind innerhalb desselben Linkcodes codiert.
Mit anderen Worten, es gibt nicht zwei Links wie einen Link für das Logo und einen Link für den Text, sondern nur einen Link für Logo und Text zusammen.
In diesem Fall, weil der Text die Funktion des Links beschreibt, wäre es eine Wiederholung, die Funktion des Logo-Links zu wiederholen.
Für diesen Fall ist es also am besten, einen Null-Alt-Text zu verwenden.
Dies ist das Beispiel, das das W3C bereitstellt:
<a href=“https://www.w3.org/“> <img src=“w3c.png“ alt=““> W3C-Startseite </a>
Beachten Sie, wie das Alt-Attribut für das Bild codiert ist:
img src=“w3c.png“ alt=““
Die leeren Anführungszeichen für den Alt-Text werden aufgerufen ein Null-Alt-Attribut (oder Null-Alt-Text). Ein Screenreader überspringt es einfach.
Der Grund, warum ein Null-Alt-Text gut ist, liegt darin, dass es einen Text gibt, der beschreibt, was die Link-Funktion ist:
W3C Home
Alt-Text für einen Icon-Link
Manchmal hat ein Link die Form eines Symbols ohne erklärenden Text, z. B. ein Symbol in Form eines Umschlags (der eine E-Mail oder Nachricht darstellt) oder eines Druckers (der anzeigt, dass der Link einen Drucker aktiviert).
In dieser Situation ist es eine schlechte Vorgehensweise, zu beschreiben, was das Bild ist (wie ein Umschlag oder ein Drucker).
Am besten beschreiben Sie, was das Bild bewirkt (initiieren Sie eine E-Mail oder eine Webseite drucken).
Das W3C verwendet das Beispiel eines Druckersymbols mit folgendem Code und Alt-Text:
<a href=“javascript:print()“> <img src=“print.png“ alt=“Diese Seite drucken“> </a>
Wie Sie sehen können, enthält das Symbol in Form eines Druckers die Worte „Diese Seite drucken“ als Alt-Text. Es sagt, was das Symbol tut. Das ist hilfreich.
Alternativtext für eine Schaltfläche
Ähnlich wie im Beispiel des Symbols sollte der Alternativtext für ein Schaltflächenbild beschreiben, was das Bild bewirkt.
Das W3C verwendet das Beispiel eines Suchfelds, das eine Lupe für einen Senden-Button hat.
Der schlechte Weg, dies zu tun, besteht darin, den Alt-Text zu verwenden, um zu beschreiben, dass das Bild eine Lupe ist.
Die beste Vorgehensweise besteht darin, den Alt-Text zu verwenden, um zu beschreiben, was das Bild tut.
Dies ist der Beispielcode, den das W3C als Beispiel zeigt:
<input type=“image“ src=“searchbutton.png“ alt=“Search“>
Wie Sie sehen können, ist der alternative Text für die Suchschaltfläche das Wort „Suchen” der beschreibt, was die Funktion des Buttons ist.
Alternativtext für Buttons und Logos
Lizzi und John gingen nicht auf die Details ein, wie die verschiedenen Szenarien für Logos und Schaltflächen gehandhabt werden.
John wies jedoch darauf hin, dass Alt-Text für Schaltflächen und Logos keinen SEO-Wert hat, es’ s für Barrierefreiheit.
Es ist eine bewährte Vorgehensweise, Webseiten, die für Benutzer, die mit Screenreadern auf Webseiten zugreifen, funktional sind, angemessen bereitzustellen.
Wie bereits erwähnt, können Personen, die Screenreader verwenden Kunden oder Befürworter Ihres Unternehmens oder Ihrer Website.
Es ist also gut für das Endergebnis, Best Practices für Barrierefreiheit zu verwenden.
Zitate
Erfahren Sie mehr über Barrierefreiheit für Schaltflächen und Logos beim W3C
Funktionale Bilder
Kombinieren benachbarter Bild- und Textlinks für dieselbe Ressource
Verwenden von Alt-Attributen auf Bildern, die als Senden-Schaltflächen verwendet werden
Hören Sie sich den Search Off the Record Podcast bei Minute 15:57 an:
Empfohlenes Bild von Shutterstock/Evgeny Atamanenko