Acessibilidade de insights de site/app

Recursos de acessibilidade de insights de site/app

Os projetos de Website / App Insights têm muitos recursos integrados para facilitar a acessibilidade. Estes são alguns dos recursos de acessibilidade que você pode esperar encontrar em toda a plataforma:

• Todos os elementos do Criativo são tabuláveis e clicáveis por meio do teclado. Oferecemos suporte a TAB, ESC e Enter (e retornamos para usuários Mac), mas não há suporte a teclas de seta ou outras.
• Para criativos de pop-over e de diálogo responsivo, os usuários não podem fazer guias fora do Criativo até que ele seja fechado. Além disso, não permite tabulação na página subjacente.
• Para criativos de PopOver e Diálogo responsivo, o foco é aplicado diretamente ao Criativo assim que ele for exibido.
• Se os destinos incorporados estiverem sendo usados, os usuários poderão clicar com o botão direito no destino incorporado e adicionar um título iFrame.
• Se as janelas incorporadas estiverem sendo usadas nas opções avançadas do Interceptor, os usuários poderão adicionar um título iFrame.

Em seguida, abordaremos os recursos de acessibilidade exclusivos às necessidades do design de cada Criativo.

Criativo da caixa de diálogo responsiva

• Fácil de definir Alt Text: se um ícone personalizado for usado na caixa de diálogo, permitiremos que os usuários especifiquem Alt Text para indicar o texto que o leitor de tela deve ler quando o foco estiver no ícone.
  Qdica: se você selecionar Incluir um ícone para descartar o interceptor, o texto alternativo do botão X exibido na parte superior direita do Criativo será “Fechar”. Este texto alternativo também está localizado.
• Etiquetas 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, você pode querer que o leitor de tela leia um contexto adicional, como, por exemplo, “Clique neste botão para abrir uma nova janela de pesquisa”. Neste caso, você pode indicar a etiqueta ARIA para os controles de botão.
• Diferenças de cor para elementos dentro do próprio Criativo: Embora a Qualtrics não possa fornecer orientação de contraste direta, os usuários têm controle total para escolher e escolher a cor apropriada para os elementos do Criativo.

Botão Criativo de feedback

• Títulos Iframe: Capacidade de especificar um título iframe na seção Animação.
• Alt-Text do botão personalizado: capacidade de especificar texto alternativo para uma imagem se um botão personalizado estiver sendo usado.

PopOver, Controle deslizante, Barra de informações e Criativos HTML personalizados

• Diferenças de cor para elementos dentro do próprio Criativo: Embora a Qualtrics não possa fornecer orientação de contraste direta, os usuários têm controle total para escolher e escolher a cor apropriada para os elementos do Criativo.

SDK do aplicativo para celular

• Acessível aos leitores de tela móvel:
  • Torna mais fácil para os leitores de tela navegar e sair do diálogo.
  • Permite que o texto dentro de botões e também o tipo do item (por exemplo, botão) sejam lidos.

Criando um Criativo de diálogo responsivo acessível

Esta seção aborda como editar um criativo de diálogo responsivo para que ele seja acessível para leitores de tela.

1. Navegue para a página de Projetos e, em seguida, crie um projeto de Website/App Insights.
2. Clique em Criar novo.
   
3. Selecionar Caixa de diálogo de respostas como seu tipo de interceptor.
   
4. Nomeie seu interceptor.
   
5. Escolha uma pesquisa para vincular ou digite um URL personalizado para direcionar ao.
6. Clique em Seguinte.
7. Selecione Botões.
   
8. Insira o texto apropriado para cada um dos botões na seção Texto. Esse texto será exibido visualmente aos usuários e será lido em voz alta por leitores de tela.
9. Clique em Logos & images.
   
10. Modifique a seção Texto alternativo para fornecer uma descrição escrita do gráfico. Os visitantes que usam leitores de tela terão o texto alternativo lido para eles para que saibam qual é a imagem se forem prejudicados pela visão.
11. Se você estiver exibindo sua pesquisa diretamente na caixa de diálogo, navegue até Tamanho e estilo.
12. Campo de seleção para Exibir pesquisa diretamente na caixa de diálogo.
13. Na caixa de título Iframe, insira o texto que você deseja que seja lido pelos leitores de tela quando encontrarem sua pesquisa pela primeira vez.

Criação de um criativo de botão de feedback acessível

1. Navegue para a página de Projetos e, em seguida, crie um projeto de Website/App Insights.
2. Clique em Criar novo.
   
3. Selecionar Botão de feedback como seu tipo de interceptor.
   
4. Nomeie seu interceptor.
   
5. Escolha uma pesquisa para vincular ou digite um URL personalizado para direcionar ao.
6. Clique em Seguinte.
7. Navegar para Visual & Sentido.
   
8. Insira o texto apropriado para os botões na seção Texto do botão. Esse texto será exibido visualmente aos usuários e será lido em voz alta por leitores de tela.
9. Se estiver usando um botão personalizado, selecione Usar meu próprio botão e carregue a imagem apropriada do seu computador.
10. Depois de carregar a imagem, altere o texto Alt para fornecer uma descrição escrita do botão. Os visitantes que usam leitores de tela terão o texto alternativo lido para eles para que saibam qual é a imagem se forem prejudicados pela visão.
    
11. Clique em Exibição de pesquisa.
    
12. Especifique um título de iframe na seção do título do iframe. Se você adicionou um destino incorporado ao interceptor, essa opção adicionará um título ao iFrame que os leitores de tela podem interpretar.

Adição de texto alternativo e funções aos botões de destino

Se o Destino estiver na forma de uma imagem de 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.

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

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

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

   

5. Envolva a<img> tag com uma<span> tag.
   
6. Adicione um atributo role=”button” à<span> tag.

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

   Qdica: O atributo da função diz ao visitante que esse elemento é um botão que pode ser ativado por meio de um leitor de tela.

   

Destinos padrão (texto de link)

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

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

   

Adição de texto alternativo e funções aos botões Fechar

Botão Fechar como imagem

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

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

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

   

5. Envolva a<img> tag com uma<span> tag.
   
6. Adicione um atributo role=”button” à<span> tag.

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

   Qdica: O atributo da função diz ao visitante que esse elemento é um botão que pode ser ativado por meio de um leitor de tela.

   

Botão Fechar como texto

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

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

   Qdica: O atributo da função diz ao visitante que esse elemento é um botão que pode ser ativado por meio de um leitor de tela.

   

Perguntas frequentes