Teste Guiado Inteligente de Elementos Interativos

O IGT de Elementos Interativos suporta o teste de múltiplos estados sem a necessidade de executar novamente os IGTs. Um elemento interativo é simplesmente qualquer coisa com a qual o usuário interage na página da web, como botões, links, campos de entrada, menus, etc.

Como funciona

A primeira coisa que você deve fazer é colocar a página no estado que deseja testar. Depois disso, algumas perguntas simples irão guiá-lo através dos testes de acessibilidade necessários para cada um dos elementos interativos na página.

Clique em "INICIAR" quando estiver pronto para realizar o teste.

Passo 1: Ausente

Primeiro, o IGT vai escanear a página (ou componente) para encontrar todos os elementos interativos. Se o Machine Learning estiver ativado (veja a página de configurações), ele detectará quaisquer elementos que não estejam marcados com atributos interativos (roles, índice de tabulação, etc.) que possam, de fato, ser interativos.

Nesta primeira pergunta, você será solicitado a selecionar quaisquer elementos interativos que foram perdidos. Se nada estiver faltando, simplesmente clique em "PRÓXIMO".

Em seguida, você pode escolher qual elemento gostaria de testar. Por padrão, esses elementos são agrupados "inteligentemente" usando nosso algoritmo para agrupar elementos semelhantes. No entanto, você pode optar por agrupá-los por função ou apresentá-los sem agrupamento algum usando o controle "Agrupar por".

Passo 2: Precisão

Para os elementos que você escolher testar, será solicitado verificar o Nome Acessível, a Função e o Estado do elemento. O Nome Acessível é usado para transmitir o propósito dos elementos interativos, como um rótulo em um campo de formulário. A Função indica qual controle o usuário está interagindo (botão, aba, link, etc.). O Estado informa ao usuário, usando tecnologia assistiva, qual é o estado atual do controle (como selecionado/não selecionado, marcado/não marcado).

Nome Acessível

Você será solicitado a confirmar se o Nome Acessível descreve com precisão o propósito dos elementos interativos.

Função

Em seguida, se o IGT for capaz de detectar a função, ela será pré-selecionada. Você pode substituir a seleção padrão se a função for diferente do que é detectado, escolhendo outra opção em um menu suspenso de funções disponíveis.

Estado(s)

Da mesma forma, o IGT exibirá estados pré-selecionados. Para elementos em que um estado não é relevante, deixe o estado como "Não Aplicável". Após confirmar que o Nome Acessível, a função e o estado estão sendo transmitidos corretamente, você pode testar outro estado do mesmo elemento! Vá em frente e coloque o Elemento Interativo no estado adicional que deseja testar (como marcar uma caixa de seleção, selecionar uma aba, etc.). Uma vez que esteja pronto, clique em "VERIFICAR ESTADO DO ELEMENTO". O IGT detectará o novo estado, e você poderá confirmar se o estado está sendo corretamente transmitido. Isso será repetido para todos os elementos que você selecionou para teste. Quando terminar de testar todos os elementos selecionados e seus estados que deseja testar, selecione "PRÓXIMO".

Executando no Modo Automatizado

Quando o modo IGT automatizado está ativado, o IGT de Elementos Interativos inclui uma etapa de seleção de elementos antes que a IA comece sua análise. Isso dá a você controle direto sobre o escopo do seu teste.

Passo 1: Selecionar elementos para testar

Antes de a análise de IA começar, você verá todos os elementos interativos encontrados na página — tanto aqueles detectados automaticamente quanto quaisquer elementos adicionais que nossa IA identifica como potencialmente interativos, mas não marcados com atributos interativos padrão (roles, índice de tabulação, etc.).

Selecione os elementos que deseja incluir no seu teste, então clique em **Próximo** para prosseguir.

Passo 2: A IA analisa os elementos selecionados

A IA avalia automaticamente o nome acessível, a função e o estado de cada elemento que você selecionou. Depois que a análise for concluída, você será direcionado para a tela de revisão para inspecionar os achados da IA, fazer quaisquer correções e finalizar seu teste. Veja IGTs Automatizados para detalhes sobre como revisar resultados, fazer correções e concluir o seu teste.

O que ele testa

O IGT de Elementos Interativos testa para:

• Nomes acessíveis válidos
• Funções válidas
• Estados válidos

FAQs

O que cada um dos "Estados de Elemento" disponíveis significa?

Abaixo está uma análise de cada um dos estados disponíveis para testar no IGT de Elementos Interativos.

Desativado

Indica que um elemento não é editável ou operável de outra forma. Quando desativado, um elemento não é nem editável nem focável. Desativar um elemento pode ser feito usando a propriedade HTML nativa disabled (preferida) ou aria-disabled="true".

Exemplos Desativados

Botão de envio desativado:

<button type="submit" disabled>Submit</button>

Campo de entrada desativado:

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Pressionado

Indica que um botão de alternância está atualmente "pressionado". O estado pressionado de um elemento é gerenciado através do aria-pressed atributo. Existem 3 valores suportados para aria-pressed:

• "true": indica que o botão de alternância está atualmente pressionado
• "false": indica que o botão de alternância não está atualmente pressionado
• "mixed": indica que os valores de mais de um item controlado pelo botão de alternância não compartilham todos o mesmo valor (tri-state)

Exemplos de Pressionado

Um botão de pausa que não está atualmente pressionado:

<button aria-pressed="false">Pause</button>

Um botão de mudo que está atualmente pressionado:

<button aria-pressed="true">Mute</button>

Expandido

Indica que um elemento, ou outro elemento de agrupamento que ele controla, está atualmente expandido. O estado expandido de um elemento é gerenciado através do aria-expanded atributo. O valor do aria-expanded atributo deve ser definido como "true" quando o elemento (ou elemento de agrupamento que ele controla) está expandido e definido como "false".

Exemplos de Expandido

Um botão expandido:

<button aria-expanded="true">options</button>

Selecionado

Indica que um elemento está atualmente em estado "selecionado". O estado selecionado de um elemento é gerenciado através do aria-selected atributo. O valor do aria-selected atributo deve ser definido como "true" quando o elemento estiver selecionado, "false" quando não estiver e "mixed" para caixas de seleção tri-estado em um estado misto.

Exemplos de Selecionado

Um painel de guias simples gerenciando aria-selected nos role="tab" elementos:

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

Marcado

Indica que um elemento está atualmente em estado "marcado". Comumente usado em caixas de seleção, botões de rádio e outros widgets. O estado marcado de um elemento pode ser gerenciado usando o HTML checked atributo (usado com caixas de seleção nativas) ou o aria-checked atributo. Se usar aria-checked, o valor do atributo deve ser definido como "true" quando o elemento estiver marcado e "false" quando estiver desmarcado.

Exemplos de Marcado

Uma caixa de seleção nativa marcada:

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

Uma caixa de seleção ARIA desmarcada:

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Somente leitura

Indica que um elemento não é editável, mas é operável e focalizável. O estado de somente leitura de um elemento pode ser gerenciado usando o HTML readonly atributo ou o ", "context": "paragraph aria-readonly atributo. Se estiver utilizando ", "context": "paragraph aria-readonly, o valor do atributo deve ser definido como ", "context": "paragraph "true" quando o elemento está em estado de somente leitura e ", "context": "paragraph "false" quando não está.", "context": "paragraph

Exemplos de somente leitura", "context": "heading level 5

Um campo de entrada somente leitura:", "context": "paragraph

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />