As camadas de diálogo são semelhantes às camadas padrão, onde exibem conteúdo adicional em um slide. A diferença é que as camadas de diálogo se sobrepõem a toda a janela do navegador e escurecem outros conteúdos, criando uma experiência de navegação familiar para todos, incluindo usuários de leitores de tela. Use diálogos modais quando você não quiser que os alunos interajam com mais nada em seu curso, incluindo os controles modernos do player, enquanto a camada estiver aberta.

A partir da atualização de maio de 2022, você pode converter camadas de slides em diálogos modais no Storyline 360. Continue lendo para obter mais detalhes.

• Camada padrão ou camada de diálogo: qual você deve usar?
• Adicionar uma camada de diálogo
• Melhorar a acessibilidade da camada de diálogo
• Personalize a cor de fundo da camada
• Entenda a compatibilidade

Camada padrão ou camada de diálogo: qual você deve usar?

Não há resposta certa ou errada quando se trata de escolher qual tipo de camada usar, pois cada uma oferece benefícios ao seu curso. Veja a diferença entre como as camadas padrão e as camadas de diálogo funcionam com algumas dicas gerais.

Enquanto uma camada padrão está aberta, os alunos podem interagir com qualquer coisa fora dela. As camadas padrão são sua melhor opção se você precisar exibir conteúdo adicional, cenários ramificados ou interações complexas.

As camadas de diálogo são elegantes e impressionantes, além de serem ótimas para dar lembretes aos alunos ou ajudá-los a concluir uma tarefa rápida, como ler uma mensagem importante ou inserir valores em um campo de entrada de dados. Quando você abre uma camada de diálogo, o foco permanece na caixa de diálogo e em seu conteúdo, garantindo que ela seja a estrela do show. As camadas de diálogo escurecem todo o resto da janela do navegador, e os alunos não podem interagir com mais nada no curso enquanto ele está aberto, conforme mostrado abaixo. Para retornar ao conteúdo do slide, os alunos devem interagir com a camada de diálogo fechando-a ou concluindo uma tarefa.

Adicionar uma camada de diálogo

Veja como adicionar uma camada de diálogo a um slide.

1. Na Visualização de slides, crie uma camada ou selecione uma existente e clique no ícone de engrenagem.
2. Quando a janela Propriedades da camada de slide for exibida, clique na seta suspensa ao lado do campo Apresentar como e escolha Diálogo. Nesse ponto, a camada muda instantaneamente para uma camada de diálogo.
   • A busca não é permitida em camadas de diálogo, pois os alunos não podem interagir com os recursos do player enquanto uma camada de diálogo está aberta.
   • A caixa Impedir que o usuário clique nas outras camadas é ativada automaticamente e fica acinzentada.
   • Você pode marcar ou desmarcar a caixa Pausar a linha do tempo da camada base.

Melhorar a acessibilidade da camada de diálogo

Os alunos podem navegar pelas camadas de diálogo inteiramente com um leitor de tela ou teclado.

Ordem de foco

A ordem de foco controla a ordem de leitura para leitores de tela e a ordem de tabulação para elementos interativos, como botões, pontos de acesso e campos de entrada de dados. Veja como funciona com diálogos modais.

1. Quando uma camada de diálogo é aberta, o foco permanece na caixa de diálogo e em seu conteúdo.
2. O foco inicial salta para o primeiro elemento interativo na camada de diálogo por padrão.
3. Depois que uma camada de diálogo é fechada, o foco retorna ao elemento que abriu a camada de diálogo.

Suporte para leitor de tela

Pessoas que usam tecnologias assistivas, como leitores de tela, confiam na formatação semântica (código-fonte) para perceber sites e explorar seu conteúdo com facilidade. O HTML semântico e os Accessible Rich Internet Applications (ARIA) informam aos usuários de leitores de tela onde eles estão na página e como interagir com o conteúdo. Melhore a experiência do leitor de tela para camadas de diálogo definindo atributos de acessibilidade para um título e uma descrição alternativos. Confira as opções de texto alternativo e como usá-las abaixo.

• O rótulo fornece texto para o atributo de aria-labelledby acessibilidade. Isso informa ao leitor de tela o que anunciar como título da caixa de diálogo modal.
• A descrição fornece texto para o atributo de aria-describedby acessibilidade. Isso informa ao leitor de tela o que anunciar para fins da caixa de diálogo modal.

Na janela Propriedades da camada de slide, basta clicar nas setas suspensas ao lado dos campos Rótulo e Descrição e selecionar um dos elementos de texto no slide que aparecem em cada lista suspensa. Se você não precisar de um título alternativo ou de uma descrição, selecione Nenhum nas listas suspensas. (As opções Rótulo e Descrição estão acinzentadas para camadas padrão).

Dica: Quer saber se cada camada de diálogo deve ou não ter um rótulo alternativo e uma descrição? Geralmente, cada camada de diálogo deve ter um título alternativo e uma descrição. No entanto, as descrições às vezes são opcionais, dependendo do conteúdo na camada de diálogo. Confira este exemplo de uma caixa de diálogo modal e quando usar rótulos ARIA.

Navegação pelo teclado

A tabela a seguir lista as teclas para navegar nas camadas de diálogo e o comportamento de cada tecla.

Personalize a cor de fundo da camada

O design do plano de fundo de uma camada de diálogo afeta a aparência geral do seu curso. Considere essas dicas ao criar sua camada de diálogo.

• Se sua camada de diálogo não tiver um preenchimento de cor de fundo ou tiver um preenchimento de fundo que não seja uma cor, o Storyline 360 cobre o curso com uma sobreposição semitransparente de cinza escuro.
• Se sua camada de diálogo já tiver um fundo semitransparente de qualquer cor, o Storyline 360 cobrirá o curso com essa cor semitransparente.
• Se sua camada de diálogo tiver um fundo opaco de qualquer cor, o Storyline 360 cobre o curso com essa cor, obscurecendo completamente o curso enquanto a camada de diálogo está aberta.

Entenda a compatibilidade

As camadas de diálogo são exclusivas para o player moderno na atualização de maio de 2022 e posteriores para o Storyline 360. Arquivos de projeto com camadas de diálogo não abrirão nas versões anteriores do Storyline 360. Para restaurar a compatibilidade, exclua a camada de diálogo ou altere-a para uma camada padrão.