Acabei de ver um post do Ivo Gomes, sobre os 10 principais erros na acessibilidade web:

1. Usar frases grandes no texto ALT das imagens

2. Usar caracteres aleatórios para separar os links

3. Inserir texto nos campos vazios dos formulários

4. Usar teclas de atalho

5. Usar resumos nas tabelas (só são importantes se adicionarem valor à tabela)

6. Esquecer os conteúdos

7. Preocupar-se com grandes declarações sobre a acessibilidade

8. Agonizar com os acrônimos e abreviações

9. Alterar a ordem das tabulações (a não ser que haja uma boa razão para isso)

10. Esquecer-se de ouvir o site num leitor de tela

Veja com mais detalhes cada um dos itens no blog dele

Sempre digo isso, mas quando postei sobre a preocupação com acessibilidade de como usar o site do BBC que achei bárbaro, quando vejo isso em outro determinado site esse “help” sinto a mesma emoção, como é o caso da Tribal Group.

O MAQ (do site Bengaja Legal) lançou seu site sobre Acessibilidade digital, com dicas e artigos interessantes!

Confira: http://acessibilidadelegal.com

Os cursos on-line têm por objetivos a divulgação do Modelo de Acessibilidade de Governo Eletrônico (e-MAG) e a capacitação de profissionais no desenvolvimento de portais e sítios eletrônicos da administração pública. Os cursos são compostos por conteúdos disponibilizados em ambiente virtual, exercícios de avaliação e documentos de apoio.

Curso Modelo

O curso Modelo apresenta a Visão do Cidadão e tem seu foco em um público mais abrangente, incluindo pessoas não técnicas, utilizando para isso uma perspectiva de compreensão mais intuitiva do e-MAG e da Visão Técnica.

A Visão do Cidadão é um elo entre o técnico e o usuário, uma ferramenta que o desenvolvedor tem para entender melhor a “perspectiva do cidadão”, aquilo que o cidadão valoriza e percebe.

O Curso Modelo tem 10 horas de duração e exigirá uma hora de dedicação diária.

O curso está dividido em 4 (quatro) módulos:

• Módulo 1 – Introdução e conceitos: apresenta as informações e conceitos fundamentais para melhor compreender a questão da Acessibilidade;

• Módulo 2 – Acesso à Internet: busca explicar como se processa o acesso à Internet em cada tipo específico de deficiência;

• Módulo 3 – O Modelo Proposto: apresenta a estrutura do Modelo de Acessibilidade de Governo Eletrônico (e-Mag) criado pelo governo brasileiro;

• Módulo 4 – Introdução à Cartilha Técnica: apresenta uma introdução à Cartilha Técnica do e-Mag.

Curso Cartilha

O curso Cartilha apresenta a Visão Técnica, que é um documento em formato cartilha com recomendações práticas para a construção e/ou adaptação de sítios eletrônicos. É voltada para o desenvolvedor, a pessoa que fará as alterações nos códigos dos sítios eletrônicos.

O Curso Modelo tem 30 horas de duração e exigirá uma hora de dedicação diária.

Este curso está dividido em 5 (cinco) módulos, que por sua vez, se dividem em diferentes unidades.

• Módulo 1 – Introdução: apresenta conhecer a estrutura da Cartilha Técnica de acessibilidade e suas diretrizes;

• Módulo 2 – Recomendações do nível de prioridade 1: apresenta as recomendações técnicas nível de prioridade 1 (A);

• Módulo 3 – Recomendações do nível de prioridade 2: apresenta as recomendações técnicas nível de prioridade 2 (AA);

• Módulo 4 – Recomendações do nível de prioridade 3: apresenta as recomendações técnicas nível de prioridade 3 (AAA);

• Módulo 5 – Diretrizes e Programas para Validação: apresenta o processo de implantação da acessibilidade e os programas utilizados para avaliar e validar a aplicação das recomendações.

Como disponibilizar o curso em seu ambiente de EAD

Para disponibilizar o curso no seu ambiente de EAD entre em contato com o Departamento de Governo Eletrônico no endereço eletrônico acessibilidade@planejamento.gov.br para maiores informações.

Onde os cursos já estão disponíveis

ENAP – Escola Nacional de Administração Pública

fonte: Governo Eletrônico

Alguns assuntos são tratados com maestria por um sem-número de profissionais, é sempre admirável observar isso. Porém, assuntos como acessibilidade devem ser exaustivamente relatados, observados, repassados de todas as maneiras possíveis.

Veja esse post do designer Fabiano Pereira

Sempre procuro em desenvolver websites e formulários acessíveis nos padrões W3C (WAI).
Mantenho referência desses sites:

• http://www.maujor.com/tutorial/formac-a.php
• http://www.maujor.com/tutorial/formac-b.php
• http://www.ivogomes.com/blog/criar-formulrios-acessveis/
• http://cirofeitosa.com.br/post/formularios-acessiveis

Procure utilizar sempre as propriedade Tabindex e Title e as tags Fieldset e Label.

Tutoriais de conteúdo e estrutura

1. Como legendar imagens de uma página web.
2. Marcar a estrutura de uma tabela de dados.

Tutoriais sobre CSS

1. CSS em Acção: Conteúdo Invisível apenas para Utilizadores de Leitores de Ecrã.

Tutoriais sobre Formulários

1. Criar formulários acessíveis.

Tutoriais sobre Web Semântica

1. Criar Uma Estrutura Semântica.

Tutoriais sobre JavaScript

1. Criação de JavaScript Acessível.

Mais em: http://www.acesso.umic.pt/tutor/index.htm

Só posto aqui sobre Acessibilidade Web, hoje pela manhã dei uma olhada num site que me chamou atenção, sobre produtos de sinalização com acessibilidade, esses painéis/placas/arcos são acessíveis a todos, numa sinalização universal assim como um site deve ser planejado para qualquer tipo de usuário ou plataforma.

E o site Arco que vende os produtos se preocupa no público que usa os produtos, mantendo nos padrões W3C/WAI de acessibilidade.

Existem vários sites para validar seu site nos padrões W3C/WAI

Tem um jeito mais fácil de fazer esse teste de validação, utilizando seu navegador.
Baixei o Fire Fox, nele tem uma extensão (plug-in/add-on) chamada HTML VALIDADOR (clique aqui para baixar).

Nessa extensão indica em qual linha tem erros e avisos.

Quando instalar e reiniciar o Browser, você vai ver um icone no canto inferior direito.
Se esse Icone for Verde , o site está validado, se tiver vermelho contém erros graves e se tiver um amarelho é de avisos para ser corrigido.

Lembrando que é super importante deixar o código sempre nos padrões para maior visibilidade do site, mesmo se o Icone validado estiver verde, é sempre bom validar a acessibilidade do site

Para ativar o teste de acessibilidade no código HTML, vai em Ferramentas/Tools do Firefox, tem uma opção Html Validator Options ou vai em Add-ons/Extensões, selecione HTML VALIDATOR e clique em Opção/Options.

Ative o “Accessibilty level” (igual da foto), deixando pelo menos no nível 1.
Se conseguir corrigir os problemas de acessibilidade no nível 3, deixará seu site com mais visibilidade ampliando o número de pessoas que possam acessar.

Procure sempre validar o código e deixar acessível multi plataforma.

Se você chegou agora, antes de continuar leia: Torne seu blog acessível para todos.

Depois de lançar a campanha “Torne seu blog acessível para todos”, nada mais justo que escrever um post com dicas de acessibilidade. Estou muito satisfeito com a campanha, pois os blogueiros que estão participando, estão escrevendo excelentes posts com seus pontos de vista sobre essa questão, e também com algumas dicas de acessibilidade, formando uma grande teia de informação.

As dicas que listarei a seguir, são de acordo com meu ponto de vista, visando a melhor usabilidade do blog para todos os leitores, e tornando-o compatível com os softwares usados pelos portadores de deficiência visual e/ou física para ler as páginas. Poderão ver um exemplo prático dessas dicas aqui mesmo em meu blog.

• Acesse seu blog usando o mesmo programa usado pelos deficientes visuais

Antes de tudo, acesse seu blog da maneira que ele é acessado por um deficiente visual e/ou físico. Assim poderá entender toda a dificuldade que é sentida ao acessar um blog que tem péssimo nível de acessibilidade. Esse sem dúvidas é o melhor teste para constatar o nível de acessibilidade de seu blog.

Baseado nessa experiência, poderá aperfeiçoar seu blog, e automaticamente torná-lo acessível por uma pessoa que use um desses programas, assim aumentando o tráfego do seu blog. O link para download do software, se encontra no post: Campanha: Torne seu blog acessível para todos – o mesmo recomendado no início desse post.

• Crie um menu principal antes do conteúdo

É importante que no blog exista um menu principal antes de todo e qualquer conteúdo. Assim o usuário não precisará navegar por todo o conteúdo do blog para achar algo que deseja acessar. Para os deficientes visuais, isso é essencial, uma vez que se não existir esse menu, ele tem que navegar por todo o site para achar o que deseja, e isso não é um processo rápido, pois precisará ouvir a descrição de cada link antes de chegar no desejado.

Nesse menu, é muito importante que o primeiro link seja “Ir para o conteúdo”, pois assim o software que lê a tela – usado pelos portadores -, não precisará navegar por todos os links para que possa chegar ao conteúdo.

A criação desse menu principal, é feita de forma muito simples. Basta usar links que levem a outra parte da mesma página. Por exemplo, para criar um link para ir diretamente as categorias que estão localizadas na sidebar, fiz da seguinte maneira:

Usei as tags:
<a href="#categorias">Categorias</a> e <a name="categorias"></a>

Coloquei a primeira tag na parte superior de meu layout (onde está localizado o menu) e a segunda tag foi colocada na sidebar, antes dos links das categorias. Assim ao clicar no link que foi posto no menu, o leitor automaticamente será conduzido as categorias, isso facilita tanto para seus leitores comuns, quanto para os especiais – portadores de alguma deficiência. E foi assim que montei todo o menu, apenas direcionando para outras partes do layout.

• Crie o link “Voltar para o menu principal”

Crie o link “Voltar para o menu principal” da mesma forma que criou os links do menu principal – como expliquei na dica anterior – e o coloque no final da página. Assim ao chegar ao fim do conteúdo, o leitor não precisará rolar toda a página para voltar ao topo. E pior ainda se for no caso dos softwares leitores de tela, pois sem esse link, ele precisararia ler todos os links novamente, para que então pudesse voltar ao menu principal.

• Descreva links e imagens

É de extrema importância que você faça a descrição de cada imagem que usar em seu blog, principalmente se essas forem usadas no menu. A descrição pode ser feita através do atributo “alt”. Assim o programa que lê a tela, irá reconhecer essa descrição. Também é super importante que use links descritivos. Ao invés de: Acesse o post da campanha, Clicando aqui., prefira: Visite o post da Campanha: Torne seu blog acessível para todos. Você também pode descrever o link através do atributo “title”. Assim ao leitor levar o mouse sobre o link, surgirá a descrição do mesmo.

Alguns posts antigos ainda possuem imagens e links mal descritos. Isso vai ser corrigido durante essa semana, que estou me dedicando especialmente a isso.

• Acesse seu blog com vários navegadores

Os navegadores usados por seus leitores nem sempre são iguais ao que você usa, há uma diversidade imensa nessa questão. Você deve fazer com que seu blog atenda as necessidades de todos os leitores, independente do navegador e/ou resolução usada por ele, por isso teste seu blog usando o maior número de navegadores possível, principalmente com o leitor de telas usados pelos deficientes – como disse na primeira dica, esse é o melhor teste de acessibilidade.

Não esqueça de refazer os testes sempre que fazer alguma alteração em seu código, por mínima que seja.

• Mais dicas

Como disse no início do post, os blogueiros que estão participando da campanha escreveram ótimos posts, contando seu ponto de vista sobre essa questão, e também repletos de dicas super interessantes. Recomendo que leia o post de cada participante, além de conhecer seu ponto de vista, poderão aperfeiçoar seus blogs com as dicas dadas por ele. Os links para os participantes também se encontram no post da campanha.