Zum Hauptinhalt springen

So wählen Sie mehrere Bilder auf einer Website mit der Tastatur aus

Bei der Suche und Auswahl von Bildern auf der Website sind wir normalerweise daran gewöhnt, eine Maus oder einen Touchscreen zu verwenden. Es gibt jedoch eine andere, weniger verbreitete, aber ebenso bequeme Möglichkeit, Bilder mit der Tastatur auszuwählen. Dies kann für Menschen mit Behinderungen hilfreich sein oder einfach nur die Arbeit beschleunigen.

Viele Websites, insbesondere solche, die eine große Anzahl von Bildern bereitstellen, verfügen über Funktionen, mit denen Benutzer mehrere Bilder gleichzeitig auswählen können. Dazu werden in der Regel Tastenkombinationen oder spezielle Tastenkombinationen verwendet.

Beispielsweise können Sie in einigen Webgalerien Bilder auswählen, indem Sie die Umschalttaste drücken und sie mit der linken oder rechten Taste zusammenhalten, um mehrere Bilder hintereinander hervorzuheben. Sie können auch die Tasten Strg+ Umschalt (oder Cmd+Umschalt auf dem Mac) verwenden, um mehrere nicht benachbarte Bilder auszuwählen. Dies ist sehr praktisch, wenn Sie eine große Anzahl von Bildern auswählen und verarbeiten müssen.

Die Auswahl von Bildern über die Tastatur ist nicht nur bequem, sondern auch effektiv. Es ermöglicht dem Benutzer, schnell durch die Website zu navigieren und die gewünschten Bilder ohne unnötige Bewegungen oder Mausklicks auszuwählen. Darüber hinaus ist diese Methode ohne Ausnahme für alle verfügbar und kann auch für diejenigen nützlich sein, die keinen physischen Zugriff auf die Maus haben.

Wenn Sie ein Entwickler einer Website oder Webanwendung sind, sollten Sie auf die Möglichkeit achten, die Funktion der Bildauswahl über die Tastatur zu implementieren. Dadurch können Sie die Zugänglichkeit Ihrer Website verbessern und sie benutzerfreundlicher gestalten.

Wie man eine Website mit einer Tastatur bedient

Die folgenden Grundsätze helfen Ihnen dabei, eine zugängliche Benutzeroberfläche zu erstellen, die über die Tastatur gesteuert werden kann:

  • Stellen Sie den Fokus ein: Stellen Sie sicher, dass die fokussierten Elemente (z. B. Links) explizit angezeigt und über die Tastatur zwischen ihnen verschoben werden können.
  • Tab-Navigation: verwenden Sie die Tabulatortaste, um die Reihenfolge des Übergangs zwischen den Elementen anzupassen. Das fokussierte Element sollte für eine bessere Sichtbarkeit hervorgehoben werden.
  • Drücken der Eingabetaste: Stellen Sie sicher, dass das Element aktiviert werden kann, wenn der Benutzer die Eingabetaste drückt.
  • Satz von Tasten: vermeiden Sie die Verwendung von Tastenkombinationen für die Interaktion mit der Website, da diese mit den eigenen Kombinationen des Benutzers in Konflikt stehen können.
  • Menüsteuerung: Stellen Sie sicher, dass Dropdown-Menüs mit den Pfeiltasten und der Enter-Taste geöffnet und geschlossen werden können.
  • Fokussierbare Bilder: wenn Ihre Website Bilder enthält, sollten Sie sie fokussierbar machen, damit Benutzer mit der Tastatur darauf klicken können.

Berücksichtigen Sie bei der Entwicklung einer benutzerfreundlichen Benutzeroberfläche die Anforderungen an die Verfügbarkeit und die Standards für die Webentwicklung, z. B. WCAG (Web Content Accessibility Guidelines). Überprüfen Sie Ihre Änderungen mit den Tools zur Barrierefreiheitsprüfung, um sicherzustellen, dass Ihre Website für Benutzer mit Behinderungen vollständig verfügbar ist.

Mehrfachauswahl von Bildern

Auf Websites, auf denen mehrere Bilder vorhanden sind, muss der Benutzer möglicherweise mehrere Bilder über die Tastatur auswählen. Dies ist besonders nützlich für Menschen mit Behinderungen oder für diejenigen, die es vorziehen, die Tastatur anstelle der Maus zu verwenden.

Sie können das Layout mithilfe einer Tabelle verwenden, um eine Mehrfachauswahl von Bildern über die Tastatur zu ermöglichen. Erstellen Sie eine Tabelle mit einer Spalte und so vielen Zeilen wie Bilder auf der Website. Platzieren Sie in jeder Zelle der Tabelle ein Bild und eine Textbeschriftung.

Um dem Benutzer die Auswahl mehrerer Bilder zu ermöglichen, fügen Sie zu jeder Zelle der Tabelle eine Checkbox hinzu. Die Checkbox ermöglicht es dem Benutzer, ein Bild zu markieren, indem es ausgewählt wird. Verwenden Sie den folgenden Code, um eine Checkbox zu HTML hinzuzufügen:

Wenn ein Benutzer mehrere Bilder auswählt, kann er die Tabulatortaste verwenden, um von einem Bild zum anderen zu wechseln. Mit der Leertaste kann der Benutzer das ausgewählte Bild markieren oder deaktivieren.

Checkboxen können mit CSS gestylt werden, damit sie attraktiver aussehen und dem Design der Website entsprechen.

Nachdem der Benutzer die gewünschten Bilder ausgewählt hat, können Sie JavaScript verwenden, um die ausgewählten Werte zu verarbeiten. Sie können beispielsweise eine Funktion erstellen, die ausgelöst wird, wenn Sie auf die Schaltfläche "Senden" klicken und die ausgewählten Bilder zur weiteren Verarbeitung an den Server senden.

Tastenkombinationen zur Auswahl von Bildern

Das Auswählen mehrerer Bilder auf einer Website mit der Tastatur kann eine bequeme und schnelle Methode sein. Hier sind einige Tastenkombinationen, mit denen Sie Bilder auswählen können:

  • Verwenden Sie Umschalt + Nach-Links- oder Nach-Rechts-Pfeil, um die Bilder abwechselnd auszuwählen.
  • Um alle Bilder zwischen zwei Bildern auszuwählen, wählen Sie das erste Bild aus, halten Sie dann die Umschalttaste gedrückt und wählen Sie das letzte Bild aus. Alle Bilder zwischen ihnen werden automatisch ausgewählt.
  • Um einzelne Bilder auszuwählen, verwenden Sie Strg oder Befehlstaste (für Mac) + Klicken Sie auf jedes Bild, das Sie auswählen möchten.
  • Um die Auswahl eines Bildes aufzuheben, klicken Sie einfach erneut darauf und es wird aus der Auswahl entfernt.

Mit diesen Tastenkombinationen können Sie ganz einfach mehrere Bilder auf einer Website auswählen und mit ihnen in einem für Sie geeigneten Format weiterarbeiten.