Les couches de dialogue sont similaires aux calques standard, dans lesquelles elles affichent du contenu supplémentaire sur une diapositive. La différence réside dans le fait que les calques de dialogue recouvrent l'intégralité de la fenêtre du navigateur et assombrissent le reste du contenu, créant ainsi une expérience de navigation familière pour tout le monde, y compris pour les utilisateurs de lecteurs d'écran. Utilisez les boîtes de dialogue modales lorsque vous ne souhaitez pas que les apprenants interagissent avec d'autres éléments de votre module, y compris les contrôles du lecteur moderne, lorsque la calque est ouverte.

À partir de la mise à jour de mai 2022, vous pouvez convertir les couches de diapositives en boîtes de dialogue modales dans Storyline 360. Lisez la suite pour plus de détails.

• Calque standard ou couche de dialogue : laquelle devriez-vous utiliser ?
• Ajouter une couche de dialogue
• Améliorez l'accessibilité de la couche de dialogue
• Personnaliser la couleur d'arrière-plan du calque
• Comprendre la compatibilité

Calque standard ou couche de dialogue : laquelle devriez-vous utiliser ?

Il n'y a pas de bonne ou de mauvaise réponse lorsqu'il s'agit de choisir le type de calque à utiliser, car chacune d'entre elles présente des avantages pour votre module. Voici la différence entre le fonctionnement des calques standard et celui des calques de dialogue, à l'aide de quelques conseils généraux.

Lorsqu'une calque standard est ouverte, les apprenants peuvent interagir avec tout ce qui se trouve en dehors de celle-ci. Les calques standard sont la solution idéale si vous devez afficher du contenu supplémentaire, des scénarios ramifiés ou des interactions complexes.

Les calques de dialogue sont élégants et époustouflants, et ils sont parfaits pour envoyer des rappels aux apprenants ou pour les aider à effectuer une tâche rapide, telle que lire un message important ou saisir des valeurs dans un champ de saisie de données. Lorsque vous ouvrez une calque de dialogue, l'accent est mis sur la boîte de dialogue et son contenu, ce qui garantit qu'il s'agit de la vedette de l'émission. Les calques de dialogue assombrissent tout le reste de la fenêtre du navigateur, et les apprenants ne peuvent interagir avec aucun autre élément du module lorsqu'il est ouvert, comme indiqué ci-dessous. Pour revenir au contenu de la diapositive, les apprenants doivent interagir avec la calque de dialogue en la fermant ou en effectuant une tâche.

Ajouter une couche de dialogue

Voici comment ajouter une calque de dialogue à une diapositive.

1. Dans le mode Diaporama, créez une calque ou sélectionnez-en une existante, puis cliquez sur l'icône représentant un engrenage.
2. Lorsque la fenêtre Propriétés de la couche de diapositive apparaît, cliquez sur la flèche déroulante à côté du champ Présenter sous forme et choisissez Dialog. À ce stade, la calque se transforme instantanément en couche de dialogue.
   • La recherche n'est pas autorisée pour les calques de dialogue, car les apprenants ne peuvent pas interagir avec les fonctionnalités du lecteur lorsqu'une couche de dialogue est ouverte.
   • La case Empêcher l'utilisateur de cliquer sur les autres calques est automatiquement activée et grisée.
   • Vous pouvez cocher ou décocher la case Suspendre la chronologie de la calque de base.

Améliorez l'accessibilité de la couche de dialogue

Les apprenants peuvent parcourir entièrement les calques de dialogue à l'aide d'un lecteur d'écran ou d'un clavier.

Ordre de focalisation

L'ordre de mise au point contrôle l'ordre de lecture pour les lecteurs d'écran et l'ordre de tabulation pour les éléments interactifs tels que les boutons, les zones de clic et les champs de saisie de données. Voici comment cela fonctionne avec les boîtes de dialogue modales.

1. Lorsqu'une calque de dialogue s'ouvre, l'accent reste mis sur la boîte de dialogue et son contenu.
2. Le focus initial passe par défaut au premier élément interactif de la calque de dialogue.
3. Après la fermeture d'une couche de dialogue, le focus revient sur l'élément qui a ouvert la couche de dialogue.

Support pour lecteurs d'écran

Les personnes qui utilisent des technologies d'assistance, telles que les lecteurs d'écran, s'appuient sur le formatage sémantique (code source) pour percevoir les sites Web et explorer facilement leur contenu. Le HTML sémantique et les applications Internet riches accessibles (ARIA) indiquent aux utilisateurs de lecteurs d'écran où ils se trouvent sur la page et comment interagir avec le contenu. Améliorez l'expérience du lecteur d'écran pour les calques de dialogue en définissant des attributs d'accessibilité pour un titre et une description alternatifs. Découvrez les options de texte alternatif et leur utilisation ci-dessous.

• L'étiquette fournit le texte de l'attribut aria-labelledby d'accessibilité. Cela indique au lecteur d'écran ce qu'il doit annoncer comme titre de la boîte de dialogue modale.
• La description fournit le texte de l'attribut aria-describedby d'accessibilité. Cela indique au lecteur d'écran ce qu'il doit annoncer aux fins de la boîte de dialogue modale.

Dans la fenêtre Propriétés de la couche de diapositive, cliquez simplement sur les flèches déroulantes situées à côté des champs Étiquette et Description et sélectionnez l'un des éléments de texte de la diapositive qui apparaissent dans chaque liste déroulante. Si vous n'avez pas besoin d'un titre ou d'une description alternatifs, sélectionnez Aucun dans les listes déroulantes. (Les options Label et Description sont grisées pour les calques standard).

Conseil : Vous vous demandez si chaque calque de dialogue doit avoir une étiquette alternative et une description ? En général, chaque calque de dialogue doit avoir un titre et une description alternatifs. Toutefois, les descriptions sont parfois facultatives, en fonction du contenu de la calque de dialogue. Consultez cet exemple de boîte de dialogue modale et découvrez quand utiliser les étiquettes ARIA.

Navigation au clavier

Le tableau suivant répertorie les touches permettant de naviguer dans les calques de dialogue et le comportement de chaque touche.

Personnaliser la couleur d'arrière-plan du calque

La conception d'arrière-plan d'une calque de dialogue influe sur l'apparence générale de votre module. Tenez compte de ces conseils lorsque vous concevez votre calque de dialogue.

• Si votre couche de dialogue ne comporte pas de fond de fond ou si un fond d'arrière-plan n'est pas une couleur, Storyline 360 recouvre le module d'une superposition gris foncé semi-transparente.
• Si votre calque de dialogue possède déjà un arrière-plan semi-transparent de n'importe quelle couleur, Storyline 360 couvre le module avec cette couleur semi-transparente.
• Si votre calque de dialogue possède un arrière-plan opaque de n'importe quelle couleur, Storyline 360 couvre le module avec cette couleur, masquant complètement le cours lorsque la couche de dialogue est ouverte.

Comprendre la compatibilité

Les calques de dialogue sont réservés au lecteur moderne dans la mise à jour de mai 2022 et dans les versions ultérieures de Storyline 360. Les fichiers de projet contenant des calques de dialogue ne s'ouvraient pas dans les versions antérieures de Storyline 360. Pour rétablir la compatibilité, supprimez la couche de dialogue ou remplacez-la par une couche standard.