Acessibilidade insights de sites/aplicativos

Recursos Acessibilidade dos insights do site/aplicativo

projetos do Website Insights têm muitos recursos incorporados para facilitar acessibilidade. Em particular, recomendamos que você experimente uma caixa de diálogo de respostas ou um botão de feedback, que foram projetados com a acessibilidade em mente.

Nesta página, abordaremos configurações específicas e práticas recomendadas para melhorar a acessibilidade do seu projeto do Website Insights.

Criação de uma caixa de diálogo responsiva acessível

As caixas de diálogo responsivas são sobreposições de sites que foram desenvolvidas com a acessibilidade em mente. A seguir, destaque alguns dos recursos acessibilidade que você pode esperar encontrar:

• Texto alternativo fácil de definir: Se um ícone personalizado for usado na caixa de diálogo, permitimos que os usuários especifiquem o Texto alternativo para indicar o texto que o leitor de tela deve ler quando o foco estiver no ícone.
  Qdica: se você optar por Incluir um ícone para descartar a interceptor, o texto alternativo do botão X que aparece no canto superior direito da caixa de diálogo será “fechar” Esse texto alternativo também é localizado.
• Rótulos ARIA para controles de botão: Por padrão, os leitores de tela lerão o texto que você especificar para o rótulo do botão. No entanto, em alguns casos, talvez você queira que o leitor de tela leia um contexto adicional, como “Clique neste botão para abrir uma nova janela pesquisa ” Nesse caso, você pode especificar o rótulo ARIA para os controles de botão.
• Títulos de iframe para pesquisas incorporadas: Se quiser incorporar uma pesquisa em seu diálogo, é fácil adicionar um título de iframe para leitores de tela.
• Contrastes de cores para elementos dentro do próprio Criativo: Embora Qualtrics não possa fornecer orientação direta sobre o contraste, você pode ajustar a cor dos botões e do texto de sua caixa de diálogo conforme necessário.

Criando um botão de feedback acessível Criativo

Os botões de feedback são guias na lateral de uma página em que o usuário pode clicar para deixar um feedback. Aqui estão alguns recursos acessibilidade que o botão de feedback tem:

• Títulos de iframe: Capacidade de especificar um título de iframe na seção Animação.
• Texto alternativo de botão personalizado: Por padrão, os leitores de tela lerão o texto que você especificar para o rótulo do botão. No entanto, em alguns casos, talvez você queira usar uma imagem personalizada para o seu botão. Nesse caso, você pode especificar o texto alternativo para a imagem do botão.
• Títulos de iframe para pesquisas incorporadas: Se quiser incorporar uma pesquisa em seu diálogo, é fácil adicionar um título de iframe para leitores de tela.
• Contrastes de cores para elementos dentro do próprio Criativo: Embora Qualtrics não possa fornecer orientação direta sobre o contraste, você pode ajustar a cor do fundo e do texto do seu botão conforme necessário.

Adição de texto alternativo e funções aos botões Destino para criativos herdados

Se o seu Destino estiver na forma de uma imagem botão que você carregou, adicionar texto alternativo e um atributo de função ajuda o leitor de tela a entender o que o botão deve dizer e fazer. Esse conselho é para criativos herdados, como o pop over ou o infobar.

1. Abra seu Criativo na guia Creatives.
2. Clique duas vezes no elemento Destino que contém a imagem.
   
3. Clique em Fonte.
4. Dentro da tag <img>, adicione um atributo alt <img alt="text here" /> à tag e defina o valor igual ao texto da imagem.

   <img alt="Sign Up Now" ... />

   Qdica: O software de leitura de tela lerá em voz alta o que está contido no atributo alt quando chegar à imagem.

   

5. Coloque a tag <img> ao redor de uma tag <span>.
   
6. Adicione um atributo role=”button” à tag <span>.

   <span role="button"><img .../></span>

   Qdica: O atributo role informa ao visitante que usa um leitor de tela que esse elemento é um botão que pode ser ativado.

   

Metas padrão (texto do link)

1. Abra seu Criativo na guia Creatives.
2. Clique duas vezes no elemento Destino que contém o texto.
   
3. Clique em Fonte.
4. Adicione um atributo role=”button” à tag <span>.

   <span role="button" ... >Conteúdo da caixa de texto</span>

   

Adição de texto alternativo e funções a botões de fechamento para criativos herdados

Criativos antigos, como pop overs e controles deslizantes, exigem personalização adicional para tornar seus botões de fechamento acessíveis.

Botão Fechar como Imagem

1. Abra seu Criativo na guia Creatives.
2. Clique duas vezes no elemento Fechar que contém a imagem.
   
3. Clique em Fonte.
4. Adicione o atributo alt=”close” à tag <img>.

   <img alt="close" ... />

   Qdica: o software de leitura de tela lerá em voz alta o que está contido no atributo alt quando chegar à imagem.

   

5. Coloque a tag <img> ao redor de uma tag <span>.
   
6. Adicione um atributo role=”button” à tag <span>.

   <span role="button"><img .../></span>

   Qdica: O atributo role informa ao visitante que usa um leitor de tela que esse elemento é um botão que pode ser ativado.

   

Botão Fechar como texto

1. Abra seu Criativo na guia Creatives.
2. Clique duas vezes no elemento Fechar que contém o texto.
   
3. Clique em Fonte.
4. Adicione um atributo role=”button” à tag <span>.

   <span role="button" ...>Conteúdo da caixa de texto</span>

   Qdica: O atributo role informa ao visitante que usa um leitor de tela que esse elemento é um botão que pode ser ativado.

   

Perguntas frequentes