Die Web Content Accessibility Guidelines (WCAG) enthalten verschiedene Anforderungen, die insbesondere für die Bedienung von Websites und Anwendungen mit Touchscreens, Zeigegeräten und mobilen Endgeräten relevant sind. Im Mittelpunkt stehen dabei unter anderem die einfache Bedienbarkeit von Gesten, das Vermeiden unbeabsichtigter Aktionen, ausreichend große Bedienelemente sowie eine flexible Darstellung auf mobilen Geräten.
2.5.1 Zeigergesten (Pointer Gestures) – Stufe A
Prinzip
Funktionen, die eine komplexe Zeigergeste erfordern, müssen grundsätzlich auch mit einer einfachen Zeigereingabe bedienbar sein. Dazu gehören beispielsweise Mehrpunktgesten oder pfadbasierte Gesten. Nutzerinnen und Nutzer sollen also nicht gezwungen sein, eine bestimmte Geste mit mehreren Fingern oder einer bestimmten Bewegungsbahn auszuführen.
Eine Ausnahme besteht, wenn die komplexe Geste für die Funktion selbst zwingend erforderlich ist.
Beispiele
- Eine Karte kann nicht ausschließlich durch eine Zwei-Finger-Geste vergrößert oder verkleinert werden. Zusätzlich sollten beispielsweise Plus- und Minus-Schaltflächen vorhanden sein.
- Ein Bildkarussell sollte nicht ausschließlich durch eine bestimmte Wischbewegung bedienbar sein, sondern beispielsweise auch über Vor- und Zurück-Schaltflächen.
2.5.2 Zeiger-Abbruch (Pointer Cancellation) – Stufe A
Prinzip
Eine Aktion sollte nicht bereits beim Beginn einer Zeigereingabe ausgelöst werden. Nutzerinnen und Nutzer müssen die Möglichkeit haben, eine versehentlich begonnene Aktion abzubrechen.
Bei Touch-Bedienung bedeutet das beispielsweise: Wird ein Finger auf einen Button gelegt, sollte die Aktion nicht bereits in diesem Moment ausgeführt werden. Die Aktion erfolgt erst bei der entsprechenden bestätigenden Eingabe, etwa beim Loslassen.
Beispiele
- Ein Button löst seine Aktion erst beim Loslassen des Fingers aus und nicht bereits beim Auflegen.
- Wird der Finger nach dem Berühren eines Buttons wieder aus dessen Bereich herausbewegt, kann die Aktion dadurch abgebrochen werden.
Dadurch werden insbesondere Fehlbedienungen auf Touchscreens reduziert.
2.5.4 Bewegungsauslösung (Motion Actuation) – Stufe A
Prinzip
Funktionen, die durch eine Bewegung des Geräts oder der Nutzerin bzw. des Nutzers ausgelöst werden, müssen auch über eine alternative Bedienmöglichkeit verfügbar sein. Außerdem muss sich die Bewegungsauslösung deaktivieren lassen, sofern sie nicht zwingend erforderlich ist.
Das ist besonders für mobile Geräte relevant, die beispielsweise Bewegungen, Neigungen oder Schüttelbewegungen erkennen können.
Beispiele
- Eine Anwendung ermöglicht das Rückgängigmachen durch Schütteln des Smartphones. Zusätzlich sollte es dafür eine Schaltfläche geben.
- Eine Funktion wird durch Neigen des Geräts gesteuert. Sie muss zusätzlich über normale Bedienelemente erreichbar sein.
2.5.7 Ziehbewegungen (Dragging Movements) – Stufe AA
Prinzip
Wenn eine Funktion eine Ziehbewegung erfordert, muss es grundsätzlich auch eine Bedienmöglichkeit ohne Dragging geben. Nutzerinnen und Nutzer sollen also nicht zwingend einen Zeiger gedrückt halten und über eine bestimmte Strecke bewegen müssen.
Dieses Kriterium wurde mit WCAG 2.2 eingeführt und ist insbesondere für Touchscreens relevant.
Beispiele
- Ein Schieberegler (Slider) sollte nicht ausschließlich durch Ziehen des Reglers bedienbar sein. Eine Eingabe durch Antippen der gewünschten Position kann eine alternative Bedienmöglichkeit darstellen.
- Bei einer Drag-and-Drop-Liste sollte es beispielsweise zusätzlich Möglichkeiten geben, einen Eintrag über Schaltflächen wie „Nach oben“ oder „Nach unten“ zu verschieben.
Das Ziel ist, Funktionen auch für Personen zugänglich zu machen, die präzise Ziehbewegungen nur schwer oder gar nicht ausführen können.
Zielgrößen und Layout auf mobilen Geräten
2.5.8 Ziel-Mindestgröße (Target Size Minimum) – Stufe AA
Prinzip
Bedienelemente, die mit einem Zeiger – beispielsweise einem Finger auf einem Touchscreen – bedient werden, müssen ausreichend groß sein oder einen ausreichenden Abstand zu anderen Zielen haben.
WCAG 2.2 fordert grundsätzlich eine Mindestgröße von 24 × 24 CSS-Pixeln beziehungsweise einen entsprechend großen Abstand zwischen kleineren Zielen. Für bestimmte Fälle gibt es Ausnahmen, beispielsweise bei unmittelbar im Text platzierten Links.
Für eine besonders komfortable Bedienung wird häufig eine größere Zielgröße von 44 × 44 CSS-Pixeln empfohlen.
Beispiele
- Kleine Icons wie „Löschen“, „Schließen“ oder „Menü“ sollten nicht nur wenige Pixel groß sein, sondern eine ausreichend große anklickbare Fläche besitzen.
- Zwei unmittelbar nebeneinanderliegende Buttons sollten so angeordnet sein, dass sie auf einem Smartphone nicht versehentlich gleichzeitig getroffen werden.
1.3.4 Ausrichtung (Orientation) – Stufe AA
Prinzip
Websites und Anwendungen dürfen ihre Nutzung grundsätzlich nicht ausschließlich auf eine bestimmte Display-Ausrichtung beschränken. Inhalte sollten daher sowohl im Hoch- als auch im Querformat nutzbar sein.
Eine Einschränkung ist zulässig, wenn eine bestimmte Ausrichtung für die Funktion tatsächlich erforderlich ist.
Beispiele
- Eine Website sollte nicht ausschließlich im Hochformat funktionieren, wenn keine technische oder inhaltliche Notwendigkeit dafür besteht.
- Eine Anwendung mit einer virtuellen Klaviertastatur kann dagegen auf eine bestimmte Ausrichtung angewiesen sein, wenn diese für die vorgesehene Nutzung erforderlich ist.
1.4.10 Umfließen (Reflow) – Stufe AA
Prinzip
Inhalte müssen sich an schmale Bildschirme anpassen können, ohne dass Nutzerinnen und Nutzer für die normale Nutzung horizontal scrollen müssen. Dies ist eine wichtige Grundlage für ein responsives Webdesign.
Die Anforderung bezieht sich unter anderem auf eine Darstellung, die einer Breite von 320 CSS-Pixeln entspricht.
Beispiele
- Ein längerer Text sollte auf einem Smartphone automatisch untereinander umfließen, anstatt eine horizontale Scrollleiste zu benötigen.
- Eine Tabelle oder ein komplexes Layout sollte so gestaltet sein, dass Inhalte auch auf einem schmalen Bildschirm sinnvoll dargestellt und bedient werden können.
Zusammenfassung
Für die Bedienung auf mobilen Geräten und mit Touchscreens lassen sich die wichtigsten Grundprinzipien zusammenfassen:
- Komplexe Gesten vermeiden: Funktionen sollten nicht ausschließlich über Mehrfinger- oder pfadbasierte Gesten erreichbar sein.
- Aktionen abbrechbar machen: Eine versehentliche Berührung sollte nicht unmittelbar eine Aktion auslösen.
- Dragging vermeiden: Funktionen, die normalerweise durch Ziehen bedient werden, benötigen eine alternative Eingabemöglichkeit.
- Bewegungssteuerung ergänzen: Schütteln, Neigen oder andere Bewegungen dürfen nicht die einzige Bedienmöglichkeit sein.
- Ausreichend große Ziele schaffen: Bedienelemente müssen auf Touchscreens zuverlässig getroffen werden können.
- Flexible Darstellung ermöglichen: Inhalte sollten sich an unterschiedliche Bildschirmgrößen und Ausrichtungen anpassen.