Tutorial CSS | Formulários acessíveis - Parte 2
Construindo formulários HTML/XHTML acessíveis
Crédito: essa matéria é uma tradução e foi escrita por Ian Lloyd.
URL do original: Acessible HTML/XHTML Forms
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
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:
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:
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:
<input class="input" type="text" title="Enter your first name" maxlength=" size=" name="txtFirstName" id="txtFirstName" value=">
<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 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 />
Please Select ... Swindon London Burkino Faso <label for="ddlTown">Favorite Town:</label><br />
<select title="Please choose your favorite town" name="ddlTown" id="ddlTown">
<option value=">Please Select ... </option>
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 é:
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">
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 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.