Nova ferramenta: Linguagem simples. Clique no botão e experimente ao vivo

Como é possível a leitura de imagens sem barreiras!

Óculos deitados sobre um livro

Partilhar post:

Óculos deitados sobre um livro

Como é possível a leitura de imagens sem barreiras!

Partilhar esta publicação:

Óculos deitados sobre um livro

 

Em tempos de digitalização, a questão da acessibilidade não deve ser negligenciada. Uma forma de facilitar o acesso das pessoas com deficiência aos conteúdos da Internet é a utilização dos chamados textos alternativos. Estes textos são concebidos de modo a reproduzir o conteúdo de um sítio Web numa forma que as pessoas com determinadas deficiências possam compreender. Mas o que é exatamente um texto alternativo? Quem precisa deles? E como é que se pode criar um?

Para tornar os sítios Web e os conteúdos Web acessíveis, os textos alternativos, entre outras coisas, são muito importantes para facilitar o acesso das pessoas com deficiência. Estes textos transmitem informações e funções a pessoas cegas e com deficiências visuais, bem como a pessoas com deficiências físicas ou cognitivas. Ajudam também a compreender gráficos, fotografias e elementos operacionais. Os leitores de ecrã ou os ecrãs Braille utilizam as alternativas de texto e tornam estes elementos acessíveis às pessoas com deficiência.

 

Por outro lado, também são úteis para a otimização dos motores de busca. As alternativas de texto transferem as informações sobre uma imagem para os motores de busca. Isto melhora a capacidade de localização.

Como é que se criam alternativas de texto?

A resposta à questão de como criar um texto alternativo é bastante simples: basta inserir um texto alternativo na área correspondente de um elemento que deve ser fornecido com esse texto. A maioria dos programadores utiliza este método num chamado CMS. A abreviatura CMS significa Content Management System (sistema de gestão de conteúdos). Trata-se de um software que é utilizado para criar e gerir conteúdos Web.

A linguagem de programação HTML também pode ser utilizada para este efeito. É aqui que o atributo alt, também conhecido como alt-Tag , entra em ação. É inserido na etiqueta img. O texto é escrito na área interior do atributo alt, que é depois emitido através das tecnologias de assistência.

No entanto, só isso não é suficiente. O atributo title também não deve ser esquecido, pois há leitores de ecrã que não lêem a descrição do atributo alt, mas sim a do atributo title. Por conseguinte, faz sentido introduzir um texto idêntico para ambas as etiquetas. Isto também tem a função de apresentar o conteúdo como informação adicional sobre um elemento quando se passa o rato sobre a área.

Existe também o atributo aria. Mais precisamente, o atributo aria-label ou o atributo aria-labelledby. Estes atributos são utilizados para etiquetar botões ou campos de formulários.

Os diferentes tipos de imagens

Num mundo cada vez mais digitalizado, não basta criar alternativas de texto. É muito mais eficaz descrever corretamente os vários tipos de imagens, que também diferem na sua função. No entanto, é necessário reconhecê-las primeiro. As descrições são inúteis se não conseguirem refletir a função de uma imagem. Assim, coloca-se a questão: que tipos de imagens existem? E qual é a melhor forma de as descrever?

Em primeiro lugar, deve familiarizar-se com as diferenças entre os vários tipos de gráficos. É importante compreender o significado e o objetivo de um gráfico. Em geral, é feita uma distinção entre gráficos informativos, funcionais e decorativos. Existem também os chamados tipos de letra. Aqui a descrição é muito simples, basta copiar o texto que é apresentado no gráfico.

Imagens informativas

No caso das imagens informativas, o conteúdo visível de um gráfico é transmitido por textos alternativos. É dada atenção à informação que é relevante para a mensagem da imagem. Um exemplo disto é a descrição de um logótipo. Esta descreve brevemente o aspeto do logótipo e quem o desenhou.

No exemplo seguinte, uma alternativa de texto é integrada num logótipo em HTML:

O logótipo Eye-Able . Representa um olho.

<img

src="logótipo.jpg"

alt="O logótipo Eye-Able . Representa um olho".

title="O logótipo Eye-Able . Representa um olho.">

</img>

Aqui, um ficheiro de imagem é incorporado no HTML utilizando o elemento img, com o atributo src a especificar a fonte da imagem. A descrição do gráfico é inserida entre aspas nos atributos alt e title. Desta forma, o conteúdo de texto "O logótipo Eye-Able. Representa um olho" é apresentado através do leitor de ecrã ou do ecrã Braille.

Desta forma, a barreira é eliminada e todas as pessoas que utilizam tecnologias de apoio podem compreender o que é apresentado neste gráfico.

Diagramas

No entanto, se se tratar de um diagrama, a decisão deve ser sempre tomada caso a caso. Depende muitas vezes do tipo e da informação contida. Se o gráfico contiver apenas uma pequena quantidade de informação, esta pode ser incluída no texto alternativo. Por exemplo: "Mostra os resultados eleitorais dos partidos num gráfico de barras. Partido A: 40%, Partido B: 30%, Partido C: 20%, etc.". No entanto, se for apresentado algo mais complexo ou mais longo, é aconselhável incluir as informações pormenorizadas num texto subsequente. O texto alternativo deve então indicar apenas o tipo e o objetivo do diagrama. Além disso, pode indicar-se que se segue uma descrição mais pormenorizada. Um exemplo seria um gráfico com os números da população dos estados federais. O conteúdo seria então: "Mostra os números da população dos 16 estados federais num gráfico de barras. Nota: A descrição mais detalhada vem a seguir no texto".

Imagens funcionais

De seguida, analisamos as imagens funcionais. Trata-se de gráficos ligados. Dividem-se em ligações, elementos ou botões. Nas alternativas de texto, define-se a função e não o que deve ser reconhecido. Em vez disso, especifica-se para onde a ligação conduz.

Eis um exemplo em HTML de um gráfico ligado:

<a href=“https://eye-able.com/“>

<img src=“logo.jpg“

alt="Página inicial de Eye-Able"

title="Página inicial de Eye-Able"

</img>

</a>

O atributo a-Tag e o atributo href são utilizados em HTML para criar uma hiperligação. Neste caso, a ligação é criada para a página https://eye-able.com/. No elemento img, vemos novamente o logótipo de Eye-Able, mas desta vez os atributos alt e title não descrevem o gráfico, mas a função. O conteúdo "Homepage de Eye-Able" é agora apresentado através das tecnologias de apoio.

 

O mesmo se aplica aos símbolos. Por exemplo, se for utilizada uma disquete, a aparência do ícone não é relevante para a saída com um leitor de ecrã, uma vez que simboliza a função de guardar. Os ícones de pesquisa são outro exemplo. O facto de ser ou não uma lupa é irrelevante. A ação subjacente é muito mais interessante. Simboliza uma opção de pesquisa ou o início de uma pesquisa.

 

A situação é semelhante no caso dos botões. Um botão que apresente uma seta a apontar para a direita nunca deve ser rotulado como "seta a apontar para a direita" no texto alternativo. Para uma pessoa com visão, é claro que a página seguinte se abre quando se clica nela, mas não para pessoas cegas. Isto porque só ouvem "seta para a direita" através da saída de voz. Isto não é suficientemente claro ou não indica que a página seguinte se abre quando se clica no botão. Por isso, faz mais sentido fornecer estes textos alternativos com "para a página seguinte" ou "continuar a deslocação".

Quadros decorativos

Outro tipo de gráficos são as imagens decorativas. Estas são utilizadas para decorar um sítio Web. O procedimento para criar textos alternativos é muito simples. O conteúdo do texto alternativo é deixado em branco. É importante que o atributo de texto alternativo ainda esteja presente. Aqui, apenas o conteúdo do texto é deixado em branco. Como resultado, o leitor de ecrã ignora este gráfico irrelevante na saída.

Como é que se escrevem bons textos alternativos?

Agora que os diferentes gráficos foram apresentados, resta apenas uma questão: "Como formular textos alternativos óptimos?" Depois de conhecer todas estas subtilezas e diferenças entre as imagens, há apenas algumas regras a seguir. As dicas seguintes podem ajudar:

  1. Início de uma alternativa de texto:

    Deve ter-se o cuidado de evitar duplicações. Por conseguinte, o início não deve começar por: "A imagem...", "O gráfico...", "A fotografia..." ou "A hiperligação" .... O facto de se tratar de um gráfico ou de uma ligação é reconhecido e emitido pelos leitores de ecrã. Por conseguinte, deve ser omitido.

  2. Duração dos textos:

    Não é especificada a extensão de um texto alternativo. No entanto, uma ou duas frases devem ser suficientes para descrever um gráfico. O comprimento ideal é de 80 caracteres. Porquê 80? As pessoas invisuais lêem frequentemente estes textos com a ajuda de um ecrã Braille. Os ecrãs Braille podem produzir entre 40 e 80 caracteres de cada vez. Por razões de clareza, é aconselhável respeitar este limite. É claro que um texto também pode ser mais longo. No entanto, não deve exceder os 120 caracteres.

  3. Ortografia e pontuação:

    Assegurar que a ortografia está correcta. Se uma palavra contiver um erro ortográfico, pode rapidamente tornar-se pouco clara, uma vez que um leitor de ecrã produz exatamente o que está armazenado no texto alternativo. A gramática correcta também desempenha um papel importante na compreensão das imagens. Mas a pontuação correcta também é relevante. A pontuação incorrecta ou em falta dificulta a compreensão do gráfico por parte do ouvinte. Por este motivo, deve ser efectuada uma verificação ortográfica e gramatical antes de inserir o conteúdo do texto.

  4. Direitos de autor:

    Muitas imagens têm um aviso de direitos de autor. Mas será que esta informação é importante para compreender uma imagem? A resposta é: Não! Esta informação não tem interesse para uma boa formulação de alternativas de texto, uma vez que a descrição de uma imagem contém apenas a informação mais importante. Por conseguinte, esta informação deve ser omitida.

  5. Feedback:

    É possível determinar rapidamente se a descrição da imagem é bem sucedida. Mas como? Esta pergunta é fácil de responder. Não é necessário um grande esforço. Um breve feedback de uma pessoa cega ou com deficiência visual fornece informações sobre se o conteúdo do texto foi formulado de forma sensata. Mas nem toda a gente conhece uma pessoa com deficiência visual. Isto também pode ser resolvido de outra forma. Podem ser feitas perguntas a qualquer pessoa que ainda não tenha visto a imagem. Isto pode ser feito, naturalmente, por escrito, mas também por telefone. Logo que se receba uma resposta "positiva", a descrição foi bem sucedida.

O que é que acontece se faltarem textos alternativos?

 

A falta de textos alternativos para as imagens pode ser particularmente irritante para os utilizadores cegos. Isto significaria que eles não seriam capazes de reconhecer o conteúdo do gráfico. Ao mesmo tempo, o leitor de ecrã apenas mostraria o nome do ficheiro nesse caso, por exemplo: "img123.jpg". Esta descrição não ajudaria ninguém. Os programadores devem, por isso, certificar-se de que utilizam sempre conteúdo de texto. No entanto, também é importante conhecer as diferenças para poder descrever imagens e gráficos de uma forma significativa. As tecnologias de assistência podem então reproduzi-los com a ajuda das alternativas de texto. Isto também torna a Internet mais acessível para todos.

Fácil para todos

Está interessado? Teremos todo o gosto em ajudá-lo.

Com mais de 25 funções relacionadas com a acessibilidade digital, o Eye-Able também o ajuda a reduzir as suas barreiras a longo prazo. Pode tornar as suas informações acessíveis a todos e não excluir nenhum visitante - em suma, pode aceder a um novo grupo-alvo sem grandes volumes de marketing.

O ícone mostra a figura de acessibilidade

Entrevista de aconselhamento

Consulta não vinculativa sobre acessibilidade digital em geral

O ícone mostra a figura de acessibilidade

Análise

Discussão de possíveis potencialidades de otimização do seu sítio Web

O ícone mostra a figura de acessibilidade

Demonstração em direto

Apresentação do software de assistência diretamente no seu sítio Web

Outras contribuições

Se quiser um pouco mais: