Links und Buttons richtig benennen: Was „Hier klicken“ verschweigt

Der Name ist das, was ein Screenreader vorliest und was Sprachsteuerung versteht. Er kommt aus einer von drei Quellen:

• aus dem sichtbaren Text, etwa „Versandkosten“
• bei einem Bild als Link aus dessen Alt-Text – mehr dazu im Ratgeber Alt-Texte für Produktbilder
• bei einem Symbol aus einem versteckten Text, den nur Screenreader vorlesen

• Symbole im Kopf der Seite: Warenkorb, Suche, Menü, Konto
• Social-Media-Symbole in der Fußzeile
• Pfeile in Bild-Slidern und Produktgalerien
• das Herz für den Merkzettel
• das Logo als Link zur Startseite, wenn das Bild keinen Alt-Text hat
• „Mehr erfahren“ unter jedem Teaser – zehnmal derselbe Name für zehn Ziele

1. 1

   Schritt 1: Ziel oder Wirkung nennen

   Der Name sagt, wohin der Link führt oder was der Button tut: „Größentabelle öffnen“, „In den Warenkorb“, „Instagram“.

2. 2

   Schritt 2: Mit dem sichtbaren Wort beginnen

   Steht auf einem Button „Kaufen“, sollte auch der versteckte Name mit „Kaufen“ anfangen. Wer per Sprachsteuerung „Klick auf Kaufen“ sagt, trifft sonst ins Leere.

3. 3

   Schritt 3: Kurz bleiben

   Ein bis vier Wörter reichen. „Link zu“ oder „Button“ lassen Sie weg – das sagt der Screenreader ohnehin.

Textlinks ändern Sie direkt im Editor Ihres Shops. Symbole stecken meist im Theme; die Wege für Symbol-Links:

• Shopify

  Meist Icon-Links (Logo, Social Media, Warenkorb). Im Theme-Code (Code bearbeiten → sections/header.liquid bzw. footer.liquid) einen versteckten Text <span class="visually-hidden">…</span> ergänzen.

• WooCommerce

  Meist Icon-Links in Menü, Social-Icons-Block oder Header. Im Block-Editor beim Social-Icons-Block das Feld „Beschriftung“ füllen, im Theme ein aria-label ergänzen.

• Shopware

  Meist Icon-Links in Header und Footer. Im eigenen Theme die Twig-Vorlage (z. B. layout/header/header.html.twig) überschreiben und ein aria-label ergänzen.

Für Symbol-Buttons wie Suche oder Slider-Pfeile gilt derselbe Weg. Kommen sie aus einem Plugin oder einer App, bitten Sie den Anbieter um eine Korrektur.