Mit Akkordeon- und Tabs-Blöcken können Sie verwandte Konzepte in medienreichen Interaktionen erkunden. Präsentieren Sie Artikel einzeln oder vergleichen Sie mehrere Konzepte in einem übersichtlichen, leicht verdaulichen Format.

1. Fügen Sie Akkordeon- und Tabs-Blöcke ein
2. Fügen Sie Inhalte und neue Elemente hinzu
3. Zwischen Blocktypen wechseln
4. Ändern Sie die Blockeinstellungen
5. Barrierefreiheit

Schritt 1: Fügen Sie Akkordeon- und Tabs-Blöcke ein

1. Öffnen Sie einen Rise 360-Kurs und bearbeiten Sie dann eine bestehende Lektion oder erstellen Sie eine neue.
2. Klicken Sie in der Shortcut-Leiste für Blöcke auf Alle Blöcke oder auf das Symbol Block einfügen, das erscheint, wenn Sie mit der Maus über eine Grenze zwischen Blöcken fahren.
3. Auswählen Sie in der Seitenleiste die Kategorie Interaktiv und dann Akkordeon oder Tabs Auswählen.

Schritt 2: Inhalte und neue Elemente hinzufügen

1. Bewegen Sie den Mauszeiger über den Block, um die Design-Symbolleiste auf der linken Seite aufzurufen. Klicken Sie auf das Inhaltssymbol.
2. Das Bearbeitungsfeld wird auf der linken Seite geöffnet. Sie können den Titel und den Text jedes Elements ändern.
   
   Klicken Sie auf das Medienordnersymbol, um Bilder oder Webinhalte hinzuzufügen. Wenn Medien bereits hochgeladen wurden, klicken Sie auf Bearbeiten, um sie zu ersetzen oder zu entfernen. Sie können bestehende Medien auch zuschneiden, Bildunterschriften hinzufügen und Alt-Tags hinzufügen. Klicken Sie auf das Audiosymbol, um generiertes AI-Audio oder aufgezeichnetes Audio hinzuzufügen oder eine Audiodatei hochzuladen.
3. Klicken Sie unten in der Seitenleiste auf die Schaltfläche Artikel hinzufügen, um weitere Artikel hinzuzufügen. Sie können so viele Artikel hinzufügen, wie Sie möchten! Beachten Sie, dass die Lernenden, wenn Sie mehr als vier Elemente in Tabs hinzufügen, scrollen müssen, um sie alle zu sehen.
4. Klicken Sie in der oberen rechten Ecke auf X, um zu Ihrer Lektion zurückzukehren.

Sie können den Haupttext auch direkt in den Blöcken Akkordeon und Tabs bearbeiten. Im Bearbeitungsbereich können Sie jedoch nur Titeltext, Bilder, Multimedia und Webinhalte bearbeiten.

Schritt 3: Zwischen Blocktypen wechseln

Denken Sie, Ihre Tabs würden als Akkordeon-Artikel besser aussehen oder umgekehrt? Dann ändere es! Bewegen Sie den Mauszeiger über einen vorhandenen Tabs-Block. Klicken Sie auf die Blocktyp-Auswahlschaltfläche, die links neben der Design-Symbolleiste angezeigt wird, und Auswählen Sie im Menü Akkordeon oder Tabs aus.

Das ist es! Kehren Sie den Vorgang um, wenn Sie zurück wechseln möchten.

Schritt 4: Ändern Sie die Blockeinstellungen

Ändern Sie, wie Ihre Inhalte auf dem Bildschirm aussehen, indem Sie den Mauszeiger über einen vorhandenen Block bewegen, um die Design-Symbolleiste auf der linken Seite aufzurufen. Klicken Sie auf das Stilsymbol, um auf die Optionen für den Blockhintergrund zuzugreifen. Sie haben auch die Möglichkeit, einen weißen Hintergrund für Akkordeon- und Tabulatorelemente beizubehalten, wenn Sie den Blockhintergrund ändern. Das Menü „Format“ bietet Optionen zum Ändern der Innenabstände und des Akkordeonverhaltens, zum Umschalten der Platzierung von Audiodateien sowie zum Deaktivieren des Zooms für Bilder.

Barrierefreiheit

Tabs und Akkordeon-Blöcke sind so konzipiert, dass sie Barrierefreiheit support, aber als Autor kontrollieren Sie die Barrierefreiheit der Inhalte, die Sie hinzufügen. Folgen Sie den folgenden Tipps, damit Ihre Inhalte für alle Lernenden gut funktionieren.

• Fügen Sie alternativen Text (Alt-Text) für alle aussagekräftigen Bilder hinzu. Beschreiben Sie, was das Bild zeigt und warum es im Kontext wichtig ist, nicht nur, wie es aussieht. Markieren Sie rein dekorative Bilder, damit Bildschirmleser sie überspringen (1.1.1 Nicht-Text-Inhalte).

• Fügen Sie Untertitel für Videos hinzu. Stellen Sie sicher, dass die Untertitel korrekt und mit dem Audio synchronisiert sind und relevante Geräusche enthalten, die keine Sprache sind, wenn sie ihnen Bedeutung verleihen (1.2.2 Untertitel [Vorab aufgenommen]).

• Stellen Sie Audiobeschreibungen oder Transkripte für Videos mit wichtigen visuellen Inhalten bereit. Ein Transkript sollte alle gesprochenen Inhalte und wichtige visuelle Informationen enthalten, die nicht in der Erzählung enthalten sind (1.2.1 Nur Audio und Nur Video [Aufgenommen]).

• Prüfen Sie den Textkontrast, wenn Sie die Hintergrundfarben ändern. Streben Sie für Haupttext ein Verhältnis von mindestens 4, 5:1 und für großen Text ein Verhältnis von 3:1 an (1.4.3 Kontrast [Minimum]).

Weitere Hinweise zur Erstellung barrierefreier Inhalte finden Sie in den Tipps zur Gestaltung barrierefreier Inhalte in unseren folgenden Artikeln:

• Rise 360: So entwerfen Sie einen barrierefreien Kurs

• Index der Barrierefreiheit

Navigation mit der Tastatur

Im folgenden Abschnitt wird beschrieben, was Lernende, die sich in einem Training mit der Tastatur zurechtfinden, erwarten können, wenn sie Akkordeon- und Tabulatorblöcke verwenden. Diese Informationen können Ihnen auch dabei helfen, das erwartete Verhalten bei Tests zur Barrierefreiheit zu überprüfen.

Akkordeon-Block

• Der Fokus beginnt beim ersten Akkordeon-Header.

• Drücken Sie Tab und Shift + Tab, um zwischen den Akkordeon-Headern zu wechseln.

• Wenn der Fokus bei einem ausgeblendeten Bedienfeld auf der Akkordeonüberschrift liegt, wird das Bedienfeld mit der Eingabetaste oder der Leertaste erweitert.

• Wenn der Fokus bei einem erweiterten Bedienfeld auf der Akkordeonüberschrift liegt, wird das Bedienfeld durch Drücken der Eingabetaste oder Leertaste ausgeblendet.

• Wenn das Akkordeonfenster erweitert ist und interaktive Inhalte wie ein Bild oder Video enthält, wird durch Drücken der Tabulatortaste in der Kopfzeile der Fokus auf diese Elemente verschoben.

Tabs blockieren

• Der Fokus beginnt beim ersten Tab-Element.

• Wenn das Tabulatorelement im Fokus ist, verwenden Sie die Pfeiltasten nach links und rechts, um zwischen den Tabs zu wechseln.

• Drücken Sie die Tabulatortaste, um zum Registerbereich zu wechseln, und Umschalttaste+Tabulatortaste, um zum Tabulatorelement zurückzukehren.

• Wenn der Fokus auf dem letzten Tabulatorelement liegt, wird durch Drücken der Rechtspfeiltaste der Fokus auf die erste Registerkarte verschoben. Wenn der Fokus auf dem ersten Tabulatorelement liegt, wird durch Drücken der Linkspfeiltaste der Fokus auf die letzte Registerkarte verschoben.

• Wenn das Registerfeld interaktive Inhalte wie ein Bild oder Video enthält, wird der Fokus durch Drücken der Tabulatortaste auf diese Elemente verschoben.

Erfahrung mit Screenreadern

Im folgenden Abschnitt wird beschrieben, was Lernende, die Screenreader verwenden, erwarten können, wenn sie in Akkordeon- und Tabblöcken navigieren. Sie können es auch verwenden, um das erwartete Verhalten bei Barrierefreiheitstests zu überprüfen.

Akkordeon-Block

• Der Fokus beginnt beim ersten Akkordeon-Header.

• Der Bildschirmleser kündigt den Titel, den Status und die Überschriftenebene an — zum Beispiel „TITLE-Schaltfläche hat Überschrift ausgeblendet Ebene 2“.

• Drücken Sie die Tabulatortaste und die Umschalttaste+Tabulatortaste, um zwischen den Akkordeon-Überschriften zu wechseln.

• Wenn der Fokus bei einem ausgeblendeten Bedienfeld auf der Akkordeonüberschrift liegt, wird das Bedienfeld mit der Eingabetaste oder der Leertaste erweitert. Das Bildschirmlesegerät meldet „erweitert“. Drücken Sie die NACH-UNTEN-TASTE, um den Fokus auf den Inhalt zu verschieben. Der Bildschirmleser kündigt „TITEL + Region“ an, gefolgt vom Inhalt. Drücken Sie die Aufwärtspfeiltaste, um zur Akkordeon-Überschrift zurückzukehren.

• Wenn der Fokus bei einem erweiterten Bedienfeld auf der Akkordeonüberschrift liegt, wird das Bedienfeld durch Drücken der Eingabetaste oder Leertaste ausgeblendet. Der Bildschirmleser meldet „Zusammengeklappt“.

• Wenn das Akkordeonfenster erweitert ist und interaktive Inhalte wie ein Bild oder Video enthält, wird durch Drücken der Tabulatortaste, während der Fokus auf dem Inhalt liegt, der Fokus auf diesen Elementen verschoben.

Tabs blockieren

• Der Fokus beginnt beim ersten Tab-Element.

• Der Bildschirmleser kündigt „Tabulatorsteuerung“ an, um anzuzeigen, dass der Lernende einen Tabulatorblock aufgerufen hat, gefolgt vom Titel des ersten Tabulatorelements, zum Beispiel „Tab-Steuerelement, TITLE-Tab ausgewählt 1 von 3.“

• Wenn das Tabulatorelement im Fokus ist, verwenden Sie die Pfeiltasten nach links und rechts, um zwischen den Tabs zu wechseln. Der Bildschirmleser gibt den Titel und den Status des Tab-Elements bekannt, zum Beispiel „TITLE-Tab ausgewählt: 2 von 3“.

• Drücken Sie die Tabulatortaste, um zum Registerbereich zu wechseln, und Umschalttaste+Tabulatortaste, um zum Tabulatorelement zurückzukehren. Die Bildschirmsprachausgabe gibt zuerst den Titel des Tab-Elements bekannt, z. B. „TITLE-Eigenschaftsseite“, gefolgt vom Inhalt des Registerbereichs.

• Wenn der Fokus auf dem letzten Tabulatorelement liegt, wird durch Drücken der Rechtspfeiltaste der Fokus auf die erste Registerkarte verschoben. Wenn der Fokus auf dem ersten Tabulatorelement liegt, wird durch Drücken der Linkspfeiltaste der Fokus auf die letzte Registerkarte verschoben.

• Wenn das Registerfeld interaktive Inhalte wie ein Bild oder Video enthält, wird der Fokus durch Drücken der Tabulatortaste auf diese Elemente verschoben.

Mobiles Erlebnis

Im folgenden Abschnitt wird beschrieben, was Lernende, die mobile Bildschirmlesegeräte verwenden, erwarten können, wenn sie in Blöcken mit Akkordeon und Tabs navigieren. Sie können es auch verwenden, um das erwartete Verhalten bei Barrierefreiheitstests zu überprüfen.

Akkordeonblock

• Der Fokus beginnt beim ersten Akkordeon-Header.

• Tippen Sie zweimal, um ein Akkordeon zu öffnen. Wischen Sie nach rechts, um zum Inhalt zu gelangen. Wischen Sie nach links, um zum Akkordeon-Header zurückzukehren. Tippen Sie erneut zweimal, um ihn zu schließen.

• Wenn eine Kopfzeile geschlossen ist, wischen Sie nach rechts, um zur nächsten Akkordeon-Überschrift zu gelangen.

• Wenn eine Kopfzeile geöffnet ist, wischen Sie nach rechts, um zu ihrem Inhalt zu gelangen. Wenn Sie vom Inhalt weiter nach rechts wischen, wird der Fokus auf den nächsten Akkordeon-Header verschoben.

Tabs blockieren

• Der Fokus beginnt beim ersten Tab-Element.

• Wischen Sie nach rechts, um zum nächsten Tab-Element zu gelangen. Tippen Sie zweimal, um es Auswählen.

• Wischen Sie weiter nach rechts durch die Tab-Elemente, um zum Tab-Panel zu gelangen und dessen Inhalt zu hören.

• Wischen Sie nach links, um zu einem Tab-Element zurückzukehren.

Unser Ansatz

Blöcke für Akkordeon und Tabs wurden anhand von Anleitungen aus dem WAI-ARIA Authoring Practices Guide (APG) erstellt, insbesondere anhand des Akkordeonmusters und des Tabulatormusters.

Dieser Ansatz hilft den Lernenden:

• Machen Sie sich bewusst, dass die Interaktion mehrere Inhaltsbereiche umfasst

• Mithilfe der Standardtastatursteuerung können Sie effizient zwischen den Abschnitten wechseln

• Erfahren Sie, welcher Abschnitt derzeit erweitert oder aktiv ist

Wir haben Benutzerfreundlichkeitstests mit Benutzern von Bildschirmlesegeräten und Tastaturen durchgeführt, um diese Vorgehensweise zu verbessern. Die Muster der Barrierefreiheit können jedoch je nach Kontext variieren, und keine einzelne Lösung funktioniert in jedem Szenario. Wir werden diese Erfahrungen im Laufe der Zeit auf der Grundlage des Feedbacks der Lernenden und der sich weiterentwickelnden Best Practices weiter bewerten und verbessern.