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:
- Beim Namen rufen: „Klicke Warenkorb“ – die Software sucht ein Bedienelement, dessen zugänglicher Name zum gesprochenen Wort passt, und klickt es.
- 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. - 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 Name – WCAG 2.5.3;
aria-labelnur 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.