Buttons

Bedeutung von Alternativtexten für Buttons

Buttons erfüllen verschiedene Funktionen auf Webseiten. Für Nutzer von Screenreadern sind gut gestaltete Alternativtexte (auch bekannt als Accessible Names) von entscheidender Bedeutung. Diese Texte dienen als Ersatz für die visuelle Darstellung des Buttons und vermitteln dessen Funktion. Hier sind einige wichtige Aspekte zu beachten:

Kurze und Prägnante Beschreibung

Der Alternativtext sollte die Funktion des Buttons knapp und präzise beschreiben. Vermeiden Sie übermäßige Details und konzentrieren Sie sich auf die wesentliche Information, die der Button vermittelt. Ein kurzer Text verbessert die Benutzerfreundlichkeit und vermeidet Informationsüberflutung. Es wird empfohlen, sich auf maximal 80 Zeichen zu beschränken.

Vermeidung von Redundanz

Wiederholen Sie keine Informationen, die bereits im Kontext des Buttons vorhanden sind. Beispielsweise muss die Information „Button“ nicht im Alternativtext stehen, da Screenreader diese Information automatisch hinzufügen.

Einfache und Verständliche Sprache

Verwenden Sie einfache und verständliche Sprache. Komplizierte oder technische Begriffe sollten vermieden werden, um die Benutzerfreundlichkeit für alle Nutzer zu gewährleisten. Beispiel: Anstatt „Senden Sie Ihre Anfrage“ zu schreiben, genügt „Anfrage senden“.

Relevanz und Funktion

Die Beschreibung sollte die Funktion des Buttons klar und eindeutig vermitteln. Nutzer müssen sofort verstehen können, was passiert, wenn sie den Button betätigen. Beispiel: Ein „Weiter“-Button sollte als „Weiter zur nächsten Seite“ beschrieben werden, um die Aktion klarzustellen.

Beispiele für Alternativtexte

1. Einfacher Submit-Button:

   • HTML: <button type="submit" aria-label="Formular absenden">Submit</button>
   • Alternativtext: „Formular absenden“

2. Download-Button:

   • HTML: <button aria-label="Laden Sie die Broschüre herunter">Download</button>
   • Alternativtext: „Laden Sie die Broschüre herunter“

3. Navigations-Button:

   • HTML: <button aria-label="Zur nächsten Seite">Weiter</button>
   • Alternativtext: „Zur nächsten Seite“

Ergänzende Techniken für Barrierefreiheit

Neben Alternativtexten gibt es weitere Techniken, um Buttons barrierefrei zu gestalten:

1. ARIA-Label: Kann verwendet werden, um zusätzliche Informationen bereitzustellen.

   • Beispiel: <button aria-label="Zur Startseite">Home</button>

2. ARIA-DescribedBy: Verweist auf ein Element, das eine detailliertere Beschreibung enthält.

   • Beispiel: <button aria-describedby="buttonDesc">Mehr Infos</button> <span id="buttonDesc">Dieser Button führt Sie zu weiterführenden Informationen.</span>

3. Title-Attribut: Kann als ergänzende Beschreibung verwendet werden, sollte jedoch nicht als Ersatz für ARIA-Label dienen. Das Title-Attribut wird als Tooltip angezeigt, wenn mit Maus darüber gehovert wird.

   • Beispiel: <button title="Laden Sie die Datei herunter">Download</button>

Output-Ökonomie als Prinzip von Alternativtexten

Die Länge und Detailtiefe von Alternativtexten sollten immer dem Prinzip der Output-Ökonomie folgen. Blinde Nutzer müssen oft viele Informationen filtern, daher sollten Alternativtexte nur die wesentlichen Informationen enthalten, um die Nutzer nicht zu überfordern und vom eigentlichen Inhalt abzulenken.

Fazit

Gut gestaltete Alternativtexte für Buttons sind entscheidend für die Barrierefreiheit von Webseiten. Sie sollten kurz, prägnant und funktional beschreiben, was der Button tut. Vermeiden Sie Redundanzen und komplexe Sprache, um die Benutzerfreundlichkeit zu maximieren. Nutzen Sie ergänzende Techniken wie ARIA-Label und ARIA-DescribedBy, um zusätzliche Informationen bereitzustellen, wenn nötig.