Buttons, die ihre Funktion ankündigen

Eine Schaltfläche ist nur dann nützlich, wenn Nutzer wissen, was sie tut. Ihr barrierefreier Name wird vom Screenreader vorgelesen, bevor sie sie betätigen.

Bei einer normalen Schaltfläche ist der sichtbare Text in ihr der barrierefreie Name. Klare Wörter führen zu einer klaren Ansage.

Beschriften Sie eine Schaltfläche mit der Aktion, die sie ausführt, etwa Speichern, Löschen oder In den Warenkorb. Ein Verb sagt den Nutzern genau, was geschieht.

Beschriftungen wie OK, Absenden oder Los sind vage, wenn mehrere Schaltflächen sie tragen. Benennen Sie die konkrete Aktion, damit jede Schaltfläche für sich verständlich ist.

Eine Symbol-Schaltfläche ohne Text hat keinen barrierefreien Namen. Ein Screenreader sagt möglicherweise nur Schaltfläche, sodass der Nutzer raten muss. 🤔

Geben Sie einer Schaltfläche ohne Text mit aria-label einen Namen. Das Symbol bleibt sichtbar, aber assistive Technologien geben nun ihre Funktion aus.

Wenn ein Label die Aktion bereits benennt, kennzeichnen Sie das enthaltene Symbol mit aria-hidden, damit es nicht als zusätzliches Rauschen vorgelesen wird.

Eine Umschalt-Schaltfläche sollte ihren Zustand melden. Verwenden Sie aria-pressed, damit Screenreader sagen, ob sie ein- oder ausgeschaltet ist.

Eine Schaltfläche, die ein Panel ein- oder ausblendet, sollte aria-expanded enthalten, damit Nutzer hören, ob es geöffnet oder eingeklappt ist.

Ein gutes Label ist kurz, aber wahrheitsgemäß. Es verspricht genau das, was beim Betätigen der Schaltfläche geschieht, ohne Überraschungen nach dem Klick.

Wenn eine Schaltfläche sichtbaren Text hat, müssen diese Wörter in ihrem barrierefreien Namen enthalten sein, damit Nutzer der Sprachsteuerung die sichtbare Beschriftung sprechen können.

Benennen Sie jede Schaltfläche nach ihrer Aktion, versehen Sie Schaltflächen mit Symbolen allein mit einem Label und geben Sie Zustände über aria-Attribute aus. So wissen Nutzer immer, was die Schaltflächen tun. 👍