Ir para o conteúdo principal
Loading...
Skip to article
  • Qualtrics Platform
    Qualtrics Platform
  • Customer Journey Optimizer
    Customer Journey Optimizer
  • XM Discover
    XM Discover
  • Qualtrics Social Connect
    Qualtrics Social Connect

Acessibilidade de insights de site/app


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


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

Pop Over, Slider, InfoBar, and Custom Embedded Feedback Creatives

  • 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.
Qdica: Os botões de destino nesses criativos precisam de edições adicionais para torná-los acessíveis, uma vez que os nomes e as funções dos botões escolhidos podem variar. Consulte as seções vinculadas da página de suporte para obter mais detalhes.

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.
    Clique em Criar novo no lado direito
  3. Selecionar Caixa de diálogo de respostas como seu tipo de interceptor.
    Clique na caixa no lado esquerdo
  4. Nomeie seu interceptor.
    Crie seu interceptor com um nome
  5. Escolha uma pesquisa para vincular ou digite um URL personalizado para direcionar ao.
  6. Clique em Seguinte.
  7. Selecione Botões.
    Selecione Botões e, em seguida, forneça o feedback da etiqueta
  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.
    Clique em Logotipos no lado esquerdo e nomeie seu texto Alt
  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.no tamanho & guia de estilo, adicionando um título de iframe
  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.
Qdica: Se você não estiver usando o fluxo de trabalho guiado para criar seu interceptor, siga as etapas de 7 a 13 para cada criativo.

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.
    Clique em Criar novo no lado direito
  3. Selecionar Botão de feedback como seu tipo de interceptor.
    Clique no ícone do meio do botão Feedback
  4. Nomeie seu interceptor.
    Crie seu interceptor com um nome
  5. Escolha uma pesquisa para vincular ou digite um URL personalizado para direcionar ao.
  6. Clique em Seguinte.
  7. Navegar para Visual & Sentido.
    Vá para Look & sinta-se no lado direito e, em seguida, digite o texto do botão
  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.
    Se clicado, use meu próprio botão para carregar uma imagem do seu computador
  11. Clique em Exibição de pesquisa.
    Clique na exibição da pesquisa no lado esquerdo
  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

Qdica: Se você não tiver acesso a nenhum dos recursos descritos nesta seção, entre em contato com seu Executivo de contas. Para mais informações sobre as diferenças entre feedback digital e CustomerXM para digital, consulte Feedback digital vs. CustomerXM para Digital.
Qdica: Os diálogos responsivos e os botões de feedback não exigem esta etapa.
Atenção: os recursos de codificação personalizada são fornecidos no estado em que se encontram e podem exigir conhecimento de programação para implementação. Nossa equipe de suporte não oferece assistência nem consultoria em codificação personalizada. Ao invés disso, você pode perguntar para nossa comunidade de usuários dedicados. Se você quiser saber mais sobre nossos serviços de codificação personalizados disponíveis para compra, entre em contato com o Executivo de contas da Qualtrics.

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.
    O botão no editor de criativos é clicado duas vezes, revelando uma nova barra de ferramentas na parte superior com um botão Fonte nele
  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.

    Na fonte, a img tag tem uma tag alt, assim como esta imagem

  5. Envolva a<img> tag com uma<span> tag.
    Vagas adicionadas ao texto de origem do botão
  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.

    Uma função adicionada aos tags de span definidos como botão

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.
    O destino no editor de criativos é clicado duas vezes, revelando uma nova barra de ferramentas no topo com um botão Fonte nele
  3. Clique em Origem.
  4. Adicione um atributo role=”button” à<span> tag.
    <span role="button" ... >Conteúdo da caixa de texto</span>

    Um botão de função igual a foi definido no tag span

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

Qdica: Os diálogos responsivos e os botões de feedback não exigem esta etapa.
Atenção: os recursos de codificação personalizada são fornecidos no estado em que se encontram e podem exigir conhecimento de programação para implementação. Nossa equipe de suporte não oferece assistência nem consultoria em codificação personalizada. Ao invés disso, você pode perguntar para nossa comunidade de usuários dedicados. Se você quiser saber mais sobre nossos serviços de codificação personalizados disponíveis para compra, entre em contato com o Executivo de contas da Qualtrics.

Botão Fechar como imagem

  1. Abra o Criativo na guia Criativos.
  2. Clique duas vezes no elemento Fechar que contém a imagem.
    O botão Fechar no Editor de criativos é clicado duas vezes, revelando uma nova barra de ferramentas na parte superior com um botão Fonte.
  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.

    Uma tag alt igual à palavra Close foi adicionada à tag img dentro da fonte

  5. Envolva a<img> tag com uma<span> tag.
    Expandir tags dentro do texto fonte
  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.

    Um atributo de função igual ao botão adicionado ao span

Botão Fechar como texto

  1. Abra o Criativo na guia Criativos.
  2. Clique duas vezes no elemento Close que contém o texto.
    O texto de fechamento no editor de criativos é clicado duas vezes, revelando uma nova barra de ferramentas na parte superior com um botão Fonte.
  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.

    Um atributo de função adicionado ao span definido como botão

Perguntas frequentes

Muitas das páginas neste site foram traduzidas do inglês original usando tradução automática. Embora na Qualtrics tenhamos feito nossa diligência prévia para obter as melhores traduções automáticas possíveis, a tradução automática nunca é perfeita. O texto original em inglês é considerado a versão oficial, e quaisquer discrepâncias entre o inglês original e as traduções automáticas não são juridicamente vinculativas.