Acessibilidade - Estudo de Caso
Estudo de Caso - Melhorando a acessibilidade
Autora:Erika Sarti - web designer
www.erikasarti.net
Quando eu assisti este vídeo sobre acessibilidade, minha mente se abriu para o assunto, especialmente no que se refere ao acesso aos sites da internet por deficientes visuais.
Felizmente, este é um tema que "virou moda" recentemente, e cada vez mais web designers e usuários estão preocupandos com isso. Prova disso é que, nas últimas semanas, o InfoWester recebeu nada menos que doze mensagens de leitores pedindo providências quanto à acessibilidade do site (provavelmente também assistiram ao mencionado vídeo) para deficientes visuais.
Acessibilidade não é apenas desenvolver um site que possa ser interpretado corretamente pelos navegadores de internet e pelos leitores de tela dos deficientes visuais. Deficientes motores também se beneficiam da navegação pelo teclado, já que o uso do mouse é limitado e, muitas vezes, impossível no caso deles, sem contar que há usuários sem deficiência, mas que acessam o site através de dispositivos diferentes.
Foi então que colocamos o assunto em prática e adaptamos o InfoWester a essa nova realidade. O trabalho não foi longo - um layout tableless ajudou, e muito, no processo - e esperamos que o objetivo tenha sido atingido. Veja as principais alterações:
Links para acesso direto ao conteúdo
Você deve ter notado que, no canto direito das páginas do InfoWester, existem três pequenos links:
pequenos links no canto da tela
Através deles, usuários que navegam pelo teclado (usando geralmente a tecla Tab) não precisam passar por todos os links da barra superior e do menu para chegar ao conteúdo. Se quiser acessar o menu, também há um link para isso. O terceiro link serve apenas para matar a curiosidade dos usuários que estão vendo isso pela primeira vez =)
Outra solução para que a coluna do texto principal seja acessada antes da coluna secundária é, usando um layout tableless, posicionar o 'div' do texto antes do 'div' secundário. Assim, o programa leitor de tela acessará seu conteúdo primeiro.
Meta tag da linguagem
Esse item é importante para que os leitores de tela reconheçam a língua em que devem "dizer" o texto. Para quem não sabe, esses programas realmente pronunciam o texto aos deficientes visuais. Um dos softwares mais conhecidos do tipo é o Jaws. No caso do InfoWester, essa metatag já existia, mas apenas em uma parcela das páginas:
META HTTP-EQUIV="content-language" CONTENT="pt-br"
Caso você não saiba o que é meta tag ou queira saber mais sobre o assunto, leia o tutorial Meta Tags - O que são e como utilizá-las.
Transformar os títulos das páginas em link, para que o leitor de tela pare neles
O leitor de tela navega pela página orientado pelo teclado, geralmente pela tecla "Tab". Assim, ele vai parando em cada link e lendo o seu conteúdo. Se o título da página não for um link, ele vai "passar reto" e só parar no primeiro link dentro do texto. Obviamente, se não existir nenhum link no artigo, o leitor de tela vai ter dificuldades, dando muito mais trabalho para o deficiente visual encontrar o conteúdo que procura.
Fazer do título da página um link é uma solução simples, mas que faz uma grande diferença, já que permite identificar onde o texto começa.
Deixar o texto dos links claro
Como o leitor de tela pára em cada link, é importante que no texto desse link fique bem claro para onde ele vai.
Clique aqui para visitar nosso fórum pode ficar mais claro como Visite nosso fórum.
No InfoWester, esse é um problema até que comum, mas que está sendo resolvido.
Imagens com o atributo "alt"
Quando o leitor de tela encontra uma imagem, a única maneira que ele pode interpretar seu conteúdo ao usuário é pelo atributo "alt". Se o seu site usa imagens que são fundamentais para a compreensão do conteúdo ou para a navegação, não se esqueça de definir sua descrição de maneira clara. No caso do InfoWester, a utilização do atributo "alt" já existia.
Conteúdo importante em pop-up
Se no seu site algum conteúdo importante abrir numa janela pop-up, reconsidere essa arquitetura e abra sua página na janela normal do navegador. Até porque usuários comuns, hoje em dia, têm bloqueador de janelas pop-up ativado por padrão no navegador, ou mesmo estão acessando seu site através de um dispositivo móvel. Isso se torna um obstáculo para todos os usuários, não só para os deficientes.
No InfoWester, duas páginas tinham conteúdo acessível apenas por pop-ups: a página Sobre e a página de contato. Na primeira, corrigimos o problema colocando o texto das janelas na mesma página, acessíveis através de âncoras; já na segunda, colocamos o formulário de contato embaixo do texto de esclarecimento (antes, o formulário abria em um pop-up).
Todos os campos de formulário explicados pelo "label"
Você conhece a tag "label"? Usada em conjunto com a tag "input" nos formulários, ela ajuda o leitor de tela a explicar para o usuário qual o conteúdo de um determinado campo. Para um campo onde o usuário deve, por exemplo, fornecer o nome, ela é usada da seguinte maneira:
Autora:Erika Sarti - web designer
www.erikasarti.net
Quando eu assisti este vídeo sobre acessibilidade, minha mente se abriu para o assunto, especialmente no que se refere ao acesso aos sites da internet por deficientes visuais.
Felizmente, este é um tema que "virou moda" recentemente, e cada vez mais web designers e usuários estão preocupandos com isso. Prova disso é que, nas últimas semanas, o InfoWester recebeu nada menos que doze mensagens de leitores pedindo providências quanto à acessibilidade do site (provavelmente também assistiram ao mencionado vídeo) para deficientes visuais.
Acessibilidade não é apenas desenvolver um site que possa ser interpretado corretamente pelos navegadores de internet e pelos leitores de tela dos deficientes visuais. Deficientes motores também se beneficiam da navegação pelo teclado, já que o uso do mouse é limitado e, muitas vezes, impossível no caso deles, sem contar que há usuários sem deficiência, mas que acessam o site através de dispositivos diferentes.
Foi então que colocamos o assunto em prática e adaptamos o InfoWester a essa nova realidade. O trabalho não foi longo - um layout tableless ajudou, e muito, no processo - e esperamos que o objetivo tenha sido atingido. Veja as principais alterações:
Links para acesso direto ao conteúdo
Você deve ter notado que, no canto direito das páginas do InfoWester, existem três pequenos links:
pequenos links no canto da tela
Através deles, usuários que navegam pelo teclado (usando geralmente a tecla Tab) não precisam passar por todos os links da barra superior e do menu para chegar ao conteúdo. Se quiser acessar o menu, também há um link para isso. O terceiro link serve apenas para matar a curiosidade dos usuários que estão vendo isso pela primeira vez =)
Outra solução para que a coluna do texto principal seja acessada antes da coluna secundária é, usando um layout tableless, posicionar o 'div' do texto antes do 'div' secundário. Assim, o programa leitor de tela acessará seu conteúdo primeiro.
Meta tag da linguagem
Esse item é importante para que os leitores de tela reconheçam a língua em que devem "dizer" o texto. Para quem não sabe, esses programas realmente pronunciam o texto aos deficientes visuais. Um dos softwares mais conhecidos do tipo é o Jaws. No caso do InfoWester, essa metatag já existia, mas apenas em uma parcela das páginas:
META HTTP-EQUIV="content-language" CONTENT="pt-br"
Caso você não saiba o que é meta tag ou queira saber mais sobre o assunto, leia o tutorial Meta Tags - O que são e como utilizá-las.
Transformar os títulos das páginas em link, para que o leitor de tela pare neles
O leitor de tela navega pela página orientado pelo teclado, geralmente pela tecla "Tab". Assim, ele vai parando em cada link e lendo o seu conteúdo. Se o título da página não for um link, ele vai "passar reto" e só parar no primeiro link dentro do texto. Obviamente, se não existir nenhum link no artigo, o leitor de tela vai ter dificuldades, dando muito mais trabalho para o deficiente visual encontrar o conteúdo que procura.
Fazer do título da página um link é uma solução simples, mas que faz uma grande diferença, já que permite identificar onde o texto começa.
Deixar o texto dos links claro
Como o leitor de tela pára em cada link, é importante que no texto desse link fique bem claro para onde ele vai.
Clique aqui para visitar nosso fórum pode ficar mais claro como Visite nosso fórum.
No InfoWester, esse é um problema até que comum, mas que está sendo resolvido.
Imagens com o atributo "alt"
Quando o leitor de tela encontra uma imagem, a única maneira que ele pode interpretar seu conteúdo ao usuário é pelo atributo "alt". Se o seu site usa imagens que são fundamentais para a compreensão do conteúdo ou para a navegação, não se esqueça de definir sua descrição de maneira clara. No caso do InfoWester, a utilização do atributo "alt" já existia.
Conteúdo importante em pop-up
Se no seu site algum conteúdo importante abrir numa janela pop-up, reconsidere essa arquitetura e abra sua página na janela normal do navegador. Até porque usuários comuns, hoje em dia, têm bloqueador de janelas pop-up ativado por padrão no navegador, ou mesmo estão acessando seu site através de um dispositivo móvel. Isso se torna um obstáculo para todos os usuários, não só para os deficientes.
No InfoWester, duas páginas tinham conteúdo acessível apenas por pop-ups: a página Sobre e a página de contato. Na primeira, corrigimos o problema colocando o texto das janelas na mesma página, acessíveis através de âncoras; já na segunda, colocamos o formulário de contato embaixo do texto de esclarecimento (antes, o formulário abria em um pop-up).
Todos os campos de formulário explicados pelo "label"
Você conhece a tag "label"? Usada em conjunto com a tag "input" nos formulários, ela ajuda o leitor de tela a explicar para o usuário qual o conteúdo de um determinado campo. Para um campo onde o usuário deve, por exemplo, fornecer o nome, ela é usada da seguinte maneira:
Comentários