Karussells

Karussells bestehen aus einer Folge von Abschnitten (oder Folien), die für eine Weile angezeigt werden. Karussells werden meist auf Startseiten verwendet, um wichtige Inhalte zu präsentieren.

Die Folien des Karussells enthalten in der Regel Teaserbilder und Text, oft mit Links zu anderen Seiten. In vielen Karussells können Benutzer Blätter-Tasten aktivieren, um zur nächsten oder vorherigen Folie zu wechseln. In den meisten Fällen erfolgt der animierte Wechsel automatisch nach einem kurzen Intervall (zwischen 5 und 30 Sekunden). Bei einigen Karussells gibt es Steuerelemente für Wiedergabe und Pause, um diese Animation anzuhalten oder fortzusetzen.

Ein Karussell in Aktion

Das folgende Video zeigt ein typisches Karussell in Aktion.

Video-Beschreibung

Auf der Seite existenzgruender.de, zeigt ein animiertes Karussell alle 9 Sekunden eine neue Folie.

  • Der Nutzer tabby zum Inhlat des Teasers und dann zur Pause-Taste.
  • Er aktiviert die Pause-Taste mit ENTER.
  • Dies hält die Animation des Karussell an.
  • Der Nutzer tabu zurück zum "MEHR"-Link und aktiviert ihn.
  • Dies öffnet eine Seite über den Business-Plan.

Typische Nutzungsprobleme bei Karussells

Karussells erzeugen allgemeine Usability-Probleme und spezifischere Zugänglichkeitsprobleme. Sie sollten umsichtig verwendet werden, wenn überhaupt. Dies sind häufige Probleme:

Die automatische Aktivität stört die Aktivitäten der Benutzer

Karussells zeigen häufig Änderungen des Inhalts, nachdem die Seite geöffnet wurde. Sie werden oft auf der Startseite verwendet und nehmen einen großen Bereich des Bildschirms ein. Normalerweise lassen sie neue Inhalte in festen Intervallen in den sichtbaren Bereich gleiten, typischerweise nach 5 bis 20 Sekunden.

Dies bedeutet, dass Benutzer, die gerade erst begonnen haben, die Überschrift oder den Teaser-Text in einer Karussellfolie zu lesen, feststellen, dass dieser Inhalt unerwartet verschwindet. Es wird durch etwas anderes ersetzt. Dies kann sehr irritierend sein. Die Karussellbewegung kann auch für Benutzer ablenkend sein, die ihre Aufmerksamkeit auf etwas anderes auf dem Bildschirm richten.

Die Bewegung ist oft unmöglich oder schwer zu stoppen

Karussells haben oft kein Element, um die Bewegung zu stoppen. Manchmal stoppt die Bewegung, wenn Benutzer den Cursor über das Karussell bewegen oder wenn sie in den Karussell-Inhalt hineintappen, aber viele Benutzer wissen das nicht oder erwarten nicht, dass dies geschieht.

Wenn Karussells ein Element haben, um die Bewegung zu stoppen, ist es oft in der unteren Ecke versteckt. Es hat oft einen unzureichenden Kontrast. Es ist oft nicht für die Tastatur zugänglich oder hat eine schwache Kontrast- und Fokusanzeige. Für sehbehinderte Menschen ist dieses Element oft sehr schwer zu finden.

Beispiele

Die folgenden Beispiele zeigen typische Nutzungsprobleme bei der Interaktion mit Karussells.

1 Nutzung mit starker Vergrößerung: Einen Weg zum Anhalten des Karussells finden

Viele Karussells bieten keine Möglichkeit, die Animation zu stoppen. Wenn Karussells eine Pause-Taste haben, kann es schwierig sein, sie zu finden. Dies liegt oft daran, dass der Kontrast der Taste schlecht ist, die Taste sehr klein ist, oder die Taste schlecht positioniert ist.

Video-Beschreibung

Eine sehbehinderte Nutzerin, die die Website von Berlin (berlin.de) mit einem leichtem Browser-Zoom betrachtet, hat die Aufgabe, "das Karussell zu stoppen".

  • Die Nutzerin sieht keinen offensichtlichen Weg, das Karussell zu stoppen - es gibt einen "Pause" -Knopf, aber es hat einen sehr schwachen Kontrast.
  • Sie klickt auf die Folie (linke Maustaste) und nimmt an, dass sie damit die Karussellbewegung gestoppt hat.
  • Sie beginnt, den Inhalt des Karussells zu erkunden, indem sie mit der rechten Pfeiltaste durch die Folien blättert.
  • Das Karussell bewegt sich immer noch und sie erkennt, dass ihre Aktion nicht die beabsichtigte Wirkung hatte.
  • Auf einer Folie mit einem dunkleren Hintergrund erkennt die Nutzerin jetzt die Pausetaste und klickt darauf.
  • Sie wartet, um zu sehen, ob die Bewegung aufgehört hat, und äußert den Wunsch, dass alle Karussells eine Taste haben sollten, um sie stoppen zu können.

2 Screenreader-Nutzung: Die Ausgabe des Karussells behindert die Ausgabe der Nutzerschnittstelle

Karussells, die nicht gestoppt werden können, führen zu einer ununterbrochenen Sprachausgabe ihrer Inhalte, selbst wenn andere Schnittstellen-Bedienelemente geöffnet werden. Es ist dann sehr schwierig, die Ausgabe von Beschriftungen oder anderen Bedienelementen wahrzunehmen und zu unterscheiden.

Video-Beschreibung

Ein Screenreader-Benutzer interagiert mit der Krankenversicherungs-Website (barmer.de). Die Startseite hat ein Karussell, das nicht gestoppt werden kann.

  • Der Benutzer durchsucht den Seiteninhalt - die Ausgabe von fokussierten Elementen vermischt sich mit der automatischer Ausgabe der Karussell-Inhalte
  • Später in der Interaktion öffnet der Benutzer ein Suchfeld mit einer Dropdown-Liste mit Suchbegriffen
  • Er kann das Texteingabefeld nicht aktivieren, um einen Suchbegriff einzugeben
  • Während er versucht, mit der Form zu interagieren, spricht das Karussell weiter und behindert die Ausgabe fokussierter Elemente
  • Der Benutzer sagt zum Screenreader, er soll 'die Klappe halten'.

Zugänglichkeits-Tipps für Karussells

Überprüfen Sie, ob Sie wirklich ein Karussell brauchen. Einige vertreten die Ansicht, dass ein Karussell, abgesehen von Problemen der Barrierefreiheit, keine besonders erfolgreiche Methode zur Präsentation von Inhalten darstellt. Vergleichen Sie Should I use a carousel?

Aber wenn Sie trotzdem eines haben wollen:

  • Stellen Sie eine deutlich sichtbare Schaltfläche nahe beim Karussell-Inhalt bereit, um das Karussell anzuhalten. Normalerweise wird die Pause-Taste nach der Aktivierung zu einer Wiedergabe-Taste. Eine Möglichkeit ist das Platzieren der Pause-Schaltfläche oben auf der Folie (mit ausreichendem Kontrast).
  • Stellen Sie sicher, dass die Pausen- / Wiedergabe-Tasten über einen zugänglichen Namen verfügen, der den Status widerspiegelt. Screenreader-Benutzer sollten etwa "Animation anhalten" hören, wenn die Pause-Schaltfläche sichtbar ist und die Animation aktiv ist, und "Animation abspielen", wenn die Wiedergabeschaltfläche sichtbar ist und das Karussell pausiert ist.
  • Lassen Sie Folien nicht zu schnell wechseln. Bewegungen und Inhaltsänderungen, die nichts mit Benutzeraktionen zu tun haben, können sehr verwirrend sein, insbesondere für Nutzer mit geringer Sehkraft, die oft nur einen kleinen Teil des Bildschirminhalts sehen.
  • Stoppen Sie die Animation, sobald der Karussell-Inhalt fokussiert ist (Tastatur oder Maus). Dies erleichtert es Benutzern, Teaser-Texte zu lesen und Links zu Inhalten zu folgen, ohne von der Karussell-Animation unterbrochen zu werden.
  • Stellen Sie sicher, dass die Schaltflächen, die zur nächsten oder vorherigen Folie wechseln, einen guten Kontrast aufweisen. Benutzer möchten möglicherweise Karussell-Inhalte in ihrem eigenen Tempo erkunden. Die typischen linken und rechten Pfeiltasten am Rand des Karussells sollten groß sein und einen guten Kontrast haben.
  • Stellen Sie sicher, dass der interaktive Inhalt in den Folien per Tastatur bedienbar ist. Die Pfeile für die nächste oder vorherige Folie können fokussiert und aktiviert werden, oder die Tabs fokussieren den Folieninhalt und führen das Karussell automatisch weiter, wenn der Fokus auf den Inhalt der nächsten / vorherigen Folie verschoben wird. Links innerhalb der Folien können auch über die Tastatur bedient werden.
  • Überlegen Sie, ob Sie den nicht animierten Status des Karussells als Standard verwenden können. Wenn Benutzer automatisch Folien anzeigen lassen, können sie immer noch "Abspielen" drücken.

Quellen für Karussells