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 interaja na página da web, como botões, links, campos de entrada, menus, etc.

Como funciona

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

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

Etapa 1: Falta

Primeiro, o IGT escanhará a página (ou componente) para encontrar todos os elementos interativos. Se o Aprendizado de Máquina estiver habilitado (veja a página de configurações), ele detectará quaisquer elementos que não estejam marcados com atributos interativos (funções, í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 "NEXT".

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 escolher agrupá-los por função ou apresentá-los sem agrupamento, usando o controle "Group by".

Etapa 2: Precisão

Para os elementos que você escolher para testar, será solicitado que você verifique 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 com qual controle o usuário está interagindo (botão, aba, link etc.). O Estado informa ao usuário que utiliza 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 foi detectado, a partir de um menu suspenso de funções disponíveis.

Estado(s)

Da mesma forma, o IGT exibirá os estados pré-selecionados. Para elementos onde um estado não é relevante, deixe o estado como "Não Aplicável". Depois de 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 você gostaria de testar (como marcar uma caixa de seleção, selecionar uma aba etc.). Quando estiver pronto, clique em "CHECK ELEMENT'S STATE". O IGT detectará o novo estado e você poderá confirmar se o estado está sendo transmitido corretamente. Isso será repetido para todos os elementos que você selecionou para testar. Quando terminar de testar todos os elementos selecionados e seus estados que deseja testar, selecione "NEXT".

Executando no Modo Automatizado

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

Etapa 1: Selecione os elementos para testar

Antes que a análise da IA comece, você será apresentado a todos os elementos interativos encontrados na página — tanto aqueles detectados automaticamente quanto qualquer elemento adicional que a nossa IA identifique como potencialmente interativo, mas que não esteja marcado com atributos interativos padrão (funções, índice de tabulação, etc.).

Selecione os elementos que você quer incluir no seu teste, depois clique em Próximo para continuar.

Etapa 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. Uma vez concluída a análise, você será levado 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 completar seu teste.

O que ele testa

O IGT de Elementos Interativos testa:

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

Perguntas Frequentes

O que significam cada um dos "Estados dos Elementos" disponíveis?

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. Quando desativado, um elemento não é editável nem focável. Desativar um elemento pode ser feito usando a propriedade nativa HTML disabled (preferido) ou aria-disabled="true".

Exemplos de Desativado

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 via o atributo aria-pressed. 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 (triestado)

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 atributo aria-expanded. O valor do atributo aria-expanded deve ser definido como "true" quando o elemento (ou elemento de agrupamento que ele controla) está expandido e configurado como "false".

Exemplos de expandido

Um botão expandido:

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

Selecionado

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

Exemplos de selecionado

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

<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 um 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 atributo HTML checked (usado com caixas de seleção nativas) ou o atributo aria-checked. Se usar aria-checked, o valor do atributo deve ser definido como "true" quando o elemento está marcado e "false" quando não está marcado.

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 focável. O estado somente leitura de um elemento pode ser gerenciado usando o atributo HTML readonly ou o atributo aria-readonly. Se usar aria-readonly, o valor do atributo deve ser definido como "true" quando o elemento está em estado somente leitura e "false" quando não está.

Exemplos de somente leitura

Um campo de entrada somente leitura:

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