Construindo formulários HTML/XHTML acessíveis

Nível intermediário

Este tutorial foi escrito em três partes distintas classificadas pelo nível conforme links para navegação a seguir:

Nível Iniciante | Nível Intermediário | Nível Avançado

Introdução

Na seção Nível Iniciante, vimos os princípios básicos para a construção do layout e posicionamento dos elementos de formulários em um documento web, com a finalidade de melhorar a acessibilidade. Nesta seção veremos como adicionar ao código do formulário, elementos HTML específicos que aumentarão ainda mais a acessibilidade e usabilidade dos formulários disponibilizando-os para uma faixa bem maior de usuários.

Acrescentando um rótulo que diz: "Eu sou acessível!"

Sem dúvida alguma um dos elementos mais apropriados a se usar em formulários para incrementar a acessibilidade é o elemento LABEL. Na seção Nível Iniciante nós mostramos como pode tornar-se confuso para um leitor de tela o código de um formulário no qual os rótulos descritivos não estão apropriadamente relacionados com os seus elementos. Usando as tags <label> e </label>, você pode começar a pensar em sofisticações para seu formulário, sem receio de ter problemas com acessibilidade.

Para que serve a tag label?

O elemento LABEL funciona como uma espécie de indicador de caminho a seguir. Ele diz ao agente de usuário: "Hey, você está vendo aquele campo ali? Aquele de nome 'firstname'? Bem, aquele campo é meu, e, por favor não não faça confusão com ele nem comigo. Ou, em código XHTML seria assim:

HTML
<label for="firstname">First Name</label><br />
<input type="text" name="firstname" id="firstname" size="20"/>

Isto cria um inconfundível relacionamento entre o texto (rótulo descritivo) e o campo, relacionamento este que só será quebrado se você introduzir erro na marcação do código (notadamente quando aplicada a técnica de copiar-colar um código pronto e depois esquecer-se de mudar alguma id - lembre-se ids devem ser únicas, você não pode ter mais de um elemento em uma página com a mesma id).

Se for de sua conveniência, agora você pode alterar a ordem entre texto e campo sem causar confusão para os dispositivos adaptados, pois eles continuarão a entender qual texto refere-se a que campo:

HTML
<input type="text" name="firstname" id="firstname" size="20"/>
<label for="firstname">First Name</label> 

O uso do elemento LABEL acrescenta um benefício adicional não tão óbvio a primeira vista - muitos browsers renderizam o conteúdo da tag <label> como uma área clicável para levar o foco para o campo relacionado. Isto é particularmente útil para checkboxes e radio buttons que têm uma área reduzida de seleção:

Hit area increased by label tag

Onde posso usar Label?

A tag <label> pode ser usada para todos os elementos de formulário, exceto para os elementos buttons (seu funcionamento independe de links externos). Abaixo uma tabela exemplificando o uso da tag:

Form element looks like Coded like:

<label for="txtFirstName">First Name:</label><br />
<input class="input" type="text" title="Enter your first name" maxlength=" size=" name="txtFirstName" id="txtFirstName" value=">
Age:


Age:<br />
<input class="input" type="radio" title="Choose from one of the options" name="radAge" id="radAge4_0" value="Under30"><label for="radAge4_0">&nbsp;Under 30</label><br />
<input class="input" type="radio" title="Choose from one of the options" name="radAge" id="radAge4_1" value="Over30"><label for="radAge4_1">&nbsp;Over 30</label><br />
What colours do you like:




What colors do you like:<br />
<input class="input" type="checkbox" title="Select what colors you like" name="chk0" id="chk0_0" value="red"><label for="chk0_0">&nbsp;red</label><br />
<input class="input" type="checkbox" title="Select what colors you like" name="chk1" id="chk1_1" value="green"><label for="chk1_1">&nbsp;green</label><br />
<input class="input" type="checkbox" title="Select what colors you like" name="chk2" id="chk2_2" value="blue"><label for="chk2_2">&nbsp;blue</label><br />
<input class="input" type="checkbox" title="Select what colors you like" name="chk3" id="chk3_3" value="purple"><label for="chk3_3">&nbsp;purple</label><br />

<label for="txtLifeStory">Your life story:</label><br />
<textarea title="Write your life story here" name="txtLifeStory" id="txtLifeStory" rows="5" cols="25" class="input"></textarea>

<label for="ddlTown">Favorite Town:</label><br />
<select title="Please choose your favorite town" name="ddlTown" id="ddlTown">
<option value=">Please Select ... </option>
<option value="Swindon">Swindon</option>
<option value="London">London</option>
<option value="Burkino Faso">Burkino Faso</option>
</select>

Agrupando elementos do formulário

Você já tinha ouvido falar de <fieldset> e <optgroup> ? Não? Então deixe-me apresentá-los à você...

o elemento Fieldset

Imagine uma lista de 50 checkboxes com opções de variados assuntos no qual você tenha que examinar todos, para escolher o(s) que interessa(am). Eu não ficaria aborrecido - e você?
Tem um ditado que diz: "Dividir para vencer'', e temos um amigo no XHTML, o elemento FIELDSET.

Usando FIELDSET você divide seus 50 itens, em digamos, 5 grupos de tópicos claramente identificáveis, cada um deles com 10 propriedades/atributos comuns. Você incrementa a usabilidade/acessibilidade fazendo sua página mais clara para usuários com deficiências visuais, ou usuários com restrições cognitivas.

Leitores de tela, quando oferecem suporte para este elemento, o fazem ainda de maneira precária, tornando questionável sua utilidade para usuários cegos. Contudo, o fato de ainda não haver total suporte para este elemento em dispositivos adaptados, não é justificativa para não empregá-los. Ao contrário, as boas práticas aconselham seu emprego desde já e com vistas ao futuro quando houver pleno suporte.

Abaixo um exemplo do emprego de FIELDSET (em conjunto com LEGEND - que vem a ser o texto 'My Radio Buttons' descritivo do conteúdo da caixa (ou seja, do fieldset):

Example of a fieldset

O código de marcação do exemplo acima é:

HTML
<fieldset>
  <legend>My Radio Buttons</legend>
    <select>
      <option>Option 0</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
</fieldset>

Como acontece com a maioria dos elementos HTML, você pode usar CSS para estilizar FIELDSET de acordo com suas preferências, como o exemplo mostrado na figura abaixo:

A CSS-styled fieldset

FIELDSET pode ser usado para agrupar qualquer variedade de elementos input de formulários - e não um agrupamento único como mostrado acima. É perfeitamente legal usar fieldsets aninhados sempre que necessário, como mostrado na figura (um formulário bem simples) abaixo:

Nested fieldset

o elemento Optgroup

Da mesma forma como você pode agrupar inputs de um formulário, pode também agrupar as opções de uma tag <select> usando a tag <optgroup> . Observe o código de marcação a seguir:

HTML
<select name="favoritefood">
  <optgroup label="Dairy products">
    <option>Cheese</option>
    <option>Egg</option>
  </optgroup>

  <optgroup label="Vegetables">
    <option>Cabbage</option>
    <option>Lettuce</option>
    <option>Beans</option>
    <option>Onions</option>
    <option>Courgettes</option>
  </optgroup>

  <optgroup label="Fruit">
    <option>Apples</option>
    <option>Grapes</option>
    <option>Pineapples</option>
  </optgroup>
</select> 

Você percebeu como foi escrito o código acima?
A lista do tipo "drop-down list" foi agrupada por tipos de alimentos. Alguns browsers renderizam corretamente o elemento optgroup e outros simplesmente o ignoram. Mas, assim como ocorre com fieldset, a falta de suporte por alguns browsers e dispositivos adaptados, não é justificativa para não usá-lo.

Example of Optgroup in Safari and Firebird browsers

Obs: não confunda a tag <label> com o atributo label (usado na tag <optgroup>) !

Sumário

Nesta seção vimos alguns elementos HTML que você poderá usar para adicionar semântica extra às suas páginas web e possibilitar agrupamento categorizado, no caso da tag <label>, fazendo seus formulários mais acessíveis. Embora atualmente o suporte para estas tags não esteja plenamente implementado em todos os browsers e dispositivos adaptados, esteja seguro de ter feito a coisa certa para o futuro, quando o suporte for total.

Na seção avançada, estudaremos alguns problemas reais de acessibilidade em formulários e iremos sugerir algumas soluções para eles.

Nível Iniciante | Nível Intermediário | Nível Avançado

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.