Steuerelement nur mit Symbol

Silktide sucht nach Schaltflächen und Links, die nur durch ein Symbol bezeichnet werden – beispielsweise ein Schließen-Kreuz, ein Hamburger-Menü oder eine Suchlupe – und keinen Textnamen für Personen haben, die das Symbol nicht sehen können.

<!-- Problem: Es wird nicht angesagt, was diese Schaltfläche bewirkt -->
<button><svg>…</svg></button>

<!-- Lösung: Benennen Sie das Steuerelement -->
<button aria-label="Menü öffnen"><svg>…</svg></button>

Warum das wichtig ist

Sehende Benutzer erkennen anhand der Form und des Kontexts, was eine Symbolschaltfläche bewirkt. Benutzer von haben keine entsprechende Alternative: Ohne einen sagt ihre Software eine unbenannte „Schaltfläche“ oder einen unbenannten „Link“ an oder liest verbliebenen Code vor, etwa den Namen einer CSS-Klasse des Symbols. Jedes Steuerelement, das nur aus einem Symbol besteht und keinen Namen hat, ist ein Steuerelement, das diese Benutzer blind aktivieren oder vollständig überspringen müssen – und oft sind dies die wichtigsten Steuerelemente auf der Seite: Menüs, Suche, Schließen, Weiter.

So beheben Sie das Problem

Fügen Sie ein -Label hinzu, das beschreibt, was das Steuerelement bewirkt, nicht wie das Symbol aussieht: aria-label="Suchen", nicht aria-label="Lupe".
Wenn derselbe Wortlaut bereits als sichtbarer Text in der Nähe vorhanden ist, verweisen Sie mit aria-labelledby darauf, statt ihn zu duplizieren.
Wenn das Symbol ein <img> ist, benennt auch sinnvoller alt-Text das Steuerelement.
Wenn das Steuerelement nichts Nützliches bewirkt und nur der Dekoration dient, machen Sie es nicht interaktiv, statt es zu benennen.

So prüft Silktide dies

Ermitteln Sie die sichtbaren Schaltflächen, Links und Auf-/Zuklapp-Steuerelemente auf jeder Seite, einschließlich Elementen mit role="button" oder role="link".
Überspringen Sie alle Steuerelemente, die bereits einen Namen haben: sichtbarer Text mit mindestens 2 Zeichen, ein aria-label, ein aria-labelledby oder ein title-Attribut.
Prüfen Sie, ob die übrigen Steuerelemente ein Symbol enthalten: ein inline-SVG, ein Bild mit leerem alt-Text oder Text, der in einer erkannten Symbolschriftart dargestellt wird.
Melden Sie Steuerelemente, die ein Symbol anzeigen, aber keinen Namen haben.

Fehlerbehebung

Das Steuerelement ist auf andere Weise beschriftet

Silktide berücksichtigt aria-label, aria-labelledby, title, sichtbaren Text und den alt-Text von Bildern. Wenn Ihr Steuerelement über einen Mechanismus außerhalb dieser Möglichkeiten benannt wird – was selten vorkommt –, überprüfen Sie mit einem Screenreader, ob der Name tatsächlich angesagt wird, und Sie das Ergebnis, falls dies der Fall ist.

Das Symbol ist dekorativ und steht neben Text

Steuerelemente mit aussagekräftigem sichtbarem Text werden nicht gemeldet, auch wenn ein Symbol neben dem Text steht. Wenn ein Steuerelement gemeldet wurde, erreichte sein Text nicht 2 aussagekräftige Zeichen – Text aus einzelnen Glyphen wie „×“ zählt nicht als Label.