NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grüner Taster schaltet die Lampe ein: Alternative Eingabegeräte

Was sind alternative Eingabegeräte?

Alternative Eingabegeräte ersetzen Maus und Standardtastatur für Menschen, die diese nicht oder nur eingeschränkt nutzen können. Dazu gehören große Taster, Joysticks, Trackballs, Kopfmäuse, Augensteuerungen und Einhandtastaturen.

Ein einziger großer Knopf kann reichen, um ein ganzes Smartphone zu bedienen. Die Software springt nacheinander von Element zu Element, und ein Druck auf den Taster wählt das gerade markierte aus. Bei Augensteuerung genügt es, ein Element kurz anzuschauen. So schreiben Menschen Mails, kaufen ein und arbeiten, auch wenn sie Hände und Arme kaum bewegen können.

Damit das im Web funktioniert, muss eine Website mitspielen. Die WCAG 2.2 regeln das vor allem über Tastaturbedienbarkeit, Zielgrößen und den Verzicht auf komplizierte Gesten.

Inhalt

Websites für Taster, Kopfmaus und Augensteuerung fit machen mit NCA

Wer mit einem einzigen Taster arbeitet, braucht für jeden Schritt viele Klicks. Jeder überflüssige Fokuspunkt, jedes Hover Menü und jedes zu kleine Ziel kostet Zeit und Kraft. Bei NCA testen wir Websites mit den Schalter und Kopfsteuerungen, die iOS, Android, macOS und Windows bereits mitbringen, und sehen so, wo es hakt.

Die Ursachen beheben wir im Frontend: weniger Fokuspunkte durch gute Struktur, Sprunglinks und Landmarks, größere Klickziele, Menüs per Klick statt per Hover und Alternativen zu Wischgesten. Das baut auf voller Tastaturnavigation auf und auf dem Prinzip Operabilität. Für Menschen, die per Stimme steuern, ergänzen wir die Prüfung um Sprachsteuerung und Diktieren. Zielgrößen und Abstände sichern wir mit Cypress in der Pipeline ab, eingebettet in unsere Arbeit im barrierefreien Webdesign.

Lass uns sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Ein Knopf, ein Blick, ein Kopfnicken: So steuern Menschen

Jedes Gerät löst ein anderes Problem. Gemeinsam ist allen: Sie kommen ohne feine Handbewegungen aus.

  • Taster und Schalter: Große Knöpfe, die mit Hand, Ellbogen, Fuß oder Kopf gedrückt werden. Die Schaltersteuerung springt Element für Element weiter, ein Druck wählt aus.
  • Joystick und Trackball: Ersetzen die Maus, wenn Greifen und Schieben schwerfallen. Der Zeiger bewegt sich, ohne dass die Hand mitwandern muss.
  • Kopfmaus: Eine Kamera verfolgt die Kopfbewegung und lenkt damit den Zeiger. Geklickt wird durch Verweilen, Lächeln oder einen Taster.
  • Augensteuerung: Ein Sensor erkennt, wohin jemand schaut. Wer einen Punkt kurz fixiert, löst einen Klick aus. Windows, iOS und Android bringen Augensteuerung inzwischen selbst mit.
  • Mundmaus: Ein Mundstück reagiert auf Saugen und Pusten und wird so zum Taster.
  • Einhand und Großfeldtastaturen: Angepasste Tastaturen für Menschen, die nur eine Hand nutzen oder größere Tasten brauchen.

Die meisten dieser Geräte senden am Ende Tastatur oder Mausbefehle. Eine Website, die sauber per Tastatur funktioniert und große Ziele bietet, ist deshalb schon weit gekommen.

Warum jeder Klick zählt: Schaltersteuerung im Web

Stell dir vor, du hast nur einen Knopf. Die Software rückt im Sekundentakt von Element zu Element vor, und du drückst, wenn das richtige markiert ist. Auf einer Seite mit 120 Links im Menü dauert der Weg zum Inhalt schnell mehrere Minuten. Genau hier entscheidet die Website, ob Schaltersteuerung im Alltag funktioniert.

Diese WCAG Kriterien machen den Unterschied:

  • 2.1.1 Tastatur (A): Alles muss ohne Maus erreichbar sein, sonst findet die Schaltersteuerung das Element gar nicht.
  • 2.4.1 Blöcke umgehen (A): Sprunglinks und Landmarks ersparen Dutzende Schritte durch Menüs.
  • 2.2.1 Zeitlimits anpassbar (A): Wer langsam scannt, braucht mehr Zeit. Ablaufende Sitzungen müssen sich verlängern lassen.
  • 2.5.1 Zeigergesten (A): Wischen, Pinch Zoom und Mehrfinger Gesten brauchen eine Alternative mit einfachem Antippen.
  • 1.4.13 Inhalte bei Hover oder Fokus (AA): Bei Augensteuerung und Kopfmaus wandert der Zeiger ständig. Menüs, die beim Überfahren aufgehen, öffnen und schließen sich ungewollt.
  • 2.5.8 Zielgröße Minimum (AA): Wer mit Kopf oder Augen zielt, braucht große Ziele mit Abstand.

Wie gut kommt eure Seite ohne Maus und Finger aus?

Ob alternative Eingabegeräte im Alltag funktionieren, zeigt sich in Stufen. Die erste Stufe schafft jede Seite, die per Tastatur bedienbar ist. Die letzten beiden entscheiden darüber, ob Menschen eine Aufgabe in vernünftiger Zeit erledigen können.

Eignung für alternative Eingabe in vier Schritten

Schritt Was Nutzer erleben Testweg
1 Erreichbar Jedes Element lässt sich per Tastatur und damit per Taster erreichen Tab Durchgang ohne Maus
2 Ohne Gesten Kein Wischen, kein Ziehen, kein Hover nötig, alles geht mit einfachem Antippen Smartphone mit einem Finger, Menüs ohne Mauszeiger öffnen
3 Effizient Sprunglinks, wenige Fokuspunkte und große Ziele sparen viele Schritte Schaltersteuerung in iOS oder Android, Kopfzeiger in macOS
4 Abgesichert Zielgrößen und Bedienwege werden bei jedem Release automatisch geprüft Cypress Tests in GitHub Actions oder GitLab CI

Große Ziele und Menüs per Klick im Code

Ziele groß genug machen. Ein Mindestmaß für alle Bedienelemente sorgt dafür, dass auch unruhige Zeiger treffen. Kleine Icons bekommen eine größere Klickfläche, ohne optisch größer zu wirken. Links im Fließtext bleiben ausgenommen.

Code: 
          
button,
nav a,
.button,
[role="button"] {
  min-width: 44px;  /* komfortabel, WCAG Minimum sind 24px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button {
  padding: 10px; /* größere Klickfläche um ein 24px Icon */
}

Menüs per Klick statt per Hover. Bei Kopfmaus und Augensteuerung wandert der Zeiger ständig. Ein Untermenü, das sich beim Überfahren öffnet, springt auf und zu. Ein Button mit aria-expanded öffnet es nur auf ausdrücklichen Wunsch.

Code: 
          
<button type="button" aria-expanded="false" aria-controls="menu-produkte">
  Produkte
</button>
<ul id="menu-produkte" hidden>
  <li><a href="/schuhe">Schuhe</a></li>
  <li><a href="/jacken">Jacken</a></li>
</ul>

<script>
  const btn = document.querySelector('[aria-controls=menu-produkte]')
  const menu = document.getElementById('menu-produkte')
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true'
    btn.setAttribute('aria-expanded', String(!open))
    menu.hidden = open
  })
</script>

Zielgrößen automatisch prüfen. Der Cypress Test misst alle Buttons und Navigationslinks und meldet jedes Ziel unter 24 Pixeln.

Code: 
          
describe('Zielgrößen für alternative Eingabe', () => {
  it('alle Bedienelemente sind mindestens 24 Pixel groß', () => {
    cy.visit('/')
    cy.get('button, nav a, [role=button]').filter(':visible').each(($el) => {
      const { width, height } = $el[0].getBoundingClientRect()
      expect(Math.min(width, height), $el.text().trim() || $el.attr('aria-label')).to.be.at.least(24)
    })
  })
})

Was Taster und Augensteuerung ausbremst

  1. Riesige Menüs ohne Sprunglink. Jeder Link im Hauptmenü ist ein Schritt mehr, bevor der Inhalt erreicht ist.
  2. Hover Menüs. Bei Kopf und Augensteuerung öffnen sie sich ständig ungewollt und verdecken das eigentliche Ziel.
  3. Winzige Schließen Kreuze. Cookie Banner und Popups mit einem 12 Pixel kleinen X sind mit unruhigem Zeiger kaum zu treffen.
  4. Karussells mit Wischgeste. Ohne Pfeil Buttons gibt es keinen Weg zum nächsten Bild.
  5. Kurze Sitzungen. Wer langsam eingibt, wird mitten im Formular ausgeloggt.
  6. Drag and Drop ohne Alternative. Sortieren, Datei Upload per Ziehen oder Schieberegler sind mit einem Taster nicht machbar.

Developing the system has been entirely and completely liberating.

Steve Gleason, Ehemaliger NFL Spieler, Gründer von Team Gleason, steuert per Augensteuerung – Tech Savvy Hero, Tulane News

Die Schaltersteuerung steckt schon im eigenen Smartphone

Für einen ersten Test braucht ihr kein Spezialgerät. iPhone und iPad bringen eine Schaltersteuerung mit, Android einen Schalterzugriff, macOS einen Kopfzeiger und Windows eine Augensteuerung. Wer zehn Minuten lang versucht, auf der eigenen Website etwas zu bestellen, nur mit dem Bildschirm als Schalter, versteht danach besser als jede Checkliste, wo es hakt.

Alternative Eingabe baut auf vielen anderen Themen auf. Eine nachvollziehbare logische Reihenfolge spart Schritte, semantisches HTML sorgt dafür, dass Elemente überhaupt als bedienbar erkannt werden. Große, kontrastreiche Ziele helfen auch beim Responsive Design auf kleinen Bildschirmen.

Wer Schutz vor Bots braucht, sollte ein CAPTCHA wählen, das ohne Puzzle oder Ziehen auskommt. Formulare profitieren von den Mustern barrierefreier Formulare. Den rechtlichen Rahmen beschreibt das BFSG.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu alternativen Eingabegeräten

Taster, Kopfmaus, Augensteuerung und was Websites dafür brauchen: die wichtigsten Antworten.

Was sind alternative Eingabegeräte 2026?

Alternative Eingabegeräte ersetzen Maus und Standardtastatur für Menschen, die diese nicht oder nur eingeschränkt nutzen können. Dazu zählen 2026 große Taster, Joysticks, Trackballs, Kopfmäuse, Augensteuerungen, Mundmäuse sowie Einhand und Großfeldtastaturen. Viele Betriebssysteme bringen passende Steuerungen wie Schaltersteuerung oder Augensteuerung bereits mit.

Welche WCAG Kriterien betreffen 2026 alternative Eingabegeräte?

Am wichtigsten ist 2.1.1 Tastatur, weil die meisten Geräte Tastaturbefehle senden. Dazu kommen 2.4.1 Blöcke umgehen, 2.2.1 Zeitlimits anpassbar, 2.5.1 Zeigergesten, 2.5.7 Ziehbewegungen, 1.4.13 Inhalte bei Hover oder Fokus und 2.5.8 Zielgröße. Zusammen sorgen sie 2026 dafür, dass Websites ohne feine Handbewegungen nutzbar sind.

Bringen Smartphones 2026 eigene Steuerungen für Taster und Augen mit?

Ja. iOS und iPadOS bieten eine Schaltersteuerung und seit einigen Versionen auch eine Augensteuerung über die Frontkamera. Android hat den Schalterzugriff, macOS einen Kopfzeiger und Windows eine Augensteuerung für passende Sensoren. 2026 lassen sich damit viele Tests ohne zusätzliche Hardware durchführen.

Ist die Unterstützung alternativer Eingabegeräte 2026 Pflicht nach BFSG?

Indirekt ja. Das BFSG verweist auf Normen, die sich an den WCAG Kriterien der Stufen A und AA orientieren. Dazu gehören Tastaturbedienbarkeit, Alternativen zu Gesten und Ziehbewegungen sowie Mindestgrößen für Ziele. Eine Website, die diese Kriterien 2026 erfüllt, ist in der Regel auch mit alternativen Eingabegeräten gut bedienbar.

Wie teste ich meine Website 2026 mit alternativer Eingabe?

Startet mit einem Tastaturtest ohne Maus. Danach aktiviert ihr die Schaltersteuerung auf dem iPhone oder den Schalterzugriff unter Android und versucht, eine typische Aufgabe zu erledigen. Zählt dabei grob die nötigen Schritte. 2026 lassen sich Zielgrößen und Bedienwege zusätzlich mit Cypress automatisiert prüfen.

Was ist eine Schaltersteuerung?

Bei der Schaltersteuerung markiert die Software nacheinander die Elemente auf dem Bildschirm. Ein Druck auf einen Taster wählt das gerade markierte Element aus. So lässt sich ein ganzes Gerät mit einem oder zwei Knöpfen bedienen. Je weniger Elemente eine Seite hat, bis man zum Ziel kommt, desto schneller geht es.

Wie funktioniert eine Kopfmaus?

Eine Kamera erkennt die Position des Kopfes und bewegt den Mauszeiger entsprechend. Geklickt wird meist durch kurzes Verweilen auf einem Element, durch einen Gesichtsausdruck oder über einen zusätzlichen Taster. Für Websites heißt das: große Ziele, genug Abstand und keine Menüs, die schon beim Überfahren aufgehen.

Warum sind Hover Menüs ein Problem?

Bei Augensteuerung und Kopfmaus bewegt sich der Zeiger ständig über die Seite. Menüs, die beim Überfahren aufgehen, öffnen und schließen sich dadurch ungewollt und verdecken andere Inhalte. Für Taster Nutzer gibt es gar kein Überfahren. Menüs sollten sich deshalb per Klick oder Tastendruck öffnen lassen.

Wie groß sollten Buttons für alternative Eingabe sein?

WCAG 2.2 verlangt auf Stufe AA mindestens 24 mal 24 CSS Pixel oder ausreichend Abstand. Für Kopfmaus und Augensteuerung sind 44 Pixel oder mehr deutlich angenehmer, wie es die Stufe AAA vorsieht. Wichtig ist auch der Abstand zwischen Zielen, damit ein unruhiger Zeiger nicht das falsche Element trifft.

Helfen Sprunglinks bei alternativer Eingabe?

Sehr. Ein Sprunglink zum Hauptinhalt erspart Taster Nutzern Dutzende Schritte durch das Menü. Auch Landmarks wie header, nav und main helfen, weil manche Hilfsmittel direkt zwischen ihnen springen können. Je kürzer der Weg zum Inhalt, desto weniger Kraft und Zeit kostet die Nutzung.

Sind Touch Gesten ein Problem für alternative Eingabe?

Komplexe Gesten wie Wischen, Pinch Zoom oder Mehrfinger Gesten lassen sich mit Tastern, Kopfmaus oder Augensteuerung kaum ausführen. WCAG 2.2 verlangt deshalb für jede solche Geste eine Alternative mit einfachem Antippen, etwa Pfeil Buttons in einer Galerie oder Plus und Minus Buttons bei einer Karte.

Wer nutzt alternative Eingabegeräte?

Menschen mit Lähmungen, Muskelerkrankungen, Tremor, Spastik oder fehlenden Gliedmaßen, aber auch Menschen nach Unfällen oder mit vorübergehenden Verletzungen. Auch wer eine Hand gerade nicht frei hat, profitiert von großen Zielen und einfacher Bedienung. Alternative Eingabe ist deshalb keine Randgruppe, sondern ein Teil guter Usability.