Os blocos de acordeão e abas permitem que você explore conceitos relacionados em interações ricas em mídia. Mostre itens um por um ou compare vários conceitos em um formato limpo e fácil de digerir.

1. Insira blocos de acordeão e abas
2. Adicionar conteúdo e novos itens
3. Alternar entre tipos de blocos
4. Modificar as configurações de bloqueio
5. Acessibilidade

Etapa 1: inserir blocos de acordeão e abas

1. Abra um curso Rise 360 e edite uma aula existente ou crie uma nova.
2. Clique em Todos os blocos na barra de atalho dos blocos ou no ícone de inserção de bloco que aparece quando você passa o mouse sobre um limite entre os blocos.
3. Na barra lateral, selecione a categoria Interativo e, em seguida, selecione Acordeão ou Guias.

Etapa 2: adicionar conteúdo e novos itens

1. Passe o mouse sobre o bloco para acessar a barra de ferramentas de design à esquerda. Clique no ícone Conteúdo.
2. O painel de edição se abre no lado esquerdo. Você pode modificar o título e o texto de cada item.
   
   Clique no ícone da pasta de mídia para adicionar imagens ou conteúdo da web. Se a mídia já tiver sido carregada, clique em Editar para substituí-la ou removê-la. Você também pode recortar, adicionar legendas e adicionar tags alt à mídia existente. Clique no ícone de áudio para adicionar áudio AI gerado, áudio gravado ou fazer upload de um arquivo de áudio.
3. Clique no botão Adicionar item na parte inferior da barra lateral para adicionar itens adicionais. Você pode adicionar quantos itens quiser! Observe que, se você adicionar mais de quatro itens nas guias, os alunos precisarão rolar para ver todos eles.
4. Clique no X no canto superior direito para retornar à sua aula.

Você também pode editar o corpo do texto diretamente nos blocos de acordeão e abas. No entanto, você só pode editar o texto do título, imagens, multimídia e conteúdo da Web no painel de edição.

Etapa 3: alternar entre os tipos de bloco

Acha que suas abas ficariam melhores como itens de acordeão ou vice-versa? Então mude isso! Passar o mouse sobre um bloco de abas existente. Clique no botão seletor de tipo de bloco que aparece à esquerda da barra de ferramentas de design e selecione Acordeão ou Guias no menu.

É isso mesmo! Inverta o processo se quiser voltar atrás.

Etapa 4: Modificar as configurações de bloqueio

Modifique a aparência do seu conteúdo na tela passando o mouse sobre um bloco existente para acessar a barra de ferramentas de design à esquerda. Clique no ícone Estilo para acessar as opções de plano de fundo do bloco. Você também tem a opção de manter um fundo branco para itens de acordeão e guia ao modificar o plano de fundo do bloco. O menu Formatar fornece opções para alterar o comportamento do preenchimento e do acordeão, alternar o posicionamento do áudio e desativar o zoom das imagens.

Acessibilidade

As guias e os blocos de acordeão foram projetados para oferecer suporte à acessibilidade, mas, como autor, você controla a acessibilidade do conteúdo que adicionar. Siga as dicas abaixo para ajudar seu conteúdo a funcionar bem para todos os alunos.

• Adicione texto alternativo (texto alternativo) para todas as imagens significativas. Descreva o que a imagem mostra e por que ela é importante no contexto, não apenas em sua aparência. Marque imagens puramente decorativas para que os leitores de tela as ignorem (1.1.1 Conteúdo não textual).

• Inclua legendas ocultas para vídeos. Certifique-se de que as legendas sejam precisas, sincronizadas com o áudio e incluam sons não falados relevantes ao adicionar significado (1.2.2 Legendas [Pré-gravadas]).

• Forneça descrições de áudio ou transcrições de vídeos com conteúdo visual importante. A transcrição deve capturar todo o conteúdo falado e as principais informações visuais não abordadas na narração (1.2.1 Somente áudio e somente vídeo [Pré-gravado]).

• Verifique o contraste do texto ao alterar as cores do plano de fundo. Procure pelo menos uma proporção de 4,5:1 para o corpo do texto e 3:1 para texto grande (1.4.3 Contraste [Mínimo]).

Para obter mais orientações sobre a criação de conteúdo acessível, consulte as dicas de design de acessibilidade em nossos artigos abaixo:

• Rise 360: Como criar um curso acessível

• Índice de acessibilidade

Navegação pelo teclado

A seção a seguir descreve o que os alunos que navegam em um treinamento com um teclado podem esperar ao usar acordeão e blocos de abas. Essas informações também podem ajudá-lo a verificar o comportamento esperado durante o teste de acessibilidade.

Bloco de acordeão

• O foco começa no primeiro cabeçalho do acordeão.

• Pressione Tab e Shift + Tab para se mover entre os cabeçalhos do acordeão.

• Quando o foco está no cabeçalho do acordeão de um painel reduzido, Enter ou Space expande o painel.

• Quando o foco está no cabeçalho acordeão de um painel expandido, Enter ou Space contrai o painel.

• Se o painel acordeão estiver expandido e contiver conteúdo interativo, como uma imagem ou um vídeo, pressionar Tab enquanto estiver no cabeçalho moverá o foco para esses itens.

Bloco de abas

• O foco começa no primeiro elemento da guia.

• Quando o elemento da guia estiver em foco, use as teclas de seta para a esquerda e para a direita para se mover entre as guias.

• Pressione Tab para ir até o painel de abas e Shift + Tab para voltar ao elemento de tabulação.

• Se o foco estiver no último elemento da guia, pressionar a tecla de seta para a direita move o foco para a primeira guia. Se o foco estiver no primeiro elemento da guia, pressionar a tecla de seta para a esquerda move o foco para a última guia.

• Se o painel de guias contiver conteúdo interativo, como uma imagem ou um vídeo, pressionar Tab enquanto estiver no painel de guias moverá o foco para esses itens.

Experiência de leitura de tela

A seção a seguir descreve o que os alunos que usam leitores de tela podem esperar ao navegar pelos blocos de acordeão e abas. Você também pode usá-lo para verificar o comportamento esperado durante o teste de acessibilidade.

Bloco de acordeão

• O foco começa no primeiro cabeçalho do acordeão.

• O leitor de tela anuncia o título, o estado e o nível do título — por exemplo, “O botão TÍTULO reduziu o título de nível 2”.

• Pressione Tab e Shift + Tab para se mover entre os cabeçalhos do acordeão.

• Quando o foco está no cabeçalho do acordeão de um painel reduzido, Enter ou Space expande o painel. O leitor de tela anuncia “expandido”. Pressione a tecla de seta para baixo para mover o foco para o conteúdo. O leitor de tela anuncia “TÍTULO + região”, seguido pelo conteúdo. Pressione a tecla de seta para cima para voltar ao cabeçalho do acordeão.

• Quando o foco está no cabeçalho acordeão de um painel expandido, Enter ou Space contrai o painel. O leitor de tela anuncia “desmoronado”.

• Se o painel acordeão estiver expandido e contiver conteúdo interativo, como uma imagem ou um vídeo, pressionar Tab enquanto o foco estiver no conteúdo moverá o foco para esses itens.

Bloco de abas

• O foco começa no primeiro elemento da guia.

• O leitor de tela anuncia o “controle de guias” para indicar que o aluno entrou em um bloco de guias, seguido pelo título do primeiro elemento da guia — por exemplo, “controle de guia, guia TÍTULO selecionada 1 de 3”.

• Quando o elemento da guia estiver em foco, use as teclas de seta para a esquerda e para a direita para se mover entre as guias. O leitor de tela anuncia o título e o estado do elemento da guia — por exemplo, “A guia TÍTULO foi selecionada 2 de 3”.

• Pressione Tab para ir até o painel de abas e Shift + Tab para voltar ao elemento de tabulação. O leitor de tela anuncia primeiro o título do elemento da guia — por exemplo, “Página de propriedades TÍTULO” seguido pelo conteúdo do painel da guia.

• Se o foco estiver no último elemento da guia, pressionar a tecla de seta para a direita move o foco para a primeira guia. Se o foco estiver no primeiro elemento da guia, pressionar a tecla de seta para a esquerda move o foco para a última guia.

• Se o painel de guias contiver conteúdo interativo, como uma imagem ou um vídeo, pressionar Tab enquanto estiver no painel de guias moverá o foco para esses itens.

Experiência móvel

A seção a seguir descreve o que os alunos que usam leitores de tela móveis podem esperar ao navegar pelos blocos de acordeão e abas. Você também pode usá-lo para verificar o comportamento esperado durante o teste de acessibilidade.

Bloco de acordeão

• O foco começa no primeiro cabeçalho do acordeão.

• Toque duas vezes para abrir um acordeão. Deslize para a direita para acessar o conteúdo. Deslize para a esquerda para retornar ao cabeçalho do acordeão. Toque duas vezes novamente para fechá-lo.

• Se um cabeçalho estiver fechado, deslize para a direita para ir para o próximo cabeçalho de acordeão.

• Se um cabeçalho estiver aberto, deslize para a direita para acessar o conteúdo. Continuar deslizando para a direita do conteúdo move o foco para o próximo cabeçalho de acordeão.

Bloco de abas

• O foco começa no primeiro elemento da guia.

• Deslize para a direita para ir para o próximo elemento da guia. Toque duas vezes para selecioná-lo.

• Continue deslizando para a direita pelos elementos da guia para acessar o painel da guia e ouvir seu conteúdo.

• Deslize para a esquerda para voltar para um elemento de guia.

Nossa abordagem

Os blocos de acordeão e abas foram construídos usando as orientações do WAI-ARIA Authoring Practices Guide (APG), especificamente o padrão de acordeão e o padrão de abas.

Essa abordagem ajuda os alunos a:

• Entenda que a interação contém várias seções de conteúdo

• Mova-se entre as seções com eficiência usando controles de teclado padrão

• Saiba qual seção está atualmente expandida ou ativa

Realizamos testes de usabilidade com usuários de leitores de tela e teclados para ajudar a embasar essa abordagem. No entanto, os padrões de acessibilidade podem variar de acordo com o contexto, e nenhuma solução única funciona em todos os cenários. Continuaremos avaliando e aprimorando essas experiências ao longo do tempo com base no feedback dos alunos e na evolução das melhores práticas.