Eingeblendete Inhalte

Eingeblendete Inhalte erscheinen, wenn bestimmte Bereiche (z.B. Links) fokussiert werden (mit der Tastatur) oder die Maus darüber bewegt wird.

Eingeblendete Inhalte dienen of als zusätzliche Beschreibung oder Infobox (Stichwort "custom tooltip"), etwa um Attribute eines Datenpunktes aufzulisten (wie in den Video-Beispielen weiter unten). Sie können auch Erklärung für einen Fachbegriff oder ein Akronym zu liefern. In anderen Fällen bieten sie die Vorschau eines Linkzieles, etwa die ersten Sätze eines verlinkten Enzyklopädie-Eintrags.

Eingeblendete Inhalte in Aktion

Das folgende Video zeigt einen Wikipedia-Eintrag mit eingeblendeten Inhalten: Popups mit einer Vorschau verlinkter Einträge. Die Popups werden sowohl durch Hover des Mauszeigers über dem Link als auch durch dessen Fokussierung mit der Tastatur eingeblendet.

Video-Beschreibung

Auf der Wikipedia Seite über Clara Schumann

  • tabbt der Nutzer durch mehrere Links zu anderen Wikipedia-Einträgen.
  • bei der Fokussierung der Links öffnen sich Popups  mit einer Artikelvorschau (Titel, Bild und einleitende Sätze).
  • Mit der Maus kann der Popup aktiviert werden. Er führt dann ebenso wie der Link zu dem jeweiligen Artikel.

Typische Nutzungsprobleme bei eingeblendeten Inhalten

Inhalte, die beim Bewegen des Mauszeigers über einen Auslöser oder bei dessen Fokussierung auftauchen, sind oft problematisch für sehbehinderte Menschen, die eine starke Zoomvergrößerung verwenden (Browser-Zoom, Zoom über die Eingabehilfen des Betriebssystems, oder Zoom mit einer speziellen Vergrößerungssoftware wie ZoomText oder SuperNova).

Probleme beim Schließen von eingeblendeten Inhalten

Wenn Benutzer in Seiten hineinzoomen, ist nur ein kleiner Teil des Bildschirms als vergrößerter Bereich sichtbar. Wenn hier eingeblendete Inhalte angezeigt werden, wird oft der Inhalt darunter verborgen, den die Nutzer lesen oder mit dem sie interagieren möchten. Daher ist es wichtig, dass solche Popups sich leicht schließen lassen.

Wenn Menschen eine Vergrößerungssoftware verwenden, wird der sichtbare vergrößerte Ausschnitt oft so positioniert, dass sich der Mauszeiger immer genau in der Mitte befindet. Jede Mausbewegung verschiebt den sichtbaren Ausschnitt. Wenn eingeblendete Inhalte angezeigt werden und Nutzer sie schließen möchten, sehen sie möglicherweise kein Bedienelement dafür. Durch ein Verschieben ihrer Fokusposition würden sie aber genau den Inhalt verlieren, den sie gerade lesen wollten. Daher ist es wichtig, Popup-Inhalte schließen zu können, ohne den aktuellen Fokus verschieben zu müssen – zum Beispiel durch Drücken der Escape-Taste (ESC).

Probleme beim Lesen von eingeblendeten Inhalten, die nicht vollständig sichtbar sind

Ein weiteres häufiges Problem ist, dass der Popup-Inhalt oft größer ist als der derzeit sichtbare vergrößerte Ausschnitt. Benutzer, die den Popup-Inhalt lesen möchten, müssen dann die Maus darüber bewegen können, ohne dass der Inhalt automatisch geschlossen wird. Häufig erleben Nutzer, dass eingeblendete Inhalte sich automatisch schließen, wenn sie die Maus vom Auslöser wegbewegen - sie haben dann keine Möglichkeit, den Inhalt zu lesen.

Probleme mit eingeblendeten Inhalten, die plötzlich verschwinden

Manche Popups werden nach kurzer Zeit automatisch geschlossen. Benutzer sollten immer genügend Zeit haben, eingeblendete Inhalte zu lesen - sie müssen sichtbar bleiben, bis sie vom Benutzer absichtlich geschlossen werden (oder der Benutzer den Fokus vom Auslöser und dessen eingeblendeten Inhalt ganz wegbewegt). Eine Ausnahme besteht für Inhalte, die nicht mehr gültig sind (z. B. Informationen zu einer Auktion, die abgelaufen ist).

Beispiele

Die folgenden Beispiele zeigen typische Nutzungsprobleme bei der Interaktion mit Inhalten, die unter Mauszeiger oder bei Tastaturfokussierung eingeblendet werden.

1 Eingeschränkte Mobilität: Inhalte lesen, die über Maus-Hover eingeblendet werden

Für Benutzer mit eingeschränkter Mobilität ist es schwierig, Bewegungen mit der Maus zu steuern, die erforderlich sind, um Inhalte in Bereichen zu lesen, die bei Maus-Hover oder Fokussierung sichtbar werden.

Video-Beschreibung

Auf der schwedischen Site naturvardsverket.se/ wird ein Diagramm verwendet, um Informationen über die Partikelkonzentrationen im öffentlichen Raum zu präsentieren. Um Informationen zu einem bestimmten Punkt im Diagramm anzuzeigen, bewegt der Benutzer den Mauszeiger über einzelne Punkte.

  • Inhaltsbereiche, die bei Hover sichtbar sind, können mit der Tastaturnavigation nicht erreicht werden
  • Benutzer können die Inhaltsbereiche nicht aktiv öffnen oder schließen
  • Benutzer können den Cursor nicht auf die Inhaltsbereiche bewegen, da sie sofort geschlossen werden und bei jeder Bewegung neue geöffnet werden.

2 Nutzung mit starker Vergrößerung: Unterm Mauszeiger eingeblendete Inhalte lesen

Für Benutzer mit geringer Sehkraft, die Zoomvergrößerung nutzen, ist es schwierig, die Inhalte eines Informationsbereiches wahrzunehmen und zu lesen, wenn dieser nur beim Bewegen des Mauszeigers über Elemente (hier: Datenpunkte) sichtbar ist und bei Bedarf nicht geschlossen werden kann.

Video-Beschreibung

Auf der schwedischen Webseite naturvardsverket.se (Partikelpegel in der Luft im öffentlichen Raum) wird eine Karte verwendet, um Informationen über Partikelpegel in der Luft an bestimmten öffentlichen Orten zu präsentieren. Um Informationen über einen bestimmten Punkt im Diagramm anzuzeigen, bewegt sich der Benutzer über den Punkt und die Informationen werden sichtbar. In diesem Video versucht ein Benutzer, den Inhalt mit starker Vergrößerung zu lesen.

  • Der Benutzer kann den Cursor nicht auf den eingeblendeten Informationsbereich bewegen, was es für ihn unmöglich macht, auf alle Inhalte zuzugreifen.
  • Mausbewegungen lassen Informationsbereiche sehr leicht verschwinden.
  • Es ist schwierig für den Benutzer, einen Überblick über einen Informationsbereich zu erhalten und das Verhalten zu kontrollieren.

3 Kognition: Eingeblendete Inhalte lesen und den Zusammenhang verstehen

Wie sollte die Anforderung der Schließbarkeit umgesetzt werden?

Das neue WCAG 2.1 Erfolgskriterium 1.4.13 Content on hover or focus ist erst seit Mitte 2018 Teil des Standards. Zur Zeit gibt es einige Unsicherheit, wie Autoren die Anforderung der Schließbarkeit eingeblendeter Inhalte am besten umsetzen können.

Wenn Inhalte über CSS eingeblendet werden (etwa über die a:hover und a:focus Pseudoklassen), wird der Weg über Ecape -Taste gegebenenfalls nicht funktionieren, wenn der Mauszeiger sich immer noch über dem Auslöser befindet. Der Befehl würde funktionieren, wenn der Zeiger über den eingeblendeten Inhalt bewegt wird. Das Aktivieren des Auslösers zum Schließen des eingeblendeten Inhalts ist denkbar, wäre aber bei Links nicht anwendbar, da miot der Altivierung des Links ja gleichzeitig der Nutzungskontext verlassen würde

Hier sind Experimente vonnöten. Bisher sind keine ausreichenden Techniken zur Erfüllung dieses Erfolgskriteriums dokumentiert worden.

Zugänglichkeits-Tipps für eingeblendete Inhalte

  • Popup-Inhalte, die nur bei Hover oder Fokus angezeigt werden, werden auf vielen Geräten nicht angezeigt. Dazu gehören Geräte mit Touchscreens (Mobiltelefone, Tablets). Präsentieren Sie keine kritischen Informationen ausschließlich in Hover- oder Fokus-Inhalten. Erwägen Sie, zusätzlichen Inhalt beim Aktivieren statt beim Fokussieren des Triggers anzuzeigen.
  • Wenn ein Pop-up durch das Bewegen des Mauszeigers über den Auslöser angezeigt wird, sollte das Gleiche bei Tastaturfokussierung des Auslösers passieren. Um den Inhalt für Tastaturbenutzer zugänglich zu machen, sollte der Auslöser ein tastaturfokussierbares Element sein – etwa eine Taste (button) oder ein Link.
  • Verwenden Sie die tooltip-Rolle für Inhalte, die als zusätzlicher Bedienungshinweis angezeigt werden.
  • Verwenden Sie für Tooltips, die den Namen bzw. die Funktion eines grafischen Symbols vermitteln, aria-labelledby auf dem Auslöser. Ein Beispiel wäre der Name "Einstellungen" für ein Zahnradsymbol. Dadurch lesen die Screenreader den Tooltip, wenn der Auslöser den Tastaturfokus erhält. (Beachten Sie, dass aria-labelledby in manchen Browsern nicht mit Elementen wie div arbeiten kann, die nicht nativ interaktiv sind oder keine entsprechende Rolle wie role="button" haben.)
  • Wenn ein Tooltip zusätzlichen Text enthält, geben Sie das Label mit (verstecktem) Text an und verbinden Sie den Inhalt über aria-describedby - vergleichen Sie Heydon Pickering's Artikel über Tooltips & Toggletips.
  • Stellen Sie sicher, dass der Zeiger über den Popup-Inhalt verschoben werden kann, weg vom Auslöser, ohne dass der Inhalt dabei automatisch schließt.
  • Implementieren Sie eingeblendete Inhalte so, dass sie ohne Änderung des Fokus geschlossen werden können (z. B. über die Escape-Taste). (Siehe jedoch die Hinweise in Probleme beim Schließen von eingeblendeten Inhalten weiter oben.)

Quellen für eingeblendete Inhalte