Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

H84: Utilizar um botão com um elemento select para executar uma acção

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir ao utilizador controlar quando é executada uma acção, em vez de a acção ocorrer como um efeito secundário da escolha de um valor para o elemento select . O utilizador pode verificar os diferentes valores do elemento select, ou pode escolher acidentalmente o valor errado, sem originar a execução da acção. Quando o utilizador estiver satisfeito com a sua escolha, basta seleccionar o botão para executar a acção.

Isto é particularmente importante para os utilizadores que estiverem a escolher o valor do elemento select através do teclado, uma vez que navegar nas opções do elemento select altera o valor do controlo.

Exemplos

Exemplo 1: Um Calendário

Uma página Web permite ao utilizador escolher qualquer mês de qualquer ano e visualizar o calendário desse mês. Depois de o utilizador ter definido o mês e o ano, o calendário é apresentado pressionando o botão "Mostrar". Este exemplo responde no scripting do lado do cliente para implementar a acção.

Código Exemplo:

<label for="month">Month:</label>
<select name="month" id="month">
  <option value="1">January</option>
  <option value="2"> February</option>
  ...
  <option value="12">December</option>
</select> 
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">

Exemplo 2: Seleccionar uma acção

Um elemento select contém uma lista de acções possíveis. A acção não é executada até o utilizador pressionar o botão "Executar".

Código Exemplo:

<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Para cada combinação de elemento select /elemento button:

  1. Verifique se o foco (incluindo o foco do teclado) numa opção no elemento select não resulta em quaisquer acções.

  2. Verifique se a selecção do botão executa a acção associada ao valor select actual.

Resultados Esperados