echo $titlegrandparent ?>
echo $titleparent ?>
2.2.4 Machen Sie Klickflächen groß
Hintergrund
Große Klickflächen können schneller und leichter bedient werden. Nach Fitts´s Law, einer Formel des Psychologen Paul Fitts, kann dies sogar mathematisch berechnet werden: die Zeit, die benötigt wird, um ein Ziel zu erreichen, ist die Funktion aus Entfernung zum Ziel und Größe des Ziels.
Große Klickflächen kommen besonders – aber nicht ausschließlich – NutzerInnen mit motorischen Einschränkungen zugute, die häufig auch altersbedingt sind. Zittern, Versteifungen, Parkinson, ALS, spastische Bewegungsstörungen usw. bedingen erschwerten Umgang mit Maus und Tastatur. Dies betrifft auch NutzerInnen mit geringer Übung in der Nutzung einer Maus oder unter erschwerten technischen Bedingungen: Touchpad, verschmutzte Maussensorik, ungeeignete Mausunterlage. Auch sehbehinderte NutzerInnen können größere Klickflächen leichter wahrnehmen.
Analog dazu erwarten Web-NutzerInnen, dass Navigationsleisten über die volle Breite von Navigationselementen klickbar sind.
Logos, Bilder, Buttons und der Zurück-Button des Browsers werden u.a. auch deshalb häufig genutzt, weil ihre Klickflächen größer sind als jene von Textlinks.
Große Buttons sind darüber hinaus bei wichtigen Elementen als Blickfang geeignet.
Maßnahmen
- Verlinken Sie den gesamten Text eines Navigationselements (z.b. auch die verfügbare Stückanzahl).
- Machen Sie die gesamte Breite und Höhe eines Navigationspunktes klickbar, nicht nur den Text (Verwenden Sie dafür display:block und Padding für die einzelne Links).
- Verwenden Sie Hover- und Focus-Effekte – z.B. Änderung der Hintergrundfarbe – für die gesamte Navigationsbreite, nicht nur für den Link.
- Gestalten Sie Buttons mit ausreichender Größe.
- Erhöhen Sie bei kleinen Icons und Buttons die Klickfläche durch Padding.
- Vergrößern Sie die Klickfläche bei Formularen, insbesondere bei Radiobuttons und Checkboxes durch LABEL: die Beschriftung wird damit klickbar, der Cursor springt durch Klicken auf den Text ins Eingabefeld oder markiert Checkboxen und Radiobuttons.
Wer profitiert davon
- Alle NutzerInnen
- NutzerInnen mit Seheinschränkungen
- NutzerInnen mit motorischen Einschränkungen
- NutzerInnen mit kognitiven Einschränkungen
Beispiele
- 2.2.1 Navigation in Textform, nicht in Grafikform
- 2.2.2 Aussagekräftige Linktexte, die wesentliche Zusatzinfos miteinschließen
- 2.2.3 Halten Sie die Navigation konsistent und semantisch korrekt
- 2.2.4 Machen Sie Klickflächen groß
- 2.2.5 Machen Sie Links im Inhaltsteil deutlich als solche erkennbar
- 2.2.6 Bieten Sie Navigationsunterstützung für blinde NutzerInnen und Tastatur NutzerInnen
- 2.2.7 Verzichten Sie möglichst auf dynamische Dropdownmenüs, besonders auf verschachtelte Dropdownmenüs
- 2.2.8 Machen Sie JavaScript-Lösungen barrierefrei