Falar sobre formulários acessíveis se tornou meio difícil por ser um assunto que cada um poderá interpretar de uma maneira diferente. Alguns dizem que o correto é criarmos o formulário utilizando listas desordenadas (ul), outros já falam que o correto seria utilizarmos parágrafos (p). Utilizar <p> ou <ul>? Escolha um e seja feliz. 
Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:
- form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
- fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
- legend: define um nome para cada fieldset criado
- label: define um “label” para um determinado controle.
- input, checkbox e radiobutton: elementos de um form.
Conhecida as principais tags, vamos a criação do formulário. Primeiro criaremos a área válida do form:
<form action="/">
aqui iremos montar nosso form
</form>
Dentro da área criada pela tag <form>, iremos dividir as informações em Dados Pessoais e Dados Profissionais utilizando as tags <fieldset> e <legend> para então adicionarmos os campos a serems preenchidos:
<fieldset>
<legend>Dados Pessoais</legend>
<p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>
<p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p>
</fieldset>
<fieldset>
<legend>Dados Profissionais</legend>
<p><label for="txtEmpresa">Empresa <input type="text" id="txtEmpresa" value="" /></label></p>
<p><label for="txtCargo">Cargo <input type="text" id="txtCargo" value="" /></label></p>
</fieldset>
Para finalizar, um botão para o enviao dessas informações:
<p><input type="submit" value="Enviar" /></p>
O resultado final vocês podem ver na imagem abaixo.
Nosso assunto de hoje, dando sequencia ao tutorial xhtml, será sobre tabelas. Vamos falar um pouco sobre tabelas e como tornar nossa tabela acessível.
Muita gente tem horror a tabelas quando o assunto é ‘tableless’, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.
Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.
Conheça as tags:
- <table> – delimitador de uma tabela. é com ele que iremos indicar aonde começa e termina nossa tabela. é dentro dela que iremos adicionar título, cabeçalho, rodapé, células e linhas;
- <caption> – inserida imediatamente após a <table>, define um título para a tabela correspondente;
- <thead> – agrupa linhas de uma tabela definindo o cabeçalho. inserida sempre após a tag <caption>;
- <tfoot> – agrupa linhas de uma tabela definindo o rodapé. inserida sempre após a tag <thead>;
- <tbody> – também agrupa linhas de uma tabela, porém, define seu conteúdo. inserida sempre após a tag <tfoot>;
- <tr> – cria uma linha na tabela;
- <td> – cria uma coluna na tabela;
- <th> – define uma coluna de cabeçalho na tabela.
Vejamos como fica nossa tabela implementada com as tags acima:
<table>
<caption>Criando Tabelas Acessíveis</caption>
<thead>
<tr>
<th>Nome</th>
<th>Site</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Nome</td>
<td>Site</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Fulano 01</td>
<td>Site do Fulano 01</td>
</tr>
<tr>
<td>Fulano 02</td>
<td>Site do Fulano 02</td>
</tr>
<tr>
<td>Fulano 03</td>
<td>Site do Fulano 03</td>
</tr>
</tbody>
</table>
Veja o exemplo da tabela acima.
Dessa forma, teremos uma tabela acessível a todos, principalmente quando for utilizado um leitor de tela – jaws por exemplo – e sem sermos confundidos de que coluna vem o dado lido.
Não esqueça de deixar o seu comentário dizendo o que achou desse tutorial. 
Quando penso em sites acessíveis, além de procurar cumprir todas as premissas definidas pela WCGA 1.0 e WCGA 2.0, penso também na facilidade de navegação dos usuários nesses sites. Dentro dessas facilidades destaco as âncoras, que nos possibilidade saltar de um conteúdo para o outro na tela com apenas um click, e as accesskeys que nos fornece atalhos também para uma navegação rápida em toda a página. Hoje iremos falar sobre as âncoras.
Âncoras. O que são?
Âncoras são pontos-chave dentro de um site/texto. Quem nunca abriu um documento no word e, logo nas primeiras páginas, deu de cara com um índice onde, quando clicado no item te lançava direto para o texto relacionado? Isso é um texto âncora.
Como utilizar as âncoras?
Para criarmos âncoras em nossos sites, devemos conhecer sua sintaxe.
<a name="principal"></a>
Como visto, utilizamos a tag de hyperlink do xhtml com a propriedade name onde name é o nome da ancora. No exemplo proposto, nossa âncora se chama principal.
Criado o destino da âncora, criaremos a chamada. Também é utilizada a tag de hyperlink para a chamada da âncora, vejamos.
<a href="#principal">pular para conteúdo principal</a>
Nota-se que o atributo href recebe o nome da âncora com o prefixo # que identifica que nossa âncora esta na página atual.
As âncoras também podem ser utilizadas para páginas de destino diferentes da atual, vejamos o exemplo abaixo.
<a href="http://gustavoribeiro.com/#principal">conteúdo principal de gustavoribeiro.com</a>
Recomendação
É muito importante criamos uma âncora em nossos sites que salte direto para o conteúdo principal, como pode ser visto no canto superior direito do meu blog. Dessa forma, estamos ajudando os deficientes visuais a chegarem mais rápido no conteúdo principal do site.
Um exemplo interessante são os sites jornalisticos que atualizam automaticamente suas páginas de 3 em 3 minutos e, muitas vezes, esse refresh é feito tão rápido que enquanto os leitores de tela percorrem os links para poder chegar no conteúdo principal, a página já foi atualizada e retorna para o início do site tendo que percorrer todos os links novamente. Se existisse uma âncora para o conteúdo principal do site, seria mais fácil e rápido chegarmos ao conteúdo principal.
P.S.: Por favor, não utilizem refresh automático nas páginas. Eu sou contra e condeno essa prática.
A propriedade border-collapse tem como objetivo dividir ou não as bordas das tabelas via CSS e possui os seguinte atributos: collapse e separate.
Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.
Exemplo de tabela com o atributo separate.
<table style="border:solid 1px #00f">
<tbody>
<tr>
<td style="border:solid 1px #0f0">célula 1</td>
<td style="border:solid 1px #0f0">célula 2</td>
<td style="border:solid 1px #0f0">célula 3</td>
</tr>
</tbody>
</table>
| célula 1 |
célula 2 |
célula 3 |
Exemplo de tabela com o atributo collapse.
<table style="border:solid 1px #00f;border-collapse:collapse">
<tbody>
<tr>
<td style="border:solid 1px #0f0">célula 1</td>
<td style="border:solid 1px #0f0">célula 2</td>
<td style="border:solid 1px #0f0">célula 3</td>
</tr>
</tbody>
</table>
| célula 1 |
célula 2 |
célula 3 |
Outras dicas são bem vindas nos comentários
Ok! Primeiro dia útil do ano e sempre surge essas “to-do lists” como metas para o ano. Nunca fiz essas merdas mas, como tenho que movimentar esse site, lá vai:
- Tomar vergonha na cara e começar a tratar minhas escolioses com RPG (como solicitado pelo médico);
- Entrar em uma academia e perder uns 10 quilos;
- Comprar um iPhone (ou um outro smartphone touch legal);
- Conhecer Fortaleza;
- Voltar a Porto Alegre e rever amigas(os);
- Conhecer Fernando de Noronha (quase impossível);
- Ser menos estressado e reclamão;
- Tentar voltar em Salvador para rever amigas(os);
- Comprar um MacBook (se possível, o pro);
- Conhecer Florianópolis;
- Vender bastante perfume importado e;
- Tomar coragem e sair de casa.