Técnicas para as WCAG 2.0

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

-

H71: Fornecer uma descrição para grupos de controlos de formulário utilizando elementos fieldset e legend

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um agrupamento semântico para controlos de formulário relacionados. Isto permite aos utilizadores compreender a relação dos controlos e interagir com o formulário de forma mais rápida e eficaz.

Os controlos de formulário podem ser agrupados adicionando-lhes o elemento fieldset . Assim, todos os controlos num determinado fieldset estão relacionados. O primeiro elemento dentro do fieldset deve ser um elemento legend, que fornece uma etiqueta ou instruções para o grupo. Se pretendido, os fieldsets podem ser encaixados, embora isso possa provocar uma confusão se for em excesso.

O agrupamento de controlos é mais importante para caixas de verificação e botões de opção relacionados. Um conjunto de botões de opção ou caixas de verificação é relacionado quando todos submetem valores para um único campo indicado. Funcionam da mesma forma que as listas de selecção, permitindo ao utilizador escolher a partir de um conjunto de opções, com a excepção de que as listas de selecção são controlos únicos, enquanto os botões de opção e as caixas de verificação são controlos múltiplos. Como são controlos múltiplos, é particularmente importante que sejam agrupados de forma semântica, de modo a poderem ser tratados mais facilmente como um único controlo. É frequente os agentes de utilizador apresentarem o valor de legend antes da etiqueta de cada controlo, para lembrar aos utilizadores que fazem parte do mesmo grupo.

Também pode ser útil agrupar outros conjuntos de controlos que não estejam tão intimamente relacionados como os conjuntos de botões de opção e caixas de verificação. Por exemplo, podem ser agrupados vários campos com o endereço de um utilizador com uma legenda de "Endereço".

Por vezes, os autores evitam utilizar o elemento fieldset devido à apresentação predefinida no browser, que desenha um contorno à volta dos controlos agrupados. Este agrupamento visual também é útil e os autores deviam considerar seriamente mantê-lo (ou alguma forma de agrupamento visual). O efeito visual pode ser modificado no CSS, substituindo a propriedade "border" do fieldset e a propriedade "position" de legend.

Quando um pequeno grupo de botões de opção relacionados inclui instruções claras e selecções distintas, poderá não ser necessário utilizar fieldsets e legends; a técnica H44: Utilizar elementos label para associar etiquetas de texto a controlos de formulário também pode ser suficiente.

Exemplos

Exemplo 1: Um teste de escolha múltipla

Este exemplo mostra um item de teste com uma pergunta e cinco respostas possíveis. Cada resposta é representada por um botão de opção (input type="radio"). Os botões de opção estão contidos num fieldset. A pergunta do teste está marcada com o elemento legend .

Código Exemplo:

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">William Shakespeare</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">Rudyard Kipling</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">George Bernard Shaw</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">Ernest Hemingway</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">Charles Dickens</label>
</fieldset> 

Exemplo 2: Um conjunto de caixas de verificação

A página Perfil de Utilizador de um sítio da Web permite aos utilizadores indicar os seus interesses, seleccionando várias caixas de verificação. Cada caixa de verificação (input type="checkbox") tem um label. As caixas de verificação estão contidas num fieldset e o elemento legend inclui a indicação para todo o grupo de caixas de verificação.

Código Exemplo:

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">Photography</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">Watercolor</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">Acrylic</label>
  …
</fieldset> 

Exemplo 3: Botões de opção que submetem para o mesmo campo indicado

Este exemplo pede ao utilizador que escolha um único filósofo. Tenha em atenção que cada campo tem o mesmo atributo "name", a indicar que estes botões de opção estão relacionados (todos submetem o mesmo campo), e devem ser agrupados conforme ilustrado. Tenha igualmente em atenção que, enquanto os atributos "name" são os mesmos, os atributos "id" têm de ser exclusivos.

Código Exemplo:

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>Your preferred philosopher</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">Socrates</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">Plato</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">Aristotle</label>
  </fieldset>
  </form> 

Nota: Os grupos de caixas de verificação relacionadas funcionam da mesma forma, com a excepção de que o utilizador pode indicar mais de uma preferência para o campo.

Exemplo 4: Controlos relacionados de forma lógica

Neste exemplo, os campos de formulário para endereços residenciais e postais são distinguidos pelo valor de legend em cada agrupamento fieldset .

Código Exemplo:

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>Residential Address</legend>
     <label for="raddress">Address: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">Postal/Zip Code: </label>
     <input type="text" id="rzip" name="rzip" />
     ...more residential address information...
   </fieldset>
   <fieldset>
     <legend>Postal Address</legend>
     <label for="paddress">Address: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">Postal/Zip Code: </label>
     <input type="text" id="pzip" name="pzip" />
     ...more postal address information...
   </fieldset>
</form>

Recursos

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

Testes

Procedimento

  1. Verifique se os grupos de elementos input relacionados de forma lógica estão incluídos num elemento fieldset.

  2. Verifique se algum grupo de elementos input de type="radio" ou type="checkbox" com o mesmo atributo name está incluído num elemento fieldset .

  3. Verifique se cada fieldset tem um elemento legend que inclua uma descrição desse grupo.

Resultados Esperados