Alle Touch-Ziele müssen 24 Pixel groß sein oder ausreichend Platz lassen

Richtlinien zur Barrierefreiheit im Web besagen, dass Touch-Ziele wie Links, Schaltflächen und Symbole eine ausreichende Größe und Abstände aufweisen müssen, damit sie „leicht aktiviert werden können, ohne versehentlich ein benachbartes Ziel zu aktivieren“.

Warum das wichtig ist

Wenn Touch-Ziele zu klein oder zu nah beieinander liegen, wird es für Nutzer mit eingeschränkter Mobilität schwierig, sie zu bedienen.

Menschen, die ein mobiles Gerät nutzen, bei dem der Touchscreen die primäre Eingabemethode ist, ebenso wie Personen mit Zittern in den Händen oder Schwierigkeiten bei feinmotorischen Bewegungen, können Touch-Ziele nicht zuverlässig aktivieren, wenn diese zu klein oder zu dicht beieinander platziert sind.

Behebung des Problems

Touch-Ziele müssen mindestens 24 x 24 CSS-Pixel groß sein. Die Größe wird durch die größte freie Fläche des Touch-Ziels bestimmt. Wenn das Ziel kleiner ist, muss es möglich sein, einen virtuellen Kreis mit einem Durchmesser von 24 Pixeln um das Zentrum des Ziels zu ziehen, der keine anderen Ziele oder Kreise anderer zu kleiner Ziele überschneidet.

Gutes Codebeispiel