acessibilidade « Newton Wagner

10Oct/062

Acessibilidade em 30 dias

Quem busca algumas dicas iniciais sobre Acessibilidade, está com sorte. . Achei esses dias o livro, gratuito, Dive Into Acessibility - 30 days to a more accessible web site. Apesar de ser um pouco antigo, de 2002, ele trás 25 dicas úteis sobre como tornar o seu site mais acessível, informando os benefícios de cada passo para usuários com dificuldades de acesso e também para a integração com outros sistemas.

Vou procurar por uma versão em Português e, caso não encontre, vou estudar a possibilidade de traduzí-lo. Por enquanto, fique com a tradução dos capítulos do livro, que já serve como referência com os passos de como tornar seu site mais acessível em 30 dias.

Primeira Semana

Segunda Semana

Terceira Semana

Quarta Semana

Quinta Semana

Sexta Semana

Mais uma vez, mãos a obra.

Benefícios da Utilização dos Padrões Web

Os padrões web pregam a separação do documento em camadas. Dessa forma, temos arquivos diferentes para a marcação, formatação e comportamento do documento web.

Essa organização implica em benefícios como diminuição do tempo de desenvolvimento e portabilidade.

Depois de projetar e realizar a marcação do seu documento, com xHTML, designers e programadores podem trabalhar ao mesmo tempo, sem interferir diretamente no trabalho um dos outros. Enquanto o primeiro se preocupa com a formatação, usando CSS, o segundo pode realizar as implementações do lado do servidor, e gerando as saídas xHTML. Resumindo, alterações no sistema independem de um designer para aplicar um estilo, e alterações de estilo independem de alterações no sistema, facilitando o trabalho e diminuindo o tempo de desenvolvimento.

Podendo aplicar várias folhas de estilo (CSS) a um mesmo documento, inclusive, especificando mídias diferentes. Isso implica em portabilidade. Todos os dispositivos acessam o mesmo documento, porém, cada um visualizará este documento conforme o estilo definido para o mesmo. É possível, por exemplo, criar estilos diferentes para navegadores de PCs, Handhelds (Palms, celulares, ...) e impressão, considerando suas limitações de acesso, saída e entrada de dados.

Prega-se também a preocupação com a semântica do seu documento. Semântica se ocupa com o significado. Na prática, isso significa marcar seu documento com os elementos corretos para cada seção. Cabeçalhos devem ser definidos com h1, h2 e etc, elementos criados específicamente para isso. Isso abre as portas para que nosso documento seja interpretado por máquinas. Um dos benefícios de seguir esta recomendação é a acessibilidade. Navegadores para cegos, que são capazes de ler o documento, poderiam dizer ao usuário à que se refere aquele trecho, se é uma citação (cite), um endereço (address), trecho de um código (code) e etc.

Outro benefício é a facilidade de indexação dos documentos, razão inicial pela qual Tim Berners-Lee imaginou sua web semântica. É fato que ferramentas de busca como Google, já utilizam a semântica para definir qual resultado da busca é mais relevante. Uma palavra encontrada em um título, ou uma referência (link), é, provavelmente, mais importante do que ela solta em um parágrafo.

Aperte o botão

Tenho que confessar que nunca ma atentei à utilidade da tag button, e sua diferença entre os botões feitos com a tag input, até ler um artigo no Digital-web.

A diferença é que com button, podemos inserir conteúdo dentro do elemento, enquanto que o input aceita apenas um valor, porém, a funcionalidade dos dois elementos é a mesma.

Teríamos:

Teríamos algo assim:

Conseguiu perceber a diferença? No lugar da palavra Enviar, poderíamos colocar o conteúdo que quisermos, assim como formatar, além do próprio botão, nosso parágrafo, utilizando todo o potêncial do CSS.

Esta técnica potencializa o uso de imagens no lugar do botão, sem termos que remover o valor da propriedade value, perdendo a acessibilidade do botão para usuários impossibilitados de visualizar a imagem.

Para mais detalhes, veja o artigo original que deu origem à este post, inclusive o nome (rs): Push my button.

Observação: Não recomendo o uso de estilos inline, conforme o exemplo citado neste post. Fiz dessa forma apenas para facilitar o entendimento do código.

Atualizado 05/10: melhorei o visual do exemplo do uso de button.

Avaliadores de Acessibilidade

Estava navegando no Syxt, uma espécie de Orkut profissional, e encontrei na comunidade de acessibilidade um link para um avaliador de acessibilidade em sites que nunca tinha visto. No blog antigo eu tinha uma lista de avaliadores e como surgiu esta novidade, vou colocar novamente aqui os links:

Da Silva (pt-br);
eXaminator (pt);
Hera (pt);
webXACT (extinto Bobby) (en);
Cynthia Says (en);

É sempre bom lembrar que estes avaliadores são automáticos. Como já disse aqui em outro post sobre acessibilidade, nada substitui um teste real da acessibilidade do site. Porém, é sempre um bom começo passar nesses testes.

Para mais informações sobre a acessibilidade no Brasil, visite o Acessibilidade Brasil.

Lei de Acessibilidade, dos olhos do Bechara

Meu post sobre a Lei de Acessibilidade no Brasil não tinha grandes pretensões, apenas a de explicar uma dúvida que eu vi aparecer em uma lista de discussão.

Porém, o Bechara do iLearn deixou um comentário sobre a realidade da implantação da lei. Vale a pena ler e divulgar.

Siga-me

Posts Recentes

Arquivo

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.

Newton Wagner se desenvolvendo na web

Acessibilidade em 30 dias

Primeira Semana

Segunda Semana

Terceira Semana

Quarta Semana

Quinta Semana

Sexta Semana

Artigos Relacionados:

Benefícios da Utilização dos Padrões Web

Artigos Relacionados:

Aperte o botão

Vou Comprar!

Artigos Relacionados:

Avaliadores de Acessibilidade

Artigos Relacionados:

Lei de Acessibilidade, dos olhos do Bechara

Artigos Relacionados:

Siga-me

Tags

Posts Recentes

Arquivo