Barrierefreiheit verstehen · Assistive Technologien

Sprachsteuerung: Dragon, Voice Control & Voice Access

„Klicke Absenden.“ – Für Menschen, die ihre Hände nicht oder nur eingeschränkt benutzen können, ist die Stimme das Eingabegerät: nach Unfällen, bei Muskelerkrankungen, starkem Tremor oder chronischen Sehnenscheiden-Problemen. Sprachsteuerung ist dabei die assistive Technologie mit der vielleicht überraschendsten Anforderung an dein HTML – sie braucht Übereinstimmung zwischen dem, was auf dem Button steht, und dem, was der Button technisch heißt.

Die Werkzeuge

  • Dragon (Windows): der Klassiker unter den professionellen Diktier- und Steuerungsprogrammen – diktiert Texte und bedient Anwendungen und Browser per Befehl.
  • Voice Control (macOS/iOS) und Voice Access (Android): die eingebauten Systemlösungen, inzwischen erstaunlich leistungsfähig und kostenlos.
  • Sprachausgabe-Kombis: Viele Nutzer kombinieren Sprachsteuerung mit Vergrößerung oder Tastatur-Restnutzung – assistive Technologien treten selten solo auf.

Wie per Stimme geklickt wird

Drei Mechanismen decken fast alles ab:

  1. Beim Namen rufen: „Klicke Warenkorb“ – die Software sucht ein Bedienelement, dessen zugänglicher Name zum gesprochenen Wort passt, und klickt es.
  2. Nummern-Overlay: Auf Kommando („Zeige Nummern“) blendet die Software über jedem interaktiven Element eine Nummer ein – „Klicke 14“. Das funktioniert nur auf Elementen, die als interaktiv erkennbar sind: echte Buttons und Links, keine klickbaren <div>s.
  3. Raster-Modus: Notlösung, wenn nichts erkannt wird – der Bildschirm wird in immer feinere Zonen geteilt. Mühsam; wer seine Nutzer hierhin zwingt, hat vorher etwas falsch gemacht.

Die aria-label-Falle

Der häufigste Sprachsteuerungs-Bruch entsteht ausgerechnet durch gut gemeintes ARIA – wenn ein aria-label den sichtbaren Text ersetzt statt ihn aufzunehmen:

<!-- Falsch: Sichtbar „Jetzt kaufen", technisch „Zur Kasse gehen".
     „Klicke Jetzt kaufen" findet nichts. -->
<button aria-label="Zur Kasse gehen">Jetzt kaufen</button>

<!-- Richtig: Der zugängliche Name enthält den sichtbaren Text. -->
<button>Jetzt kaufen</button>

Genau das regelt WCAG 2.5.3 „Beschriftung im Namen“: Der sichtbare Text muss im zugänglichen Namen enthalten sein – am besten ist er einfach identisch. Für Icon-Buttons ohne Text gilt: benennen, was man sieht (das Zahnrad heißt „Einstellungen“, nicht „Optionen-Dialog öffnen“).

Randnotiz – Sprachsteuerung testet dein HTML gratis. Ein klickbares <div> ohne Rolle ist für Voice Control unsichtbar, ein Link ohne erkennbaren Text unerreichbar. Wer die erste Regel von ARIA befolgt – natives HTML zuerst –, hat Sprachsteuerung fast automatisch abgedeckt.

Was das für deine Website bedeutet

  • Sichtbarer Text = technischer NameWCAG 2.5.3; aria-label nur ergänzend und mit dem sichtbaren Text am Anfang.
  • Echte interaktive Elemente: <button> und <a href> statt klickbarer <div>s – sonst scheitert das Nummern-Overlay (WCAG 4.1.2).
  • Eindeutige Beschriftungen: fünfmal „Mehr“ auf einer Seite heißt fünf Rückfragen der Software – aussagekräftige Linktexte lösen das.
  • Formularfelder mit sichtbarem Label: „Gehe zu E-Mail“ braucht ein echtes Label, kein Platzhalter-Provisorium (WCAG 3.3.2).
  • Keine Einzeltasten-Kürzel ohne Ausschalter: Diktierte Wörter können sonst ungewollt Befehle auslösen – WCAG 2.1.4.

Häufige Fragen

Betrifft mich das auch ohne „Klicke“-Nutzer – Stichwort Siri & Alexa?

Ja. Sprachassistenten, die Webinhalte vorlesen oder Aktionen ausführen, hängen an derselben Maschinenlesbarkeit: saubere Struktur, klare Namen, strukturierte Daten. Die Investition zahlt doppelt aus.

Wie teste ich Sprachsteuerung ohne Dragon-Lizenz?

Mit Bordmitteln: Voice Control aktivieren (macOS: Systemeinstellungen → Bedienungshilfen) und die Kernabläufe der eigenen Seite per „Klicke …“ durchspielen; unter Android Voice Access. Schon fünf Minuten zeigen, wo Namen und Beschriftungen auseinanderlaufen.

Fazit

Sprachsteuerung übersetzt sichtbare Beschriftungen in Klicks – deine Aufgabe ist, dass beide Welten deckungsgleich sind: echte Buttons, sichtbare Labels, aria-label nur als Ergänzung. Die Details stehen in WCAG 2.5.3 und 4.1.2. Wie die Nachbarn der Sprachsteuerung arbeiten, zeigen Tastatur- & Switch-Bedienung und Screenreader im Überblick.

Gratis E-Book PDF Das Praxishandbuch

Kostenloses E-Book

Das Praxishandbuch für sauberes, zugängliches Web

Alles rund um semantisches HTML, Barrierefreiheit, WCAG & BFSG, GEO und SEO — praxisnah und am echten Code. In mehreren Feedbackschleifen von Leserinnen und Lesern verbessert.

  • 3.000+ Downloads
  • 7. Auflage
  • 37 Seiten
  • PDF

Kein Spam. Abmeldung jederzeit mit einem Klick möglich.