Leere Links und Schaltflächen: Wenn 'Hier klicken' nicht einmal da ist

Eine reine Symbol-Schließen-Schaltfläche, ein Social-Media-Link, der aus einem Hintergrundbild ohne Text besteht, ein "Weiterlesen"-Link, der eigentlich nur ein Pfeilsymbol ist – alles extrem verbreitete Muster, und alle komplett stumm für einen Screenreader, wenn kein barrierefreier Name angehängt ist. Wo ein sehender Nutzer ein X-Symbol sieht und "das schließen" versteht, hört ein Screenreader-Nutzer nur "Schaltfläche" ohne jeden Hinweis darauf, was sie tut.

Branchendaten beziffern dies auf etwa 48 % der ADA-Beschwerden zur Web-Barrierefreiheit (leere Links und leere Schaltflächen zusammengenommen, die dieselbe Grundursache und dasselbe Lösungsmuster teilen).

Wie das passiert

Nur-Symbol-Schaltflächen ohne Beschriftung:

<!-- Wird nur als "Schaltfläche" angekündigt -->
<button><svg>...</svg></button>

Links, die nur ein Bild ohne Alternativtext umschließen:

<!-- Wird nur als "Link" angekündigt -->
<a href="/warenkorb"><img src="cart-icon.svg"></a>

"Weiterlesen"-Links ohne Kontext, die technisch Text haben, aber eine verwandte, subtilere Prüfung nicht bestehen (WCAG 2.4.4, Linkzweck im Kontext) – ein Screenreader-Nutzer durchsucht eine Seite oft, indem er eine Liste aller Links isoliert aufruft, und eine Seite mit zehn identisch angekündigten "Weiterlesen"-Links bietet keine Möglichkeit, sie zu unterscheiden.

Wie man es behebt

Geben Sie dem Steuerelement einen barrierefreien Namen über sichtbaren Text, aria-label, oder (bei einem Bild innerhalb eines Links) echten Alternativtext auf dem Bild:

<!-- Symbol-Schaltfläche: aria-label liefert den Namen -->
<button aria-label="Dialog schließen">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Bild-Link: Alternativtext auf dem Bild ist der Name des Links -->
<a href="/warenkorb">
  <img src="cart-icon.svg" alt="Warenkorb ansehen">
</a>

Beachten Sie das aria-hidden="true" auf dem dekorativen SVG innerhalb der Schaltfläche – das Symbol selbst trägt keine eigenständige Bedeutung, sobald die Schaltfläche ihren eigenen barrierefreien Namen hat, sodass es vor assistiver Technologie verborgen wird, um doppelte oder widersprüchliche Ansagen zu vermeiden.

Für das "Weiterlesen"-Muster machen Sie entweder den Linktext selbst konkret (Mehr über unsere Q3-Ergebnisse lesen statt bloßem Weiterlesen), oder fügen Sie eine visuell verborgene Spanne hinzu, die nur assistive Technologie liest:

<a href="/blog/q3-ergebnisse">
  Weiterlesen<span class="sr-only"> über unsere Q3-Ergebnisse</span>
</a>

Das zugrunde liegende Prinzip

Jedes interaktive Steuerelement benötigt IRGENDEINEN barrierefreien Namen – dies ist WCAG 4.1.2 (Name, Rolle, Wert), ein Kriterium der Stufe A, das einem großen Anteil aller erkennbaren Verstöße in der gesamten Spezifikation zugrunde liegt. Wenn Sie sich eine Regel von dieser Seite merken: Liefern Sie niemals ein reines Symbol-Interaktionselement aus, ohne zu fragen "was würde ein Screenreader tatsächlich sagen, wenn er hier landet?"

Offizielle Referenzen

• Deque University: button-name
• Deque University: link-name
• W3C Technique H2