Beschriftung über das title-Attribut

Silktide überprüft die Schaltflächen und Links auf Ihren Seiten auf Steuerelemente, die vom title-Attribut abhängen, um zu erklären, was sie tun. Browser zeigen title nur als verzögerten Tooltip an, wenn der Mauszeiger über dem Element schwebt, daher bekommen die meisten Menschen ihn nie zu sehen.

<!-- Problem: Der Tooltip ist die einzige Beschriftung -->
<button title="Schließen"><svg>…</svg></button>

<!-- Lösung: Geben Sie dem Steuerelement einen echten zugänglichen Namen -->
<button aria-label="Schließen"><svg>…</svg></button>

Darum ist das wichtig

Ein title-Tooltip erscheint nur für Mausnutzende – und erst nach einer Verzögerung. Tastaturnutzende, Touch- und Mobilnutzende sowie die meisten -Nutzenden erhalten ihn nie, sodass ein Steuerelement, das nur durch sein title beschriftet ist, für einen großen Teil Ihrer Besuchenden rätselhaft bleibt. Screenreader gehen außerdem uneinheitlich mit title um – manche lesen es vor, andere ignorieren es –, was es selbst für die Nutzenden, denen es eigentlich dienen soll, unzuverlässig macht.

Wenn ein Steuerelement sowohl ein title als auch einen anderen hat, ist das Problem die Konsistenz: Mausnutzende sehen kurz eine Beschreibung, während Nutzende assistiver Technologien eine andere hören – und beides driftet mit der Wartung der Seite immer weiter auseinander.

So beheben Sie das

Geben Sie dem Steuerelement eine ordentliche Beschriftung: sichtbaren Text, wo möglich, oder ein aria-label (oder aria-labelledby, das auf vorhandenen Text verweist) für reine Symbol-Steuerelemente.
Wenn das Steuerelement sowohl ein title als auch ein aria-label hat, die sich widersprechen, wählen Sie die nützlichere Formulierung und verwenden Sie sie überall. In der Regel ist es am saubersten, das title zu löschen und die Beschreibung über aria-label zu tragen.
Behalten Sie title nur für wirklich ergänzende Details. Es darf niemals der einzige Weg sein, um herauszufinden, was ein Steuerelement tut.

So testet Silktide dies

Finden Sie die sichtbaren Schaltflächen, Links und Disclosure‑Steuerelemente auf jeder Seite, einschließlich Elementen mit role="button" oder role="link".
Prüfen Sie für jedes Steuerelement mit einem nicht trivialen Wert im title-Attribut, ob es eine andere Beschriftung hat: sichtbaren Text, Bild-, aria-label oder aria-labelledby.
Melden Sie Steuerelemente, deren einzige Beschriftung das title-Attribut ist.
Wo ein Steuerelement sowohl ein title als auch ein explizites aria-label oder aria-labelledby hat, vergleichen Sie beide und melden Sie sie, wenn sie wesentlich Unterschiedliches aussagen. Wenn das eine das andere lediglich erweitert (ein title von "Suchen" mit einem Namen von "Jetzt suchen"), wird das nicht gemeldet.

Formularfelder wie <input> und <select> werden von dieser Prüfung nicht getestet; ihre Beschriftung wird unter Beschriftungen von Formularelementen behandelt.

Fehlerbehebung

Das title-Attribut ist bei iframes erforderlich

Korrekt – title an einem <iframe> ist die Standardmethode, es zu benennen, und diese Prüfung testet keine iframes. Sie testet nur interaktive Steuerelemente wie Schaltflächen und Links.

Das ist ein legitimer Einsatzzweck, solange das Steuerelement auch eine echte Beschriftung hat. Diese Prüfung meldet nur Steuerelemente, bei denen das title die einzige Beschriftung ist oder dem zugänglichen Namen widerspricht.