Técnicas de Substituição de Imagens e Padrões de Repetição para Imagens

Técnicas de substituição de imagens ou “Image Replacement”, técnica usada basicamente para substituir(ocultar) um texto por uma imagem com o mesmo texto, através da propriedade background do css.

Requisitos: a substituição deve resolver o problema de leitura de tela, e deve abordar as "imagens fora, css em" problema. Espera-se também que uma solução será encontrada, que reduz a necessidade de <span> elementos vazios. A técnica de sucesso deve funcionar em navegadores de volta para 5.x, mas a partir do momento em que escrevo nenhum deles parece falhar para matrizes de suporte do navegador será poupado

Clássico FIR

Usando de Doug Bowman tutorial originais , que cercam o texto com o vazio espaço s para escondê-lo com display: none; Assuntos: a maioria dos leitores de tela não vai pegar o texto quando ele não é renderizado na tela, nada aparece em "imagens fora, css em "cenários, <span> semanticamente sem sentido s necessários.

código:

<h3 id="header">

<span>Revised Image Replacement</span>

</h3>





/* css */

#header {

width: 329px;

height: 25px;

background-image: url(sample-opaque.gif);

}

#header span {

display: none;

}

Único pixel substituição <img>

Radu Darvas propostas adicionando uma imagem de um pixel, transparente GIF para o cabeçalho para restaurar alt texto. Assuntos: um elemento extra sem sentido é adicionado à página.

código:

<h3 id="header">

<img src="shim.gif" alt="Revised Image Replacement" />

<span>Revised Image Replacement</span>

</h3>





/* css */

#header {

width: 329px;

height: 25px;

background-image: url(sample-opaque.gif);

}

#header span {

display: none;

}

Método Radu

Radu também concebeu um método que envolve o posicionamento margem para ocultar o texto.Semelhante, em teoria, o método phark abaixo, o método de Radu trabalha em IE5. Assuntos: não resolve css on / off imagens problema.
Revisada a substituição de imagem

código:

<h3 id="header">

Revised Image Replacement

</h3>





/* css */

#header {

background: url(sample-opaque.gif) no-repeat top right;

width: 2329px;

height: 25px;

margin: 0 0 0 -2000px;

}

Leahy / Langridge Método

Seamus Leahy e Stuart Langridge descoberto independentemente um método que permite a queda daextensão e, teoricamente (embora isso não seja confirmado) restaura a acessibilidade graças aoverflow: hidden; - Questões: nada aparece em "imagens fora, css sobre" cenários, caixa modelo corte obrigados a trabalhar em IE5.
Revisada a substituição de imagem

código:

<h3 id="header">

Revised Image Replacement

</h3>





/* css */

#header {

padding: 25px 0 0 0;

overflow: hidden;

background-image: url(sample-opaque.gif);

background-repeat: no-repeat;

height: 0px !important;

height /**/:25px;

}

Método phark

Simplificando Leahy / Langridge, Mike Rundle de phark ofereceu uma solução que usa text-indent para ocultar o texto. Isto é confirmado para trabalhar em JAWS, resolvendo o problema de acessibilidade. Assuntos: nada aparece em "imagens fora, css em" cenários, não funciona em IE5.
Revisada a substituição de imagem

código:

<h3 id="header">

Revised Image Replacement

</h3>





/* css */

#header {

text-indent: -100em;

overflow: hidden;

background: url(sample-opaque.gif);

height: 25px;

}

Phark Revisited

Além disso sondagem revelou fraquezas com o anterior, girando em torno de barras de rolagem no Safari, e quebra em IE5. Questões : não resolve imagens off / css diante.
Revisada a substituição de imagem

código:

<h3 id="header">

Revised Image Replacement

</h3>





/* css */

#header {

text-indent: -5000px;

background: url(sample-opaque.gif);

height: 25px;

}

Método Dwyer

De Leon Dwyer vem uma torção no clássico FIR. Funciona em praticamente tudo conhecido na época presente, incluindo leitores de ecrã. Questões : não resolve imagens off / css on, ainda requer extra de espaço .

código:

<h3 id="header">

<span>Revised Image Replacement</span>

</h3>





/* css */

#header {

width: 329px;

height: 25px;

background-image: url(sample-opaque.gif);

}

#header span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

Gilder / Levin Método

Tom Gilder e Levin Alexander propôs uma nova variação que teoricamente corrige os problemas de acessibilidade (verificação necessária, mas é quase certeza que isso funciona em JAWS et al.), e permite que o texto a mostrar-se mesmo que as imagens estão desligados. Assuntos: adicional vazio espaço , imagens transparentes não escondem texto.

(Nota: cabeçalho duplicado para ilustrar o problema da transparência)
Revisada a substituição de imagem

código:



<h3 id="header">

<span></span>Revised Image Replacement

</h3>





/* css */

#header {

width: 329px;

height: 25px;

position: relative;

}

#header span {

background: url(sample-opaque.gif) no-repeat;

position: absolute;

width: 100%;

height: 100%;

} 

Método Lindsay

Russ Weakley escreve que, definindo suas fontes para uma pequena, tamanho 1px e combinando letras e do fundo-cores, você nem precisa se ​​esconder do texto. Assuntos: não resolve imagens off / CSS on, não funciona em nada, mas fundos televisões de cor.

código:

<h3 id="header">

Revised Image Replacement

</h3>





/* css */

#header {

background: url(sample-opaque.gif) no-repeat;

width: 329px;

height: 25px;

font-size: 1px;

color: #xxxxxx;

}

Enhancement Shea

E, finalmente, não importa qual o método que você usa, você acaba perdendo alt dicas de texto em foco que você e seus usuários podem estar acostumados a ver nas imagens. Tecnicamente, você não deve contar com isso de qualquer maneira, já que título é muito mais apropriado para dicas de ferramentas. Assim, adicionando um título para seu cabeçalho, você pode restaurar esses efeitos pequenos pairar ao seu site. (Esta técnica utiliza a técnica Leahy / Langridge como uma base, e só aumenta o título do atributo)
Revisada a substituição de imagem

código:

<h3 id="header" title="Revised Image Replacement">

<span></span>Revised Image Replacement

</h3>



/* css */

#header {

width: 329px;

height: 25px;

position: relative;

}

#header span {

background: url(sample-opaque.gif) no-repeat;

position: absolute;

width: 100%;

height: 100%;

}

Observação

Ser acessível significa estar adaptado e poder atender às necessidades de todo tipo de usuário.Em relação à internet, remete à propriedade de seu poder ser identificado e entendido por todo tipo de leitor – tendo ele ou não algum tipo de deficiência, e possuindo ou não conhecimentos avançados.Um website que, basicamente, possui recursos secundários de mídia que podem ser interpretados por programas de assistência e clareza na organização dos elementos textuais e gráficos, pode ser considerado acessível.

Do ponto de vista do deficiente, conteúdos inacessíveis são um obstáculo que impede sua participação na revolução da informação que a internet tem provocado – é um problema claro de direitos humanos.

A maior parte dos erros de acessibilidade na internet são resultado de simples desconhecimento e despreocupação.

Seguem abaixo algumas falhas que devem ser evitadas para um website ser acessível, observando-se que são consideradas somente as deficiências que influem no manuseio do computador, no caso físicas, visuais, auditivas e cognitivas ou neurológicas.

• Textos representados na forma de imagens;

• Textos, links e elementos gráficos muito pequenos e/ou muito repetitivos, e/ou em excesso;

• Sons, vídeos e imagens sem legendas ou textos alternativos;

• Animações e sons que não podem ser desativados;

• Arquivos que não podem ser assimilados pelos programas de assistência;

• Fontes cujo corpo não varia de tamanho;

• Layout que fique comprometido quando varia o tamanho das fontes;

• Conteúdo organizado fora de seqüência;

• Elementos que não podem ser destacados com a tecla TAB;

• Ações que pedem resposta dentro de um determinado período de tempo;

• Ações que pedem resposta por fala;

Cerca de 20% da população mundial apresenta algum tipo de deficiência.

As vantagens de utilizar mecanismos de acessibilidade é a facilidade de acesso ao conteúdo por usuários com deficiência visual, facilitando a sua navegação em sites. O atributo alt pode servir de texto alternativo não apenas para deficientes mas para saber do que se trata a imagem quando a mesma não pode ser exibida ou ocorreu falha no seu carregamento, além de auxiliar na busca de imagens em sites de pesquisa.

Desvantagens: Com a ideia de acessibilidade em sites, usuários adaptam todas as imagens de seu site com o atributo alt, o que necessariamente não significa que ele esta tornando seu site mais acessível, pois vamos pensar como se fossemos cegos e estivéssemos usando um leitor de tela, a imagem postada tem alguma importância? Ou esta ali apenas para fins decorativos? Pensando nisso podemos ajudar a limpar o nosso código ajudando o leitor de tela a fazer uma leitura mais limpa do conteúdo postado.

Técnica de substituição de imagens:

Técnica de substituição de imagens:

Atributo alt:

O atributo alt funciona como texto alternativo nas imagens do site, assim quando o leitor de tela focar na imagem será lido o texto alternativo desta imagem contendo sua descrição.

Exemplo: Temos a imagem de uma anemoa o nome da imagem é “anemoma1.jpg” ao passar o mouse sobre a imagem o leitor de tela vai ler o nome da imagem “anamona1.jpg”, ou seja, impossível de um deficiente visual interpretar qual a imagem presente no site.

Usando atributo alt:

<img src="naemona1,jpg" alt="anemona"/>

Dessa forma o leitor de tela vai ler o texto alternativo, fazendo com que usuários com deficiência visual possa ouvir a descrição da imagem de forma que no mínimo saiba do que se trata a figura em questão.

O atributo alt também é utilizado para aperfeiçoar o código com relação a mecanismos de busca, ou seja, é utilizado como motores de busca. Quando um usuário digitar em um site de pesquisa “Imagem de anemona”, ou algo com alguma palavra em comum a imagem será facilmente localizada. No exemplo abaixo pesquisei no site de pesquisa Google e achei a imagem do meu site com base no mecanismo de busca.