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:

<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:

<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:

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:

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):

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

<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:

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:

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:

<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.

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