Google erklärt alternativen Text für Logos und Schaltflächen

In einem Google Search Off the Record-Podcast diskutieren Lizzi Sassman und John Mueller von Google, wie man am besten mit Alt-Text für Logos und bildbasierten Schaltflächen umgeht.

Es gibt Best Practices für das Hinzufügen von Alt-Attributen zu Logos und Schaltflächen.

Die Regeln können auf den ersten Blick etwas kompliziert erscheinen, sind aber eigentlich einfach zu verstehen.

Die richtigen Alt-Attribute zu verwenden, ist gut für die Benutzer und auf lange Sicht großartig für die Einnahmen.

Hinzufügen von Alt-Text zu funktionalen Bildern

Lizzi Sassman beginnt die Diskussion mit einem Verweis auf funktionale Bilder, Bilder, die auf der Webseite einen funktionalen Zweck haben.

Sie fragt, ob der Alt-Text beschreiben soll, 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.

Abschließend fragt sie, ob das Hinzufügen von Alt-Text zu funktionalen Bildern wie Schaltflächen einen SEO-Zweck hat.

„Lizzi Sassmann:
… 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 super finde.

Eine andere Kategorie von Bildern ist wie das funktionelle Ding, das manchmal eine Schaltfläche sein könnte.

Als wäre es eine Grafik, die auch als etwas funktioniert.

Soll mir also der Alt-Text sagen, was gleich passieren wird?

Wenn du darauf klickst, wirst du dann hierher geführt?

Es könnte wie ein Bild von etwas sein, das dann auch als Schaltfläche fungiert.

Und beschreibst du die Funktion, oder wie war das auch, ich weiß nicht… wie ein Pfeilbild?

Und spielt es auch eine Rolle für SEO?

Johannes Müller:
Ja. Ich finde…

Lizzi Sassmann:
Es könnte wie ein Logo sein.

Johannes Müller:
Für die Barrierefreiheit ist es wahrscheinlich sinnvoll, einfach etwas dagegen zu unternehmen.

Aber für SEO werden die Leute nicht nach dem Checkout-Button oder so etwas suchen.“

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 bemerkte auch, dass der Alt-Text für diese Art von Bildern hauptsächlich aus Gründen der Barrierefreiheit dient.

Lizzi setzte die Diskussion fort:

„Lizzi Sassmann:
…Aber vielleicht würden sie das für das Logo tun, oder so ähnlich wie das Logo. Wenn Sie darauf klicken, gelangen Sie zur Homepage oder so.

Aber es ist auch: „Oh, es ist ein Logo.“

Sagen Sie also: „Dies ist das Logo für Google Search Central.“

Johannes Müller:
Sicher.

Lizzi Sassmann:
Oder wie, was beschreibender Text wäre.

Es ist der Googlebot im Logo, aber ist das Wichtigste, was man über das Bild wissen muss, die Tatsache, dass es sich um ein Logo handelt?

Oder wie sieht das Logo aus?

Ich denke, aus diesem Blickwinkel suchen die Leute wahrscheinlich nach dem Logo.

Johannes Müller:
Ja.

Lizzi Sassmann:

Wie lautet vielleicht das Logo der Firma X?

Johannes Müller:
Ja. Ich meine, es geht auf eine Art Strategie zurück, die wir zu vermeiden versuchen.

Wofür möchten Sie gefunden werden?

Lizzi Sassmann:
Ja, aber das ist die wichtigste Frage, denke ich, denn dann steuert es irgendwie …

Ich kann mich von all diesen Kaninchenlöchern mitreißen lassen, also priorisiert es gewissermaßen, 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, Ich vermute."

Die richtige Verwendung von Alt-Text auf Logos und Schaltflächen

Der richtige Weg, Alt-Text auf Bildern wie Logos zu verwenden, hängt tatsächlich davon ab, ob das Bild ein Link ist oder kein Link.

Wenn das Logobild als Link zurück zur Homepage fungiert, ist es richtig, dieses Bild mit der Funktion zu kennzeichnen, die es hat, damit ein Site-Besucher, der einen Bildschirmleser verwendet, nicht erkennen kann, dass dieses Logo ein Link zur Homepage ist.

Das World Wide Web Consortium (W3C), das offizielle Gremium zur Erstellung von HTML-Standards, veröffentlicht eine Erklärung zum Umgang mit Logos.

Link zur Logo-Homepage

Ein Logo, das als Homepage-Link fungiert, sollte Alt-Text enthalten, der einem Screenreader-Benutzer mitteilt, dass es sich bei dem Logo um einen Homepage-Link handelt.

Das W3C verwendet dieses Beispiel des Codes:

 <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, das auch als Link zurück zur Homepage dient.

Der vom W3C bereitgestellte Beispiel-Alt-Text lautet einfach „W3C-Startseite“, könnte aber aussagekräftiger sein, wenn Sie möchten.

Logo und Text Homepage-Link

Es gibt andere Arten von Logo-Links, bei denen sich ein Bildlogo und ein Text direkt daneben oder darunter befinden und sowohl das Bild als auch der Text im selben Linkcode codiert sind.

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.

Da der Text die Funktion des Links beschreibt, wäre es in diesem Fall eine Wiederholung, die Funktion des Logo-Links zu wiederholen.

In diesem 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 als Null-Alt-Attribut (oder Null-Alt-Text) bezeichnet. 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-Startseite

Alternativtext 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 Praxis, 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 drucken Sie eine Webseite).

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 beim Beispiel des Symbols sollte der Alt-Text 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 bewirkt.

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 Alt-Text für die Suchschaltfläche das Wort „Suchen“, das die Funktion der Schaltfläche beschreibt.

Alternativtext für Schaltflächen und Logos

Lizzi und John gingen nicht ins Detail, wie man mit den verschiedenen Szenarien für Logos und Schaltflächen umgeht.

John wies jedoch darauf hin, dass es keinen SEO-Wert für Alt-Text für Schaltflächen und Logos gibt, sondern für die Zugänglichkeit.

Es ist eine bewährte Methode, Webseiten, die für Benutzer, die mit Bildschirmleseprogrammen auf Webseiten zugreifen, funktionieren, angemessen bereitzustellen.

Wie bereits erwähnt, können Personen, die Screenreader verwenden, Kunden oder Befürworter Ihres Unternehmens oder Ihrer Website sein.

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 für Bilder, die als Senden-Schaltflächen verwendet werden

Hören Sie sich den Search Off the Record Podcast ab Minute 15:57 an:

Ausgewähltes Bild von Shutterstock/Evgeny Atamanenko