- Usar técnicas apropriadas para gerar conteúdos acessíveis e amigáveis (pessoas cegas e motores de busca).
Equivalente Textual
Todas as informações de uma página acessível devem ser apresentadas em texto. Isso significa que, se for usada alguma outra mídia, como imagens e sons, as informações que elas contêm devem ser repetidas numa descrição textual. Essa descrição deve ser "equivalente", isto é, deve transmitir as mesmas informações que os elementos disponibilizados.
Podemos dizer que os exemplos mais comuns de elementos não textuais são imagens de figuras, fotografias, botões, animações, linhas horizontais separadoras, mapas, filmes e sons.
Esses elementos não textuais podem ser tranquilamente utilizados numa página acessível, apenas devemos usar equivalentes textuais, a maioria deles com conteúdo, para dar oportunidade de todos os usuários percebê-los, caso isso seja adequado.
Sons incluem fala, sinais de áudio, sons de alerta, narrativas e trilhas de áudio em vídeo. Nem todos os usuários podem acessar ou utilizar esses elementos diretamente, especialmente surdos e deficientes auditivos, e, assim, necessitam também que a informação ou funcionalidade seja fornecida de outra forma, ou seja, no formato texto ou visual.
De qualquer maneira, o equivalente textual tem a função de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se ele for necessário para o entendimento do conteúdo.
Assim, os equivalentes textuais também são fundamentais para pessoas surdas, só que, ao invés de descreverem imagens, deverão descrever sons. Se existirem sonorizações na página, como mensagens sonoras ou vídeos com informações orais, estas devem estar redundantes em texto, para que a pessoa surda ou com uma deficiência auditiva severa possa absorver o conteúdo transmitido pela sonorização. Nesse caso, a língua gestual também pode ser importante.
Fornecer um texto equivalente para cada elemento não textual
"ALT", "LONGDESC" e "D.LINK" são técnicas para a criação de textos equivalentes.
Instruções e Técnicas
Use o atributo ALT para objetos não textuais simples, tais como figuras e títulos gráficos ou botões, deve-se especificar a descrição textual utilizando o atributo HTML "Alt" (alternativo).O texto do atributo ALT deve ser escrito cuidadosamente para que possa fornecer informações equivalentes. Se o texto do ALT não transmitir com eficácia as informações que a imagem mostra, ele será inútil. Ao se usar um texto no atributo ALT para fornecer textos equivalentes para imagens utilizadas como links, o texto deve ter sentido como um título do link quando for lido fora do contexto. Para imagens meramente decorativas que não contêm informações, tais como espaçadores, linhas e enchimentos, usa-se o texto Alt vazio. No caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras, "coloca-se a imagem em background, através de CSS".
Uso do atributo Alt com texto vazio para objetos que não contêm informações
Para imagens que são meramente decorativas e não contêm informações, tais como espaçadores, marcadores, linhas e enchimentos, usa-se o valor vazio para o atributo ALT (alt=" "). Ele será ignorado pela maioria das tecnologias de auxílio, tais como leitores de tela, e evitará bombardear o usuário com centenas de descrições inúteis, tais como "um espaçador, uma linha azul, marcador, marcador...". Deve-se notar que o texto vazio no atributo Alt tem espaço entre as aspas. Ele não é o mesmo que alt="", que não contém um espaço e, portanto, não é um atributo Alt com texto vazio. Tecnologias de auxílio podem não ignorar objetos com atributo Alt que não contenham espaço.
ALT=" " - ALT Vazio - correto;
ALT="" - ALT Nulo.
Fornecimento de uma longa descrição quando o texto Alt não for adequado
Realmente, o atributo ALT não é útil para explicações complexas demais para serem descritas em poucas palavras. Por exemplo, se for exibir um gráfico que mostre o crescimento populacional de três países (Brasil, Argentina e Uruguai) de 1995 a 2001, pode-se utilizar o atributo ALT para dar uma descrição básica do gráfico, tal como: "Gráfico que mostra o crescimento populacional de Brasil, Argentina e Uruguai, de 1995 a 2001".
Entretanto, as informações contidas no gráfico podem ser muito complexas e exigirem uma descrição muito maior e pormenorizada da informação. O gráfico pode mostrar linhas coloridas com os parâmetros de cada país, permitindo ao usuário identificar rapidamente tendências globais e fazer comparações.
Isto está além da capacidade do atributo ALT e, nesse caso, deve-se utilizar o atributo HTML "LONGDESC" ou um "D" link. Essas duas técnicas permitem aos usuários acessarem um texto separado que descreve o contexto. Longdesc, embora seja parte da especificação do HTML, não é suportado por grande parte dos navegadores. A técnica alternativa "D" link envolve a inserção, além da imagem, de um link apresentado como a letra maiúscula "D". O alvo desse link deve ser uma página web separada com uma longa descrição detalhada para pessoas com deficiência visual. Quando o usuário tiver lido esse texto, ele pode retornar à página com a imagem. "Longdesc" significa "longa descrição".
Imagens em Background acessíveis
Os leitores de tela não possuem somente a função de ler os textos de conteúdos web, mas também de descrever a estrutura das páginas e executar as tarefas propostas por seus aplicativos. Quanto à descrição da estrutura, o leitor ao encontrar elementos (X)HTML os sonoriza e é por isso que se torna importante o desenvolvimento das páginas dentro dos padrões web. Quando um leitor de tela passa por um elemento <a> ele sonoriza "link", quando encontra um elemento <TABLE> ele, da mesma forma, sonoriza "tabela" complementando ainda quantas linhas e colunas essa possui e revelando ao usuário cego a estrutura de células que vem a seguir, quando passa por um elemento <UL> ele "diz" "LISTA DE ITENS" etc. Da mesma forma, ao encontrar um <IMG> ele sonoriza "gráfico" revelando a existência de uma imagem. São essas descrições que facilitam as pessoas cegas entrarem nos links, navegarem nas tabelas de dados de forma mais adequada etc. No caso das imagens, se esta é apenas decorativa e sem outra função que altere o conhecimento dos usuários de leitores de tela, cegos em geral, pode-se colocar essas imagens não como um elemento de marcação (HTML/XHTML), mas apenas no plano de fundo, em CSS, através da propriedade background. Isso faz com que o leitor de tela passe e ignore completamente a existência da imagem.
A grande vantagem disso é não saturar os ouvidos da pessoa com deficiência visual, que passa o tempo todo ouvindo tudo sobre a página, além das informações a que estão interessados. É importantíssimo escutar a existência de um link, de um formulário e de todos ou quase todos os elementos de uma página, mas algumas informações são exageradas e sem utilidade. A página pode ficar "verborrágica" demais. Dessa forma, o uso do atributo ALT vazio e da imagem em background são extremamente utilizados em acessibilidade na web
Entretanto, é bom observar que muitas imagens colocadas em plano de fundo, como aquelas que indicam o destino de um link para um site externo, fartamente utilizadas, deveriam, ao contrário, estarem em (X)HTML, pois possuem informação relevante. Ou seja, se o usuário clicar naquele link sairá do site e pode não ser esse o seu desejo. As pessoas que enxergam estarão avisadas do destino do link, mas as pessoas cegas e de baixa visão, pelo fato do leitor de tela ignorar imagens desse tipo, poderão entrar nele desavisadamente. Deixe essas imagens disponíveis no próprio texto do link e com o seu atributo ALT, por exemplo:
<a href="http://www.bengalalegal.com">Bengala Legal
<img src="img/ext.gif" width="17" height="11" alt="Site Externo." title="Site Externo." /></a>
Imagem sem o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43">
Imagem com o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43" alt="Símbolo de Acessibilidade">
Exemplo de quando a imagem está associada a um link.
Link com imagem sem o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99"></a>
Link com imagem com o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99" alt="Conheça a Bengala Legal"></a>
Exemplo com Atributos ALT, LONGDESC e D.LINK.
O exemplo abaixo irá demonstrar a equivalência textual da imagem do selo da campanha "Acesso de Humor".
Código
<img src="selo-humor.jpg" width="100" height="120" alt="Selo da Campanha Acesso de Humor." title="Selo da Campanha Acesso de Humor." longdesc="desc-acessodehumor.php"><br>
<a href="13-desc-acessodehumor.php" title="Descrição textual da imagem do selo">D.</a>
Quando a imagem parece ser um texto.
Letras e textos artisticamente planejados, desenhados na imagem, usados para títulos, cabeçalhos ou logos de empresas não são texto. Texto significa somente o que é chamado de "texto real", digitado no teclado.
Na imagem abaixo temos um exemplo de texto "desenhado", que está na própria imagem e de "texto real", que se apresenta no atributo ALT. A imagem é de um "Quem Somos" e o texto, colocado no ALT, deve ser o mesmo:
Imagem de um texto: <img src="img/imagem127q.gif" alt="Quem somos" width="106" height="20" />
- Listar e descrever as técnicas de substituição de imagem. Identificar as vantagens e desvantagens de cada técnica.
"Image replacement" pode ser traduzido para "Substituição por imagem". É o termo usado para designar a técnicaCSS de escrever um texto usando uma imagem. Isto amplia as possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana ou seja lá a que for.
A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:
· CSS desabilitada;
· imagens desabilitadas;
· CSS e imagens desabilitadas;
· navegação com leitor de tela.
Fahrner Image Replacement (FIR)
Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
O código FIR:
Radu Darvas <img> Replacement
A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas:
Stuart Langridge Image Replacement
A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.
Malarkey Image Replacement (MIR)
Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.
Lindsay Image Replacement
Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.
Dave Shea Image Replacement
Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio!
Nenhum comentário:
Postar um comentário