The Web Standards Project é um grupo independente que luta por standards que assegurem a todos um acesso simples e a baixo custo às tecnologias web.
Nível Iniciante | Intermediário | Avançado
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 incrementarão ainda mais a acessibilidade e usabilidade dos formulários para uma faixa bem maior de usuários.
Sem dúvida alguma uma das mais apropriadas tags a se usar em formulários para incrementar a acessibilidade é a tag <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 a tag <label>,
você pode começar a pensar em sofisticações para seu formulário, sem receio de ter problemas com acessibilidade.
A tag label funciona como uma espécie de indicador de caminho a seguir. Ela diz ao browser/agente de usuário/leitor de tela: "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 no código 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 da tag <label> acresenta 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 foco no campo relacionado. Isto é particularmente útil para checkboxes
e radio buttons que têm uma área reduzida de seleção:
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 /> |
| Age: |
Age:<br /> |
| What colours do you like: |
What colors do you like:<br /> |
|
|
<label for="txtLifeStory">Your
life story:</label><br /> |
|
|
<label for="ddlTown">Favorite
Town:</label><br /> |
Você já tinha ouvido falar de <fieldset> e <optgroup> ?
Não? Então deixe-me apresentá-los à você...
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 naõ me aborreceria - e você? Tem um ditado que diz: ' Dividir para vencer'', e temos um amigo no XHTML, a entidade <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 agora, com vistas ao futuro quando houver pleno suporte.
Abaixo um exemplo do emprego de Fieldset (e sua respectiva entidade legend
- que vem a ser o texto 'My Radio Buttons' descritivo do conteúdo da caixa:
O código de marcação do exemplo acima é:
<fieldset>
<legend>My Radio Buttons</legend>
<select>
<option>Option 0</option>
...
</select>
</fieldset>
Como acontece com a maioria dos elementos do HTML, você pode usar CSS para estilizar fieldset de acordo com suas preferências, por exemplo; como 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:
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 abaixo:
<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> !
Nesta seção vimos algumas tags XHTML 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 alguns soluções para eles.