Les blocs Accordéon et Tabulations vous permettent d'explorer des concepts connexes dans le cadre d'interactions riches en médias. Présentez les éléments un par un ou comparez plusieurs concepts dans un format clair et facile à assimiler.

1. Insérer des blocs d'accordéon et d'onglets
2. Ajouter du contenu et de nouveaux éléments
3. Basculer entre les types de blocs
4. Modifier les paramètres du bloc
5. Accessibilité

Étape 1 : Insérer des blocs d'accordéon et d'onglets

1. Ouvrez un module Rise 360, puis modifiez une leçon existante ou créez-en une nouvelle.
2. Cliquez sur Tous les blocs dans la barre de raccourcis des blocs ou sur l'icône d'insertion de blocs qui apparaît lorsque vous passez la souris sur une limite entre les blocs.
3. Dans la barre latérale, sélectionnez la catégorie Interactive, puis sélectionnez Accordéon ou Tabulations.

Étape 2 : Ajouter du contenu et de nouveaux éléments

1. Survol le bloc avec le curseur pour accéder à la barre d'outils de conception de gauche. Cliquez sur l'icône de contenu.
2. Le panneau d'édition s'ouvre sur le côté gauche. Vous pouvez modifier le titre et le texte de chaque élément.
   
   Cliquez sur l'icône du dossier multimédia pour ajouter des images ou du contenu Web. Si le média est déjà chargé, cliquez sur Modifier pour le remplacer ou le supprimer. Vous pouvez également recadrer, ajouter des légendes et ajouter des balises alt pour les médias existants. Cliquez sur l'icône audio pour ajouter du contenu audio généré par l'IA, du contenu audio enregistré ou pour télécharger un fichier audio.
3. Cliquez sur le bouton Ajouter un article en bas de la barre latérale pour ajouter des éléments supplémentaires. Vous pouvez ajouter autant d'articles que vous le souhaitez ! Notez que si vous ajoutez plus de quatre éléments dans des onglets, les apprenants devront faire défiler la page pour les voir tous.
4. Cliquez sur X dans le coin supérieur droit pour revenir à votre leçon.

Vous pouvez également modifier le corps du texte directement dans les blocs accordéon et onglets. Toutefois, vous ne pouvez modifier le texte du titre, les images, le contenu multimédia et le contenu Web que dans le panneau d'édition.

Étape 3 : Basculer entre les types de blocs

Vous pensez que vos tablatures seraient plus belles en tant qu'accordéon ou vice versa ? Alors changez-le ! Survol un bloc d'onglets existant. Cliquez sur le bouton de sélection du type de bloc qui apparaît à gauche de la barre d'outils de conception et sélectionnez Accordéon ou Tabulations dans le menu.

C'est ça ! Inversez le processus si vous souhaitez revenir en arrière.

Étape 4 : Modifier les paramètres de blocage

Modifiez l'apparence de votre contenu à l'écran en survolant un bloc existant pour accéder à la barre d'outils de conception de gauche. Cliquez sur l'icône Style pour accéder aux options d'arrière-plan des blocs. Vous avez également la possibilité de conserver un arrière-plan blanc pour les éléments d'accordéon et d'onglet lorsque vous modifiez l'arrière-plan du bloc. Le menu Format propose des options permettant de modifier le comportement du rembourrage et de l'accordéon, de changer le placement du son et de désactiver le zoom pour les images.

Accessibilité

Les onglets et les blocs d'accordéon sont conçus pour apporter un support technique, mais en tant qu'auteur, vous contrôlez l'accessibilité du contenu que vous ajoutez. Suivez les conseils ci-dessous pour que votre contenu fonctionne bien pour tous les apprenants.

• Ajoutez un texte alternatif (texte alternatif) pour toutes les images significatives. Décrivez ce que montre l'image et pourquoi elle est importante dans son contexte, et pas seulement à quoi elle ressemble. Marquez les images purement décoratives afin que les lecteurs d'écran les ignorent (1.1.1 Contenu non textuel).

• Incluez des sous-titres codés pour les vidéos. Assurez-vous que les sous-titres sont exacts, synchronisés avec le son et qu'ils incluent des sons non vocaux pertinents lorsqu'ils ajoutent du sens (1.2.2 Sous-titres [préenregistrés]).

• Fournissez des descriptions audio ou des transcriptions pour les vidéos présentant un contenu visuel important. Une transcription doit capturer tout le contenu oral et les informations visuelles clés non couvertes par la narration (1.2.1 Uniquement audio et vidéo uniquement [préenregistré]).

• Vérifiez le contraste du texte lorsque vous modifiez les couleurs d'arrière-plan. Optez pour un ratio d'au moins 4, 5:1 pour le corps du texte et de 3:1 pour le texte de grande taille (1.4.3 Contraste [minimum]).

Pour plus d'informations sur la création de contenu accessible, consultez les conseils de conception relatifs à l'accessibilité présentés dans nos articles ci-dessous :

• Rise 360 : Comment concevoir un module accessible

• Indice d'accessibilité

Navigation au clavier

La section suivante décrit ce à quoi les apprenants qui suivent une formation à l'aide d'un clavier peuvent s'attendre lorsqu'ils utilisent un accordéon et des blocs d'onglets. Ces informations peuvent également vous aider à vérifier le comportement attendu lors des tests d'accessibilité.

Bloc d'accordéon

• L'accent commence sur le premier entête d'accordéon.

• Appuyez sur Tab et Shift+Tab pour vous déplacer entre les en-têtes de l'accordéon.

• Lorsque l'accent est mis sur l'en-tête en accordéon d'un panneau réduit, Enter ou Space agrandit le panneau.

• Lorsque l'accent est mis sur l'en-tête en accordéon d'un panneau étendu, Enter ou Space réduit le panneau.

• Si le panneau accordéon est agrandi et contient du contenu interactif tel qu'une image ou une vidéo, le fait d'appuyer sur la touche Tab alors que l'en-tête permet de mettre l'accent sur ces éléments.

Bloc d'onglets

• Le focus commence sur le premier élément de l'onglet.

• Lorsque l'élément d'onglet est sélectionné, utilisez les flèches gauche et droite pour passer d'un onglet à l'autre.

• Appuyez sur Tab pour accéder au panneau d'onglets, et sur Shift+Tab pour revenir à l'élément d'onglet.

• Si le focus est sur le dernier élément de l'onglet, appuyez sur la touche flèche droite pour déplacer le focus sur le premier onglet. Si l'accent est mis sur le premier élément de l'onglet, appuyez sur la touche flèche gauche pour déplacer le focus sur le dernier onglet.

• Si le panneau d'onglets contient du contenu interactif tel qu'une image ou une vidéo, appuyez sur Tab alors que vous êtes dans le panneau d'onglets pour déplacer le focus sur ces éléments.

Expérience de lecture d'écran

La section suivante décrit ce à quoi les apprenants utilisant des lecteurs d'écran peuvent s'attendre lorsqu'ils naviguent dans les blocs accordéon et onglets. Vous pouvez également l'utiliser pour vérifier le comportement attendu lors des tests d'accessibilité.

Bloc d'accordéon

• L'accent commence sur le premier entête d'accordéon.

• Le lecteur d'écran annonce le titre, l'état et le niveau du titre, par exemple, « Le bouton TITRE a réduit le titre au niveau 2 ».

• Appuyez sur Tab et Shift+Tab pour vous déplacer entre les en-têtes de l'accordéon.

• Lorsque l'accent est mis sur l'en-tête en accordéon d'un panneau réduit, Enter ou Space agrandit le panneau. Le lecteur d'écran annonce « étendu ». Appuyez sur la touche flèche vers le bas pour déplacer le focus sur le contenu. Le lecteur d'écran annonce « TITRE + région », suivi du contenu. Appuyez sur la touche flèche vers le haut pour revenir à l'entête de l'accordéon.

• Lorsque l'accent est mis sur l'en-tête en accordéon d'un panneau étendu, Enter ou Space réduit le panneau. Le lecteur d'écran annonce « effondré ».

• Si le panneau accordéon est agrandi et contient du contenu interactif tel qu'une image ou une vidéo, appuyer sur Tab alors que le focus est sur le contenu déplace le focus sur ces éléments.

Bloc d'onglets

• Le focus commence sur le premier élément de l'onglet.

• Le lecteur d'écran annonce le « contrôle des onglets » pour indiquer que l'apprenant a saisi un bloc d'onglets, suivi du titre du premier élément d'onglet, par exemple, « contrôle des onglets, onglet TITRE sélectionné 1 sur 3 ».

• Lorsque l'élément d'onglet est sélectionné, utilisez les flèches gauche et droite pour passer d'un onglet à l'autre. Le lecteur d'écran annonce le titre et l'état de l'élément d'onglet, par exemple, « L'onglet TITRE a été sélectionné 2 sur 3 ».

• Appuyez sur Tab pour accéder au panneau d'onglets, et sur Shift+Tab pour revenir à l'élément d'onglet. Le lecteur d'écran annonce d'abord le titre de l'élément d'onglet, par exemple, « Page de propriété TITRE », suivi du contenu du panneau d'onglets.

• Si le focus est sur le dernier élément de l'onglet, appuyez sur la touche flèche droite pour déplacer le focus sur le premier onglet. Si l'accent est mis sur le premier élément de l'onglet, appuyez sur la touche flèche gauche pour déplacer le focus sur le dernier onglet.

• Si le panneau d'onglets contient du contenu interactif tel qu'une image ou une vidéo, appuyez sur Tab alors que vous êtes dans le panneau d'onglets pour déplacer le focus sur ces éléments.

Expérience mobile

La section suivante décrit ce à quoi les apprenants utilisant des lecteurs d'écran mobiles peuvent s'attendre lorsqu'ils naviguent dans les blocs accordéon et onglets. Vous pouvez également l'utiliser pour vérifier le comportement attendu lors des tests d'accessibilité.

Bloc d'accordéon

• L'accent commence sur le premier entête d'accordéon.

• Touchez deux fois pour ouvrir un accordéon. Balayez vers la droite pour accéder au contenu. Balayez vers la gauche pour revenir à l'en-tête de l'accordéon. Touchez à nouveau deux fois pour le fermer.

• Si un en-tête est fermé, balayez vers la droite pour passer à l'en-tête accordéon suivant.

• Si un en-tête est ouvert, balayez vers la droite pour accéder à son contenu. Le fait de continuer à balayer vers la droite depuis le contenu permet de se concentrer sur l'en-tête en accordéon suivant.

Bloc d'onglets

• Le focus commence sur le premier élément de l'onglet.

• Balayez vers la droite pour passer à l'élément d'onglet suivant. Touchez deux fois pour le sélectionner.

• Continuez à parcourir les éléments de l'onglet vers la droite pour atteindre le panneau d'onglets et entendre son contenu.

• Balayez vers la gauche pour revenir à un élément d'onglet.

Notre approche

Les blocs d'accordéon et d'onglets ont été créés en suivant les directives du guide des pratiques de création (APG) de WAI-ARIA, en particulier le modèle d'accordéon et le modèle de tablatures.

Cette approche aide les apprenants à :

• Comprenez que l'activité interactive contient plusieurs sections de contenu

• Passez efficacement d'une section à l'autre à l'aide des contrôles du clavier standard

• Sachez quelle section est actuellement développée ou active

Nous avons effectué des tests d'utilisabilité auprès d'utilisateurs de lecteurs d'écran et de claviers pour contribuer à cette approche. Cependant, les modèles d'accessibilité peuvent varier en fonction du contexte, et aucune solution unique ne fonctionne dans tous les scénarios. Nous continuerons d'évaluer et d'améliorer ces expériences au fil du temps en fonction des retours des apprenants et de l'évolution des meilleures pratiques.