Banner propaganda da DevMedia - Cursos de desenvolvimento web

:: Construindo formulários HTML/XHTML acessíveis - 2a. Parte

Publicado em: 18/04/2006

Autor: Ian Lloyd
URL do original: http://www.webstandards.org...accessible-forms.html
Título original: Accessible HTML/XHTML forms
Este artigo é uma tradução do original em inglês publicado no site da WaSP e está dividido em três partes.
Nível Iniciante | Intermediário | 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> </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:

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

<fieldset>
<legend>My Radio Buttons</legend>
<select>
<option>Option 0</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 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.

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 | Intermediário | Avançado

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo