Social-Media-Icons sind verlinkte Symbole, die auf die Profile eines Unternehmens in sozialen Netzwerken führen. Sie stehen meist im Footer, seltener im Kopfbereich, und bestehen aus dem jeweiligen Markenzeichen des Netzwerks.
- Social-Media-Icons
Verlinkte Symbole, die auf die Profile eines Unternehmens in sozialen Netzwerken führen.
Beispiel: „Im Footer stehen drei Social-Media-Icons für LinkedIn, Instagram und YouTube.“Auch: Social Icons oder Social-Media-Buttons.
Abgrenzung zu Share-Buttons: Die Icons führen vom eigenen Angebot weg zu den eigenen Profilen. Share-Buttons teilen die gerade geöffnete Seite in einem Netzwerk.
Wo sie hingehören
In den Footer. Dort suchen Besucher sie, und dort kosten sie nichts: Jeder Verweis aus dem Kopfbereich führt vom Angebot weg, bevor es gelesen wurde. Eine Ausnahme sind Websites, deren Inhalt tatsächlich in den Netzwerken stattfindet.
Aufgeführt wird nur, was gepflegt wird. Ein Profil, dessen letzter Beitrag zwei Jahre alt ist, wirkt schlechter als ein fehlendes Profil, weil der Verweis die Erwartung weckt und sie enttäuscht.
Wie sie zugänglich werden
Jedes Symbol ist ein Link und braucht einen Namen. Ein SVG ohne Text ist für Vorlesewerkzeuge leer; der Name kommt deshalb als verstecktes Wort in den Link oder als aria-label. Zugleich wird die Grafik selbst für Vorlesewerkzeuge ausgeblendet, damit sie nicht doppelt angesagt wird.
<ul class="social">
<li>
<a href="https://www.linkedin.com/company/beispiel/" rel="noopener">
<svg aria-hidden="true" focusable="false" width="24" height="24"> ... </svg>
<span class="nur-fuer-screenreader">Homepage Helden auf LinkedIn</span>
</a>
</li>
</ul>Warum der Name an den Link und nicht an das Bild gehört, erklärt das W3C in seiner Anleitung zu funktionalen Bildern: Der Name benennt das Ziel des Links, also das Netzwerk und das Profil dahinter.
Warum weniger oft mehr ist
Sechs Symbole nebeneinander lesen sich als Pflichtübung. Zwei bis drei Netzwerke, in denen tatsächlich gearbeitet wird, wirken glaubwürdiger. Für die Zielflächen gelten dieselben Mindestmaße wie für jede andere Schaltfläche, auf dem Smartphone also rund 44 Pixel.
Aus unserer Arbeit an über 2.500 Website-Projekten sind die Symbole der am häufigsten vergessene Teil eines Relaunches: Sie werden aus der alten Website übernommen, samt Profilen, die es nicht mehr gibt. Ein Klick auf jedes Symbol vor dem Start erspart das.