2. Buttons und Schaltflächen

Redaktionell

  • Buttontext aussagekräftig: Formulieren Sie den Buttontext als sprechenden Linktext nach folgendem Schema: Buttontext = Objekt + Aktion
    Gut: „Quiz starten“, „Antwort absenden“, „Beispiel ansehen“
    Schlecht: „Start“, „OK“, „Weiter“ (ohne Kontext)
  • Keine Doppelbedeutungen: Geben Sie die zu erwartenden Aktion möglichst präzise an („Weiter“ kann Navigation oder Abgabe bedeuten).
  • Hinweise zur Bedienung: Geben Sie bei mehrschrittigen oder zeitkritischen Aktionen vorab einen Einblick in die erforderlichen Schritte.

Technisch

  • Echte Buttons verwenden: Weisen Sie Buttons korrekt semantisch aus (z. B. über Bootstrap-Klassen oder verwenden Sie Formatvorlagen). Verzichten Sie auf als Button gestalteten Text.
  • Fokus sichtbar: Stellen Sie sicher, dass der Fokus bei Tastaturbedienung klar erkennbar ist (z. B. sollten Fokus und Buttonfarbe nicht identisch sein). Prüfen Sie die Ansicht in Ihrem Moodle-Kurs und passen Sie Ihre Farbwahl entsprechend an.
  • Reihenfolge logisch:  Bei mehreren Buttons muss die Tab-Reihenfolge der visuellen Reihenfolge entsprechen. Achte sie auf die richtige Reihenfolge im Code.
  • Statusmeldungen zugänglich: Achten Sie darauf, dass Rückmeldungen wie „Antwort gespeichert“ auch für Screenreader wahrnehmbar sind.
  • Keine Interaktion nur über Hover: Vermeiden Sie Interaktionen, die nur über einen Mouseover-Effekte erreichbar sind.
  • Ausreichend Abstand zwischen klickbaren Elementen: Achten Sie auf ausreichend Klick-/Touchfläche, damit Buttons gut getroffen werden (insbesondere bei der Verwendung der Touchfunktion). Platzieren Sie Buttons untereinander oder als klar getrennte Button-Gruppe.

Nach: Kim Althoff, Dustin Matzel, Michael Johannfunke und Christin Stormer, Zentrale Anlaufstelle Barrierefrei (ZAB). Projekt SHUFFLE, Universität Bielefeld. Lizenz: CC BY 4.0