O mundo vive atualmente a "era da informação" ou "sociedade da informação". A utilização de tecnologias de informação e comunicação está em expansão no mundo e a internet é a "anfitriã" desta era. Os computadores pessoais e as demais tecnologias, que possibilitam a interface entre o homem e a informação, estão mais acessíveis economicamente às pessoas.
Atualmente é possível comprar um computador e ter acesso à internet facilmente. Mas a acessibilidade é um termo muito mais amplo do que apenas "acesso a algo". Uma parcela da sociedade não tem os mesmos direitos de acessibilidade às tecnologias de informação e comunicação. São eles os cegos e os amblíopes.
A maioria dos websites e computadores apresentam barreiras de acessibilidade, impossibilitando a grande parte das pessoas com algum tipo de deficiência, o acesso à informação. É essencial que a web seja acessível para fornecer igual acesso e oportunidades às pessoas com deficiência.
Veremos neste curso algumas das soluções técnicas para que o objetivo de "informação para todos" seja alcançado.
A Web é um recurso cada vez mais importante nos vários aspectos da vida: educação, emprego, governo, comércio, cuidados de saúde e recreação, entre outros. É essencial que a Web seja de fácil acesso para todos e que forneça iguais oportunidades a pessoas com deficiência. Uma web acessível também pode ajudar às pessoas com deficiência a participarem mais ativamente da vida em sociedade.
Acessibilidade significa tornar fácil o acesso a alguma coisa, para o maior número de pessoas possível.
Acessibilidade significa, não apenas permitir que pessoas com deficiência participem de atividades que incluem o uso de produtos, serviços e informação, mas, a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população, com restrição as mínimas possíveis.
Na linguagem da Web, a acessibilidade de uma página permite que ele seja lida e navegada por uma pessoa com deficiência e que tenha certa dificuldade.
Aqui neste curso falaremos sobre acessibilidade para a Web. Ou seja, você aprenderá a fazer sites e aplicações web que possam ser acessados (e usados) por todos os tipos de pessoas, com diversos tipos (e níveis) de deficiência, utilizando dispositivos diferentes do padrão.
Antes de começar, é preciso deixar bem claro que o chamado "design universal (design para todos)" na WEB ainda é uma utopia. Infelizmente, alguns tipos de deficiência requerem recursos muito específicos para que sejam atendidas as necessidades individuais, sendo preciso algo completamente alternativo. Trataremos disso também.
Este curso não se propõe a tratar da acessibilidade com foco apenas em deficientes visuais. A ideia é mostrar que, com o uso dos padrões web, das boas práticas de desenvolvimento e do segmento de diretrizes internacionais de acessibilidade, é possível garantir o acesso a sites e aplicações a, virtualmente, qualquer tipo de usuário. Desde os deficientes visuais até os usuários de dispositivos móveis.
A declaração não é uma tag (elemento) da marcação XHTML. Por isso, não há necessidade da tag de fechamento e deve ser sempre escrita em letras maiúsculas.
O XHTML permite que desenvolvedores criem diversos tipos de documentos, cada um definido por regras diferentes. As regras de cada tipo são detalhadas dentro da especificação XHTML em uma longa seção de texto, denominada Definição do Tipo de Documento (Document Type Definitions - DTD). Sua declaração DOCTYPE informa aos serviços de validação, e aos navegadores modernos, qual DTD foi utilizada para elaborar a marcação. Então, essa informação instrui os serviços de validação e os navegadores sobre como tratar a página.
As declarações DOCTYPE são componentes-chave de páginas Web compatíveis. Sua marcação e CSS não serão validadas a menos que seu código XHTML comece com uma declaração DOCTYPE apropriada. Esta deve ser sempre a primeira declaração em um documento Web.
Além disso, a opção DOCTYPE afeta a maneira como a maioria dos navegadores exibe o site.
Lei Federal 10.098/00 e Decreto Federal 5296/04
Uma empresa deve estar atenta aos recursos de informática e internet que visam garantir acessibilidade às pessoas que possuem certas deficiências como, por exemplo, visuais. (Lei Federal 10.098/00 e Decreto Federal 5296/04).
Ao mencionar a palavra acessibilidade, a primeira coisa que pode vir à cabeça são as pessoas com deficiência. No caso da web, principalmente os deficientes visuais completos (cegos). Porém, não são eles apenas que necessitam – e se beneficiam – de sites mais acessíveis.
Pode ser que você não seja cego e nem tenha alguma deficiência. Mas, em algum momento e em algum nível, você precisará da acessibilidade.
Claro que os usuários cegos são um público importante de se considerar, quando pensamos há diversos grupos de pessoas com deficiência que podem passar a ter acesso a sites dos quais eram excluídos, caso o desenvolvedor use as técnicas de acessibilidade que serão apresentadas neste curso.
Veja exemplos de pessoas que realmente precisam de acessibilidade.
Os usuários cegos são o caso clássico e que sempre vêm à mente quando se fala em acessibilidade. Esses usuários têm imensas dificuldades em acessar sites na web.
Muitas pessoas cegas utilizam o leitor de tela. Alguns usuários utilizam navegadores textuais como o Lynx, ou navegadores com voz, em vez de um navegador comum (navegador com interface gráfica).
É um software que lê o texto que está na tela do microcomputador e a saída desta informação se dá através de um sintetizador de voz ou um display Braille. O leitor de tela "fala" o texto para o usuário ou dispõe o texto em braille por meio de um dispositivo onde os pontos são salientados ou rebaixados para permitir a leitura.
É um navegador baseado em texto, diferente dos navegadores com interface gráfica onde as imagens são carregadas. O navegador textual pode ser usado com o leitor de tela por pessoas cegas e, também, por pessoas que acessam a internet com conexão lenta.
É um sistema que permite a navegação orientada pela voz. Alguns possibilitam o reconhecimento da voz e a apresentação do conteúdo com sons; outros permitem acesso baseado em telefone (através de comando de voz pelo telefone e/ou por teclas do telefone).
Através do site: http://www.delorie.com/web/lynxview.html é possível visualizar os sites como se estivesse sendo usado um navegador textual.
Só há um detalhe: para visualizar o site assim é preciso, antes, colocar na raiz do servidor um arquivo chamado: delorie.htm. Basta criar um arquivo em branco e salvar com o nome delorie.htm.
Após upar o arquivo delorie.htm no servidor, aí sim será possível visualizar o site de forma textual. Veja este exemplo:
Resultado:
Para acessar a web, algumas pessoas com deficiência visual parcial usam monitores grandes e aumentam o tamanho das fontes e imagens. Outros usuários utilizam os ampliadores de tela (no próprio windows tem). Alguns usam combinações específicas de cores para texto e fundo (background) da página. Por exemplo, amarelo para a fonte e preto para o fundo; ou escolhem certos tipos de fontes.
É um software que amplia o conteúdo da página para facilitar a leitura.
A deficiência física ou motora pode envolver fraqueza, limitação no controle muscular (como movimentos involuntários, ausência de coordenação ou paralisia), limitações de sensação, problemas nas juntas ou perda de membros. Algumas pessoas podem sentir dor, impossibilitando o movimento.
Para acessar a web, as pessoas com problemas nas mãos ou braços podem utilizar: um mouse especial; um teclado alternativo com disposição da teclas que estejam de acordo com o movimento da mão; um dispositivo, tipo ponteiro, fixado na cabeça ou na boca; um software de reconhecimento de voz, ou outras tecnologias assistivas para acesso e interação.
É um dispositivo de hardware ou software que pode ser usado por pessoas com deficiência física. Ele possui um modo alternativo de dispor as teclas como, por exemplo, teclado com espaçamentos maiores ou menores entre as teclas. Pode também possuir travas que permitem a pressão de uma tecla por vez, teclado na tela ou outras modalidades.
O daltonismo é uma deficiência visual que faz com que a pessoa tenha dificuldade em reconhecer uma ou mais cores.
Existem diversos tipos de daltonismo, como por exemplo aqueles que têm dificuldade em reconhecer a cor verde (tipo mais comum), ou a cor vermelha, ou a azul; e ainda há aqueles que não reconhecem cor alguma (tipo mais raro).
Qualquer um dos tipos de daltonismo citado acima, traz para o usuário dificuldades enormes no acesso à informação em sites na web. Muitos sites diferenciam informações importantes por meio do uso de cores para destaque. Isso, para um daltônico, é altamente problemático.
Prover meios para destacar informações importantes e notificações sem que o reconhecimento de cores seja absolutamente necessário é a única maneira de permitir que pessoas com daltonismo possam utilizar o site sem problemas.
Com o avançar da idade, as pessoas passam a apresentar limitações em diversos dos sentidos. Principalmente visão, audição e coordenação motora.
Além disso, pessoas idosas costumam ter maiores dificuldades para aprender a lidar com computadores.
Para que essas pessoas (que formam um grupo nada pequeno e que continua crescendo) possam ter uma experiência decente em um site, será preciso prover meios simples de aumento do tamanho das fontes do texto, bom contraste (além de prover uma versão em altíssimo contraste) e permitir a navegação a partir do teclado.
Paralisia cerebral, amputação de membros superiores, surdez e outros tipos de deficiência podem dificultar o acesso à informação.
Dispositivos móveis como PDAs, handhelds e smartphones possuem telas pequenas, conexões lentas (além de caras) e browsers sem suporte a diversas tecnologias, sendo por isso, um caso de necessidade especial de acesso. Com o uso dos padrões web e técnicas de estilização próprias para dispositivos móveis, é possível garantir o acesso aos usuários destes dispositivos.
Tomando como padrão o que é mais usado hoje em dia, pode-se dizer que o dispositivo padrão de acesso à web é o computador desktop, rodando Windows (um exemplo de sistema operacional) e Internet Explorer (um exemplo de navegador Web).
Qualquer cenário diferente desse pode ser chamado de não-padrão e necessita de cuidados especiais para acessibilidade. Atualmente também não se tem problemas, por exemplo, com o Firefox e Opera, para navegação.
O padrão internacional de diretrizes para a promoção de acessibilidade, mais importante e aceito atualmente, é o WCAG (Web Content Accessibility Guidelines ou Diretrizes de Acessibilidade para Conteúdo na Web), criado pelo W3C.
Essas diretrizes englobam todas as técnicas necessárias para tornar um site acessível.
As diretrizes do WCAG são divididas em três níveis de prioridade:
- Prioridade 1 (A): Todo conteúdo publicado na web deve satisfazer os pontos de checagem agrupados nesta prioridade. Caso contrário, um ou mais grupos de pessoas serão impossibilitadas de acessar a informação.
- Prioridade 2 (AA): Todo conteúdo publicado na web deveria satisfazer os pontos de checagem agrupados nesta prioridade. Caso contrário, um ou mais grupos de pessoas terão grandes dificuldades no acesso à informação. A satisfação dessa prioridade facilita o acesso à informação em diversos níveis.
- Prioridade 3 (AAA): Todo conteúdo publicado na web pode satisfazer os pontos de checagem agrupados nesta prioridade. Caso contrário, um ou mais grupos de pessoas podem ter algum tipo de dificuldade no acesso à informação. A satisfação dessa prioridade ajuda a melhorar a experiência dos usuários ao interagir com o conteúdo.
Existem basicamente dois tipos de validação a que um determinado conteúdo na web pode ser submetido: validação de (X)HTML e validação de acessibilidade.
A validação de (X)HTML é importante pois garante que não foi cometido nenhum erro ao escrever o código e que ele corresponde realmente ao DOCTYPE descrito no início.
A validação de acessibilidade também é uma importante ferramenta de apoio ao desenvolvedor.
Diversos pontos de checagem podem ser verificados de maneira automatizada e é isso que fazem os validadores. No entanto, diversos outros pontos só podem ser checados por um ser humano, de maneira não automatizada.
Portanto, não se deve apoiar apenas em um validador para garantir que o conteúdo esteja acessível. É preciso, após a verificação automatizada, checar cada um dos outros pontos manualmente para garantir que o conteúdo esteja realmente acessível.
O mais conceituado validador XHTML que existe, é da W3C. http://validator.w3.org.
São exemplos de validadores de acessibilidade:
Como visto anteriormente, os pontos de checagem contidos na Prioridade 1 são absolutamente indispensáveis para se garantir o mínimo de acessibilidade em uma página.
Caso você não respeite algum desses pontos, muitos usuários podem simplesmente não conseguir acessar o conteúdo de seu site.
Fornecer um texto equivalente para cada elemento não textual.
São elementos não textuais:
- Imagens
- Mapas de imagem (Image maps)
- Animações em flash
- Applets em Java
- Vídeos
- Arte ascii
- Frames
- Áudio
- Scripts
Deve-se criar uma página com a descrição da imagem (equivalente textual) suficientemente completa.
Na tag "img", por exemplo, deve-se incluir o atributo ALT pois ele é suficiente para descrever o conteúdo de um elemento não textual.
Quando for necessária uma explicação mais detalhada sobre o elemento em questão, deve-se utilizar o atributo LONGDESC, apontando para uma página que contenha a descrição.
Se o usuário não puder ver a imagem, o conteúdo do atributo ALT será exibido.
O atributo ALT, ao contrário do que muitos pensam, não tem o objetivo de fornecer um "tooltip" ao se passar o mouse sobre uma imagem. Este é um comportamento exclusivo do Internet Explorer e não consta nas especificações do HTML.
Se você desejar que seja exibido um "tooltip", use o atributo TITLE e, caso deseje que o Internet Explorer pare de exibir o conteúdo do ALT como "tooltip", use um TITLE vazio (title="").
Você deve seguir as seguintes regras:
- Incluir o elemento "noscript" para fornecer um texto alternativo que descreva a ação ou substitua a funcionalidade do script.
- Fornecer equivalente textual para scripts. *Assegurar que programas interpretáveis funcionem mesmo quando estes tiverem sido desativados ou não forem suportados pelo browser do usuário.
Fornecer equivalente textual para imagens usadas como pontos de enumeração (bullets) simulando uma lista. Ou não simular, e sim utilizar uma lista de fato.
No caso de simular uma lista com imagem, incluir o atributo "alt" com descrição, conforme mostra o Exemplo 1 (logo abaixo). A desvantagem desta opção é que o leitor de tela irá focar todas as imagens (bullets), lendo desnecessariamente a descrição textual de cada uma.
O ideal é não simular uma lista, mas fazer uma utilizando os elementos "ul" e "li" no HTML, inserindo as imagens como bullets no CSS, conforme mostra o Exemplo 2 (logo abaixo). Deste modo, o leitor de tela não focará as imagens e sim os itens.
Veja uma sequência de itens que simulam uma lista, utilizando imagens como bullet. O código mostra três itens diferentes, mas apropriadas formas, para usar o atributo "alt" para nomear este tipo de imagem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreinaWEB e-Learning - Acessibilidade</title>
</head>
<body>
<h1>TreinaWEB e-Learning - Acessibilidade</h1>
<p>TreinaWEB, os melhores cursos online do Brasil!</p>
<br /><br />
<img src="lista3.gif" alt="Nossos Cursos" />
Cursos<br />
<img src="lista3.gif" alt="Calendário de Cursos" />
Calendário<br />
<img src="lista3.gif" alt="Contate-nos" />
Contato<br />
</body>
</html>
Fazer uma lista não ordenada, incluindo imagens na mesma através das CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>TreinaWEB e-Learning - Acessibilidade</title>
</head>
<body>
<h1>TreinaWEB e-Learning</h1>
<p>TreinaWEB, ensino inteligente à distância!</p>
<br />
<ul>
<li>Nossos Cursos</li>
<li>Calendário de Cursos</li>
<li>Contate-nos</li>
<ul>
<br />
<img src="acess_brasil_aprovado.gif" alt="Selo Acessibilidade Brasil - Website Acessível" />
</body>
<html/>
ul {
list-style-type: none;
list-style-image:url("setinha.gif");
}
Fornecer equivalentes para sons, áudios e vídeos. Para sons e áudios, fornecer descrição textual. Para imagens de vídeo, fornecer descrição sonora ou textual.
Levar em consideração que imagens, vídeo e áudio podem facilitar a compreensão do conteúdo. Por exemplo, uma sequência de imagens para explicar algo ou um vídeo de uma pessoa traduzindo o conteúdo para a linguagem de sinais.
Se ao acessar uma página, um som significativo é reproduzido, fornecer uma descrição textual desse som. Se o som/áudio não for significativo ou tratar-se de uma música sem letra (apenas melodia), não será necessário fornecer o equivalente textual. Se o áudio contiver muita informação, fornecer uma transcrição textual completa.
Para vídeos com áudio, fornecer equivalentes sincronizados: descrição sonora das cenas e das ações das imagens; e legendas para os diálogos, narração e sons. Se a sincronização não for possível, fornecer descrição textual e transcrição em uma página.
Não recorrer apenas à cor.
Assegurar que todas as informações veiculadas coloridas estejam também disponíveis sem cor (em preto). Se a cor for o único meio utilizado para transmitir informações, as pessoas que não diferenciam as cores, bem como os usuários de monitores monocromáticos e dispositivos não coloridos, não receberão essas informações.
A palavra árvore está destacada dos outros itens somente pela cor (Verde).
"O item verde é de grande importância para o ambiente:"
Agora, no mesmo exemplo sem cor, perde-se a informação, pois a palavra árvore perdeu o destaque. Veja:
"O item verde é de grande importância para o ambiente:"
A descrição da cor incorpora-se à palavra árvore.
"O item verde é de grande importância para o ambiente:"
Ou:
Deve-se assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiência, bem como pelas que utilizam monitores de vídeo monocromático.
Imagem contendo texto e fundo com pouco contraste:
A mesma imagem acima, se vista em um monitor monocromático:
Imagem contendo texto e fundo com um BOM contraste:
A imagem anterior, se vista em um monitor monocromático:
Identificar a língua estrangeira, em documentos e equivalentes textuais, por meio de marcações que facilitem a pronúncia e a interpretação do texto.
A marcação do idioma permite identificar mudanças de idioma em um documento, por sintetizadores de voz e dispositivos Braille, que podem converter automaticamente para o idioma escolhido.
Incluir o atributo "lang" para identificar o idioma estrangeiro.
Exemplos de idiomas: inglês-en; francês-fr; espanhol-es; italiano-it; português-pt; alemão-de.
Exemplo:
Uma frase com expressão em inglês:
"E os alunos disseram "Very Good" aos treinamentos da TreinaWEB e-Learning!"
<p>
E os alunos disseram:
<span lang="en">"Very Good"</span>aos treinamentos da <b>TreinaWEB e-Learning!</b>
</p>
Identificar o principal idioma utilizado nos documentos.
Em XHTML, definir o atributo "lang" na tag "html". Em XML, utilizar "xml:lang".
Exemplo de uma estrutura XHTML com o idioma pt-br (Português Brasileiro) definido:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreinaWEB e-Learning - Acessibilidade</title>
</head>
<body>
<!--Elemntos da página -->
</body>
</html>
Se utilizar tabelas, use marcação correta para elas. Veja como, mais abaixo nos exemplos.
Evitar o uso de tabelas para a criação de layouts. É altamente recomendável utilizar as folhas de estilo (CSS) e a correta marcação para construir o layout sem tabelas (de acordo com os Padrões WEB - WebStandards). Hoje em dia, pode-se contar com a "metodologia" Tableless para criar layouts acessíveis, sem o uso de tabelas e dentro dos Padrões Web.
Utilizar as tabelas somente para compor dados tabulares. Por exemplo: uma listagem de 800 produtos, divididos em colunas como: Nome do Produto | Quantidade | Data Inclusão | Valor
A marcação correta de tabelas beneficia usuários que utilizam meios sonoros, como leitor de tela, para acessar páginas web.
Título da tabela: Fornecer o título da tabela através da tag "caption".
Resumo da tabela: Para melhor compreensão de tabelas complexas, fornecer um resumo informando o propósito da tabela através do atributo "summary" no elemento "table". O resumo não fica visível na página, mas o leitor de tela o descreve.
Cabeçalho e dados: Utilizar "th" para identificar os cabeçalhos de linhas e colunas e "td" para identificar as células com dados.
Associação entre cabeçalho e dados: Associar os dados "td" aos respectivos cabeçalhos "th". Em tabelas simples, associar com o atributo "scope" natag "th" e, em tabelas com dois ou mais níveis de cabeçalhos, associar com os atributos "headers" e "id
upos: Fornecer as marcações "thead", "tfoot" e "tbody" para agrupar linhas e "col" e "colgroup" para agrupar colunas. Além de facilitar a organização da tabela, auxilia na aplicação de estilos.
Não simular tabelas utilizando espaçamentos ou outras marcações como, por exemplo, com a tag "pre". Tabelas sempre devem ser marcadas com "table", assim o leitor de tela identificará que se trata de uma tabela.
Alguns leitores de tela reconhecem uma tabela complexa, com marcação apropriada. Mas aconselha-se, na medida do possível, a utilização de tabelas mais simples.
Tabelas - Primeiro exemplo
Tabela simples com título, cabeçalhos, dados e associação por "scope".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Q"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>TreinaWEB e-Learning - Acessibilidade</title>
</head>
<body>
<table>
<caption>Notas dos AlunosTreinaWEB</caption>
<tr>
<th scope="col">Aluno</th>
<th="col">AJAX</th>
<th scope="col">PHP</th>
</tr>
<tr>
<th scope="row">Tiago</th>
<td>9</td>
<td>9</td>
</tr>
<tr>
<th scope="row">Pedro</th>
<td>8</td>
<td>7</td>
</tr>
<tr>
<th scope="row">Bianca</th>
<td>10</td>
<td>8</td>
</tr>
</table>
<br />
<img src="acess_brasil_aprovado.gif"
alt="Selo Acessibilidade Brasil - WebSite Acessível" />
</body>
</html>
body{
font-family:Geneva, Arial, Helvetica, Sans-serif;
font-size:12px;
}
td{
border:solid 1px;
}
th{
border:solid 1px;
background-color:#FFFF99;
}