Visão global

A maioria das pessoas sabe mais ou menos o alt texto. Além disso, não há nenhum elemento independente no código " alt text ". Para ser tecnicamente correcto, é o atributo alt da tag img . Mas a questão não é sobre o nome, mas por sua função. Olhe o que significa ter uma boa alt texto.

A importância do texto alternativo

Atualmente, um dos maiores problemas de acessibilidade na Web é a falta de um texto alternativo para gráficos e imagens. Pessoas cegas freqüentemente usam leitores de tela ou exibe Braille que lhes permitem ler o texto em páginas da Web. Quando estas tecnologias assistivas "ler" imagens sem alt texto, eles são incapazes de transmitir o seu significado.

Quando um leitor de tela "lê" uma imagem sem atributos alt , há várias coisas que podem acontecer:

1. Ele pode simplesmente evitar a imagem como se ela não estava presente na página.
2. Pode encontrar o texto que lhe corresponde de uma forma ou outra, como o nome do arquivo da imagem e da cama no lugar do texto alternativo.

O comportamento exato do leitor de tela varia de acordo com a marca de leitores de tela e código da página web. Mas de qualquer maneira, este tipo de resultado não é desejável: ou o usuário não é informado do conteúdo da imagem, ou ele recebe um texto provavelmente desnecessário.

Exemplo: com alt texto

Ouça a esta gravação de uma Home Page Reader 3.0 a partir da mesma imagem. Desta vez, ele tem um alt texto. Portanto, podemos ouvir a diferença.

Selecione um formato para a gravação: Wav | Mp3 | RealMedia | Transcrição de texto (em Inglês)

Aqui está a imagem que acabamos de ouvir:

Adicionando uma alternativa de texto permite que os utilizadores de leitores de tela para ter as mesmas informações que aqueles que podem ver a imagem.

Como adicionar alt texto

Vejamos outro exemplo de uma imagem:

HTML código para esta imagem é:

Você pode digitar o código exatamente como você vê acima em um editor de texto ou você pode usar o software como Dreamweaver, FrontPage ou GoLive para conseguir a mesma coisa. No Dreamweaver, o alt texto é adicionado através da janela Propriedades, como mostrado na figura abaixo:

sous Alternative representations . No Microsoft FrontPage, clique duas vezes na imagem para abrir a caixa de diálogo Propriedades de imagem quando você digita o texto alternativo no campo de texto sob Representações alternativas.

Outros editores têm características semelhantes para adicionar UEN texto alternativo. Consultar as instruções na documentação sobre como adicionar um atributo alt .

Agora que temos uma idéia melhor do atributo alt e como é fácil adicionar um atributo alt para a imagem, falando sobre o que deve ser o atributo alt .

Como usar as imagens

Imagens em websites são usados ​​de três maneiras:

1. para transmitir conteúdo importante.
2. para chamar a atenção não transmitem um conteúdo real.
3. para apontar para outras áreas do site ou para outros sites.

O alt texto é mais apropriado para uma imagem depende de como a imagem é utilizada. Na verdade, a mesma imagem pode ser usada por razões diferentes em circunstâncias diferentes e cada uso dessa imagem tem uma alternativa de texto diferente. Mantenha a seguinte regra em mente:

Com isto em mente, a informação mais importante para transmitir em um texto alternativo para um mapa de imagem é o destino da ligação.

Para transmitir a imagem

As imagens que contêm conteúdos importantes

Se uma imagem ou gráfico contém informações que são importantes no contexto do site, então o atributo alt para mostrar essas informações de forma que seja consistente com a finalidade da imagem. Lembre-se que o objetivo da imagem não é necessariamente o mesmo que a aparência da imagem.

Exemplo 1

Por exemplo, o site usa imagens de CD WebAIM Formação para a navegação principal, como mostrado na imagem abaixo.

Estas imagens parecem com abas em pastas de arquivos. Alguns desses guias são castanhos e outros azuis. Quando a guia é selecionada, torna-se branco. Alguns dos textos são capitalizados, uma parcela é pequena. Todos estes detalhes são importantes para o look and feel do site, mas para alguém que não pode ver, eles são em sua maioria irrelevantes. O aspecto mais importante destes gráficos é que elas apontam para outras áreas do site. Com isto em mente, eu gostaria de dar uma alternativa de texto que reflete o fato de que o usuário pode clicar na imagem para ir para outra área do site. Neste caso, o destino do link é Track 2 de treinamento, que é a área para os coordenadores. O alt texto é mais apropriado para esse quadro é o seguinte:

"Track 2: coordenadores."

Neste caso, o alt texto é exatamente o texto da imagem. Na maioria dos casos onde há texto em imagens é a melhor solução. Não se preocupe que você não descrever a imagem. Proporcionar a visão do usuário da imagem, não sua aparência.

Exemplo 2

Olhe novamente para o retrato de Silvia:

Esta imagem em particular poderia ser usado de formas diferentes, com objetivos diferentes. Aqui estão alguns cenários possíveis:

• Um professor de escola primária na criação de um site para explicar a diferença entre pinturas, desenhos e esculturas. Inclui vários exemplos diferentes de cada tipo de arte. No texto da página em si, ele descreve as diferenças entre estes três meios. Ele usa a imagem de Silvia como um dos quatro exemplos de tabelas. Uma das alt texto seria possível neste caso "A pintura de uma jovem mulher." Provavelmente é suficiente, como o professor tem suficientemente descrito o que pintar um no próprio documento.
• Um membro da família fez uma lista dos membros de sua família com os seus retratos. Uma vez que todas as imagens são retratos, um alt texto é "Silvia Alvarez."
• Um instrutor de arte em uma escola secundária criou um site com diferentes tipos de tintas. Ele usa a pintura como um exemplo de um retrato, e explicado no texto da página que um retrato. Um alt texto poderia ser "Retrato".
• Um historiador de arte cria um catálogo de retratos de artistas diferentes. Sua finalidade é mostrar retratos de vários artistas. O alt texto pode conter informações relevantes para os historiadores da arte, como o título da obra, o nome do artista, médio e data. O alt texto poderia dizer: "Silvia Alvarez, óleo sobre tela, Paul Bohman, 2002."

Poderíamos continuar com cenários diferentes mas acho que você entende. Não há alt texto para uma única imagem. Depende do contexto e da finalidade da imagem. Que o autor a apreciar o que escrever.

Precisa e concisa

As alternativas de texto para imagens para ser tão preciso e sucinto possível. Verifique se o seu alt texto transmite todas as informações importantes relacionadas com a finalidade de sua imagem, mas não os usuários sobrecarga com alt texto muito longo. Leitores de tela ou dispositivos braille sempre ler o alt texto, que pode causar as imagens são carregadas páginas para ler. Se você precisa de uma descrição mais detalhada da imagem, você deve adicionar um atributo longdesc para a imagem.

alt texto vazio

Imagens decorativas

A Web tornou-se um ambiente gráfico no qual os desenvolvedores adicionam frequentemente imagens em suas páginas simplesmente para aumentar o apelo visual do site. Por exemplo, a imagem abaixo pode ser usado para criar um canto arredondado em uma página.

As imagens nesta categoria não transmitem informações para o usuário, mas são simplesmente utilizados para fins decorativos. Estas imagens não têm nenhum valor para alguém que não pode ver a página. O código HTML correto para este tipo de imagem é o que é muitas vezes chamado o atributo alt vazio ou nulo, escreve o seguinte: alt="" . É pronunciado: alt igual apóstrofo, sem espaços entre eles. O código fonte da imagem neste exemplo é:

<img src="corner.gif" width="84" height="90" alt="" />

Leitores de tela ignorar imagens com alt em branco texto, que é exatamente o que queremos neste caso. Você pode se perguntar por que é necessário especificar alt texto em branco. Talvez, não é melhor você não colocar qualquer atributo alt ? É uma boa pergunta mas a resposta é que o alt texto é pior do que falta alt texto vazio como alguns leitores de tela em seguida, ler o nome do arquivo da imagem, que pode ser confuso para ouvir. Quando você adiciona um alt texto leitores de tela em branco pular a imagem sem ler nada.

Dreamweaver MX permite ao autor criar alt texto com o Propriedades caixa vazia.

Infelizmente, muitos outros editores de HTML não permitem que você crie atributos alt vazio através do GUI. Você, então, precisa editar o código-fonte HTML diretamente. Para fazer isso, localize a imagem no código e adicionar alt="" para a tag img .

Imagens transparentes e posicionamento

Desenvolvedores freqüentemente usam imagens transparentes e posicionamento para criar um espaço entre os itens em uma página. Embora os usuários avistados não ver as imagens transparentes, podem ser visíveis para as pessoas que utilizam navegadores em modo texto e leitores de tela. Você deve adicionar um atributo alt="" vazio todas as imagens transparentes e posicionamento.

Imagens redundantes

Às vezes, os desenvolvedores web adicionar um alt texto para uma imagem que é exatamente o mesmo que o próximo texto para a imagem como no exemplo abaixo:

Em casos como este, você deve adicionar um alt branco de texto para usuários de leitores de tela não tem que ouvir a mesma informação duas vezes. O leitor de tela JAWS diria "gráfico, os estudantes internacionais, gráfico, os estudantes internacionais" ao ler esta seção, que pode ser confuso ou pelo menos ser irritante.

Imagens do mapa

Do lado do cliente mapa de imagem

Todas as ferramentas de desenvolvimento web para a criação do lado do cliente mapa de imagem no lado do cliente ao invés do lado do servidor. Como o nome sugere, os mapas de imagens do servidor requerem scripts no servidor enquanto do lado do cliente são tratados apenas no navegador do cliente. Menos que você tenha escolhido deliberadamente para criar um mapa de imagem lado do servidor, você provavelmente nunca vai precisar criar uma. O mapa de imagem do lado do cliente pode ser acessada, quando não conseguem lado do servidor.

Os mapas de imagem client-side exigem alt texto para tanto a imagem e suas zonas. Deixe o exemplo a seguir (Nota: Nenhum dos links neste mapa de imagem não aponta algum lugar):

Há apenas uma foto acima, mas há cinco zonas. Cada uma dessas áreas leva a um local diferente no site, é necessário para transmitir as informações de navegação para cada um desses links. O alt texto destas áreas deve ser exatamente o mesmo que o texto da imagem. , Services , Contact us et Index . O alt texto para as zonas é HOME, Produtos, Serviços, Contato e índice. Agora temos a alt áreas de texto, mas que sobre a própria imagem? Fora das áreas, esta imagem não transmitir informações. O alt texto é mais apropriado para a imagem alt texto em branco. Aqui está o código para a imagem e as suas zonas:

<img src= »imagemap.jpg "alt= »" width= »199" height= »303" border= »0" usemap= »#Map »> <MAP name= »Map »>
<area shape= »rect "coords= »7,9,191,54" href= »#maps" alt= »HOME ">
alt = "produtos">
<area shape= »rect "coords= »7,127,190,172" href= »#maps" alt= »Services ">
<area shape= »rect "coords= »6,186,190,229" href= »#maps" alt= »Contact nos ">
<area shape= »rect "coords= »7,245,189,289" href= »#maps" alt= »Index ">
<Mapa />

As imagens utilizadas como mapas de imagem não terá uma alt texto em branco. O autor deve decidir sobre a melhor alt texto.

Importante

Um aspecto a ter em mente ao criar do lado do cliente mapa de imagem é que os leitores de tela ler sobre HTML literal. Ferramentas como o Dreamweaver muitas vezes não marcar a area ao lado da tag img . As tags area que contém o alt áreas de texto, às vezes aparecem em posições diferentes no código abaixo para onde a área é exibido no navegador. Neste caso, os leitores de tela lerá o alt texto completamente fora de contexto. Isto pode ser muito confuso para os usuários de leitores de tela. Se você usar o Dreamweaver ou outras ferramentas WYSIWYG, não se esqueça de olhar o código HTML. Se necessário, cortar e colar as etiquetas area logo após a tag img .

Do lado do servidor mapa de imagem

Como não há maneira de fazer as imagens disponíveis do lado do servidor de mapas, o mais simples é não usá-los. No entanto, algumas pessoas temem que o mapa de imagem do lado do cliente não pode criar formas geométricas, e então eles usam imagens de mapa do lado do servidor. A verdade é que as imagens do lado do cliente mapa pode assumir qualquer forma, desde que o desenvolvedor tem a paciência para criar todas as áreas de contato. Um exemplo de cliente mapa de imagem, com invulgar áreas geométricas, apenas para mostrar que é viável (Nota: Nenhum dos links levam a lugar nenhum).

Na verdade, não há razão para criar imagens de mapa no lado do servidor.

As imagens do fundo

Se sua imagem de fundo de texto transmitir informações importantes ou indicação visual, você deve alterar o código HTML para que a imagem está no código com um alt texto adequado.