Acessibilidade no Dreamweaver 8

Introdução

Salve, galera! Hoje eu vou falar sobre acessibilidade, algo muito discutido hoje em dia. O Dreamweaver 8 trouxe uma grande melhoria nessa área, uma vez que agora todas as ferramentas possuem instrumentos de acessibilidade reforçados. Nesta versão também foi levado em conta que nem todo mundo se importa com usabilidade, então são sempre mostradas telas em que você pode configurar essas opções.

Pré-requisitos

Macromedia Dreamweaver 8 e algum conhecimento em HTML e no programa em si.

Objetivo

Guiar o leitor através das novas opções de acessibilidade da oitava versão do Dreamweaver, que ajudam a tornar a web mais atraente e mais útil para pessoas com necessidades especiais.

Conceitos

O que é acessibilidade? Segundo o dicionário Aurélio, acessibilidade é: “1. Qualidade de acessível; 2. Facilidade na aproximação, no trato ou na obtenção; 3. Condição de acesso aos serviços de informação, documentação e comunicação, por parte de portador de necessidades especiais”.

Um site acessível é um site que qualquer pessoa pode visitar e utilizar, tirando proveito de tudo que a página pode oferecer, independente de qualquer deficiência que ela venha a apresentar.
Para mais informações sobre acessibilidade, visite o site da W3C: http://www.w3.org/.

Conteúdo

Pra começar, vamos habilitar todas as opções de acessibilidade no Dreamweaver. Vá em Edit > Preferences ou pressione Ctrl + U.

Texto alternativo

Após ativar essas opções, todas as vezes que você for inserir um elemento na sua página, será requisitado a você que insira algum atributo alternativo para enriquecer a acessibilidade do seu site.

Inserindo uma imagem acessível

Ao inserir uma imagem, irá surgir a seguinte tela:

Imagem acessível

Alternate text: é o texto alternativo, referente ao atributo alt. Nele você deve por uma pequena descrição do que o elemento (no caso, a foto) apresenta. Por exemplo: você insere a foto de um jardim e gostaria que todos pudessem saber que o seu site evoca um jardim, então você coloca a foto no site e no alt você põe “Foto de um jardim”. Agora, independente da deficiência da pessoa que acessar seu site, ela irá saber que há a foto de um jardim!

Long description: esta parte é reservada para você inserir uma descrição mais detalhada do que é apresentado no objeto. Pode tanto ser um arquivo de texto puro (*.txt) como uma outra página (*.htm, por exemplo).

Criando formulários acessíveis

Primeiramente, insira um formulário.

Agora insira um campo de texto, botão de rádio ou qualquer outro elemento…

Formulário acessível

Surge então esta janela (a menos que você tenha inserido um jump menu). Esta janela é igual para a maioria dos componentes que serão inseridos. Aqui você tem uma série de opções que serão utilizadas para tornar o seu formulário mais acessível.

Label: é a “etiqueta” do componente. Geralmente só é utilizada com radios e checkboxes. Quando você possui um label, o fato de clicar no texto, imagem ou o que quer que seja, irá ativar o componente apontado ou encapsulado. Não entendeu? Não fique com medo… Teste no label abaixo!

Eu sou um label! Clique-me!

Style: aqui você define o estilo que será usado.

Wrap with Label tag: envolve o componente com a tag label e insere o texto logo após o componente, também envolvido.
<label>
<input type=”radio” name=”radio” value=”radio”>
Label do Radio
</label>
Attach Label Tag using for: insere um id no componente e então engloba somente o texto na tag label, fazendo referência ao componente utilizando o atributo for, com o valor do id referente ao componente.
No label tag: não utiliza label.

Position: escolha a posição do label. Antes (before) ou depois (after) do componente.

Access key: tecla de acesso. Este é um recurso muito interessante que ainda é pouco usado. Na access key você define uma tecla (letra ou número) que servirá para acionar este componente. Por exemplo: você tem um campo de texto com a access key definida como J. Ao pressionar Alt + J, o usuário será automaticamente levado ao componente associado.

Nota: se utilizar, lembre-se de avisar o seu usuário de que há este recurso na sua página, pois ele não tem como adivinhar.
Nota 2: nem todo mundo sabe como ativar uma access key.
Nota 3: também fica bem interessante quando se utiliza em links.

Tab Index: recurso importantíssimo. O tab index define a ordem de tabulação de uma página. Para não ficar um código muito inconsistente, recomenda-se que se utilize uma ordem cardinal ordenada. Ao pressionar tab, você será levado à primeira ocorrência de tabindex e ao continuar pressionando tab, você será levado às ocorrências subseqüentes.

Em seguida, pressione OK e veja o resultado. Vale lembrar também que se você pressionar Cancel, o componente será inserido da mesma forma, porém sem opções de acessibilidade.

Criando tabelas acessíveis

Primeiramente, como de praxe, crie uma tabela. Surge a janela:

Tabela acessível

Caption: caption significa legenda. O título aqui inserido ficará anexo à tabela.

Align caption: aqui você define o alinhamento da legenda em relação à tabela. Topo (irá inserir o texto acima da tabela, no centro), base (irá inserir o texto abaixo da tabela, no centro), esquerda (acima da tabela, alinhado à esquerda) e direita (idem ao anterior, porém à direita). O padrão é o topo, no centro.

Summary: este é o sumário ou resumo. Os leitores de tela lerão o sumário para saber do que se trata a tabela. Este texto não será visível ao navegador comum.

Ex.:

Tabela com Caption

Considerações Finais

E por hoje é só, pessoal… Mas eu prometo que voltarei nesse assunto, pois ele é muito importante pra quem está afim de ingressar na era da Web 2.0! E é sempre bom lembrar que há muito material na internet que você pode pesquisar e utilizar para agregar mais acessibilidade à sua página!

Outra coisa… Encorajo vocês a enviarem emails com críticas e sugestões, pois são sempre bem vindas!

Abraços e fiquem com Deus!

Autor: Rafael Jaques – Colunista do Portal MXSTUDIO

Qualquer dúvida envie um email para rafaeljaques@mxstudio.com.br ou acesse o nosso fórum